Diagrams and charts as code¶
Estimated time to read: 9 minutes
- Last Updated: August, 2024
Over the years I've occasionally wanted to visualize some data or create diagrams using code. There are many options available and I'm keeping track of some of them here. I haven't worked with all of these libraries, I just wanted to collect some examples in case I need them in the future.
The list¶
Javascript¶
d3¶
D3 is not a charting library in the traditional sense. It has no concept of “charts”. When you visualize data with D3, you compose a variety of primitives.
To make a stacked area chart, you might use
- a CSV parser to load data,
- a time scale for horizontal position (x),
- a linear scale for vertical position (y),
- an ordinal scale and categorical scheme for color,
- a stack layout for arranging values,
- an area shape with a linear curve for generating SVG path data,
- axes for documenting the position encodings, and
- selections for creating SVG elements.
Reference: D3 is a low-level toolbox
Example: D3 gallery
DC.js¶
This is a great library if you want to have a "pivot table" experience rather than individual static charts. It's built using the d3 library above but abstracts away all the drawing of the shapes which makes it easy to get started.
dc.js is a javascript charting library with native crossfilter support, allowing highly efficient exploration on large multi-dimensional datasets (inspired by crossfilter's demo). It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive and therefore provide instant feedback to user interaction.
Reference: dc.js - Dimensional Charting Javascript Library
Examples: https://dc-js.github.io/dc.js/
Charts.js¶
Among many charting libraries for JavaScript application developers, Chart.js is currently the most popular one according to GitHub stars (~60,000) and npm downloads (~2,400,000 weekly).
Chart.js provides a set of frequently used chart types, plugins, and customization options.
Chart.js renders chart elements on an HTML5 canvas unlike several others, mostly D3.js-based, charting libraries that render as SVG. Canvas rendering makes Chart.js very performant, especially for large datasets and complex visualizations that would otherwise require thousands of SVG nodes in the DOM tree. At the same time, canvas rendering disallows CSS styling, so you will have to use built-in options for that, or create a custom plugin or chart type to render everything to your liking.
Reference: Why Chart.js
Examples: Chart.js Samples
Apache ECharts¶
Apache ECharts is a free, powerful charting and visualization library offering easy ways to add intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.
Reference: Apache ECharts Github and Apache ECharts docs
Examples: See this page
Evidence¶
Although I haven't had a recent project where I could use Evidence, it seems like a very simple way to build dashboards and I will definitely look for usecases in the future.
Evidence is an open source framework for building data products with SQL - things like reports, decision-support tools, and embedded dashboards. It's a code-driven alternative to drag-and-drop BI tools.
Evidence renders a BI website from markdown files:
- Data sources can include data warehouses, flat files and non-SQL data sources
- SQL statements inside markdown files run queries against data sources
- Charts and components are rendered using these query results
- Templated pages generate many pages from a single markdown template
- Loops and If / Else statements allow control of what is displayed to users
Reference: What is Evidence?
Examples: All components
Python¶
The libraries so far have all been Javascript. Some popular Python libraries such as PyDot, Plotly, and Matplotlib below are also available.
I haven't worked too much with these libraries but from what I've used and read, Matplotlib is the defacto standard, however Plotly and Altair can be simpler to use and also provide interactivity. pydot is a Python module for Graphviz and the DOT language.
PyDot¶
pydot is a Python interface to Graphviz and its DOT language. You can use pydot to create, read, edit, and visualize graphs.
It's made in pure Python, with only one dependency – pyparsing – other than Graphviz itself. It's compatible with networkx, which can convert its graphs to pydot.
Reference PyDot
Examples: Graphviz examples
Altair¶
Vega-Altair is a declarative statistical visualization library for Python. With Vega-Altair, you can spend more time understanding your data and its meaning. Vega-Altair's API is simple, friendly and consistent and built on top of the powerful Vega-Lite JSON specification. This elegant simplicity produces beautiful and effective visualizations with a minimal amount of code.
Reference: Vega-Altair
Examples: Github example and examples page
Plotly¶
Plotly's Python graphing library makes interactive, publication-quality graphs. Examples of how to make line plots, scatter plots, area charts, bar charts, error bars, box plots, histograms, heatmaps, subplots, multiple-axes, polar charts, and bubble charts.
Reference: Getting Started with Plotly in Python
Examples: Plotly Open Source Graphing Library for Python
Matplotlib¶
Matplotlib is a comprehensive library for creating static, animated, and interactive visualizations in Python. Matplotlib makes easy things easy and hard things possible.
- Create publication quality plots.
- Make interactive figures that can zoom, pan, update.
- Customize visual style and layout.
- Export to many file formats.
- Embed in JupyterLab and Graphical User Interfaces.
- Use a rich array of third-party packages built on Matplotlib.
Reference: Matplotlib: Visualization with Python
Examples: Examples page
Diagrams e.g. networking¶
Diagrams¶
Most of the icons available seem to be cloud provider related however there are some generic networking and infrastructure icons.
Diagrams lets you draw the cloud system architecture in Python code.
Diagrams currently supports main major providers including: AWS, Azure, GCP, Kubernetes, Alibaba Cloud, Oracle Cloud etc... It also supports On-Premise nodes, SaaS and major Programming frameworks and languages.
Reference: Diagram as Code
Examples: Examples page
Mermaid¶
I use Mermaid in a number of my posts. There is also an example in the Docs as Code post showing how to use Mermaid to generate dynamic diagrams in your documentation. It supports many diagram types and will hopefully soon support network packet diagrams.
Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
Reference: About Mermaid
Examples: See the examples on this page
Other¶
PlantUML¶
PlantUML is a highly versatile tool that facilitates the rapid and straightforward creation of a wide array of diagrams.
Utilizing a simple and intuitive language, users can effortlessly draft various types of diagrams.
Reference: PlantUML at a Glance
Examples: Language specification