Commit fc7d1f62 authored by Kjetil Thuen's avatar Kjetil Thuen

Two dimensional, animated chart implemented

parent 1e17771e
d3 = require 'd3-browserify'
lodash = require 'lodash'
chart = null
data = []
t = 1297110663
v = 0
next = ->
time: ++t
value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5)))
chartWidth = ->
900
chartHeight = ->
500
numBars = ->
100
speed = ->
500
barWidth = ->
chartWidth = -> 900
chartHeight = -> 500
numBars = -> 100
speed = -> 100
next = (prev) ->
prv = (if prev?rvalue then prev.rvalue else 25)
plv = (if prev?lvalue then prev.lvalue else 25)
{
rvalue: Math.max(1, Math.min(100, prv + 10 * (Math.random() - .5)))
lvalue: Math.max(1, Math.min(100, plv + 10 * (Math.random() - .5)))
}
barThickness = ->
chartHeight() / numBars()
x = d3.scale.linear()
.domain([ 9, 91])
.range([ 0, chartWidth() / 2 ])
.domain [ 0, 100]
.range [ 0, chartWidth() / 2 ]
y = d3.scale.linear()
.domain([ 0, numBars()])
.rangeRound([ 0, chartHeight() ])
redraw = ->
rect = chart.selectAll("rect")
.data(data, (d) -> d.time)
rect.enter()
.insert("rect", "line")
.domain [ 0, numBars()]
.rangeRound [ 0, chartHeight() ]
addBar = (newBar) ->
console.log "Adding a bar"
barGroup = newBar.append "g"
.attr "class", "valuepoint"
.attr "transform", (d, i) ->
"translate(0, " + (y(i) + .5) + ")"
barGroup.append "rect"
.attr "class", "right"
.attr "x", chartWidth() / 2
.attr "y", (d, i) -> y(i) + .5
.attr("width", (d) -> x(d.value))
.attr("height", barWidth())
.transition()
.ease("linear")
.duration(speed()).attr "x", (d, i) ->
x(i) - .5
rect.transition()
.ease("linear")
.duration(speed())
.attr "y", (d, i) ->
x(i) - .5
rect.exit()
.attr "width", (d) -> x d.rvalue
.attr "height", barThickness()
barGroup.append "rect"
.attr "class", "left"
.attr "x", (d) -> (chartWidth() / 2) - x d.lvalue
.attr "width", (d) -> x d.lvalue
.attr "height", barThickness()
updateChart = (containerId, data) ->
chart = d3.select containerId + " svg.chart"
valuepoints = chart.selectAll "g.valuepoint"
.data data, (d) -> d.lvalue + "," + d.rvalue
valuepoints.transition()
.ease "linear"
.duration speed()
.attr "transform", (d, i) ->
"translate(0, " + (y(i) + .5) + ")"
newBar = valuepoints.enter()
addBar newBar
valuepoints.exit()
.transition()
.duration(speed() / 2)
.style("opacity", 0)
.duration speed() / 2
.attr "height", 0
.remove()
setupChart = (containerId) ->
data = d3.range(numBars()).map(next)
setInterval (->
data.shift()
data.push next()
redraw()
), speed()
chart = d3.select(containerId)
.append("svg")
.attr("class", "chart")
.attr("width", chartWidth())
.attr("height", chartHeight())
chart.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr "x", chartWidth() / 2
.attr "y", (d, i) -> y(i) + .5
.attr("width", (d) -> x(d.value))
.attr("height", barWidth())
setupChart = (containerId, data) ->
chart = d3.select containerId
.append "svg"
.attr "class", "chart"
.attr "width", chartWidth()
.attr "height", chartHeight()
updateData = (data) ->
lodash.rest(lodash.clone(data).concat(next(lodash.last(data))))
window.initTimeBars = (containerId) ->
setupChart(containerId)
window._ = lodash
window.data = d3.range numBars()
.map ->
next lodash.last(window.data)
setupChart(containerId, window.data)
setInterval ->
data = updateData window.data
updateChart(containerId, data)
window.data = data
, speed()
.chart rect {
fill: teal;
.chart rect.right {
fill: maroon;
}
.chart rect.left {
fill: red;
fill: teal;
}
......@@ -9,6 +9,13 @@
<script src="js/timebars.js"></script>
</head>
<body>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<section id="content"> </section>
<script>
window.initTimeBars("#content");
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment