proportional circle area chart; sketch based of this super vis on Working Parents by Nathan Yau
Last active
December 3, 2017 15:59
-
-
Save eesur/0fc8f496a9858fbcc084defe32ff59a9 to your computer and use it in GitHub Desktop.
d3 | proportional circle area chart
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
| var render = (function () { | |
| var axis = [25, 50, 75, 100] | |
| var sqrtScale = d3.scaleSqrt() | |
| .domain([0, 100]) | |
| .range([0, 200]) | |
| var svg = d3.select('svg') | |
| var vis = svg.select('#vis') | |
| var width = +svg.attr('width') | |
| var height = +svg.attr('height') | |
| console.log('height', height) | |
| // append the axis circles | |
| vis.append('g') | |
| .attr('class', 'axis-wrap') | |
| .selectAll('circle') | |
| .data(axis) | |
| .enter().append('circle') | |
| .attr('class', function (d) { return 'axis axis-' + d; }) | |
| .attr('r', function (d) { return sqrtScale(d); }) | |
| .attr('cx', width / 2) | |
| .attr('cy', height / 2) | |
| .style('fill', 'none') | |
| .style('stroke', '#00b8b8') | |
| .style('opacity', 0.5) | |
| // append some axis labels | |
| vis.append('g') | |
| .attr('class', 'axis-labels-wrap') | |
| .selectAll('.axis-labels') | |
| .data(axis) | |
| .enter().append('text') | |
| .attr('x', width / 2) | |
| .attr('y', function (d) { return height / 2 + sqrtScale(d) + 5; }) | |
| .style('text-anchor', 'end') | |
| .style('fill', '#00b8b8') | |
| .text(function (d) { return d + '%'; }) | |
| // append a circle for the value | |
| var area = vis.append('circle') | |
| .attr('class', 'area-circle') | |
| .attr('cx', width / 2) | |
| .attr('cy', height / 2) | |
| .style('fill', '#de3d83') | |
| .style('opacity', 0.9) | |
| // append it's value | |
| var areaLabel = vis.append('text') | |
| .attr('class', 'area-label') | |
| .attr('x', width / 2) | |
| .attr('y', height / 2 + 12) | |
| .style('text-anchor', 'middle') | |
| .style('font-size', '48px') | |
| .style('fill', '#e4bd0b') | |
| function update (val) { | |
| area.transition() | |
| .ease(d3.easeLinear) | |
| .duration(500) | |
| .attr('r', function (d) { return sqrtScale(val); }) | |
| areaLabel.transition() | |
| .delay(100) | |
| .duration(500).text(val + '%') | |
| } | |
| // expose the update | |
| return update | |
| })() | |
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { font-family: Consolas, monaco, monospace; background: #e0e5db;} | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="450"> | |
| <g id="vis" transform="translate(10, 10)"></g> | |
| </svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <!-- d3 code --> | |
| <script src=".script-compiled.js" charset="utf-8"></script> | |
| <!-- render code --> | |
| <script> | |
| d3.interval(function() { | |
| return render(Math.floor(d3.randomUniform(15, 100)())); | |
| }, 1000); | |
| </script> | |
| </body> | |
| </html> | |
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
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
| const render = (function () { | |
| const axis = [25, 50, 75, 100] | |
| const sqrtScale = d3.scaleSqrt() | |
| .domain([0, 100]) | |
| .range([0, 200]) | |
| const svg = d3.select('svg') | |
| const vis = svg.select('#vis') | |
| const width = +svg.attr('width') | |
| const height = +svg.attr('height') | |
| console.log('height', height) | |
| // append the axis circles | |
| vis.append('g') | |
| .attr('class', 'axis-wrap') | |
| .selectAll('circle') | |
| .data(axis) | |
| .enter().append('circle') | |
| .attr('class', d => 'axis axis-' + d) | |
| .attr('r', d => sqrtScale(d)) | |
| .attr('cx', width / 2) | |
| .attr('cy', height / 2) | |
| .style('fill', 'none') | |
| .style('stroke', '#00b8b8') | |
| .style('opacity', 0.5) | |
| // append some axis labels | |
| vis.append('g') | |
| .attr('class', 'axis-labels-wrap') | |
| .selectAll('.axis-labels') | |
| .data(axis) | |
| .enter().append('text') | |
| .attr('x', width / 2) | |
| .attr('y', d => height / 2 + sqrtScale(d) + 5) | |
| .style('text-anchor', 'end') | |
| .style('fill', '#00b8b8') | |
| .text(d => d + '%') | |
| // append a circle for the value | |
| const area = vis.append('circle') | |
| .attr('class', 'area-circle') | |
| .attr('cx', width / 2) | |
| .attr('cy', height / 2) | |
| .style('fill', '#de3d83') | |
| .style('opacity', 0.9) | |
| // append it's value | |
| const areaLabel = vis.append('text') | |
| .attr('class', 'area-label') | |
| .attr('x', width / 2) | |
| .attr('y', height / 2 + 12) | |
| .style('text-anchor', 'middle') | |
| .style('font-size', '48px') | |
| .style('fill', '#e4bd0b') | |
| function update (val) { | |
| area.transition() | |
| .ease(d3.easeLinear) | |
| .duration(500) | |
| .attr('r', d => sqrtScale(val)) | |
| areaLabel.transition() | |
| .delay(100) | |
| .duration(500).text(val + '%') | |
| } | |
| // expose the update | |
| return update | |
| })() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment