data-visualization/chart-types

21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Chart types overview by purpose

Start by identifying the purpose of the visualization and then choose the appropriate chart type. The Carbon Design System organizes chart types into six categories: Comparisons, Trends, Part-to-whole, Correlations, Connections, and Geospatial overlays.

Comparison chart types available

The Comparisons category includes the following chart types: Simple bar, Grouped bar, Floating bar, Lollipop, Bubble, Radar, and Wordcloud.

Trends chart types available

The Trends category includes the following chart types: Line, Area, Boxplot, Histogram, and Stream (currently disabled).

Part-to-whole chart types available

The Part-to-whole category includes the following chart types: Donut, Pie, Stacked bar, Bullet, Stacked area, Meter, Gauge, Tree map, and Circle pack.

Correlations chart types available

The Correlations category includes the following chart types: Scatter, Heat map, and Parallel coordinates (design only).

Connections chart types available

The Connections category includes the following chart types: Alluvial diagram, Network diagram, and Tree diagram.

Geospatial overlay chart types available

The Geospatial overlays category includes the following chart types: Choropleth map, Proportional symbol map, and Connection map (all are design only).

Stream chart status

The Stream chart is currently disabled in the Carbon Design System.

Design-only chart types

Parallel coordinates, Choropleth map, Proportional symbol map, and Connection map are design-only chart types and do not have production implementations.

Alluvial/Sankey diagrams definition and use

Alluvial or Sankey diagrams are flow diagrams designed to show two indicators of a dataset and how records distribute among them, highlighting correlations. Multiple blocks of two indicators can be placed next to each other to create a wider alluvial diagram. It is crucial to consider that this type of chart does not show correlations between indicators that are not directly connected. Different colors for each block usually emphasize this limitation.

Network diagram purpose and use cases

A network diagram is a way of visually representing network architecture by mapping out network structure with a variety of icons and connecting lines. It is ideal for sharing the layout of a network because the visual presentation makes it easier for users to understand complex connections at a glance. Network diagrams are especially useful for isolating problems or when designing a new system.

Network diagram building blocks and libraries

Carbon Charts offers building blocks for network diagrams in the form of React and Angular components. Carbon Charts does not provide layouts for diagrams. Users can utilize these components alongside graphing libraries such as elkjs, or by composing their own layouts.

Network diagram node types

Network diagrams are comprised of parent and child nodes. Parent nodes convey the story of what happened in an investigation and can be clustered based on relationship type. Child nodes appear under parent nodes and can also be clustered.

Network diagram controls and navigation

Network diagrams use the same scale controls that apply to the rest of the data visualization components, however they appear in a floating tile, enabling the user to zoom and pan simultaneously. It is helpful to include the expand and collapse all nodes feature, which gives users the ability to easily navigate between detailed and high-level views of the diagram.

Parallel coordinates chart definition and purpose

Parallel coordinate charts visualize individual data elements across multiple variables. Each variable corresponds to a vertical axis and each data element is displayed as a series of connected points along the axes. The parallel coordinate chart is the equivalent of a radar chart with axes, making it preferable for many use cases. Its strength is that each variable can be completely different and even have its own scale, with units that can be different.

Parallel coordinates interactive features

Parallel coordinate charts can include hover effects that highlight a specific group or axis to enhance the basic chart. These charts can also include interactive features like the brush component. By clicking and dragging along any axis, you can specify a filter for that dimension.

Tree diagrams and dendrograms support

Carbon Charts supports both tree diagrams and dendrograms. Although the two are very similar, dendrograms tend to offer a more responsive layout for varying screen sizes.

Flow chart types in Carbon Charts

Carbon Charts documentation includes the following flow chart types: Alluvial/sankey diagrams, Network diagrams, Parallel coordinates, and Tree diagrams.

Network diagram React and Angular getting started guides

React getting started guide for network diagrams is available at https://carbon-design-system.github.io/carbon-charts/react/?path=/story/diagrams--start-here. Angular getting started guide is available at https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/diagrams--start-here.

Network diagram example with elkjs

An example of a network diagram using elkjs in React is available at https://codesandbox.io/p/sandbox/carbon-charts-react-elkjs-diagram-b9xyp?file=%2Fsrc%2Findex.js&from-embed.

Carbon Charts roadmap and contributions

Some of the charts in the documentation are not yet included in the carbon-charts repository. To see the roadmap, make feature requests, or contribute, visit the carbon-charts repository at https://github.com/carbon-design-system/carbon-charts.

Give your agent this brain