OK so I have been dreading doing some graphing work for too long now and am curious if anyone can help point me in the right direction.
How would you go about creating a live stock chart graph with D3.js?
All of the tutorials I have read assumed that the graph data was set in stone. Take this data, produce this graph.
I have created a few mathematical indicators for equity price predictions based on live data feeds, and I want to visualize them in real time in a graph.
Do you just keep rebuilding the graph every time a new datapoint comes in?
Mike Bostock's got some examples of charts that update without redrawing the whole thing (for example [1]) - you update the bound data and the bars/points/whatever to be removed/added fall out "magically". The term you're looking for is the "data join" [2].
I recently had to make several charts (and types of charts). I found that to make a chart in d3 I essentially needed to know the nuances of how SVGs are created. I was also frustrated by the data format restrictions. Like my data was in X format but X format was unusable by d3; I needed to transform it into Y format. But now Y format was not usable for me in the rest of my app.
My conclusion was to just draw SVGs on my own and skip d3. Well I used it for some of the nicer function like determining nice axis label spacing and formatting strings. But, I basiclaly cut d3 out of the loop and things are better off.
If you know what you want your graphics to look like and they are relatively basic (maybe d3 is better a complicated charts, I didn't get that deep) then skip d3 and just create the SVGs themselves.
Most d3 examples will have a "draw" function that you call every time the data is updated. You basically bind your dataset to SVG elements, then D3.js will diff the new data with that bound data and decide what to update. A good intro to the concept:
If you are comfortable learning from examples, http://bl.ocks.org is excellent. It includes a wide variety of charts, many created to demonstrate a particular concept in D3 or a specific technique. For example, this [1] might be helpful for you, since it explains the enter/append/exit workflow along with demonstrating how to update a visualization when the data changes.
Not to speak ill of d3 but it is worth checking out some of the other libraries that wrap around d3 if you just need a plain old line chart.
d3's power is that it is very customizable and it is surprisingly easy to just think of a chart format you need and implement it (and it is very easy to update as new data comes in, you can reload individual chart elements which is very cheap).
But...that comes at the cost of all the extra code needed to build the chart. If you are just building a plain-old chart, I would look elsewhere.
I have a data-heavy application. There is some stuff that is really domain knowledge and building those charts with d3 is worth it. But for the basic line charts or whatever, I just use plotly. Yes, that means a heavier page but it is worth it to move the complexity of multiple chart types out of my code.
How would you go about creating a live stock chart graph with D3.js?
All of the tutorials I have read assumed that the graph data was set in stone. Take this data, produce this graph.
I have created a few mathematical indicators for equity price predictions based on live data feeds, and I want to visualize them in real time in a graph.
Do you just keep rebuilding the graph every time a new datapoint comes in?