In this lesson we'll start by using `d3-scale` to build up a `scaleLinear` for both our `x` and `y` data points to allow them to map and extrapolate our data correctly to renderable points. Then we'll use `line` from `d3-shape` to build out our `path`. We'll supply it with different sets of data and explore how `range` can effect how our data renders. Finally we'll show off using `curveStep` to see how it changes our graph rendering.

https://app.egghead.io/api/v1/lessons/react-how-to-render-data-as-an-svg-line-with-d3-and-scalelinear/subtitles

How to Render Data as an SVG Line with D3 and scaleLinear

Instructor: [00:00] To render a line for our graph, we need some data. We're going to start with some data that's set up specifically for our purposes with an X and a Y. We're going to go from 0and step from 0to 10 for the X, and each Y is going to be stepping by 50.

[00:17] Because our data is set up with X and Ys, we're going to set up two selectors. One is going to be an X selector. It's going to receive a data value and return the X, so we're going to say d.X.

[00:31] Then we're going to do a Y selector, which will receive a data point and return Y. This is specific to our data, but if this was price or anything along those lines, this is where you would return whatever your data is.

[00:46] We'll set up our SVG area. We're going to need to define a specific width and height so that we can scale the data correctly. We're going to say const width is equal to, say, 500, and the height is going to be equal to 300.

[01:01] We can set up our SVG and pass in width, height, and we'll close that so we can render something inside of it. Because no data is perfectly set up to render to the screen at a specific pixel coordinate, we need to scale the data to the size of the space that we're rendering. We use that using scaleLinear. We're going to say import scaleLinear from D3 scale.

[01:37] The first scale we're going to set up is our X scale. We're going to say const X scale is equal to scaleLinear.

[01:46] We need to define a range. That range is going to be the pixel coordinates that we're rendering to. Our range is zero to our width, because that is the area in which we can render.

[02:00] The second piece is our domain. The domain has to deal with the domain of our data which also receives an array, and whatever value we place here in the first array slot will map to this value here. Our 0we want to map to the 0of the rendering.

[02:21] In our data, we can see that our max is 10, so when we render the value 10, we want that value to be placed at our maximum width. 0will be mapped to 010 we map to our width of 500. If we were at 5, it would map to 250.

[02:44] Now we need to set up our Y scale. We say const Y scale is equal to scaleLinear. We need to do the same thing. We need to set up our range for our height, so 0height. For our vertical axis, the X will take care of the horizontal, and then we set our data domain which runs from 0to 500, so I say 0to 500.

[03:15] Generally speaking, these are not going to be hard-coded. You might use a min and a max or an extent to grab these, but just for illustration purposes, we'll manually do them.

[03:25] This will map from 0to 0and 500 will then scale it down. A value of 500 will scale it down to fit within out height of 300.

[03:36] Now that we have our selectors and our scale set up, we can create our line. We're going to import line from D3 shape. This will be a line builder for us. We're going to say const path equals line.

[03:53] Then we need to specify an X and a Y. Then X will receive a function. This line will eventually receive data, loop over each of the data, and call this X function with the data.

[04:08] What it expects is a renderable point. With that, we're going to say X selector, and we're going to pass in our data point which will then select the X value. That X value will be whatever is mapped in between this domain, so 01, 2, 3.

[04:26] That means we need to scale it to our renderable screen coordinates. We're going to say X scale, and then pass in our X selected value.

[04:38] Then we need to do the same exact thing for our Y. We say .Y will receive the data point. We'll pass that to our Y selector. Then we'll scale it to render on the screen in the coordinates that we've set, 0to 300.

[04:57] Finally, this path is a function that will take our data and render the data path. We're going to say path d equals this path. We'll pass in our data.

[05:11] We need to apply a few other things. We'll say stroke of a tomato color with a stroke width of 3, and we won't have a fill.

[05:22] We're going to save that, and we can go take a look inline rendering in our browser. If we inspect this path, we can see here that at 0we were 00When we were at 1, we've moved to 50 for the X and 1 at position 150 for Y was scaled to the 30 point. We can see how that scale was affected to taking our data and turning it into an actual renderable path.

[06:00] When dealing with graphs, typically you will see 0down here because of the data, but with a SVG, the 0point for both X and Y is here. In order to fix that, our mapping our domain to our range needs to flip.

[06:22] Our 0here for the data needs to map to the height that we can render. Here, we flip this around, where zero will become the height and render in the bottom-left corner, and our 500 will be the 0which will render up here.

[06:45] If we save this and go back, we can see that it's now rotated, where our 0starts here but ends up here. Remember that path that we build up here is just arbitrary. It can take any data. We can pass in things like some other pieces of data that will map differently.

[07:07] This down-up data goes to the center and then eventually falls back down to a position of zero. It went up to 250 and then fell back down.

[07:16] We can also switch this back and see how that affects our data. Write 0to the center and back. It also takes other pieces of data, other functions that will affect how things are rendered.

[07:33] By default, the curve that line sets is curveLinear, meaning it will just go to a point. As you can see here, it goes to a point and then goes on to the next path. If you want something different, you can do something like a curveStep.

[07:51] To specify that curve, you say curve and then you just supply the function. Here, we've now supplied a curve step that will affect how it renders. It doesn't matter necessarily about the data. You can always pass it through more functions that will then eventually affect the render.

[08:16] Finally, when setting this up, you can always adjust the width and height to whatever your constrains are. If we made this 800 and this height 200 so it was very constrained, we can still see that everything maps and renders correctly into the specific width and height that we've specified, and all the data gets scaled correctly.

How to Render Data as an SVG Line with D3 and scaleLinear

Share this video with your friends