add line chart

tyraeltong · Nov 29, 2011 · 87b4231 · 87b4231
1 parent 85e32ec
commit 87b4231
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 9 deletions.
diff --git a/examples/calendar.html b/examples/calendar.html
@@ -28,7 +28,7 @@
         var CalDataPoint = Backbone.Model.extend({
           initialize: function(data) {
             this.set({
-              id: data.date,
+//              id: data.date,
               date: data.date,
               count: data.count
             });
@@ -40,14 +40,14 @@
           url : "calendar.json",
           plottype: "calendar",
           // TODO: add a start date/end date
-    			success: function( result ) {
-  					var models = [];
-  					_.each( result, function( row ) {
-							models.push( row.value );
-  					});
-  					if ( models.length == 0 ) { models = null }
-  					return models;
-  				}
+    			success: function( result, foo ) {
+            var models = [];
+            _.each( result, function( row ) {
+             models.push( new CalDataPoint(row.value) );
+            });
+            if ( models.length == 0 ) { models = null }
+            return models;
+          }
         });
 
         var CalendarVis = Backbone.d3.PlotView.extend({

diff --git a/examples/line.html b/examples/line.html
@@ -0,0 +1,154 @@
+<html>
+	<head>
+	  <title>Backbone.d3 - Line charts</title>
+
+	  <link rel="stylesheet" href="style.css" type="text/css" />
+	  <style>
+	  #line{
+	    height:200px;
+	    width: 200;
+	  }
+	  path{
+	    stroke: steelblue;
+	    stroke-width: 2px;
+	    fill: none;
+	  }
+	  circle{
+	    fill:steelblue;
+	  }
+	  </style>
+	  <script src="loader.js" type="text/javascript"></script>
+    <script type="text/javascript">
+    $(function (){
+      var DataPoint = Backbone.Model.extend({
+        initialize: function(point) {
+          this.set({
+            x: point.x,
+            y: point.y
+          });
+        }
+      });
+
+      var DataSeries = Backbone.d3.PlotCollection.extend({
+        model : DataPoint,
+        url : "bardata.json",
+        fetch: function(){
+          // No op
+          console.log('fetching is a no op in this example');
+        }
+      });
+
+      var series1 = new DataSeries();
+
+      var ScatterPlot = Backbone.d3.PlotView.extend({
+        initialize: function(collection, settings) {
+  		    PlotView.prototype.initialize.apply(this, [collection, settings]);
+
+    		  this.w = settings.w || 200;
+          this.h = settings.h || 200;
+          this.size = 20;
+        },
+        plot: function(options){
+          var w = this.w;
+  		    var h = this.h;
+  		    var data = this.plotdata();
+          var interpolation = this.settings.interpolation || "linear";
+  		    var x = d3.scale.linear()
+  		      .domain([0, this.size])
+  		      .range([10, w -10]);
+
+  		    var y = d3.scale.linear()
+  		      .domain([-1, 1])
+  		      .rangeRound([10, h - 10]);
+
+  		    // Draw axes & label
+
+  		    // line
+  		    var chart = null;
+  		    var line = d3.svg.line()
+            .x(function(d,i) { return x(d.x) })
+            .y(function(d,i) { return y(d.y) })
+            .interpolate(interpolation);
+
+          if (options.newPlot) {
+            chart = this.div.append("svg:svg");
+            chart.selectAll("circle")
+              .data(data).enter().append("svg:circle")
+              .attr("cx", function(d, i) { return x(d.x) })
+              .attr("cy", function(d, i) { return y(d.y) })
+              .attr("id", function(d) { return d.x + '-' + d.y })
+              .attr("r", 0)
+            .transition()
+        		  .duration(this.duration)
+        		    .attr("r", this.settings.pointsize || 3);
+
+            chart.append("svg:path").attr("d", line(_.sortBy(data, function (d) { return d.x;})));
+
+          } else {
+            chart = this.div.selectAll("svg");
+            var circles = chart.selectAll("circle").data(data);
+
+            circles.enter().insert("svg:circle", "circle")
+                .attr("cx", function(d, i) { return x(d.x) })
+                .attr("cy", function(d, i) { return y(d.y) })
+                .attr("id", function(d) { return d.x + '-' + d.y })
+                .attr("r", 0)
+              .transition()
+      		      .duration(this.duration)
+      		        .attr("r", this.settings.pointsize || 3);
+
+            // TODO: transition to grown the line between points
+            chart.selectAll("path")
+              // sort is needed to keep the line drawing left to right, other
+              // wise goes a bit etcher sketch
+              .data([_.sortBy(data, function (d) { return d.x;})])
+              .attr("d", line);
+
+          }
+  		    // TODO: label points
+  		    // TODO: different shapes
+  		    // TODO: support multiple datasets in one plot
+
+        },
+        plotdata: function(){
+          var data = [];
+          this.collection.forEach(function(datapoint) {
+              data.push({x:datapoint.get('x'), y:datapoint.get('y')});
+            }
+          )
+          // Needed for scolling plots
+          if (data.length > this.size) {
+            return _.last(data, this.size);
+          } else {
+            return data;
+          }
+        }
+      })
+
+      var plot1 = new ScatterPlot(series1, {div:'#line'});
+      plot1.collection.reset([new DataPoint({x:0, y:0})]);
+
+       _.each(_.range(1,20), function(i, ii, l) {
+          setTimeout(function() {
+            plot1.collection.add(new DataPoint({y:Math.sin(i/10 * Math.PI), x: i}));
+          }, 1 + Math.random() * 10000);
+        })
+    });
+    </script>
+  </head>
+  <body>
+    <div id="container">
+      <h1>Line charts</h1>
+      <p>Line charts show trends and try to interpolate between data points.
+      This gives an indication of how the system behaves between data without
+      guarantees that it is correct. Data is ordered, but not necessarily
+      uniformly spaced. Adding data may result in the interpolated line being
+      redrawn (e.g. by adding a point between n and n+1).</p>
+      <hr/>
+      <div id="line"></div>
+	    <div class="footer">
+	      <p><a href="index.html">Index</a></p>
+	    </div>
+    </div>
+  </body>
+</html>