How to choose a Data Visualization tool for a Web project?
A Malt case study.
When I started working in the Malt Tech Trends Report 2019 the main challenge was the following: To obtain actionable insights for companies and the Tech community out of the largest platform of freelancers in France. Some numbers: a database of 40K tech freelancers, 93K companies and 303K searches/month. Though my focus was to work in the data analysis, an equally important task was to find a way of visualizing information for the Web/Mobile version of the report.
This is a case study that might be useful for teams deciding which tools they need to build Data Vizs in Web static projects.
From the start, I wrote down as a not-to-forget notes some key points to remember while implementing the Vizs.
🙏 My Viz Mantra 🙏
- Finding Viz tools able to load medium size datasets smoothly.
- To Implement Vizs Adaptable to Desktop/mobile versions.
- Interactivity of the Vizs to ease the reading of report.
- Finding tools that allow me to customize Viz designs to align with brand identity.
The main constraint here was also time ⏰. We wanted to release by the beginning of December. So, What Viz tool should I choose?
What Javascript library to choose? 📊
Javascript libraries are the most popular tools to create visualizations for the Web. They are always an added value to an interactive Web design. Additionally, some of them are suited to work with front-end frameworks (Vue.js, React.js…) which makes them specially interesting due to the popularity of frameworks these days. Every year, bloggers publish rankings of trending JS libraries .In a high position in many of them usually appears D3.js.
Created by Mike Bostock, a former New York Times Data Viz journalist, D3.js excels as the main JS visualization tool thanks to the control that it offers over DOM elements, its capabilities to create different types of SVG paths and a bunch of functions to control animations in graphical elements.
There are some posts questioning D3.js (arguing that the learning curve is difficult, which I partially agree, and providing vanilla CSS and HTML alternatives 😐). In the post above there is a comment made by Jose Antonio Cabañeros Blanco that perfectly summarizes why D3.js is still necessary: “ when you need visualisations more complete, interactive, dynamic and above all, visualisations out of common charts […] nowadays, D3 hasn’t got competition with any other” . Mike Bostock closes this thread by showing the flexibility that it offers at the time of managing scales, using math functions, and drawing complex SVG paths. 💪 😎 💪
Why I didn’t use D3.js in this Web Viz project?
(Despite I love it)
- At the beginning it was not clear what visualizations we will use. In such a vast project there are a lot of feedback rounds between designers, content editors, data people…. There were high chances that some of the Vizs will drop from the definitive Web. Risking to work in elaborated D3 Vizs and then facing the possibility that some of them wouldn't be used made me feel like 😵 😵 😵
- Time & Size: Due to the length of the content and the number of visualizations to made (more than 10 across the report) working in the D3 vizs would take me much longer (Despite I think it is always a good idea to have an array of basic D3 visualizations ready to be used, so that you can customize them quickly and deployed). Also, despite I am confident of my D3 skills I always find time consuming to build resizable Desktop/Mobile Vizs ( maybe just a matter of more practice 😉 ).
- Existing JS libraries fulfilling Viz needs: 4 years ago I would have been forced to work with D3.js to implement all my Vizs in order to obtain the desired results. Thankfully, Data Viz has evolved to the point of having many JS tools that offer simpler solutions without sacrificing results.
All in all, to choose a Data Viz tool consider what are the Data Viz capabilities of your team ( expertise and available workforce), deadlines limitations, and magnitude of the assignment ( number of Vizs, “out of the box” Vizs to develop…)
After discarding D3.js for this project I compared different free JS libraries: Chart.js, Echarts.js, apexcharts.js… Finally the chosen one was Echarts.js. But…. ❓❓
Why Echarts.js?
Echarts.js is a JS library created by Baidu and currently part of the Apache foundation. To use it, it is better to have some knowledge of JS coding. The more you know, the more profit you can obtain of it. Though, it is also a good starting point for non-initiated people to JS Viz libraries.
- Interactive and Resizable: All the graphs are automatically resized to suit different browser sizes. Most of them, are also great to be displayed in mobile.
- Variety of HTML layouts: One of the most important factors at the time of choosing this library was the amount of available layouts (Scatter plots, Sankey Graphs, Radar, Geo vizs … and even 3D modelings).
3. Customization: If you are skilled with Javascript Viz you will find easy to combine different graphs, tweak the designs and ease the creation of the Vizs.
I was happy to discover that the adoption of this library is increasingly growing. Recently it has been chosen as render viz tool in Gitlab ( switching from D3.js to echarts). There is a point that they made about D3.js in this article which adds to the point that I made above: “Our team did not have the time to develop the expertise without impacting our product development velocity”. In their case the Vizs are an essential part of their product (different from my Web report case).
What are the main blockers of Echarts.js ?
- As you can see in some of the examples in their page, performance drops when loading large datasets. Animations become abrupt and the smoothness achieved with smaller JSON files fades. Also this happens when loading multiple Vizs in the same HTML page that are calling the echarts.js source file. A way of solving this is not to render all the Vizs when the page is loaded. For example, by setting triggers so that the Vizs only load when the user scrolls down into a specific part of the Web.
2. It is a “high level” visualization tool. What I mean with this, is that the lack of direct control of all the graphic elements could be a burden at the time of customizing some graphs. This is a key concern at the time of implementing designers feedback in case it is needed to imprint a strong brand identity to the Vizs.
3. You might not find all the layouts that you seek to visually convey your message. A limitation you will always find using these “higher level” JS libraries (comparing them with D3.js) is that at some point the “party is over”: You have what you have🎂. This points bring me to the next section. If you don’t find what you look for, just use other Data Viz tools. “Taste the variety” as we say in Spain.
Using a Data Visualization Platform : Flourish
As a second tool, I decided to use a data Viz platform called Flourish. It allows non coders to create beautiful graphs and storytelling animations.
Why I used it? It is one of the internal Viz tools available in the company for analytics and BI Vizs. I wanted to explore how suitable could be to integrate them within a static Website. Challenge accepted! 🎆
Pros:
Time efficiency : It can take you literally 30 seconds to create a graph.
Storytelling capabilities: There are really nice animated features designed. Look at this examples on their website. Soon in Malt we will explore storytelling options thoroughly!!
HTML export: You can export Vizs to HTML, so adding some basics HTML skills on top you can easily add them to your Web.
Cons:
Don’t think about using it for to build Vizs in Dynamic Websites. Data is plugged in the HTML and it would be truly challenging to build a data pipeline to import the data (even imports from CSV/JSON files is challenging).
To implement design inputs outside of the available options in the menu of edition you have to dive in the HTML to find how to tune parameters. Some changes might actually take more time than creating from scratch the same Viz in D3.js. 🌊🏊
That’s it. That’s how I built the Data Vizs in the Malt Data Report. And here it is the end result. 😉
This is a Malt Case study. It targets teams facing similar Data Viz decision making.
