Commit 25942971 authored by Kjetil Thuen's avatar Kjetil Thuen
Browse files

Animated random barcharts in place

parent 892d8451
......@@ -150,7 +150,8 @@ module.exports = function(grunt) {
'www/js/timebars.js': ['src/app/**/*.coffee'],
},
options: {
transform: ['coffeeify']
transform: ['coffeeify'],
debug: true
}
}
}
......
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 = ->
500
chartHeight = ->
280
numBars = ->
20
barWidth = ->
chartWidth() / numBars()
x = d3.scale.linear().domain([ 0, 1 ]).range([ 0, barWidth() ])
y = d3.scale.linear().domain([ 0, 100 ]).rangeRound([ 0, chartHeight() ])
redraw = ->
rect = chart.selectAll("rect")
.data(data, (d) -> d.time)
rect.enter()
.insert("rect", "line")
.attr("x", (d, i) -> x i + 1 - .5)
.attr("y", (d) -> chartHeight() - y d.value - .5)
.attr("width", barWidth())
.attr("height", (d) -> y d.value)
.transition().duration(1000).attr "x", (d, i) ->
x(i) - .5
rect.transition()
.duration(1000)
.attr "x", (d, i) ->
x(i) - .5
rect.exit()
.transition()
.duration(1000)
.attr("x", (d, i) ->
x(i - 1) - .5)
.remove()
setupChart = (containerId) ->
data = d3.range(33).map(next)
setInterval (->
data.shift()
data.push next()
redraw()
), 1500
chart = d3.select(containerId)
.append("svg")
.attr("class", "chart")
.attr("width", barWidth() * data.length - 1)
.attr("height", chartHeight())
chart.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr "x", (d, i) -> x(i) - .5
.attr "y", (d) -> chartHeight() - y d.value - .5
.attr "width", barWidth()
.attr "height", (d) -> y d.value
chart.append("line")
.attr("x1", 0)
.attr("x2", barWidth() * data.length)
.attr("y1", chartHeight() - .5)
.attr("y2", chartHeight() - .5)
.style "stroke", "#000"
window.initTimeBars = (containerId) ->
setupChart(containerId)
.timebars {
color: black;
.chart rect {
fill: teal;
}
.chart rect.left {
fill: red;
}
<!DOCTYPE html>
<html>
<head>
<title>NSD Touch</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/timebars.css" rel="stylesheet">
<script src="js/timebars.js"></script>
</head>
<body>
<nav id="header" class="navbar navbar-default navbar-fixed-top" role="navigation"></nav>
<section id="content">
<div id="chart"></div>
</section>
</body>
<head>
<title>Nesstar backed animated barcharts</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/timebars.css" rel="stylesheet">
<script src="js/timebars.js"></script>
</head>
<body>
<section id="content"> </section>
<script>
window.initTimeBars("#content");
</script>
</body>
</html>
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