Charting libraries used to provide a number of graph types, along with a massive list of options. Then, each time someone had a new requirement, an option would have to be added and supported. D3 took a different approach; rather than provide full components, it gave you data-driven helper functions to create those components yourself. That makes D3 more flexible than most other libraries, and able to create visualizations of just about any data set you might encounter. That can be daunting to most people, as most of us are only familiar with the standard bar, line, and pie charts. Well, prepare to have your mind blown, as we explore the world of charts, using D3 as our guide.
Evolution
An Evolution Chart is one that shows the progress of data over some quantifiable interval—usually time. Common charts in this category include Line, Area, Stacked area, and Streamchart.
Here’s an example of an area chart, shown in Figure 1. It’s really similar to a line chart and represents the evolution of a numeric variable.
Figure 1: An area chart
Ranking
Ranking charts are used to display and compare the number, frequency, or other measure (e.g. mean) for different categories or groups. This graph is constructed in such a way that the heights or lengths of the different chart sections are proportional to the size of the category they represent. Common charts in this category include Bar, Spider/Radar, Wordcloud, Parallel, Lollipop, and Circular Barplot.
The circular barplot (see Figure 2) is a variation of the well known barplot. It is very adapted for cyclical data where groups do not share the same Y axis.
Figure 2: A circular barplot
Correlation
Distribution charts help you to understand outliers, the normal tendency, and the range of information in your values. Common charts in this category include Scatter, Heatmap, Correlogram, Bubble, Connected scatter, and Density.
A bubble plot is a scatter plot with a third numeric variable mapped to circle size. This is demonstrated in Figure 3.
Figure 3: A bubble plot
Distribution
Distribution charts are used to see how quantitative values are distributed along an axis from lowest to highest. Distributions charts allow users to identify characteristics such as the range of values, central tendency, shape, and outliers. Common charts in this category include Violin, Density, Histogram, Boxplot, and Ridgeline.
Sometimes called joyplot, this kind of chart allows to visualize the distribution of several numeric variables, as stated in data-to-viz.com (see Figure 4).
Figure 4: A distribution chart
Part of a Whole
Part of a whole charts are those that show the relationship of parts to the whole or highlight proportions. These charts compare the proportional contributions within a category, showing the relative value that each data series contributes to the total. Common charts in this category include Treemap, Doughnut, Pie chart, Dendrogram, and Circular packing.
A Treemap (see Figure 5) displays hierarchical data as a set of nested rectangles. Each group is represented by a rectangle, whose area is proportional to its value.
Figure 5: A treemap
Map
Although there is a map chart, it’s part of the larger Map chart type, which contains a number of charts that can represent geographic data. These include Map, Choropleth, Hexbin map, Cartogram, Connection, and Bubble map.
A hexbin map, shown in Figure 6, refers to two different concepts. It can be based on a geospatial object where all regions of the map are represented as hexagons, or it can refer to a 2d density technique that represents the combined distribution of two quantitative variables.
Figure 6: A hexbin map
Flow
You may have heard of a flowchart. That’s a type of diagram that represents an algorithm, workflow, or process. Flow charts also can be defined as a diagramatic representation of an algorithm (step by step approach to solve a task). These include Chord diagram, Network, Sankey, Arc diagram, and Edge bundling.
Some flow charts, like the chord diagram portrayed in Figure 7, is a graphical method of displaying the inter-relationships among data in a matrix. The data are arranged radially around a circle with the relationships between the data points typically drawn as arcs connecting the data.
Figure 7: A guitar chord diagram
Conclusion
There’s a whole world of chart types to discover out there! If you want to find out more about the types covered in today’s article, visit the D3.js Graph Gallery.
