CODEWITHSUNDEEP
d3.js
Newbie
Newbie

Reputation: 177

"Live" graph d3.js with simulated data

I have created a simple line graph with data from a mySQL database using PHP to return the data in JSON format.

https://gist.github.com/5fc4cd5f41a6ddf2df23

I would like to simulate "live" updating something similar to this example, but less complicated: http://bl.ocks.org/2657838

I've been searching for examples on how to achieve this simply as new to D3 - to no avail.

I've looked at Mike Bostock's http://bost.ocks.org/mike/path/ path transitions, but not sure how to implement this using json data.

Can anyone help with either an example or some direction on how I could accomplish this?

Upvotes: 0

Views: 2881

Answers (1)

musically_ut
musically_ut

Reputation: 34288

Doing that kind of line transformations is tricky in SVG because moving large number of points just a little and rerendering the complete line can hurt performance.

For the case when interactivity with each data point is not paramount and the time series can grow to contain arbitrary number of points, consider using Cubism. It is a library based on d3 but meant specially for visualizing time-series data efficiently. To prevent rerendings of SVG, it draws the points on a canvas, allowing for cheap pixel by pixel transitions as new data arrives.

Upvotes: 3

Related Questions