Data Viz on Web Interfaces: Choosing a Open-Source Charting (Graphing) Libraries

If you know or plan to learn programmatic languages, you might be wondering how to pick a charting library. Charting are built by data visualization experts who want to make the visualization process easier and empower the data storytelling of more people – developers, analysts, data scientists, or scholars.

It is helpful to note that data visualization on web interfaces initially started in front-end languages like JavaScript. The charting libraries for JavaScript allow a higher level of customization in interactions, but that also means they are more complicated in syntax (i.e. more lines of code in creating the same graph) than Python-based graphing libraries.

Below is an overview of the commonly used charting libraries outlining the languages they are available in as well as their pros and cons.

Source: Comparing Open Source Libraries for Data Visualization, Data Services @ NYU Shanghai

Visualize fo Scientific Reporting

These libraries lie on a spectrum of visualization purposes. The leftmost end represents the purpose to visualize for scientific reporting, which produces graphs that are more informational than interactive and mostly static.

Example Graph created by Matplotlib


Source: Matplotlib Documentation

Visualize fo Creative Storytelling

On the other hand, the rightmost end represents the purpose to do creative data storytelling, which allows a high level of customization of a graph. Going right on the spectrum increases the level of customization in graphs and more complex syntax. For example, a graphing libary like Plotly allows a certain level of customization (e.g. colors, bar widths) and interactivity, but its graph types are strictly set to a certain graphic convention. Whereas in D3.js, you could experiment with different ways to draw a graph.

Example graph created by Plotly


Source: Plotly Documentation

Example graph created by D3.js


Source: World History Timeline by Danilo Di Cuia


Previous submodule:
Next submodule: