Permalink
Browse files

debug session with danny, not there yet :( but added realtime scrolli…

…ng example
  • Loading branch information...
1 parent 5645cd7 commit d5f6f0e1eec5c74a0976e18265cd69d31c070517 @boorad committed Jan 10, 2012
Showing with 224 additions and 16 deletions.
  1. +33 −0 examples/realtime/css/chart.css
  2. +17 −0 examples/realtime/index.haml
  3. +17 −0 examples/realtime/index.html
  4. +130 −0 examples/realtime/js/chart.js
  5. +27 −16 js/d3.tsline.js
@@ -0,0 +1,33 @@
+#container {
+ font: 10px sans-serif;
+ margin: 0px auto 22px;
+ clear: both;
+ width: 960px;
+}
+
+#chart .view svg {
+ border-top: 1px solid black;
+ border-right: 1px solid black;
+ border-bottom: 1px solid black;
+}
+
+path.line {
+ stroke-width: 3px;
+ fill: none;
+}
+
+.line.male {
+ stroke: steelblue;
+}
+
+.line.female {
+ stroke: pink;
+}
+
+.line.summary {
+ stroke-width: 1px;
+}
+
+div.summary {
+ display: none;
+}
@@ -0,0 +1,17 @@
+!!! 5
+%html
+ %head
+ %title Realtime Example
+ %link( rel="stylesheet" type="text/css" href="../../css/d3.tsline.css" )
+ %link( rel="stylesheet" type="text/css" href="css/chart.css" )
+
+ %script(type="text/javascript" src="../../js/d3.js")
+ %script(type="text/javascript" src="../../js/d3.time.js")
+ %script(type="text/javascript" src="../../js/d3.tsline.js")
+
+
+ %body
+ #container
+ #chart
+
+ %script(type="text/javascript" src="js/chart.js")
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Realtime Example</title>
+ <link href='../../css/d3.tsline.css' rel='stylesheet' type='text/css'>
+ <link href='css/chart.css' rel='stylesheet' type='text/css'>
+ <script src='../../js/d3.js' type='text/javascript'></script>
+ <script src='../../js/d3.time.js' type='text/javascript'></script>
+ <script src='../../js/d3.tsline.js' type='text/javascript'></script>
+ </head>
+ <body>
+ <div id='container'>
+ <div id='chart'></div>
+ </div>
+ <script src='js/chart.js' type='text/javascript'></script>
+ </body>
+</html>
@@ -0,0 +1,130 @@
+// set up instance of d3-tsline chart
+function chart_init(id) {
+ var mychart = new d3_tsline(id);
+
+/*
+ // override format_data function
+ mychart.format_data = function(json) {
+ return json;
+ };
+*/
+ mychart.parse_date = function(dt) {
+ // we use seconds, Date uses millis
+ return new Date(dt*1000);
+ };
+
+ mychart.view_span = 10; // show 20 secs by default
+ return mychart;
+}
+
+function next_json(last_json) {
+ // temporarily override api values for dev
+ var ret = {};
+ var last_pts = [ [0, 50.0], [0, 50.0] ]
+ if( last_json && last_json.data ) {
+ last_pts = process_json(last_json);
+ }
+ var i = last_pts[0][0] + 1;
+ var pt = {
+ _id: i,
+ segments: {
+ male: {
+ average: ((Math.sin(last_pts[0][1] + i) + 1) / 2.0) * 100,
+ count: i + 134981,
+ sum: (i + 134981)
+ },
+ female: {
+ average: ((Math.cos(last_pts[1][1] + i) + 1) / 2.0) * 100,
+ count: i + 146222,
+ sum: (i + 146222)
+ }
+ }
+ };
+ ret.data = [pt];
+ ret.surveyResponses = surveyResponses();
+ return ret;
+}
+
+function surveyResponses() {
+ var ret = {
+ "gender" : {
+ "answers" : {
+ "male" : {
+ "body" : "Male",
+ "count" : 1,
+ "id" : "male"
+ },
+ "female" : {
+ "body" : "Female",
+ "count" : 0,
+ "id" : "female"
+ }
+ },
+ "body" : "What is your gender?"
+ }
+ };
+ return ret;
+}
+
+// turn json into data series array
+// TODO: only works on first point, doesn't factor in multiple pts in json.data
+function process_json(json) {
+ var data = json.data[0];
+ return [
+ [data._id, data.segments.male.average],
+ [data._id, data.segments.female.average]
+ ];
+}
+
+//
+// global scope stuffs
+//
+
+// initial values
+var last_json = null; // holds last json response that we graphed
+var current_json = null; // holds current json response before graphing
+var start = (new Date().getTime())
+
+// chart building
+var chart = chart_init("#chart");
+chart.series = [
+ {
+ "name" : "Male",
+ "css" : "male"
+ },
+ {
+ "name" : "Female",
+ "css" : "female"
+ }
+];
+//chart.setSeriesData( [ [], [] ] ); // i.e. start with no data
+chart.fill_left_pts(1, 50.0, 0);
+chart.update(); // TODO: should be render or init or something
+
+if( true ) {
+
+// refresh data loop
+var refresh_data = window.setInterval( function() {
+ var x = (new Date().getTime() - start) / 1000;
+// console.log(x);
+ var y1 = (Math.random() * 100);
+ var y2 = (Math.random() * 100);
+ chart.next_pts = [ [x,y1], [x,y2] ];
+}, 400 );
+
+/*
+// refresh chart loop
+var refresh_chart = window.setInterval( function() {
+ next_pts = process_json(current_json);
+ chart.addSeriesPoints(next_pts, true);
+ last_json = current_json;
+}, 1000 );
+*/
+
+// shut down refresh loops after a few secs (for dev)
+var cmd =
+ "window.clearInterval(refresh_data);";
+ //+ "window.clearInterval(refresh_chart);";
+var cancel_refresh = setTimeout(cmd, 120 * 1000);
+
+}
View
@@ -14,7 +14,7 @@ function d3_tsline(id) {
summary: { x: [0,0], y: [0,0] }
};
- self.width = 960;
+ self.width = 1000;
self.height = 400;
self.summary_height = 50;
self.handle_height = 14;
@@ -26,7 +26,8 @@ function d3_tsline(id) {
self.tension = 0.8;
self.scroll_view = true;
- self.scroll_delay = 1000; // in ms
+ self.scroll_delay = 5000; // in ms
+ self.iters = 0;
// slider dimensions (in px)
self.slider = {
@@ -100,13 +101,15 @@ function d3_tsline(id) {
// add a new point to each series, and redraw if update==true
self.addSeriesPoints = function(points, update) {
- points = self.format_data(points);
- var i=0;
- points.forEach(function(point) {
- point = self.parse_point(point);
- self.update_domain("summary", point);
- self.data[i++].push(point);
- });
+ if( points ) {
+ points = self.format_data(points);
+ var i=0;
+ points.forEach(function(point) {
+ point = self.parse_point(point);
+ self.update_domain("summary", point);
+ self.data[i++].push(point);
+ });
+ }
if( update ) self.update();
};
@@ -116,22 +119,27 @@ function d3_tsline(id) {
};
self.move_scroller = function() {
+ if( self.iters++ > 100 ) return;
var diff = self.get_diff(self.width, self.view_data);
// scroll_diff accounts for x() scale function in draw_view()
// which renders the entire line one point wider to scroll smoothly
- var scroll_diff = self.get_diff(self.width + diff, self.view_data);
+ var scroll_diff = diff;//self.get_diff(self.width + diff, self.view_data);
+ console.log(diff, scroll_diff);
d3.select(self.selector + " .view .scroller")
.attr("transform", "translate(" + 0 + ")")
.transition()
.ease("linear")
.duration(self.scroll_delay)
- .attr("transform", "translate(" + -1 * scroll_diff + ")");
+ .attr("transform", "translate(" + -1 * scroll_diff + ")")
+ .each("end", function() {
+ self.addSeriesPoints(self.next_pts, true);
+ });
};
// calcs for view window and slider
self.update_view_calcs = function() {
- view_end = self.data[0].length - 1 || 0;
+ view_end = self.data[0].length || 0;
view_start = ((view_end - self.view_span) < 0)
? 0 : view_end - self.view_span;
@@ -146,14 +154,15 @@ function d3_tsline(id) {
// dataset gets larger
self.set_domain("view", data);
+/*
self.slider.w = Math.round(self.width *
(self.view_span / self.data[0].length));
self.slider.x = self.slider.max_x = self.width - self.slider.w;
if( self.slider.x < 0 ) {
self.slider.w = self.width;
self.slider.x = self.slider.max_x = 0;
}
-
+*/
};
self.get_diff = function(w, data) {
@@ -164,7 +173,7 @@ function d3_tsline(id) {
if( !self.is_valid( self.series ) ) return;
self.update_view_calcs();
self.draw_view();
- self.draw_summary();
+ //self.draw_summary();
};
self.is_valid = function(arr) {
@@ -237,7 +246,8 @@ function d3_tsline(id) {
}
self.domain[type] = {
x: [xMin, xMax],
- y: [yMin, yMax]
+// y: [yMin, yMax]
+ y: [0-2, 102]
};
};
@@ -264,8 +274,9 @@ function d3_tsline(id) {
// set up scale and axis functions
var diff = self.get_diff(w, values);
+
var x = d3.time.scale()
- .range([1, w + diff])
+ .range([0, w])
.domain(self.domain.view.x);
var y = d3.scale.linear()
.range([h, 0])

0 comments on commit d5f6f0e

Please sign in to comment.