{
    "componentChunkName": "component---src-pages-data-visualization-charts-mdx",
    "path": "/data-visualization/charts/",
    "result": {"pageContext":{"frontmatter":{"title":"Charts","description":"Charts are typically divided into categories based on their goals, aesthetics or visual features. Since charts can be versatile and used in different ways, details and features of these categories are explained and contextualized here. Use these best practices as you create data visualizations."},"relativePagePath":"/data-visualization/charts.mdx","titleType":"append","MdxNode":{"id":"d75caad3-524a-5100-a7ad-2b90f1b14396","children":[],"parent":"4c676352-737b-5a06-bbf6-786c2b38e844","internal":{"content":"---\ntitle: Charts\ndescription: Charts are typically divided into categories based on their goals, aesthetics or visual features. Since charts can be versatile and used in different ways, details and features of these categories are explained and contextualized here. Use these best practices as you create data visualizations.\n---\n\nimport OverviewCard from \"../../components/OverviewCard\";\n\n<PageDescription>\n\nCharts are typically divided into categories based on their goals, aesthetics or visual features. Since charts can be versatile and used in different ways, details and features of these categories are explained and contextualized here. Use these best practices as you create data visualizations.\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Comparisons</AnchorLink>\n  <AnchorLink>Trends</AnchorLink>\n  <AnchorLink>Part to whole</AnchorLink>\n  <AnchorLink>Correlations</AnchorLink>\n  <AnchorLink>Relationships and connections</AnchorLink>\n  <AnchorLink>Maps</AnchorLink>\n</AnchorLinks>\n\n## Comparisons\n\nCharts designed for comparison aim to visualize differences between elements. Most of the time comparisons rely on the ability of the human eye to identify longer or bigger shapes with very little or no effort. Side-by-side positioning and alignment of the visual elements make comparisons even easier. These charts are used for time-based data, for example, units sold per day or worked hours per month. They are also used for categorized data, for example, revenue by market or sold units by team.\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Simple bar\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(simple)\"\n    >\n\n![simple bar chart](/images/charts/bar.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Grouped bar\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(grouped)\"\n    >\n\n![grouped chart](/images/charts/bargrouped.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Floating bar\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(floating)\"\n    >\n\n![floating bar](/images/charts/barfloating.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Lollipop\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#lollipop\"\n    >\n\n![lollipop](/images/charts/lollipop.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Bubble\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#bubble\"\n    >\n\n![bubble chart](/images/charts/bubble.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Radar\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#radar\"           \n    >\n\n![radar chart](/images/charts/radar.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Wordcloud\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#word-cloud\"           \n    >\n\n![wordcloud](/images/charts/wordcloud.svg)\n\n</OverviewCard>\n</Column>\n\n</Row>\n\n\n## Trends\n\nTrend charts represent data along with the time dimension. Use them mainly to track changes over periods of time of varying duration and scale. They rely on direction to show the evolution of consecutive values and might be influenced by different cultural contexts. These charts are used for time-based data, for example, revenue by quarter or rainfall per day.\n\n<Row className=\"overview-card-group\">\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Line\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#line\"\n    >\n\n![line chart](/images/charts/line.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Area\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#area-(simple)\"\n    >\n\n![area chart](/images/charts/area.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Boxplot\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#boxplot\"\n    >\n\n![boxplot chart](/images/charts/boxplot.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Histogram\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#histogram\"\n    >\n\n![histogram](/images/charts/histogram.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stream\"\n    disabled\n    >\n\n![stream chart](/images/charts/stream.svg)\n\n</OverviewCard>\n</Column>\n\n</Row>\n\n## Part to whole\n\nThe goal of these charts is to show the inner subdivision of a value among different categories or groups. Mostly used to represent percentages, they can also be used for absolute values. Their function does not depend on the graphic shapes used, such as pie, donut, square and so on. These charts are used for categorized data, for example, subdivision of revenue by product or percentage of users by browser.\n\n<Row className=\"overview-card-group\">\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Donut\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#donut\"\n    >\n\n![Donut](/images/charts/donut.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Pie\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#pie\"\n    >\n\n![Pie](/images/charts/pie.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stacked bar\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts/#bar-(stacked)\"\n    >\n\n![stacked bar](/images/charts/stacked-bar-horizontal.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Bullet\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts/#bullet\"\n    >\n\n![bullet chart](/images/charts/bullet.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stacked area\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts/#area-(stacked)\"\n    >\n\n![stacked area](/images/charts/areastack.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Meter\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts/#meter\"\n    >\n\n![meter](/images/charts/meter.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Gauge\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts/#gauge\"\n    >\n\n![gauge](/images/charts/gauge.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm>\n <OverviewCard\n    title=\"Tree map\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#tree-maps\"\n    >\n\n![tree map](/images/charts/treemap.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm>\n <OverviewCard\n    title=\"Circle pack\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#circle-packs\"\n    >\n\n![circle pack](/images/charts/circle-pack.svg)\n\n</OverviewCard>\n</Column>\n\n</Row>\n\n## Correlations\n\nThese charts are better suited to highlight the possible correlation between two or more indicators and how they might affect each other. Correlation charts have the final goal of making it easier for the human eye to spot combined behaviors. These charts are used for multidimensional data, for example, correlation between phone-call duration and customer satisfaction.\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm>\n <OverviewCard\n    title=\"Scatterplot\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#scatter\"\n    >\n\n![scatter plot](images/charts/scatter.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Heatmap\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#heat-maps\"\n    >\n\n![Heat map](images/charts/heatmap.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Parallel coordinates\"\n    tag=\"Design only\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#parallel-coordinates\"\n    >\n\n![parallel  coordinates](images/charts/parallel.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Relationships and connections\n\nCharts included in this category represent hierarchies. The intent is to explain the role of an element within an ecosystem or to observe the inner nature of a subject in different phases and states of a process. These charts are used for categorized data, for example, country of origin of asylum seeker and gender. They are also used for multidimensional data, for example, number of active users by testing phase.\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Alluvial diagram\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#alluvialsankey-diagrams\"\n    >\n\n![alluvial](images/charts/alluvial.svg)\n\n</OverviewCard>\n</Column> \n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Network diagram\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#network-diagrams\"\n    >\n\n![network diagram](images/charts/network-diagram.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Tree diagram\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#tree-diagrams\"\n    >\n\n![tree diagram](images/charts/treediagram_new.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Maps\n\nMaps are the easiest and most immediate way to communicate geolocated information. Maps allow the user to recognize areas and places, to understand the geographical context of the topic and to identify patterns, all relying on the position of elements. These charts are used for geographical data, for example, voters by county or average wage by neighborhood.\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Choropleth map\"\n    tag=\"Design only\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#geographic-overlays\"\n    >\n\n![choropleth](images/charts/geo-choropleth.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Proportional symbol\"\n    tag=\"Design only\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#proportional-symbol-map\"\n    >\n\n![proportional](images/charts/geo-proportion.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Connecting lines\"\n    tag=\"Design only\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#connection-map\"\n    >\n\n![connecting lines](images/charts/geo-connection.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n\n\n\n\n\n\n\n\n\n\n\n","type":"Mdx","contentDigest":"51f0ca7c610bd74b1c79e11e550cd78c","owner":"gatsby-plugin-mdx","counter":1915},"frontmatter":{"title":"Charts","description":"Charts are typically divided into categories based on their goals, aesthetics or visual features. Since charts can be versatile and used in different ways, details and features of these categories are explained and contextualized here. Use these best practices as you create data visualizations."},"exports":{},"rawBody":"---\ntitle: Charts\ndescription: Charts are typically divided into categories based on their goals, aesthetics or visual features. Since charts can be versatile and used in different ways, details and features of these categories are explained and contextualized here. Use these best practices as you create data visualizations.\n---\n\nimport OverviewCard from \"../../components/OverviewCard\";\n\n<PageDescription>\n\nCharts are typically divided into categories based on their goals, aesthetics or visual features. Since charts can be versatile and used in different ways, details and features of these categories are explained and contextualized here. Use these best practices as you create data visualizations.\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Comparisons</AnchorLink>\n  <AnchorLink>Trends</AnchorLink>\n  <AnchorLink>Part to whole</AnchorLink>\n  <AnchorLink>Correlations</AnchorLink>\n  <AnchorLink>Relationships and connections</AnchorLink>\n  <AnchorLink>Maps</AnchorLink>\n</AnchorLinks>\n\n## Comparisons\n\nCharts designed for comparison aim to visualize differences between elements. Most of the time comparisons rely on the ability of the human eye to identify longer or bigger shapes with very little or no effort. Side-by-side positioning and alignment of the visual elements make comparisons even easier. These charts are used for time-based data, for example, units sold per day or worked hours per month. They are also used for categorized data, for example, revenue by market or sold units by team.\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Simple bar\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(simple)\"\n    >\n\n![simple bar chart](/images/charts/bar.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Grouped bar\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(grouped)\"\n    >\n\n![grouped chart](/images/charts/bargrouped.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Floating bar\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(floating)\"\n    >\n\n![floating bar](/images/charts/barfloating.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Lollipop\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#lollipop\"\n    >\n\n![lollipop](/images/charts/lollipop.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Bubble\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#bubble\"\n    >\n\n![bubble chart](/images/charts/bubble.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Radar\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#radar\"           \n    >\n\n![radar chart](/images/charts/radar.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Wordcloud\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#word-cloud\"           \n    >\n\n![wordcloud](/images/charts/wordcloud.svg)\n\n</OverviewCard>\n</Column>\n\n</Row>\n\n\n## Trends\n\nTrend charts represent data along with the time dimension. Use them mainly to track changes over periods of time of varying duration and scale. They rely on direction to show the evolution of consecutive values and might be influenced by different cultural contexts. These charts are used for time-based data, for example, revenue by quarter or rainfall per day.\n\n<Row className=\"overview-card-group\">\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Line\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#line\"\n    >\n\n![line chart](/images/charts/line.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Area\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#area-(simple)\"\n    >\n\n![area chart](/images/charts/area.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Boxplot\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#boxplot\"\n    >\n\n![boxplot chart](/images/charts/boxplot.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Histogram\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#histogram\"\n    >\n\n![histogram](/images/charts/histogram.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stream\"\n    disabled\n    >\n\n![stream chart](/images/charts/stream.svg)\n\n</OverviewCard>\n</Column>\n\n</Row>\n\n## Part to whole\n\nThe goal of these charts is to show the inner subdivision of a value among different categories or groups. Mostly used to represent percentages, they can also be used for absolute values. Their function does not depend on the graphic shapes used, such as pie, donut, square and so on. These charts are used for categorized data, for example, subdivision of revenue by product or percentage of users by browser.\n\n<Row className=\"overview-card-group\">\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Donut\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#donut\"\n    >\n\n![Donut](/images/charts/donut.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Pie\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#pie\"\n    >\n\n![Pie](/images/charts/pie.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stacked bar\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts/#bar-(stacked)\"\n    >\n\n![stacked bar](/images/charts/stacked-bar-horizontal.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Bullet\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts/#bullet\"\n    >\n\n![bullet chart](/images/charts/bullet.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Stacked area\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts/#area-(stacked)\"\n    >\n\n![stacked area](/images/charts/areastack.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Meter\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts/#meter\"\n    >\n\n![meter](/images/charts/meter.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Gauge\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts/#gauge\"\n    >\n\n![gauge](/images/charts/gauge.svg)\n\n</OverviewCard>\n</Column>\n\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm>\n <OverviewCard\n    title=\"Tree map\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#tree-maps\"\n    >\n\n![tree map](/images/charts/treemap.svg)\n\n</OverviewCard>\n</Column>\n  \n  <Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm>\n <OverviewCard\n    title=\"Circle pack\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#circle-packs\"\n    >\n\n![circle pack](/images/charts/circle-pack.svg)\n\n</OverviewCard>\n</Column>\n\n</Row>\n\n## Correlations\n\nThese charts are better suited to highlight the possible correlation between two or more indicators and how they might affect each other. Correlation charts have the final goal of making it easier for the human eye to spot combined behaviors. These charts are used for multidimensional data, for example, correlation between phone-call duration and customer satisfaction.\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm>\n <OverviewCard\n    title=\"Scatterplot\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/simple-charts#scatter\"\n    >\n\n![scatter plot](images/charts/scatter.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Heatmap\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#heat-maps\"\n    >\n\n![Heat map](images/charts/heatmap.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Parallel coordinates\"\n    tag=\"Design only\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#parallel-coordinates\"\n    >\n\n![parallel  coordinates](images/charts/parallel.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Relationships and connections\n\nCharts included in this category represent hierarchies. The intent is to explain the role of an element within an ecosystem or to observe the inner nature of a subject in different phases and states of a process. These charts are used for categorized data, for example, country of origin of asylum seeker and gender. They are also used for multidimensional data, for example, number of active users by testing phase.\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Alluvial diagram\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#alluvialsankey-diagrams\"\n    >\n\n![alluvial](images/charts/alluvial.svg)\n\n</OverviewCard>\n</Column> \n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Network diagram\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#network-diagrams\"\n    >\n\n![network diagram](images/charts/network-diagram.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Tree diagram\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#tree-diagrams\"\n    >\n\n![tree diagram](images/charts/treediagram_new.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n## Maps\n\nMaps are the easiest and most immediate way to communicate geolocated information. Maps allow the user to recognize areas and places, to understand the geographical context of the topic and to identify patterns, all relying on the position of elements. These charts are used for geographical data, for example, voters by county or average wage by neighborhood.\n\n<Row className=\"overview-card-group\">\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Choropleth map\"\n    tag=\"Design only\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#geographic-overlays\"\n    >\n\n![choropleth](images/charts/geo-choropleth.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Proportional symbol\"\n    tag=\"Design only\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#proportional-symbol-map\"\n    >\n\n![proportional](images/charts/geo-proportion.svg)\n\n</OverviewCard>\n</Column>\n<Column  colMax={3} colXl={4} colLg={4} colMd={4} colSm={2} noGutterSm >\n <OverviewCard\n    title=\"Connecting lines\"\n    tag=\"Design only\"\n    href=\"https://www.carbondesignsystem.com/data-visualization/complex-charts#connection-map\"\n    >\n\n![connecting lines](images/charts/geo-connection.svg)\n\n</OverviewCard>\n</Column>\n</Row>\n\n\n\n\n\n\n\n\n\n\n\n\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/data-visualization/charts.mdx"}}},
    "staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}