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

September 22, 2016

Preface

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 !

• Getting started with Chart.js
• A look at Chartist.js with sample code

Ok, Let's get started

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.

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…

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

• Getting started with SVG

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 :
• .domain - Initial Range of data
• .range - Converted range of data ( from Thousands to 10's in this example )
• ScaleLinear() or scaleTime() - Which scale to use when converting
• .extent Min & Max range of data
• .axisBottom() and axisLeft()- Helps create axes
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.

Best,

Keno