Skip to content

Instantly share code, notes, and snippets.

@jalapic

jalapic/README.md

Last active November 10, 2015 18:09
Show Gist options
  • Save jalapic/cc1fe22dd175bdf639c4 to your computer and use it in GitHub Desktop.
Save jalapic/cc1fe22dd175bdf639c4 to your computer and use it in GitHub Desktop.
Download ZIP
Concentric rings with pie layout
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
svg { width: 100%; height: 100%; }
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>
</head>
<body>
<script>
// could make array of event data with each event a length of one and intervals the length of intervals?
var dataset = {
apples: [10, 6, 8, 6, 4, 1],
oranges: [10, 6, 8, 6, 4 ,1],
lemons: [10, 6, 8, 6, 4, 1],
pears: [10, 6, 8, 6, 4,1],
pineapples: [10, 6, 8, 6,4,1],
};
var width = 460,
height = 300,
cwidth = 25;
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
.data(function(d) { return pie(d); })
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); })
;
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment