Mimi Magusin

July 17, 2018

Build a dashboard using D3

In January 2017 we taught an advanced session on functional programming as part of our Acceleration Program at Codaisseur. Not much later, we rearranged our program and this class was just hanging around, almost forgotten…

That’s why we decided to publish it here, for all to enjoy 👏.

Because it is a full day of teaching, we split up the materials in two parts. In this article, we will be building a table and a bar chart. In the second part, you will learn all about nested data and doughnut charts!

Also, the end result of the code in this article can be found here.

Make a table

✍️ Setup
- Create a index.html file
- Add the contents from this gist to it.
- Check your browser

Your page should look something like this:

We will be adding code to the <script> tag. Start adding below the data formatting

✍️ Make a selection
✍️ Add a formatter for dates
✍️ Add rows
✍️ Add headers for the table
✍️ Check your progress
- Open the file in your browser
- Create a github repository
- Commit your changes
- Push to github

Your page should look like this:

Make a bar chart

To make a bar chart we will use a SVG (Scalable Vector Graphics). Scalable Vector Graphics (SVG) is an XML-based markup language for describing two dimensional based vector graphics. SVG is essentially to graphics what HTML is to text.

✍️ Add the SVG

We will add a SVG element to the DOM and to it we will add a g for grouping the other vector graphics we will be adding.

You can add the code to the bottom of the script tag

When you check your browser, you’ll only see that some elements moved. However, when you check your DevTools, you’ll see we have created a brand new element!

✍️ Create the scales

For the x we will use a timescale, because we have dates:

For the y we will use a linear scale:

✍️ Draw the bars

We will add a rect element to the SVG group here:

SVG’s have different properties as regular HTML elements. fill determines the color of a rect element.

✍️ Check your progress in the browser.

Woohoo! The bar chart should show up now:

✍️ Add axis for y
  • For our y(vertical) axis, we want a simple view with 3 ticks. We will display long lines all over the width of the bargraph to make it easier for interpretation
  • The axis will be located at the left of our graph
✍️ Check your progress in the browser.
✍️ Add axis for x

The transform attribute moves the axis to the bottom of the svg.

✍️ Check your progress
- Open the file in your browser
- Create a github repository
- Commit your changes
- Push to github

By now, this is what your page should look like:

Improve the bar chart

The adding of a text is done with a SVG text element. The code to draw the text looks quite similar to the code to draw the rectangles of our bars.

✍ ️Add a number to the top of each bar.
✍ ️Make the bar width relative to the amount of data
✍ ️Add a month to the domain of the x scale
✍ ️Add a hover effect
✍ ️Browse the example gallery
✍ ️Change the visualisation of a bar chart to a line chart

Conclusion

You made it! Are you happy with your page? Did you ever work with d3 before? Do you still have any questions? Check out my version of the code in this repo, or let us know in the comments!


Build a dashboard using D3 was originally published in Codaisseur Academy on Medium, where people are continuing the conversation by highlighting and responding to this story.

Share this page