Introduction to D3.js

What is D3.js?

D3.js is a JavaScript library that is great for data visualizations. It allows the manipulation of a Document Object Model (DOM) based on data sets and is able to bring that data to life with HTML, SVG, or Canvas elements. D3 can be used to generate simple complex visualizations as well as add user interactions and transitional effects.

Basic Methodologies to get you started with D3

D3 is a vast library with a lot of methodologies for manipulation and incorporates a lot of method chaining in order to easily visualize your data. These are the main ones to understand to get you started:

• .select(<element>) or .selectAll(<element>) → One of the main parts of d3 are your selectors which select which element(s) you want to be using and manipulating for your data.
• .data(<Your dataset>) → Binds the data you want to use to the nodes you are manipulating.
• .enter() → Allows the addition of nodes that your data requires
• .append(<element>) → Adds a new element to the selected nodes. This is required following .enter() as the new nodes that are created are without an element.
• .attr(<element>) → Used to add or update the attributes for the selected elements. May take in a function that accepts two arguments( d(joined data) and i(index) ).
• .text(<string>) → Adds content to the select elements to be displayed.

Creating a Bar Graph

HTML file

1. Install D3. If you use npm: npm install d3.
2. Define variables that will be used.

svgHeight → Height for the svg container.

svgWidth → Width for the svg container.

barPadding → Padding for the bars to create spacing between each one.

barWidth → How wide each bar is based on how wide our svg container is and the size of our dataset.

3. Create a svg container for the bar graph.

Here we’re creating the container by selecting the class that we labeled “bargraph” and appending the svg element to it with a height and width attribute of 500 units. Here we’re also styling the svg to create a border which can also be done through css.

4. Create and display the bars with our data

Within the svg container that we made, we .selectAll the “rect” that we do not have yet and we then access our data which we then create nodes based on the size of our data and then append the elements that we have selected.

.attr “x” & “y” → helps position and display our data so they don’t overlap. For attribute “x”, we are giving each element in the array the width of the bar that should be displayed. For attribute “y” we are displaying each elements’ bar height. We have to subtract the data value from the svgContainer’s height due to the fact that the x and y axis of a svg starts at the top left instead of the bottom left that we are used to. The bars would be inversed if our data value wasn’t subtracted from svgHeight.

.attr “width” & “height” → Displays the rectangles for the bar graph. The width is the variable we earlier subtracted by the padding to give some space between each bar. The height for each bar is based on our data.

.attr “fill” → Adds color to the bars based on the data value

5. Display data values

Similar to how we created our “rect”, we now create nodes for our text and call the .text

.text → .text also takes in a function that takes 2 arguments just like .attr. For each data value in our data set, display that data value

.attr “x” & ”y” → Positioning and displaying the text where we want to according to where the bars are

6. Result