Skip to content

Instantly share code, notes, and snippets.

@biovisualize
Forked from danielristic/README.md
Last active December 18, 2015 14:39
Show Gist options
  • Save biovisualize/5798871 to your computer and use it in GitHub Desktop.
Save biovisualize/5798871 to your computer and use it in GitHub Desktop.

This variation of a donut chart demonstrates how to update values. Clicking on the radio buttons changes the displayed metric.

Next: Animation

apples oranges
53245 200
28479 200
19697 200
24037 200
40245 200
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<div id="pie-chart"></div>
<form>
<label><input type="radio" name="dataset" value="apples" checked> Apples</label>
<label><input type="radio" name="dataset" value="oranges"> Oranges</label>
</form>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function pieChart() {
var width = 960,
height = 500,
radius = Math.min(width, height) / 2,
color = d3.scale.category20(),
accessor,
pie = d3.layout.pie(),
arc = d3.svg.arc(),
path;
function chart(selection) {
selection.each(function(data) {
pie.value(accessor)
.sort(null);
arc.innerRadius(radius - 100)
.outerRadius(radius - 20);
var svg = d3.select(this).selectAll("svg").data([data]);
var gEnter = svg.enter().append("svg").append("g");
svg
.attr("width", width)
.attr("height", height)
var g = svg.select("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
path = g.datum(data).selectAll("path")
.data(pie)
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
});
}
chart.change = function(d, i) {
pie.value(accessor); // change the value function
path = path.data(pie); // compute the new angles
path.attr("d", arc); // redraw the arcs
};
chart.accessor = function(_) {
if (!arguments.length) return accessor;
accessor = _;
return chart;
};
return chart;
}
d3.tsv("data.tsv", type, function(error, data) {
var myChart = pieChart()
.accessor(function(d) { return d.apples; });
d3.select("#pie-chart")
.datum(data)
.call(myChart);
d3.selectAll("input")
.on("change", myChart.change);
var timeout = setTimeout(function() {
myChart.accessor(function(d) { return d.oranges; })
myChart.change();
}, 2000);
});
function type(d) {
d.apples = +d.apples;
d.oranges = +d.oranges;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment