Complex charts
Complex charts are a powerful way to display complex data sets. While less intuitive than basic charts, the visualizations should still tell a story the user can understand.
Alluvial/sankey diagrams
Alluvial, or Sankey diagrams, are a type flow diagram 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 creating a wider alluvial diagram but it’s crucial to consider that this specific kind of chart does not show correlations between indicators that are not directly connected. This is usually emphasized using a different set of colors for each block.
![Alluvial diagram Alluvial diagram](/static/31a39ed0fca96c10f87cd45903089fd6/3cbba/01_adv_alluvial_928.png)
Example of alluvial diagram made with two blocks
![Alluvial node hover detail Alluvial node hover detail](/static/5303345c7f0593eb94118b716c57079e/a5df1/02_adv_alluvial_detail_288.png)
Detail of an alluvial diagram on node hover
![Alluvial link hover detail Alluvial link hover detail](/static/6735f41b59dcecc4573fbaa8b8f00466/a5df1/03_adv_alluvial_288.png)
Detail of an alluvial diagram on link hover
Heat maps
A heat map is a two-dimensional visualization in which individual values contained in a matrix are represented as colors. This technique makes it easy to visualize complex data at a glance. When it comes to heat maps, the most common color ranges are expressed in either sequential and diverging color scales according to the type of data represented.
Sequential scales
Sequential scales use a blended progression, typically of a single color, from the lowest contrast to the highest contrast values, representing lows to highs. It’s best practice to use a sequential scale with values that are all positive or all negative. Sequential heat maps can leverage the full range of the palette (from 10–100) to maximize contrast. Please note that the 3:1 minimum contrast requirement does not apply to heat maps.
![Sequential heat map Sequential heat map](/static/ff79bbcd08076503c8e589e3c686ad27/3cbba/04_adv_heatmap_928.png)
When cells get extremely small, a white border can hinder the intended effect.
Heat map behaviors
Axis ticks and legend can be used to leverage the chart potential giving the users additional information and dedicated kinds of interaction.
![Heat map hover detail Heat map hover detail](/static/454897de9fa50816930331e2025a2265/dde5a/04a_adv_heatmap_detail_288.png)
Exploration of a domain axis hover behavior
![Heat map interactive legend detail Heat map interactive legend detail](/static/cf0394fdc9bd4b3f900c44138098b884/a5df1/04b_adv_heatmap_detail_288.png)
Exploration of an interactive legend
Divergent scales
Diverging scales show color progression in two directions: dialing down the contrast of the first hue from one end to a neutral color at the midpoint, then increasing the contrast of the second hue to the other end of the scale. The neutral midpoint is often referred to as the “inflection point” (for example, a 0 value midway between -100 and +100).
Divergent scales require three colors for their correspondent values (min, max, and inflection point) and Carbon has provided two approved palettes for divergent visualizations. Although the examples here use the “discrete” (stepped scale) provided by the Carbon palette, divergent heat maps often leverage “continuous” values (gradients) to accommodate situations that require more than 10 values.
Inflection points
While min/max values can be automatically detected from data, inflection points can vary depending on data type. We default to zero in order to accommodate the most common cases and include a feature flag within the code to specify exceptions. The data for a divergent heat map does not need to be symmetrical on either side of the inflection point. For example, the data set could have a zero value between -20 and +100 as well.
![Divergent heat map Divergent heat map](/static/624c17a057f5a6125cd426ff8d4d782e/3cbba/05_adv_heatmap_928.png)
Example of a symmetrical divergent heat map with optional cell borders
Network diagrams
A network diagram is a way of visually representing network architecture. It maps out network structure with a variety of icons and connecting lines. It’s ideal for sharing the layout of a network because the visual presentation makes it easier for users to understand complex connections at a glance. These diagrams are especially useful for isolating problems or when designing a new system.
The example below illustrates a swimlane graph with expandable nodes developed by the Security team. In products like QRadar these diagrams are often paired with side and filter panels. However, a simplified version of the component is available in the carbon-charts repository for IBM designers to adapt.
![Network diagram swimlane graph, organic view Network diagram swimlane graph, organic view](/static/22901bd3558469922bb747c4bde9c00c/3cbba/06_adv_tree_928.png)
Example of a network diagram in a swimlane graph from QRadar
Node types
This specific network diagram is comprised of parent and child nodes. In the QRadar example, 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 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’s also 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.
![Floating zoom and pan detail Floating zoom and pan detail](/static/3a06ad4984796b6f835419a2f83e8dd2/778f8/07_adv_tree_detail_288.png)
Detail of floating zoom and pan functionality
![Child nodes detail Child nodes detail](/static/9b4679d088dfe9fed69dfab44f5cdcc2/a5df1/08_adv_tree_detail_288.png)
Detail of child nodes clustered underneath master parent cluster
Parallel coordinates
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 (the units can even be different).
![Parallel coordinate plot Parallel coordinate plot](/static/0b7998591f2d668917efe7da396cf58c/3cbba/new_adv_parallel_928.png)
Parallel coordinate behaviors
Hover effects that highlight a specific group or axis can be added to enhance basic parallel coordinate charts. 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. The brush component is also used in the updated scatterplot matrix example. See the detail below.
![Brush component detail Brush component detail](/static/de2c4c2931f012fa8167981155c6e1a3/a5df1/new_adv_parallel_detail_01_288.png)
Detail of brush component behavior
![Tooltip detail Tooltip detail](/static/d40b68452c437206eaaa76c1dff4aab4/a5df1/new_adv_parallel_detail_02_288.png)
Detail of a comparative tooltip interaction on hover
Tree maps
Tree maps can work for visualizing a part-to-whole relationship among a large number of categories—as long as the data is hierarchical and exact comparisons between the categories is not a primary concern.
When dealing with large amounts of data in a constrained space, tree structured nodelink diagrams (like the network diagram shown above), grow too complex to be useful. Tree maps provide an attractive alternative by maintaining a hierarchical structure while displaying rectangular quantities for each category and subcategory via area size.
Divergent tree maps
Divergent tree maps combine Carbon’s divergent color palette with the hierarchical structure of a tree map. Each rectangle has an area proportional to a specified dimension of the data, but the rectangles can also be colored independently according to an additional indicator.
As with heat maps, the diverging palette shows color progression in either direction from an inflection point (for example, a 0 value midway between -10 and +10). In the example below, the inflection point is simply an average. Tourism can be mapped by the number of visitors to a certain country, but the visualization can also compare this data to a yearly average. For instance, even though one country may have a lot of visitors compared to another country, tourism for that country may fall below its annual average.
![Basic tree map Basic tree map](/static/afc28af8048592b7daac89f8a2b1a239/3cbba/new_adv_treemap_02_928.png)
Example of a divergent tree map adding color as a second variable to a basic tree map structure
![Basic treemap tooltip detail Basic treemap tooltip detail](/static/15a2b4dc177f70593f81fdb179b1d43a/a5df1/new_adv_treemap_a_288.png)
Detail of a tooltip on a basic treemap
![Tooltip detail Tooltip detail](/static/753b0a474ff18cc4bf4d612288a90ca8/a5df1/new_adv_treemap_b_288.png)
Detail of a comparative tooltip on a divergent tree map
Circle packs
Circle packs can lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Monochromatic circle packs
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Geospatial charts
Geographic overlays
Choropleth map
A map that uses differences in shading, coloring, or the placing of symbols within predefined areas to indicate the average values of a property or quantity in those areas.
![Choropleth map Choropleth map](/static/5f6e8cd963ba8dff0584e4def2e6b090/3cbba/09_adv_geo_choropleth_928.png)
Proportional symbol map
Symbols driven by data are overlayed in geographical regions. A bubble is the symbol most commonly used in this instance—with the area of the circle proportional to its value in the dataset.
![Proportional symbol map Proportional symbol map](/static/ca725fdde5c50012ba0a3010864e6121/3cbba/10_adv_geo_prop_sym_928.png)
Connection map
Connection Maps are drawn by connecting points placed on a map by straight or curved lines.
While Connection Maps are great for showing connections and relationships geographically, they can also be used to display map routes through a single chain of links. Connection Maps can also be useful in revealing spatial patterns through the distribution of connections or by how concentrated connections are on a map.
![Connecting lines on a spatial map Connecting lines on a spatial map](/static/5ddc0e651f83e2c213bc51ccb863122c/3cbba/11_adv_geo_connections_928.png)
Geospatial distortions
Density-equalizing cartograms
Density-equalizing cartograms are the most common type of cartogram. In this situation the mapping variable takes the place of the land area or distance in the map, causing the map to become distorted in proportion to the substitute variable.
Cartograms are useful for visualizing populations through different lenses — for instance, ethnicities, political parties, or religious affiliation. Carbon does not have a coded component for cartograms but online generators like go-cart.io allow you to upload your own data sets and download an .svg file.
![Equal area map Equal area map](/static/b69377db7fa305ad637bdec8b3fe6e55/6e9cd/12a_adv_cartogram_448.png)
![Cartogram of population Cartogram of population](/static/335148aaf1fd0c4019d80656e3a96ad8/6e9cd/12b_adv_cartogram_448.png)
Dorling cartograms
The Dorling Cartogram is a technique for representing data for areas that avoids geography in favor of (normally) a geometric shape that represents the unit areas. Circles are usually chosen since they can be neatly positioned.
As with the density-equalizing cartogram above, the larger the total population, the larger the representation of the country.
![Dorling cartogram with squares Dorling cartogram with squares](/static/0e01632180424848229ae5fd33f9cae1/6e9cd/13_adv_geo_dorling_a_448.png)
![Dorling cartogram with circles Dorling cartogram with circles](/static/6b52dd8b9227cc4959b0ddb56ab4fc31/6e9cd/14_adv_geo_dorling_b_448.png)
Mapbox
For more dynamic, real-time mapping, Carbon has created four themes using Mapbox. Mapbox is a developer platform used across industries to create custom maps that can be easily integrated into websites and apps. These themes can be used as is, or in conjunction with Carbon-styled data points.
These styles can be used as is, or as a backdrop for other geospatial data sets. For more complex data sets that require the full breadth of the Carbon charts palette, we suggest using either the White or the Gray 100 style for the most accessible results.
![Mapbox white style Mapbox white style](/static/b89582b4f1011a1ada18b2c3ed619aa7/3cbba/15_adv_geo_mapbox_a_928.png)
Example of a Carbon’s White theme style in Mapbox
![Mapbox g10 style Mapbox g10 style](/static/9a1fc83b99b2552561b24e9da4b01991/dde5a/16_adv_geo_mapbox_b_288.png)
Example of a Carbon’s Gray 10 theme style in Mapbox
![Mapbox g90 style Mapbox g90 style](/static/d6a12c7223ac269e990cc4d9cc78c2b0/a5df1/17_adv_geo_mapbox_c_288.png)
Example of a Carbon’s Gray 90 theme style in Mapbox
![Mapbox g100 style Mapbox g100 style](/static/43eaa8ae9e055bfa6627ef0279643134/a5df1/18_adv_geo_mapbox_d_288.png)
Example of a Carbon’s Gray 100 theme style in Mapbox
Applying the Carbon Mapbox themes
For instructions on how to use Mapbox GL JS please read this Mapbox quickstart documentation.
In addition to the instructions above, when initializing a new map you can apply any of the 4 Carbon themes by providing the stylesheet location to the library.
Theme | Style sheet location |
---|---|
White | mapbox://styles/carbondesignsystem/ck7c8cfpp08h61irrudv7f1xg |
Gray 10 | mapbox://styles/carbondesignsystem/ck7c8ce1y05h61ipb2fixfe76 |
Gray 90 | mapbox://styles/carbondesignsystem/ck7c8ccac08jj1imhvd2g4qfb |
Gray 100 | mapbox://styles/carbondesignsystem/ck7c89g8708gy1imlz9g5o6h9 |
<script>mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';var map = new mapboxgl.Map({// Applying the G100 theme belowstyle: 'mapbox://styles/carbondesignsystem/ck7c89g8708gy1imlz9g5o6h9',// Include existing options below// ...// ...// ...