Loading Live Sensor Data To D3.js chart

JavaScript
1

Every time I search for info on this I seem to always find examples of D3.js reading minimal data from external files. I get that.

I would like to undersand how to feed my D3 chart relatively current data so it can be visualized in near real time. To be clear, my goal is to show multiple sensor data in a simple line chart over time. This would be very similar to a stock chart: y-axis = stock value and x-axis = date.

My questions are these:

  1. Must the data always come from a static file? or
  2. Can the chart be fed ‘live’ data straight from the sensor?

The problem I see with reading a static data file is that it would seem that this file is constantly changing with new data so the file would have to be constantly read to get the latest data. This does not make sense to me. Perhaps D3 has some algorithm to solve this.

All comments are most welcome.
Thanks.

3

For the sake of clarity: I think that what needs to take place is that the chart needs to reflect the latest sensor data so that the chart can continue to evolve over time.

The issue being how is the new data fed to or read by the chart?

Thanks for any comments or suggestions on this.

4

All files are static - at the moment they are loaded.
Not all of your data has to come from a file, though, no. You could feed your data from a javascript function, or a file, or anything that can be converted into a properly shaped array of values.

The data set is still static in that if you never refresh it again, the data is what it was; but it’s dynamic in the sense that it has changed since you last checked the page/file/function.

Your chart doesnt care about whether the source it gets its data from changes between checks of the page - it simply loads whatever is there as its data source, at the given time. It is this style from which the enter, exit, and update functions in D3 operate.

There’s plenty of examples of this, but here’s one I like:
General Update Pattern / D3 / Observable (observablehq.com)

Note that the data for this is being fed from a javascript function. (the “randomLetters” function in the appendix)

5

Thanks for the info you provided.

I have come across another charting app, but it seems that using this particular app may require changing my Arduino sketch and I’m not sure I am willing to do this.

I really hope I can get D3 to publish my sensor data in real time. I am aware of D3’s enter/exit/update functions, but the tutorials I have seen use them in reference to static data.

I appreciate your help.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.