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:

Creating a Bar Graph

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

Related posts:

A few months back we held another AirTime event to discuss how to empower and develop leadership. We had close to 100 senior execs from our portfolio join us for the session and we were lucky enough…

Everyone knows that you’re not supposed to start your argument with ‘everyone knows,’ but in this case, I think we ought to make an exception: Everyone knows that STEM (Science, Technology…

There are many legal questions being raised by security token issuers and traders worldwide. Essentially, STOs are in shadowy legal territory for most countries. Desipe legal hassles, security token…