Database Reference
In-Depth Information
(function($) {
var incr = 1/(2*Math.PI);
var x = 0;
var t = 0;
var i = setInterval(function() {
var y = 100*Math.sin(x);
var $d = $(document);
$d.trigger('data:signed',y);
$d.trigger('data:unsigned',100+y);
x += incr;
},100);
})(jQuery);
Strip Charts with D3.js
A strip chart is a graph that represents time on the x-axis and some metric
on the y-axis. For example, a simple strip chart of the sine wave data might
look like
Figure 8.1
.
Omitting the D3 setup steps from the last chapter, the strip chart first needs
x and y scales and axes for display:
var y =
d3.scale.linear().domain([0,200]).range([height,0]);
var x =
d3.scale.linear().domain([0,size]).range([0,width]);
x.axis = d3.svg.axis().scale(x).orient("bottom");
var axis = g.append("g")
.attr("class","x axis")
.attr("transform","translate(0,"+height+")")
.call(x.axis);
g.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(y).ticks(5).orient("left"));
