Visualizing continuous stream of data in D3

Question

I want to visualize events on the globe in real time. I have data (lat, longs) coming in continuously and I want to be able to send that data (json of latitude and longitude) to my d3 script and plot (with transition) the latitude, longitude on the map. I know how to draw a map using d3. Only problem is I am confused as to how can I make an endpoint in d3/HTML which when hit can update the visual. Also, there can be numerous responses in each second so how wil I be able to handle multiple requests at the same time.

I think architecture of this system is getting too complicated for me. Any suggestion will be really helpful.

Answer 1

It's worthwhile to understand how your data will be accessed, in order to determine what to do. Ideally, you want a single source of truth for your visualization in order to avoid issues while redrawing and make it easier to think about your problem.

If it's an API, you can do ajax polling at regular intervals, or you can try websockets if your browser supports it. Here's another SO discussion for live updates.

As for the actual d3 implementation: because you can already draw the map (and the points hopefully), you can use the reusable charts pattern for your chart function, which updates the data every time you call the function. D3's general update pattern should keep your points in sync with whatever data you're passing in. You could even add transitions to make it fancy!