Skip to content

Instantly share code, notes, and snippets.

@jfreels
Last active December 25, 2015 04:49
Show Gist options
  • Save jfreels/6919598 to your computer and use it in GitHub Desktop.
Save jfreels/6919598 to your computer and use it in GitHub Desktop.
d3.js: Pie Chart Update, I (modified)

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.

Apples Oranges Pears
53245 200 5
28479 200 6
19697 200 10
24037 200 12
40245 200 15
<!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>
// 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;
}
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