Skip to content

Commit

Permalink
debug session with danny, not there yet :( but added realtime scrolli…
Browse files Browse the repository at this point in the history 
…ng example
  • Loading branch information
@boorad
boorad committed Jan 10, 2012
1 parent 5645cd7 commit d5f6f0e
Show file tree
Hide file tree
Showing 5 changed files with 224 additions and 16 deletions.
33 changes: 33 additions & 0 deletions examples/realtime/css/chart.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
17 changes: 17 additions & 0 deletions examples/realtime/index.haml
View file
Original file line number Diff line number Diff line change
@@ -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")
17 changes: 17 additions & 0 deletions examples/realtime/index.html
View file
Original file line number Diff line number Diff line change
@@ -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>
130 changes: 130 additions & 0 deletions examples/realtime/js/chart.js
View file
Original file line number Diff line number Diff line change
@@ -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);

}
43 changes: 27 additions & 16 deletions js/d3.tsline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 = {
Expand Down Expand Up @@ -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();
};

Expand All @@ -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;

Expand All @@ -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) {
Expand All @@ -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) {
Expand Down Expand Up @@ -237,7 +246,8 @@ function d3_tsline(id) {
}
self.domain[type] = {
x: [xMin, xMax],
y: [yMin, yMax]
// y: [yMin, yMax]
y: [0-2, 102]
};
};

Expand All @@ -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])
Expand Down

0 comments on commit d5f6f0e

Please sign in to comment.