# "Streaming" Data Chart in D3
**URL:** https://talk.observablehq.com/t/streaming-data-chart-in-d3/994
**Category:** Help
**Created:** [July 15, 2018, 5:12pm UTC](https://talk.observablehq.com/t/streaming-data-chart-in-d3/994 "2018-07-15T17:12:01Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@backspaces](https://talk.observablehq.com/u/backspaces)
#### Post date: [July 15, 2018, 5:12pm UTC](https://talk.observablehq.com/t/streaming-data-chart-in-d3/994/1 "2018-07-15T17:12:01Z")
TL;DR: I’d like to use _only_ D3 to create a dynamic chart that changes every “tick” of a simulation.
I want it to show all the data in the chart over time, “compressing” the chart, and automatically adjusting the x/y axes for the data to fit correctly.
Details:
Whew, that’s a lot! I haven’t found the right phrase for searching, but I did come up with two examples, one using Vega the other Plot.ly.
This one line change to a @tom "Streaming data into Vega " example:
> **[Streaming data into Vega](https://observablehq.com/d/a4643da821db35db)**
>
> An Observable notebook by Owen Densmore.
And these plot.ly examples:
> **[Streaming](https://plotly.com/javascript/streaming/)**
>
> How to create D3.js-based streaming plots in Plotly.js.
The key is this: using “raw” D3.
I realize avoiding use of a charting library may seem silly, but the reason for this is that my project team would like to use D3 for other purposes and thus learn more D3 details. We’d also like to avoid version conflicts with these libraries that often use older versions of D3. I’m being pushed to be the pioneer! : ) I hope it is a reasonable request.
They look like these:
---
### Author:  [@jrus](https://talk.observablehq.com/u/jrus)
#### Post date: [July 16, 2018, 7:51am UTC](https://talk.observablehq.com/t/streaming-data-chart-in-d3/994/2 "2018-07-16T07:51:40Z")
That sounds like a reasonable enough thing you could build. What is stopping you?
> my project team would like to use D3 for other purposes and thus learn more D3 details
Best way to learn is to dive in and try to build what you want.
---
### Author:  [@backspaces](https://talk.observablehq.com/u/backspaces)
#### Post date: [July 16, 2018, 4:04pm UTC](https://talk.observablehq.com/t/streaming-data-chart-in-d3/994/3 "2018-07-16T16:04:39Z")
Hi, thanks for the response.
> What is stopping you?
Well, being new to D3, just knowing the D3 & SVG “patterns” and “vocabulary”.
For example, I don’t know how to add points to a path to incrementally extend a line chart. Generally you add SVG/DOM elements (circles, rects etc) but a line chart I think is a single path of many lines, a poly-line. It might be easier to start with each point being a SVG rect or circle if they are easier to use.
I’d guess that each step would have to modify several transforms and scales, both for the chart and for the axes. Also would recalculate the scale extents.
Oddly enough, one problem is the right search phrase to use! I thought “stream” and “data” would do the trick but there is a “streamgraph” that isn’t what I want. I tried “time” and “series” and that was a bit closer. Basically knowing the D3/SVG/Charting world well enough to come up with the appropriate search has been elusive!
---
### Author:  [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)
#### Post date: [July 16, 2018, 4:37pm UTC](https://talk.observablehq.com/t/streaming-data-chart-in-d3/994/4 "2018-07-16T16:37:20Z")
start here: [http://d3indepth.com/](http://d3indepth.com/)
---
### Author:  [@backspaces](https://talk.observablehq.com/u/backspaces)
#### Post date: [July 16, 2018, 5:24pm UTC](https://talk.observablehq.com/t/streaming-data-chart-in-d3/994/5 "2018-07-16T17:24:46Z")
Whoa, that is amazing! Thanks for the pointer!
---
### Author:  [@shaunlebron](https://talk.observablehq.com/u/shaunlebron)
#### Post date: [July 17, 2018, 7:16pm UTC](https://talk.observablehq.com/t/streaming-data-chart-in-d3/994/6 "2018-07-17T19:16:08Z")
Observable is the perfect environment to learn D3—no accident there!
You can create a cell that holds the streaming points, and have the plot in another cell that draws them. That takes care of the _streaming_ part due to the reactivity between them. Just think about drawing the whole plot every time instead of incrementally extending the line (it’s fast).
In terms of actually drawing the plot, you mainly want to look at these parts of d3:
- Use [d3-scale](https://github.com/d3/d3-scale) to map your coordinates to the appropriate pixel on your plot. e.g. `scaleX(point.time)` to get the x pixel. `scaleY(point.value)` to get the y pixel.
- Use [d3-array](https://github.com/d3/d3-array)’s `extent` function to figure out the min/max of a given set of points so you can adjust your scale to fit all points in view.
- [d3-axis](https://github.com/d3/d3-axis) will create an SVG axis for you based on the `scaleX` and `scaleY` objects you already created.
- [d3-shape](https://github.com/d3/d3-shape) lets you create a `line` function that takes your points and scale objects, and outputs either a SVG line or draws to a canvas.
- [d3-zoom](https://github.com/d3/d3-zoom) adds a mouse listener to an element to handle panning and zooming of your plot. It hands you a transform object that you use to manipulate your scale objects. e.g. `transform.rescaleX(scaleX)`
---
### Author:  [@backspaces](https://talk.observablehq.com/u/backspaces)
#### Post date: [July 17, 2018, 9:01pm UTC](https://talk.observablehq.com/t/streaming-data-chart-in-d3/994/7 "2018-07-17T21:01:30Z")
Sweet, thanks!
I did start with the Vega demo Tom made, along with the Vega-Lite tutorial on streaming. [https://beta.observablehq.com/@backspaces/port-of-vega-lite-streaming-data-tutorial](https://beta.observablehq.com/@backspaces/port-of-vega-lite-streaming-data-tutorial)
I’ll use that as a basis for charting an AgentScript Flock model shortly. Then with that, I’ll try to translate that into D3 which should be interesting.
---
### Author:  [@backspaces](https://talk.observablehq.com/u/backspaces)
#### Post date: [July 18, 2018, 4:53pm UTC](https://talk.observablehq.com/t/streaming-data-chart-in-d3/994/8 "2018-07-18T16:53:15Z")
Here’s the Vega chart of the FlockModel:
> **[AgentScript: Flocking Model, D3 View & Vega Plot](https://observablehq.com/@backspaces/agentscript-flocking-model-d3-view-vega-plot)**
>
> An Observable notebook by Owen Densmore.
I don’t have the reactivity right, I think. When I resize the notebook, things go wrong. Sigh. : )