Skip to content

Commit

Permalink
demos(dataviz): add alluvial chart (#2546)
Browse files Browse the repository at this point in the history 
* docs(dataviz): add histogram

* demos(dataviz): add alluvial chart
  • Loading branch information
@theiliad
theiliad committed Sep 16, 2021
1 parent a4ca936 commit 7731052
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 38 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"@carbon/icons-react": "^10.38.0"
},
"dependencies": {
"@carbon/charts-react": "0.48.4",
"@carbon/charts-react": "0.49.0",
"@carbon/elements": "^10.42.0",
"@carbon/icons": "^10.38.0",
"@carbon/icons-react": "^10.38.0",
Expand Down
1 change: 0 additions & 1 deletion src/pages/data-visualization/chart-types/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,6 @@ appropriate chart type.
<OverviewCard
title="Alluvial diagram"
href="/data-visualization/complex-charts#alluvialsankey-diagrams"
tag="Design only"
>

![GATSBY_EMPTY_ALT](images/alluvial.svg)
Expand Down
30 changes: 3 additions & 27 deletions src/pages/data-visualization/complex-charts/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,33 +53,9 @@ 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.

<Row>
<Column colLg={12} colMd={8} colSm={4} >

![Alluvial diagram](images/01_adv_alluvial_928.png)

<Caption>Example of alluvial diagram made with two blocks</Caption>

</Column>
</Row>

<Row>
<Column colLg={4} colMd={4} colSm={4} >

![Alluvial node hover detail](images/02_adv_alluvial_detail_288.png)

<Caption>Detail of an alluvial diagram on node hover</Caption>

</Column>

<Column colLg={4} colMd={4} colSm={4} >

![Alluvial link hover detail](images/03_adv_alluvial_288.png)

<Caption>Detail of an alluvial diagram on link hover</Caption>

</Column>
</Row>
<div>
<ChartDemoGroup demoGroup={getDemoGroupByTitle('alluvial')} light={true} />
</div>

## Heat maps

Expand Down
51 changes: 42 additions & 9 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1081,25 +1081,26 @@
"@babel/helper-validator-identifier" "^7.14.9"
to-fast-properties "^2.0.0"

"@carbon/charts-react@0.48.4":
version "0.48.4"
resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.48.4.tgz#b4518d27c6c8e044564d300fa609189b0d73d230"
integrity sha512-ucpk4uXxmp/vdzJli3A6EzPL6P5Tbp6tD1utFrn8JKAQhtzye+EmuP/LlCSayLm3G/pcAizDntMsoHzjDjVJiQ==
"@carbon/charts-react@0.49.0":
version "0.49.0"
resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.49.0.tgz#3b66184267f160faeb6c51071447feb271462d1e"
integrity sha512-t1kCYOuTX2CbrSRQW+9tL+zG0SkJFCMOzG3JG3ZlVNccsouNkfUtkKZll6btEM6gusxpaFHtJSdtYUnC5koICA==
dependencies:
"@carbon/charts" "^0.48.4"
"@carbon/charts" "^0.49.0"
"@carbon/icons-react" "^10.32.0"
"@carbon/telemetry" "0.0.0-alpha.6"

"@carbon/charts@^0.48.4":
version "0.48.4"
resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.48.4.tgz#d98deef52ee4d15c19188f7fc6cbba88f04189d8"
integrity sha512-jga2T+RHHCMnyhte8e7B/85w4UcmVrA/iJs4KczstiCUDixgYZUcupCC/4lg89m1J10dkgNEHrYNr9FiV2ZRgw==
"@carbon/charts@^0.49.0":
version "0.49.0"
resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.49.0.tgz#bf226d5ec3eb69cacbd950a2c99cc23f6c4f8e8a"
integrity sha512-lmoM509u4BSjv5y7gEjQ8WlBKpSGM0+XYR46Ft3lWtTho6PE58ccxv+94taUnjybqyorWd4geAGDyJ5GfWhenA==
dependencies:
"@carbon/colors" "10.29.0"
"@carbon/telemetry" "0.0.0-alpha.6"
"@carbon/utils-position" "1.1.1"
carbon-components "10.40.0"
d3-cloud "1.2.5"
d3-sankey "0.12.3"
date-fns "2.8.1"
dom-to-image "2.6.0"
lodash-es "4.17.21"
Expand Down Expand Up @@ -5511,6 +5512,13 @@ cyclist@^1.0.1:
resolved "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=

"d3-array@1 - 2":
version "2.12.1"
resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
dependencies:
internmap "^1.0.0"

"d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3:
version "3.0.2"
resolved "https://registry.npmjs.org/d3-array/-/d3-array-3.0.2.tgz#7a65593784cfc0150eee1aba8d3e69a6fe73be7b"
Expand Down Expand Up @@ -5639,6 +5647,11 @@ d3-hierarchy@3:
dependencies:
d3-color "1 - 3"

d3-path@1:
version "1.0.9"
resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==

"d3-path@1 - 3", d3-path@3:
version "3.0.1"
resolved "https://registry.npmjs.org/d3-path/-/d3-path-3.0.1.tgz#f09dec0aaffd770b7995f1a399152bf93052321e"
Expand All @@ -5659,6 +5672,14 @@ d3-random@3:
resolved "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz#d4926378d333d9c0bfd1e6fa0194d30aebaa20f4"
integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==

d3-sankey@0.12.3:
version "0.12.3"
resolved "https://registry.yarnpkg.com/d3-sankey/-/d3-sankey-0.12.3.tgz#b3c268627bd72e5d80336e8de6acbfec9d15d01d"
integrity sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==
dependencies:
d3-array "1 - 2"
d3-shape "^1.2.0"

d3-scale-chromatic@3:
version "3.0.0"
resolved "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#15b4ceb8ca2bb0dcb6d1a641ee03d59c3b62376a"
Expand Down Expand Up @@ -5690,6 +5711,13 @@ d3-shape@3:
dependencies:
d3-path "1 - 3"

d3-shape@^1.2.0:
version "1.3.7"
resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
dependencies:
d3-path "1"

"d3-time-format@2 - 4", d3-time-format@4:
version "4.0.0"
resolved "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.0.0.tgz#930ded86a9de761702344760d8a25753467f28b7"
Expand Down Expand Up @@ -10045,6 +10073,11 @@ internal-slot@^1.0.3:
resolved "https://registry.npmjs.org/internmap/-/internmap-2.0.1.tgz#33d0fa016185397549fb1a14ea3dbe5a2949d1cd"
integrity sha512-Ujwccrj9FkGqjbY3iVoxD1VV+KdZZeENx0rphrtzmRXbFvkFO88L80BL/zeSIguX/7T+y8k04xqtgWgS5vxwxw==

internmap@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==

into-stream@^3.1.0:
version "3.1.0"
resolved "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz#96fb0a936c12babd6ff1752a17d05616abd094c6"
Expand Down

1 comment on commit 7731052

@vercel
Copy link

@vercel vercel bot commented on 7731052 Sep 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.