I am trying to build a dynamic glass histogram using D3.js. The basic requirement is that I get a new data point every few seconds, and I should be able to reinstall (jump over) a complex diagram. This is the code I wrote:
<html> <head> <title>Page Title</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="d3/d3.js"></script> <script src="d3/d3.csv.js"></script> <script src="d3/d3.layout.js"></script> </head> <body> <style type="text/css"> .chart rect { stroke: white; } </style> <script> var t = 1297110663, // start time (seconds since epoch) v = 70, // start value (subscribers) sentidata = d3.range(33).map(next); // starting dataset var w = 20, h = 80; var x = d3.scale.linear() .domain([0, 1]) .range([0, w]); var y = d3.scale.linear() .domain([0, 200]) .rangeRound([0, h]); var z = d3.scale.ordinal() .range(["lightpink", "darkgray"]); //This function creates random test data of format : time, posvalue, negvalue function next() { return { time: ++t, posvalue: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5))), negvalue: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5))) }; } //This function readjusts the data with one new data point and calls redraw function to replot the graph setInterval(function() { sentidata.shift(); sentidata.push(next()); redraw(sentidata); }, 1500); var svg = d3.select("body").append("svg:svg") .attr("class", "chart") .attr("width", w * sentidata.length - 1) .attr("height", h); //Transpose the data into layers by Sentiment var sent = d3.layout.stack()(["posvalue","negvalue"].map(function(sentiment){ return sentidata.map(function(d){ return {x:d.time, y:+d[sentiment]}; }); })); //Add a group for each Sentiment var sentiment = svg.selectAll("g.sentiment") .data(sent) .enter() .append("svg:g") .attr("class","sentiment") .style("fill", function(d,i){return z(i);}) .style("stroke", function(d,i){return d3.rgb(z(i)).darker();}); //Add a rectangle for each time value var rect = sentiment.selectAll("rect") .data(Object) .enter() .append("svg:rect") .attr("x",function(d, i) { return x(i) - .5; }) .attr("y",function(d){return h - y(d.y0)-y(dy);}) .attr("height", function(d){return y(dy);}) .attr("width",w); svg.append("line") .attr("x1", 0) .attr("x2", w * sentidata.length) .attr("y1", h - .5) .attr("y2", h - .5) .style("stroke", "#000"); function redraw(data) { //Transpose the data into layers by Sentiment var sent = d3.layout.stack()(["posvalue","negvalue"].map(function(sentiment){ return data.map(function(d){ return {x:d.time, y:+d[sentiment]}; }); })); //Add a group for each Sentiment var sentiment = svg.selectAll("g.sentiment") .data(sent) .transition() .duration(1000) .attr("class","sentiment") .style("fill", function(d,i){return z(i);}) .style("stroke", function(d,i){return d3.rgb(z(i)).darker();}); var rect = sentiment.selectAll("rect") .data(Object) .transition() .duration(1000) .attr("y",function(d){return h - y(d.y0)-y(dy);}) .attr("height", function(d){return y(dy);}); } </script> </body> </html>
The initial complex chart gets a line chart. But when I call the redraw method, it gives me the "object of the object" does not have the error "data" of the method. This error occurs when I try to initialize the rect variable
var rect = sentiment.selectAll("rect") .data(Object)
Not sure what I'm doing wrong. I'm looking for something similar
Any suggestions would be really appreciated!