Draw an SVG for a Data Visualization in React
In this lesson we'll set the stage for a data visualization by defining dimensions for our overall SVG as well as margins so we can create a bounded area inside the SVG. This will give us a distinct area to draw our visualized data points as well as space in the margins that will accommodate our axes. We'll render this SVG using React so we have a canvas (not the HTML element, though 😅) for the upcoming steps.
Andy Van Slaars: [0:00] We'll start with this code sandbox that's set up with React and D3 as dependencies. We have our app component that loads in this chart component. Right now, our chart component is just this placeholder.
[0:10] We'll be using the sample data to draw our data visualization. First, we need to setup the SVG that our visualization will be rendered on. We'll start by creating a new constant, which we'll call dimensions.
[0:23] This is going to be an object that's going to define the dimensions for SVG and the margins that we're going to apply to create a space inside that SVG for visualization. We'll start by giving it a width, and we'll set that to 500.
[0:37] We'll also give it a height, and we'll set that to 350. Then we're going to create a margin's key inside this object. We'll define keys for the top margin. We'll also give it a left. This is where labels for our y-axis will go.
[0:53] We'll make that fairly large and then we'll give it a right margin. That can just be five pixels, and then we'll give it a bottom of 25.
[1:02] Now that our dimensions are defined, I'm going to come down here to where we're rendering this chart component. I'm going to pass dimensions in as a prop. We can save that. Then we'll switch over to chart.js so that we can use those dimensions to draw our SVG.
[1:16] Let's start by taking our props and destructuring those. We know that we're going to get data and dimensions. In the next line, I'm going to further destructure dimensions to pull out the width, the height, and the margin's object.
[1:37] Instead of rendering this div here, let's render an SVG. I'm going to remove this element all together. I'm going to add an SVG, and we'll give it the XML namespace attribute. I'm just going to paste the value in for that.
[1:50] Then we also want to give this width, which is going to be our width from our dimensions object above. Then we're going to give it a height. Our height is going to be the height that we pulled in from dimensions. Then we'll just add in the closing SVG tag here.
[2:07] This is where SVG content will go. On its own, this SVG won't show us anything on the screen. Let's add a rectangle in here. We're going to give this a fill and we're just going to fill this with gray so that we can see something.
[2:19] We'll give this a width of 100 percent just to fill this space, and also a height of 100 percent. If we save this, we'll see our gray rectangle element rendered in the preview. The next thing we need is a bounded rectangle that respects our margins.
[2:35] We're going to create that by first calculating our bounded width and our bounded height. I'm going to create a new constant, and I'm going to call this bounded width. This is going to equal our width dimension, minus our margin.right. We're also going to subtract from that our margins.left.
[2:55] Then we're going to do the same thing for the height, where we'll have a bounded height constant and that's going to be our height dimension minus margins.top and bottom. Let's use these new values to draw another rectangle. I'm going to drop down here.
[3:11] Below this first rectangle, I'm going to create a second rectangle and I'm going to give this a fill of light gray so that we can see it on top of the darker gray. Then we're going to give this a width and this is going to be our bounded width.
[3:25] Then we're going to do the same thing with our height using our bounded height. If we save that file, we'll see that now we have a light grey rectangle sitting on top of our overall SVG. It's still not quite right. It's not sitting in the right place, but it is the right dimensions.
[3:42] To fix its placement, let's go up here above this rectangle. We're going to surround this in an SVG group element. We'll just add the opening and closing Gs there. Then we're going to give this group a transform. Our transform is going to take a translate.
[4:00] I'm going to do this with string interpolation. We're going to translate our X dimension using our margins.left. Then we're going to give it the Y dimension using margins.top. If I save that, we should see that our rectangle gets shifted down and to the left.
[4:24] It's leaving that 5 pixel right margin, our 25 on the bottom, our 50 on the left.