Data Visualization is a lot like making a pizza. So, which kind of pizza cook are you?
Do you want only the best gourmet, stone-cooked masterpiece or are you happy with a pre-prepared frozen pizza warmed up in the microwave?
This is the difference between Chart.js. and D3.js
So back to our pizza / data visualization analogy.
With Chart.js, its just a matter of picking your preference out of the frozen food isle of your local supermarket, driving home, and microwaving for 5 minutes. Or, if you’re feeling fancy, trawl through your local pizzeria’s menu and have your pizza order delivered to your door.
What that really means is, when it comes to Chart.js, all you have to do is go into the documentation, choose whatever graph you want, then copy and paste the code into your HTML or React render function. Input the data into the given fields and you’re good to go. Visualisation fast food.
D3.js… not so much.
The first thing to do with this framework is to turn on your oven and pre-heat to 450F – we’re going all out, and making a pizza just like momma used to make.
We’re cutting up the tomatoes and basil and cooking them down to make our own sauce. We’re mixing flour, yeast and water into the dough, before kneading it and tossing it into the air to make the base. We’ve been to the fresh produce isle, and the butcher, and have the ingredients on hand to make a truly delicious pizza.
In D3.js you have to follow a recipe, you have to set your x and y axis, the data path, the legend, the labels, the responsiveness, the interactivity – everything from scratch.
Not only that, you have to follow the method in order to make sure all the parts, the ingredients, work to end up with a truly great graph – the culinary pièce de resistance.
What Is It:
In short, D3.js is a seemingly limitless JavaScript library that allows you to create extremely aesthetically appealing charts and graphics with a relatively skinny amount of code. It’s the framework you use when you want the wow factor, and not the meh factor.
The 3 D’s in D3.js stand for Data Driven Documents. It’s a combination of scalable vector graphics, HTML5, and cascading style sheets that brings true customisation to web browser visualisations – the spiritual successor to Protovis. D3.js is built on this framework, but with a focus more on web standards, increased expressibility, and drastically improved performance.
What Is It Used For?
You don’t really just get to build things right out of the box with D3.js, there is a notoriously sharp learning curve associated with this framework. The confusing mix of method chains, weird looking syntax, and black box functions can be daunting at first – but oh, what they can create.
Every time you see a truly weird looking graphical representation of data – that’s D3.js. When you have the ability to click on a chart featured on a website to flip around parameters, or for a flexible comparison – again, D3.js. When you see those amazing interactive visual stories on blogs or news sites, this is what’s possible with D3.js and why it’s such a powerful, albeit difficult, framework.
Learning D3.js is for those people who want have both web development and JavaScript programming skills in their repertoire. D3.js is hands down the more influential and creative tool for building interactive data visualisations – bar none.
Pros:
Everyone Is Using It:
There are so many great examples of D3.js utilisation around the web. Don’t be apprehensive about taking ideas or inspiration from what you see and like during your time browsing on the web. Better yet, there are curated lists of amazing D3.js examples on GitHub for you to riffle through at your own leisure. Just make sure that if you are re-using parts of someone else’s code, you give credit where credit is due.
Fantastic Community:
Interestingly, that brings us to another great thing D3.js has going for it. Being open source, the community is similarly helpful and vibrant – just the same as you’d find with other open-source programming languages. D3.js itself has been community forked over 9,000 times, with plenty of free extension resources and 3rd party wrapper libraries to make your time spent creating visualisations in D3.js that much easier, and even more customizable.
Unrivalled Flexibility:
D3.js has the flexibility to display data pretty much however you want. Looking to plot out where Lebron James sinks buckets from, overlaid onto a representation of half a basketball court? It’s been done. Better yet, the code is available on Github. The only limit is your imagination really, and your ability to manipulate the D3.js to accomplish your vision.
Highly Desirable Skillset:
Because D3.js is so widely used, and used for such a crazy variety of applications, naturally it’s quite the feather to have in your cap when looking for roles in the programming and development industries. Though a tech job may not intrinsically ask for experience in D3.js, it’s not a bad idea at all to flex that knowledge muscle in an interview as there will always be a need to portray information and data for your future employer’s website, or for the client, in a dazzling and engaging way.
Low Key Web Dev Skills:
You came to learn D3.js to make pretty charts and graphics, but you left with basic JavaScript and HTML5. Because D3.js has to be built from scratch, you get used to the syntax involved with these programming languages so you’re killing 2 birds with one stone – 3 even. D3.js manipulates elements on the document object model, so you learn how to show items on a webpage. It’s the same with JavaScript, as you need to type your commands to set parameters within the visualisation.
Cons:
The Difficulty:
D3.js is no joke. It’s not child’s play in the same way that Chart.js is, and requires some serious thought and time invested to get the hang of it. There isn’t really a great tutorial in the official documentation, and although not required, previous web dev experience is a major advantage and will ensure you have a much better time when first using the framework.
The Speed:
It stands to reason that a framework as complex and customizable as D3.js will have some sort of performance bottleneck somewhere down the line. When dealing with really large datasets, D3.js can reduce down to a snail’s pace and can act like a bit of a speed bump while waiting for it to do its thing.
Poor Mapping:
So, it’s not great for working with maps. Things like adding locations onto a map, or shaded areas, sure. But the panning and zooming can be extremely janky and buggy, when allowing the user to pull and manipulate the map with their finger or mouse.
Base Documentation:
The community is great and all, but the base documentation of D3.js leaves much to be desired. The innovative visualisation libraries are fine for basic to intermediate applications, but for the really high-level stuff, all we have to say is we’re thankful for the GitHub community.
It Takes Time:
The double-edged sword to having full customization and being able to make something from scratch is that it just takes time. If you want a quick chart or visual, then go use Chart.js – you won’t have the variety of options, but you will have your chart done and dusted in no time.
How Does It Compare?
If cooking isn’t your jam, you can think of it like the Apple VS Android smart phone rivalry. Chart.js is Apple here – extremely high-quality products that are intuitive and designed for any user with a smooth and polished OS and interface. Then there’s D3.js – Android. This is the route you take when you want flexibility, customization, and full control over a display. These are for relatively experienced users only, as there are fewer safety nets in the settings compared to Apple.
If you want well explained documentation, an easy-to-understand JavaScript package, speed, and the ability to dump your data straight into HTML5 or a front-end framework like React – go with Chart.js, it’s like enabling easy mode.
Conversely, if you want to create true art, and want to experience the rollercoaster of emotions and frustrations that come with being an artist, then D3.js is for you.
Who’s Using It:
The answer is everyone. Because it can be integrated into JavaScript, React, Angular, React Native, and a bunch of others, D3.js has become extremely popular when making high end landing pages for websites. The ability to click on the graphics, and take a virtual tour, is in vogue right now and imparts a polished, professional look and feel to any online traffic browsing.
In The End:
As we said earlier, the ability to work with D3.js, and work well with it, may not be a strict prerequisite for landing that role you’re after but the additional web dev skills that come along with that D3.js knowledge are highly valued in the industry.
Across the board, whether it be a Software Engineer, Front End Developer, or any other development/coding type role, we saw a salary increase of between 10-25% when that salary included a D3.js skillset as part of the requirements.
We’ll say it before and we’ll say it again – D3.js and Chart.js are very different beasts. For a quick visual, the frozen pizza so to speak, Chart.js is your go to tool. But for those true experienced gourmets looking to cook something truly delicious, and fast food just won’t do, D3.js is the framework for you.
So, what are you waiting for – learn D3.js!
Next Steps
We hope this blog helped you learn more about D3.js and why you should give it a try!
If you enjoyed this blog you may also enjoy our other blogs like, Erlang and 5 Things You Need to Know About It or What Is NoSQL: The 4 Databases Explained.
Kofi Group is proud to be a source of knowledge and insight into the startup software engineering world and offers a multitude of resources to help you learn more, improve your career, and help startups hire the best talent. If you are interested in learning more about what we do and how we can help you then get in touch or watch our Youtube videos for additional information.