5 Mistakes I Made When Doing Custom Data Visualization With D3.js

Experience feedback from drawing graphs in Javascript with D3.js

Read the full article on Sicara’s blog here.

I share with you the five mistakes I made in data visualization from the conception of a custom graph to its implementation in D3.js.

Data visualization libraries allow developers to represent complex datasets in a simple educational straightforward way. Histograms, pie charts, trend lines, you name it… All these graphs help your users get the most important information from a complex dataset at a glance.

However, datasets may be much more structured and complex than a simple curve. In my case, I recently had to build a conversion funnel showing the transformation of marketing contacts into leads, then into effective sales:

This article will guide you from the conception to the realization of this graph. The five key learnings I took as feedback out of this experience in data visualization were:

1. Challenge your need
2. Choose an appropriate data structure
3. Incrementally build your graph from very easy forms
4. Uncouple coordinates calculation and drawing
5. Plug to real data from the start

I use TypeScript along with Angular (version 4+) and D3.js (version 3+). Yet, you can easily transpose all learnings to any other languages or data visualization framework than D3.js.

1—Challenge your need

Do you really need that over-engineered fancy graph?

• Maybe a higher-level library or a similar template exists for the purpose. Building from an existing library or template would considerably decrease the time you spend developing and then maintaining the graph.
• Maybe you could use a more standard representation instead of trying to reinvent the wheel. Standard data visualization techniques were proved effective for displaying information and D3.js implements most of them.

Asking yourself those questions should be the very first step before diving into the code of your graph.

… Read the full article on Sicara’s blog here.