Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update carbon-charts version/add new demos #2300

Merged
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"gatsby-remark-images": "^3.3.33"
},
"dependencies": {
"@carbon/charts-react": "0.41.62",
"@carbon/charts-react": "0.41.65",
"@carbon/elements": "^10.34.0",
"@carbon/icons": "^10.32.0",
"@carbon/icons-react": "^10.32.0",
Expand Down
3 changes: 2 additions & 1 deletion src/data/data-visualization/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@ export const complexChartDemoGroups = storybookDemoGroups.filter(

export const getDemoGroupByTitle = (title) =>
storybookDemoGroups.find(
(demoGroup) => demoGroup.title.toLowerCase() === title.toLowerCase()
(demoGroup) =>
demoGroup.title.toLowerCase().replace(/\s/g, '') === title.toLowerCase()
);
35 changes: 35 additions & 0 deletions src/pages/data-visualization/chart-types/images/circle-pack.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions src/pages/data-visualization/chart-types/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,17 @@ appropriate chart type.
</OverviewCard>
</Column>

<Column colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm>
<OverviewCard
title="Circle pack"
href="/data-visualization/complex-charts#circle-packs"
>

![GATSBY_EMPTY_ALT](images/circle-pack.svg)

</OverviewCard>
</Column>

</Row>

## Correlations
Expand Down
20 changes: 20 additions & 0 deletions src/pages/data-visualization/complex-charts/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ go to the
<AnchorLink>Network diagrams</AnchorLink>
<AnchorLink>Parallel coordinates</AnchorLink>
<AnchorLink>Tree maps</AnchorLink>
<AnchorLink>Circle packs</AnchorLink>
<AnchorLink>Geospatial charts</AnchorLink>

</AnchorLinks>
Expand Down Expand Up @@ -333,6 +334,25 @@ country, tourism for that country may fall below its annual average.
</Column>
</Row>

## Circle packs

A circle pack is a hierarchical visualization of data. It’s equivalent to a
Treemap or a Dendrogram—where each node of the tree is represented as a circle
and sub-nodes are represented as circles within a parent. The size of each
circle can also be used to represent an additional arbitrary value, such as
population or file size. Color may also be used to assign categories or to
represent an additional variable. Although they’re not as space efficient,
Circle Packs reveal hierarchical structure better than Treemaps.

For Circle Packs with more than two levels of hierarchy, zoom functionality
allows users to explore the data without compromising the contrast accessibility
of the chart. We advise against disabling the zoom functionality except in cases
such as preview charts, cards that expand to full view with the chart, etc.

<div>
<ChartDemoGroup demoGroup={getDemoGroupByTitle('circlepack')} light={true} />
</div>

## Geospatial charts

### Geographic overlays
Expand Down
18 changes: 9 additions & 9 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1144,18 +1144,18 @@
lodash "^4.17.19"
to-fast-properties "^2.0.0"

"@carbon/charts-react@0.41.62":
version "0.41.62"
resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.41.62.tgz#c820b1d72b1894370bd7b8f82006775dbfd70ddf"
integrity sha512-425nf0TlpR1ra85f7cUz0wt29GyxG/wB0J98/Zqig5e1pOcQOoARV/9e7X+w1yZlpXB3BGQ3+W7kkRTy+PKkXQ==
"@carbon/charts-react@0.41.65":
version "0.41.65"
resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.41.65.tgz#fe73ff3c102422c82fdf4e11c1f7c52880b0d00c"
integrity sha512-9Ex7y4fEJNcs57+giQV8Em+7DIcefkdPgc0FXVtRSL4o1VurLlH2vVCB7eW8G2/iKd8irat3ByX66jUfX/FfnA==
dependencies:
"@carbon/charts" "^0.41.62"
"@carbon/charts" "^0.41.65"
"@carbon/telemetry" "0.0.0-alpha.6"

"@carbon/charts@^0.41.62":
version "0.41.62"
resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.62.tgz#9d0f15f83f1be0383b2e108c9060fb79ee63a426"
integrity sha512-vVXbIvRg+L+tpSlyMra+wpqcmH5jAIObxLJxmhCBDYF7QHcBYRkx8n2BjUxsWwIRnGHpTZpNyYUaxDzqN9OqoA==
"@carbon/charts@^0.41.65":
version "0.41.65"
resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.65.tgz#e3bbea58db800c5d7b380a9f5ac43e2fa16aa3fd"
integrity sha512-NX1NCNAMo2ZJf5OMIUxmX9Q4uvlgThA+uJw7IILY4HmQJA3eQYPdKzczQfcwGBHbiaF76T8zOc5SEeaa5awfMA==
dependencies:
"@carbon/colors" "10.15.0"
"@carbon/telemetry" "0.0.0-alpha.6"
Expand Down