Skip to content

Instantly share code, notes, and snippets.

@jwilber
Created September 12, 2019 06:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jwilber/fc62ee128833df83e524f549b3751dff to your computer and use it in GitHub Desktop.
Save jwilber/fc62ee128833df83e524f549b3751dff to your computer and use it in GitHub Desktop.
basic pie
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<svg width="300" height="300"> </svg>
<script>
var data = {
labels: ['a', 'b', 'c', 'd'],
values: [1, 2, 3, 4]
};
// var data = [2, 4, 8, 10];
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
radius = Math.min(width, height) / 2,
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var color = d3.scaleOrdinal(['#4daf4a','#377eb8','#ff7f00','#984ea3','#e41a1c']);
// Generate the pie
var pie = d3.pie();
// Generate the arcs
var arc = d3.arc()
.innerRadius(0)
.outerRadius(radius);
//Generate groups
var arcs = g.selectAll("arc")
.data(pie(data.values))
.enter()
.append("g")
.attr("class", "arc")
//Draw arc paths
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc);
</script>
</body>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment