Create SVG Elements Using D3.js
In this section, you will use D3.js to add SVG elements to a webpage based on data.
This will include binding the data to those elements and then using those elements to visualize the data.
Note: Rather than start with the end product and then work to understand it, we will build our data visualizations from ground up.
Our Goal is to take the following data set:
and transform it to this data visualization using D3.js v6:
SVG Circle Elements
First we start with what an SVG Circle Element is and how it is defined.
An SVG Circle Element is a basic SVG shape element.
Basic shape elements are standard shapes which are pre-defined in SVG.
Note - they can be recreated mathematically using a path (which we'll see later).
For now, you will use the basic SVG shape element.
The circle is created using the "circle" SVG word.
When defining the circle SVG shape, three necessary attributes are attached:
- cx - The x-axis coordinate of the center of the circle.
- cy - The y-axis coordinate of the center of the circle.
- r - The radius of the circle.
If you recall the D3 Data Visualization Basic Building Blocks section, an SVG circle is defined in HTML as follows:
Notice the cx (x-axis coordinate) is 25, the cy (y-axis coordinate) is 25 and the r (radius) is 25.
If you recall the Adding an SVG Element Using D3.js section, we created the circle using D3.js as follows:
Now that we remember how to create a circle with SVG and with D3.js, let us get started.
Create an SVG Element to Hold SVG Elements
Start with a basic webpage:
This gives us the data set and an SVG element to hold the SVG Circles we will add shortly:
Bind Data to SVG Circles
The next step will be to take the data and bind it to our DOM elements, in this case SVG circles.
In the Use D3.js To Bind Data to DOM Elements section, we bound the data to the DOM element as follows:
In this case, we are going to do the following steps:
- selectAll circle
- bind the data
- select the virtual .enter() selection
- append the SVG circle elements
This gives us the three SVG circle elements in our webpage:
Which is great - though the circles don't appear.
This is because we did not specify (define) the attributes for each circle.
When we hit return, we can look through the selection to find our SVG circle elements and the data that was attached to it.
In this case, let's look at the last circle to see if we can find the "10" data point bound to the __data__ property:
We can see by the results, that our data has been bound to the SVG circles!
Use Bound Data to Alter SVG Circles
We will now use the Bound Data to alter the SVG Circles.
In the Use Data Bound To DOM Elements With D3.js section, we used the bound data the following way:
D3.js lets us use this same function to alter the parameters used in building the SVG Circle!
As you can see from the above code, we added the attributes to our circle selection.
The data set specifies the circle radii, so we use D3.js to update the r SVG Circle element attribute for each SVG Circle.
This shows us that we have used D3.js v6 to bind data to each individual SVG circles' radius:
We are getting close.
We now have three SVG Circle Elements and their radius corresponds to the radii given in our data set.
The last thing we have to do is to color the SVG Circle based on the data.
Styling SVG Elements Based on Data
If you recall the Adding an SVG Element Using D3.js section, we used D3.js' .style() operator to modify the CSS style property of an SVG element.
D3.js v6 lets us use a function inside of the .style() operator!
If the data is equal to 40, then make the style green => .style("fill", "green")
If the data is equal to 20, then make the style purple => .style("fill", "purple")
If the data is equal to 10, then make the style red => .style("fill", "red")
So not only were we able to use the data to create SVG Circles, we also used the data to style the SVG Circles!
Congratulations - You created and styled SVG elements based on data from a data set!