A look at Javascript Chart libraries,the big one D3.js

September 22, 2016



D3.js has always been a bit of a mystery to me, is it a chart library or something else ? join me in finding out with a few code samples !

Challenges: I gave myself little challenges you are welcome to try if you want to recreate my own learning curve.
Shameless Plug: You like charts? you like these other posts yes?

Ok, Let's get started

Challenge: Import D3 and create a graph or chart, any graph or chart !

See the Pen D3.js Hello World by Eugenio - Keno - Leon (@k3no) on CodePen.

Well that was interesting, it’s somehow clear that D3 is not your average chart library, in their words:

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.

Or in layman terms: Display your data any way you like with D3, with the caveat that you will have to write your own css and javascript (albeit with the API help and framework provided by d3), a jquery for data if you will.

Note: I am following closely the d3.js tutorial found at their site: Tons of tutorials at d3.js

D3 Basics

I tried making a regular bar chart, but after a few tries it became obvious I have no idea what I was doing, so I am taking a step back and figuring out D3 basics…

Challenge: Figure out what the basics of binding arbitrary data to a document object model are

See the Pen D3.js Basics Binding-Appending by Eugenio - Keno - Leon (@k3no) on CodePen.

Ahh, somehow clearer now( check the heavily annotated example) ; You start by creating or importing a dataset ( your arbitrary data) , then you select and/or create DOM elements to which you attach said data, notice the dot notation (short and long) which chains methods,or you could use a more verbose syntax, those seem to be the bare basics.

D3 + SVG

Most tutorials seem to introduce SVG at this point, so let’s try checking how svg works with D3.js

Challenge: Create a chart or graph using svg and d3
Another shameless plug: Not sure about SVG ? , check this other post for an introduction:

    See the Pen D3.js SVG Basics by Eugenio - Keno - Leon (@k3no) on CodePen.

    Like in the previous example, we bind data to DOM elements, in this case svg rectangles, and then modify their properties with the bounded data properties. Notice also that you have to do all of the calculations for the proper display of the bars and their positioning

    Getting and parsing Data

    There is still some ground to cover before we make a simple ( but complete ) bar or line chart, let's start with data, so far we have used simple data, but real data sources are rarely that simple.
    Challenge: Import date and number data in D3 and parse it.
    Note: Parsing and other d3 functions have changed in the new version from a lot of previous examples, check out the changelog: Changes in D3 4.0

    See the Pen D3.js load & parse data by Eugenio - Keno - Leon (@k3no) on CodePen.

    This was a little maddening because most of the examples I could find use the old syntax (read the above note), in essence after importing your data you might want to add one of the included parsers and formatters, it's actually quite simple if you follow their API documentation

    Axes & Scales

    The next thing a chart or graphic usually needs is axes and scales, let's figure out those next:
    Challenge: Display X,Y Axes for a scaled dataset with d3

    See the Pen D3.js Axes & Scales by Eugenio - Keno - Leon (@k3no) on CodePen.

    Quite a few extra D3 Functions were introduced in order to make axes and labels, most of them deal with normalizing data for display, here's a quick overview : While It takes a little getting used to the syntax and new functions, the methodology is still the same, create elements and bind data to them.

    A proper chart

    I think I have the basics down, so now is time to bring it all together and make a proper chart, in this case I am going to try finishing the last example and add bars and lines
    Challenge: Create a line chart with axes,labels and scales in d3

    See the Pen D3.js Line Chart by Eugenio - Keno - Leon (@k3no) on CodePen.

    I can see a trend :)like last time, we are introducing a few functions that help us draw the line:
    • d3.line - Creates a line with a function
    • datum - binds data
    And what if we wanted to make the same chart as a bar chart ?
    Challenge: Recreate the above line chart as a bar chart

    See the Pen D3.js Bar Chart by Eugenio - Keno - Leon (@k3no) on CodePen.

    It is unfortunately not as simple as with other libraries, but the gist is that you need to change your domains,ranges ( for scales and proper display of information) and the html elements to represent your data, in this case svg rectangles. Additionally, you might need to use some extra functions provided by d3.js ( in this case scaleband and bandwidth) to help you finish the chart.
    Things I did not cover/further challenges: This is just a very basic overview of D3.js; there are literally a thousand things I didn't cover, I might do another post, but in the mean time you could look into different types of charts, multiple series, responsive charts and animations

    The Takeaway

    I found D3.js to be a powerful tool for displaying information,this power unfortunately comes with a steep learning curve and some other minor and not so minor pain points, an easy chart library this is not, but on the other hand, if you have complex data and are willing to learn the API, D3.js might be your best option.