Skip to content

Instantly share code, notes, and snippets.

@cacharbe

cacharbe/QualityData.json

Last active April 1, 2016 19:26
Show Gist options
  • Save cacharbe/6bf52ea18e6cf23df5fa to your computer and use it in GitHub Desktop.
Save cacharbe/6bf52ea18e6cf23df5fa to your computer and use it in GitHub Desktop.
Download ZIP
Learning D3 Donut Multiples
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
svg {
padding: 10px 0 0 10px;
}
.arc {
stroke: #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var radius = 74,
padding = 10;
var data = {
"project":"Desktop Program Team",
"stateCounts":
[
{"stateName":"Committed", "count":10},
{"stateName":"To Do", "count":27},
{"stateName":"In Progress", "count":5},
{"stateName":"Removed", "count":1},
{"stateName":"Done", "count":7},
{"stateName":"New", "count":2},
{"stateName":"Design", "count":1}
]
} ;
var color = d3.scale.ordinal()
.range(["#AA3939", "#AA6C39", "#226696", "#2D882D", "#550000", "#552600", "#003333", "#004400"]);
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius - 30);
var pie = d3.layout.pie()
.sort(null)
.value(function (d) { return d.count; });
var legend = d3.select("body").append("svg")
.attr("class", "legend")
.attr("width", radius * 2)
.attr("height", radius * 2)
.selectAll("g")
.data(data.stateCounts)
.enter().append("g")
.attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", function (d) {return color(d.stateName);});
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function (d) { return d.stateName; });
var pieSvg = d3.select("body")
.append("svg")
.attr("class", "pie")
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
var arcSvg = pieSvg.selectAll(".arc")
.data(pie(data.stateCounts))
.enter().append("g")
.attr("class", "arc");
arcSvg.append("path")
.attr("d", arc)
.style("fill", function (d) {return color(d.data.stateName); });
</script>
</body>
</html>
Raw
QualityData.json
{"project":"Team One","stateCounts":[{"stateName":"Committed","count":10},{"stateName":"To Do","count":27},{"stateName":"In Progress","count":5},{"stateName":"Removed","count":1},{"stateName":"Done","count":7},{"stateName":"New","count":2},{"stateName":"Design","count":1}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment