Who doesn't love sunbursts? Visit my blog for more.
Last active
August 11, 2017 11:43
-
-
Save denjn5/f20fae03f0ca8a113cf29fedc05a7453 to your computer and use it in GitHub Desktop.
d3 Unconf 2017!
This file contains hidden or 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: gpl-3.0 | |
| height: 500 | |
| border: no |
This file contains hidden or 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
| <!DOCTYPE html> | |
| <head> | |
| <title>d3 Unconf 2017!</title> | |
| <script src='https://d3js.org/d3.v4.min.js'></script> | |
| </head> | |
| <body> | |
| <svg></svg> | |
| </body> | |
| <script> | |
| var vWidth = 1045; | |
| var vHeight = 1550; | |
| var vMargin = 2; | |
| var vRadius = Math.min(vWidth, vHeight) / 2 - vMargin; | |
| var vColor = d3.schemeCategory20b[13]; | |
| //vColor = d3.schemeCategory20b[ Math.random() * 20 | 0]; | |
| var vData = { | |
| 'id': 'TOPICS', 'children': [{ | |
| 'id': 'Topic A', | |
| 'children': [{'id': 'Sub A1', 'size': 4}, {'id': 'Sub A2', 'size': 4}] | |
| }, { | |
| 'id': 'Topic B', | |
| 'children': [{'id': 'Sub B1', 'size': 3}, {'id': 'Sub B2', 'size': 3}, | |
| {'id': 'Sub B3', 'size': 3}] | |
| }, { | |
| 'id': 'Topic C', | |
| 'children': [{'id': 'Sub C1', 'size': 4}, {'id': 'Sub C2', 'size': 4}] | |
| }]}; | |
| // Prepare our physical space | |
| var g = d3.select('svg') | |
| .attr('width', vWidth) | |
| .attr('height', vHeight) | |
| .append('g') | |
| .attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')'); | |
| // d3 layout | |
| var partitionLayout = d3.partition() | |
| .size([2 * Math.PI, vRadius]); | |
| // Find data root | |
| var root = d3.hierarchy(vData) | |
| .sum(function (d) { return d.size }); | |
| // Size arcs | |
| partitionLayout(root); | |
| var arc = d3.arc() | |
| .startAngle(function (d) { return d.x0; }) | |
| .endAngle(function (d) { return d.x1; }) | |
| .innerRadius(function (d) { return d.y0; }) | |
| .outerRadius(function (d) { return d.y1; }); | |
| // Put it all together | |
| var vPath = g.selectAll('path') | |
| .data(root.descendants()) | |
| .enter().append('path') | |
| .attr('display', function (d) { return d.depth ? null : 'none'; }) | |
| .attr('d', arc) | |
| .style('stroke', '#000') | |
| .style('fill', '#fff'); | |
| animate(); | |
| d3.transition().delay(2800).on('end', animate); | |
| d3.transition().delay(5600).on('end', animate); | |
| d3.transition().delay(8400).on('end', animate); | |
| d3.transition().delay(11800).on('end', animate); | |
| function animate() { | |
| vPath.each(function (d, i) { | |
| d3.select(this).transition().delay(i * 50).duration(i * 200) | |
| .style('fill', vColor) | |
| .transition().duration(1000) | |
| .style('fill', '#fff'); | |
| }); | |
| } | |
| //animate().addEventListener("ended", animate); | |
| //vColor = d3.schemeCategory20b[13]; | |
| //animate(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment