public
Last active — forked from mbostock/README.md

Hive Plot (Areas)

  • Download Gist
README.md
Markdown
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
<!DOCTYPE html>
<meta charset="utf-8">
<style>
 
.arc {
fill-opacity: .2;
}
 
.axis .fill {
stroke: #aaa;
stroke-width: 8px;
stroke-linecap: square;
}
 
.axis .stroke {
stroke: #fff;
stroke-width: 12px;
stroke-linecap: square;
}
 
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.hive.v0.min.js"></script>
<script>
 
var width = 960,
height = 500,
innerRadius = 40,
outerRadius = 240;
 
var angle = d3.scale.ordinal().domain(d3.range(4)).rangePoints([0, 2 * Math.PI]),
radius = d3.scale.linear().range([innerRadius, outerRadius]),
color = d3.scale.category20c().domain(d3.range(20));
 
var links = [
{source: {x: 0, y0: 0.9, y1: 1.0}, target: {x: 1, y0: 0.5, y1: 1.0}, group: 0},
{source: {x: 0, y0: 0.7, y1: 0.9}, target: {x: 1, y0: 0.4, y1: 0.5}, group: 1},
{source: {x: 0, y0: 0.4, y1: 0.7}, target: {x: 1, y0: 0.2, y1: 0.4}, group: 2},
{source: {x: 0, y0: 0.0, y1: 0.4}, target: {x: 1, y0: 0.0, y1: 0.2}, group: 3},
{source: {x: 1, y0: 0.8, y1: 1.0}, target: {x: 2, y0: 0.5, y1: 1.0}, group: 4},
{source: {x: 1, y0: 0.5, y1: 0.8}, target: {x: 2, y0: 0.2, y1: 0.5}, group: 5},
{source: {x: 1, y0: 0.3, y1: 0.5}, target: {x: 2, y0: 0.1, y1: 0.2}, group: 6},
{source: {x: 1, y0: 0.0, y1: 0.3}, target: {x: 2, y0: 0.0, y1: 0.1}, group: 7},
{source: {x: 2, y0: 0.8, y1: 1.0}, target: {x: 0, y0: 0.5, y1: 1.0}, group: 8},
{source: {x: 2, y0: 0.5, y1: 0.8}, target: {x: 0, y0: 0.2, y1: 0.5}, group: 9},
{source: {x: 2, y0: 0.1, y1: 0.5}, target: {x: 0, y0: 0.1, y1: 0.2}, group: 10},
{source: {x: 2, y0: 0.0, y1: 0.1}, target: {x: 0, y0: 0.0, y1: 0.1}, group: 11}
];
 
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", d3.hive.link()
.angle(function(d) { return angle(d.x); })
.startRadius(function(d) { return radius(d.y0); })
.endRadius(function(d) { return radius(d.y1); }))
.style("fill", function(d) { return color(d.group); });
 
svg.selectAll(".axis")
.data(d3.range(3))
.enter().append("g")
.attr("class", "axis")
.attr("transform", function(d) { return "rotate(" + degrees(angle(d)) + ")"; })
.selectAll("line")
.data(["stroke", "fill"])
.enter().append("line")
.attr("class", function(d) { return d; })
.attr("x1", radius.range()[0])
.attr("x2", radius.range()[1]);
 
function degrees(radians) {
return radians / Math.PI * 180 - 90;
}
 
</script>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.