From 0fd46845b8c26311613226544fa99fe53e856bd2 Mon Sep 17 00:00:00 2001 From: Natasha DeCoste Date: Wed, 19 May 2021 16:45:20 -0400 Subject: [PATCH 1/3] update charts version --- package.json | 2 +- src/data/data-visualization/index.js | 7 ++-- .../chart-types/images/circle-pack.svg | 35 +++++++++++++++++++ .../data-visualization/chart-types/index.mdx | 10 ++++++ .../complex-charts/index.mdx | 20 +++++++++++ yarn.lock | 18 +++++----- 6 files changed, 78 insertions(+), 14 deletions(-) create mode 100644 src/pages/data-visualization/chart-types/images/circle-pack.svg diff --git a/package.json b/package.json index 48e2be0c1d3..340842e0bee 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/data/data-visualization/index.js b/src/data/data-visualization/index.js index 561e521d140..9d9f8c6e660 100644 --- a/src/data/data-visualization/index.js +++ b/src/data/data-visualization/index.js @@ -8,7 +8,6 @@ export const complexChartDemoGroups = storybookDemoGroups.filter( (demoGroup) => demoGroup.type === 'complex-chart' ); -export const getDemoGroupByTitle = (title) => - storybookDemoGroups.find( - (demoGroup) => demoGroup.title.toLowerCase() === title.toLowerCase() - ); +export const getDemoGroupByTitle = (title) => storybookDemoGroups.find( + (demoGroup) => demoGroup.title.toLowerCase().replace(/\s/g, '') === title.toLowerCase() +); \ No newline at end of file diff --git a/src/pages/data-visualization/chart-types/images/circle-pack.svg b/src/pages/data-visualization/chart-types/images/circle-pack.svg new file mode 100644 index 00000000000..114c90ede82 --- /dev/null +++ b/src/pages/data-visualization/chart-types/images/circle-pack.svg @@ -0,0 +1,35 @@ + + + circle_pack + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index ce0aecd245c..2fbb17614c7 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -238,6 +238,16 @@ appropriate chart type. + + +![GATSBY_EMPTY_ALT](images/circle-pack.svg) + + + + ## Correlations diff --git a/src/pages/data-visualization/complex-charts/index.mdx b/src/pages/data-visualization/complex-charts/index.mdx index 23da53ebf5e..542354539b9 100755 --- a/src/pages/data-visualization/complex-charts/index.mdx +++ b/src/pages/data-visualization/complex-charts/index.mdx @@ -35,6 +35,7 @@ go to the Network diagrams Parallel coordinates Tree maps +Circle packs Geospatial charts @@ -333,6 +334,25 @@ country, tourism for that country may fall below its annual average. +## 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. + +
+ +
+ ## Geospatial charts ### Geographic overlays diff --git a/yarn.lock b/yarn.lock index 0007d613640..40817528317 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" From ec08944b685aa7cdd3110c960adb3a52cd840109 Mon Sep 17 00:00:00 2001 From: Natasha DeCoste Date: Wed, 19 May 2021 17:26:18 -0400 Subject: [PATCH 2/3] fix card --- src/pages/data-visualization/chart-types/index.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index 2fbb17614c7..0696d5f0f97 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -243,6 +243,7 @@ appropriate chart type. title="Circle pack" href="/data-visualization/complex-charts#circle-packs" > + ![GATSBY_EMPTY_ALT](images/circle-pack.svg) From 42f791996b508d53a8d454d44542fa9a3f8a76cd Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 20 May 2021 09:31:58 -0500 Subject: [PATCH 3/3] chore: format --- src/data/data-visualization/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/data/data-visualization/index.js b/src/data/data-visualization/index.js index 9d9f8c6e660..0bea7794811 100644 --- a/src/data/data-visualization/index.js +++ b/src/data/data-visualization/index.js @@ -8,6 +8,8 @@ export const complexChartDemoGroups = storybookDemoGroups.filter( (demoGroup) => demoGroup.type === 'complex-chart' ); -export const getDemoGroupByTitle = (title) => storybookDemoGroups.find( - (demoGroup) => demoGroup.title.toLowerCase().replace(/\s/g, '') === title.toLowerCase() -); \ No newline at end of file +export const getDemoGroupByTitle = (title) => + storybookDemoGroups.find( + (demoGroup) => + demoGroup.title.toLowerCase().replace(/\s/g, '') === title.toLowerCase() + );