Basic example of d3.sunburst library.
Last active
December 22, 2019 10:34
-
-
Save jgaffuri/434e5ae309deef74715a1758afa8130d to your computer and use it in GitHub Desktop.
d3.sunburst basic example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: EUPL-1.1 | |
| height: 350 | |
| scrolling: no | |
| border: yes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/gh/eurostat/d3.sunburst@0.9.9/d3-sunburst.js"></script> | |
| <div id="sunburst"></div> | |
| <script> | |
| //build codes hierarchy | |
| var codesHierarchy = { | |
| code : "Total", | |
| children : [ { | |
| code : "Part1", | |
| children : [ {code : "1_1"}, {code : "1_2"}, {code : "1_3"}, {code : "1_4"} ] | |
| }, { | |
| code : "Part2", | |
| children : [ { | |
| code : "2_1", | |
| children : [ {code : "2_1_1"}, {code : "2_1_2"}, {code : "2_1_3"}, ] | |
| }, {code : "2_2"} ] | |
| }, {code : "Part3", children : [ {code : "3_1"} ] | |
| }, {code : "Part4"} ] | |
| }; | |
| //build sunburst | |
| var sb = d3.sunburst().codesHierarchy(codesHierarchy) | |
| //set values, one for each lower level code (leaves) | |
| var values = { | |
| "1_1" : 12.4, | |
| "1_2" : 2.4, | |
| "1_3" : 5.8, | |
| "1_4" : 9.2, | |
| "2_1_1" : 2.0, | |
| "2_1_2" : 6.0, | |
| "2_1_3" : 10, | |
| "2_2" : 5.4, | |
| "3_1" : 15.8, | |
| "Part4" : 32.3 | |
| }; | |
| //set the values | |
| sb.set(values); | |
| //wait 1 second... | |
| setTimeout(function() { | |
| //define new values | |
| var newValues = { | |
| "1_1" : 1.7, | |
| "1_2" : 5.4, | |
| "1_3" : 7.8, | |
| "1_4" : 1.2, | |
| "2_1_1" : 0.4, | |
| "2_1_2" : 4.5, | |
| "2_1_3" : 14.8, | |
| "2_2" : 4.2, | |
| "3_1" : 16.8, | |
| "Part4" : 28.9 | |
| }; | |
| //update chart with new values, with 2 seconds transition | |
| sb.set(newValues, 2000); | |
| }, 1000); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment