d3.js: Pie Chart Update, I (modified)
http://bl.ocks.org/mbostock/1346395
Modifications:
Added third column and changed data file to csv. Created radio buttons using d3js. Removed the timer.
Last active
December 25, 2015 04:49
-
-
Save jfreels/6919598 to your computer and use it in GitHub Desktop.
d3.js: Pie Chart Update, I (modified)
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
| Apples | Oranges | Pears | |
|---|---|---|---|
| 53245 | 200 | 5 | |
| 28479 | 200 | 6 | |
| 19697 | 200 | 10 | |
| 24037 | 200 | 12 | |
| 40245 | 200 | 15 |
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> | |
| <meta charset='utf-8'> | |
| <html> | |
| <head> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <link rel='stylesheet' href='style.css'> | |
| </head> | |
| <body> | |
| <script type='text/javascript' src='script.js'></script> | |
| </body> | |
| </html> |
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
| // http://bl.ocks.org/mbostock/1346395 | |
| var body = d3.select('body') | |
| // Pie Chart | |
| var w = 960 | |
| var h = 500 | |
| var r = Math.min(w,h)/2 | |
| var color = d3.scale.category20() | |
| var pie = d3.layout.pie() | |
| .value(function (d) { return d.Apples }) | |
| .sort(null) | |
| var arc = d3.svg.arc() | |
| .innerRadius(r - 100) | |
| .outerRadius(r - 20) | |
| var svg = d3.select('body') | |
| .append('svg') | |
| .attr('width',w) | |
| .attr('height',h) | |
| .append('g') | |
| .attr('transform','translate(' + w/2 + ',' + h/2 + ')') | |
| d3.csv('data.csv', type, function (error,data) { | |
| // Form | |
| body.append('form') | |
| .selectAll('label') | |
| .data(d3.keys(data[0])).enter() | |
| .append('label') | |
| .text(function (d) { return d;}) | |
| .append('input') | |
| .attr('type','radio') | |
| .attr('name','dataset') | |
| .attr('value',function (d) { return d; }) | |
| .text(function (d) { return d; }) | |
| d3.select('input[value="Apples"]').property('checked',true) // check the apples radio button | |
| // Pie Chart | |
| var path = svg.datum(data) | |
| .selectAll('path') | |
| .data(pie).enter() | |
| .append('path') | |
| .attr('fill', function (d,i) { return color(i); }) | |
| .attr('d', arc); | |
| d3.selectAll('input') | |
| .on('change',change); | |
| function change() { | |
| var value = this.value; | |
| pie.value(function (d) { return d[value]; }); | |
| path = path.data(pie) | |
| path.attr('d', arc) | |
| } | |
| }) | |
| function type(d) { | |
| for (var i in d) { | |
| d[i] = +d[i] | |
| } | |
| return d; | |
| } |
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
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| margin: auto; | |
| position: relative; | |
| width: 960px; | |
| } | |
| text { | |
| font: 8px sans-serif; | |
| } | |
| form { | |
| position: absolute; | |
| right: 10px; | |
| top: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment