@carbon/charts is an framework agnostic data visualization library built using D3.js. It’s part of Carbon design system and offers ready-to-use, accessible, & asthetic charts that follow the design system guidelines.
I was part of the core team maintaining @carbon/charts, contributing in design discussions, implementation, & feature implementation. While working on @carbon/charts, I was tasked with exploring the following complex charts:
Alluvial / Sankey
This was the first chart that I implemented!
Alluvial or Sankey diagrams are flow charts that show how things move or change from one group to another. They’re great for showing the size of flows between categories, for example, how people switch jobs, how money is spent, or how users move through a website. The wider the path, the bigger the flow.
Heatmap
Heatmaps use color to show patterns in data. Think of it like a table where each cell is colored based on how big or small the value is. Darker or brighter colors usually mean higher numbers. They’re great for quickly spotting trends, clusters, or outliers in large datasets.
Choropleth
Choropleth fall under geospatial charts. Think of them as Heatmaps for geography. They color different regions, like countries, states, or zip codes based on a value, such as population, income, or COVID cases. Darker or lighter shades show how the numbers vary across locations, making it easy to compare areas at a glance.
We expect users to provide TopoJSON data for the map. Depending on the level of detail, the file size can vary a lot from just a few hundred kilobytes for simple maps to several hundred megabytes for highly detailed ones. We combine the geospatial data with the dataset in a dictionary, then render the map using D3.js.