These are just two examples:
- You can make the client pull the new data from the server at regular intervals (i.e. using some AJAX calls).
- If the browser supports it, you can open a websocket towards the server, so that the server can directly push new data as soon as they are available.
Choosing one or the other depends on many variables: how many connections do you expect, what is the update rate of the data, which browsers you plan to support, etc...
In any case, the d3.js library is not involved in how you get the data, but instead in how you display them.
This plugin can be interesting: Cubism.
Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources. Cubism is available under the Apache License on GitHub.
An other interesting project can be Rickshaw which also leverages D3.
See this example: Random Data in the Future
This tutorial can help you a lot to create a real time line graph: http://bost.ocks.org/mike/path/
I would like to add a few more comments:
When you do a real time graph, you often get the data asynchroneously, thus you cannot know the exact time between each "point".
- For the line, you are lucky because the
linedescribed in the tutorial doesn't care about that.
- For the duration to have a smooth transition effect, it is trickier. The key is to set the duration to be the time between the last frame and the previous one. This is also a good approximation for the next one as the network has almost always the same throughput.
On a conventional line graph, it is easy to determine the y domain. However with live data, the y value can often go off limit. This is why I would recommend calling a function to set the y domain at each iteration. You can also create a bounding box.
As the data is always added you might want to be very attentive to the fact that you HAVE to delete the values you don't use anymore, otherwise your data will keep getting heavier and the whole animation might crash.
- producing a "live" graph with D3
- Real time line graph with nvd3.js
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- Graph with auto layout using d3 (a tree with multiple parent nodes)
- D3: finding graph y-coordinate with mouseover
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- D3 updating graph with new elements create edges with the wrong nodes
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- D3: skip null values in line graph with several lines
- Live updating Rickshaw graph
- Adding circles to multiline graph with d3.js
- D3 line graph with arbitrarily many lines (and a specific data format)
- D3 force layout graph with nodes positioned in a grid
- Relationship Graph with D3
- D3 Scaling issue of Graph with appropriate scaling of Scales(Y-axis,X-axis)
- How to check d3 js force graph for nodes with no links and remove them?
- Animate lines in a line graph with D3.js
- Making D3 like Force-Directed Graph with PNGs
- D3 tree graph with links
- How to Integrate a data-driven d3JS graph with Shiny?
- How can I programmatically draw a nonlinear writing system with automatic graph relaxation (e.g. in d3.js)?
- Starting Transitions and Animations With Area Graph in D3.JS
- D3 4.0 Graph with directed edges and labels
- d3 graph with limited zoom
- d3.js:vertical moving line's intersection point with line graph
- Simple line graph with dates in D3
- how to generate a network graph with edge weight using D3.js force layout
- d3js graph retaining old axis data on refreshing with new data
- D3 graph with area fill not working
More Query from same tag
- Trying to make d3js transitions shrink or grow to the next value
- Generating custom elements in d3
- dagre-d3 IE workaround for SVG foreignObject element?
- How do I get an object from d3.data()?
- How do I mismatch D3's closing tag?
- How to test d3.js with mocha?
- Un-nest output of d3.group or d3.rollup?
- Synchronize brushes across different objects
- Issues with 3d-force-graph node updates
- SVG filter using d3 js not working in IE
- How to draw a d3.js line chart using angularjs directives
- How do you reset/clear a d3-brush?
- Retrieve underlying values of a binned vega (lite) histogram?
- Minimap for D3JS
- d3.js - How can I expand force directed graph horizontally?
- How to update d3.js svg with nested data
- How do I always keep my d3 line chart rollover text always visible?
- multichart line d3.js transform json
- Flask and D3.js error - Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
- dc.js Ordering X-Axis by Month
- Change node color depending on status
- What Transformation values to calculate for scale and translate if you want to zoom
- D3 Word Cloud Error upon Refresh
- On change event on d3.js library duplicate charts
- d3js force layout dynamically adding image or circle for each node
- NVD3 creating arcs with start and end angle
- Select all the paths and parent nodes of a child node in tree layout
- How to add D3 tooltips
- Changing the color of Bar based on a thresh hold value in D3
- D3.js Transitions