Permalink
Browse files

Add Hive Plot example.

  • Loading branch information...
1 parent d3c3324 commit 9454e667755812fe317b973b8dbd1a751d693d4b @mbostock mbostock committed Mar 17, 2012
Showing with 240 additions and 0 deletions.
  1. +83 −0 examples/hive/hive-area.html
  2. +84 −0 examples/hive/hive.html
  3. +73 −0 examples/hive/link.js
@@ -0,0 +1,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="../../d3.v2.js"></script>
+<script src="link.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", 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>
View
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+.link {
+ stroke-width: 1.5px;
+}
+
+.axis, .node {
+ stroke: #000;
+ stroke-width: 1.5px;
+}
+
+</style>
+<body>
+<script src="../../d3.v2.js"></script>
+<script src="link.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.category10().domain(d3.range(20));
+
+var nodes = [
+ {x: 0, y: .1},
+ {x: 0, y: .9},
+ {x: 1, y: .2},
+ {x: 1, y: .3},
+ {x: 2, y: .1},
+ {x: 2, y: .8}
+];
+
+var links = [
+ {source: nodes[0], target: nodes[2]},
+ {source: nodes[1], target: nodes[3]},
+ {source: nodes[2], target: nodes[4]},
+ {source: nodes[2], target: nodes[5]},
+ {source: nodes[3], target: nodes[5]},
+ {source: nodes[4], target: nodes[0]},
+ {source: nodes[5], target: nodes[1]}
+];
+
+var svg = d3.select("body").append("svg")
+ .attr("width", width)
+ .attr("height", height)
+ .append("g")
+ .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+svg.selectAll(".axis")
+ .data(d3.range(3))
+ .enter().append("line")
+ .attr("class", "axis")
+ .attr("transform", function(d) { return "rotate(" + degrees(angle(d)) + ")"; })
+ .attr("x1", radius.range()[0])
+ .attr("x2", radius.range()[1]);
+
+svg.selectAll(".link")
+ .data(links)
+ .enter().append("path")
+ .attr("class", "link")
+ .attr("d", link()
+ .angle(function(d) { return angle(d.x); })
+ .radius(function(d) { return radius(d.y); }))
+ .style("stroke", function(d) { return color(d.source.x); });
+
+svg.selectAll(".node")
+ .data(nodes)
+ .enter().append("circle")
+ .attr("class", "node")
+ .attr("transform", function(d) { return "rotate(" + degrees(angle(d.x)) + ")"; })
+ .attr("cx", function(d) { return radius(d.y); })
+ .attr("r", 5)
+ .style("fill", function(d) { return color(d.x); });
+
+function degrees(radians) {
+ return radians / Math.PI * 180 - 90;
+}
+
+</script>
View
@@ -0,0 +1,73 @@
+function link() {
+ var source = function(d) { return d.source; },
+ target = function(d) { return d.target; },
+ angle = function(d) { return d.angle; },
+ startRadius = function(d) { return d.radius; },
+ endRadius = startRadius,
+ arcOffset = -Math.PI / 2;
+
+ function link(d, i) {
+ var s = node(source, this, d, i),
+ t = node(target, this, d, i),
+ x;
+ if (t.a < s.a) x = t, t = s, s = x;
+ if (t.a - s.a > Math.PI) s.a += 2 * Math.PI;
+ var a1 = s.a + (t.a - s.a) / 3,
+ a2 = t.a - (t.a - s.a) / 3;
+ return "M" + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0
+ + "L" + Math.cos(s.a) * s.r1 + "," + Math.sin(s.a) * s.r1
+ + "C" + Math.cos(a1) * s.r1 + "," + Math.sin(a1) * s.r1
+ + " " + Math.cos(a2) * t.r1 + "," + Math.sin(a2) * t.r1
+ + " " + Math.cos(t.a) * t.r1 + "," + Math.sin(t.a) * t.r1
+ + "L" + Math.cos(t.a) * t.r0 + "," + Math.sin(t.a) * t.r0
+ + "C" + Math.cos(a2) * t.r0 + "," + Math.sin(a2) * t.r0
+ + " " + Math.cos(a1) * s.r0 + "," + Math.sin(a1) * s.r0
+ + " " + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0;
+ }
+
+ function node(method, thiz, d, i) {
+ var node = method.call(thiz, d, i),
+ a = +(typeof angle === "function" ? angle.call(thiz, node, i) : angle) + arcOffset,
+ r0 = +(typeof startRadius === "function" ? startRadius.call(thiz, node, i) : startRadius),
+ r1 = (startRadius === endRadius ? r0 : +(typeof endRadius === "function" ? endRadius.call(thiz, node, i) : endRadius));
+ return {r0: r0, r1: r1, a: a};
+ }
+
+ link.source = function(_) {
+ if (!arguments.length) return source;
+ source = _;
+ return link;
+ };
+
+ link.target = function(_) {
+ if (!arguments.length) return target;
+ target = _;
+ return link;
+ };
+
+ link.angle = function(_) {
+ if (!arguments.length) return angle;
+ angle = _;
+ return link;
+ };
+
+ link.radius = function(_) {
+ if (!arguments.length) return startRadius;
+ startRadius = endRadius = _;
+ return link;
+ };
+
+ link.startRadius = function(_) {
+ if (!arguments.length) return startRadius;
+ startRadius = _;
+ return link;
+ };
+
+ link.endRadius = function(_) {
+ if (!arguments.length) return endRadius;
+ endRadius = _;
+ return link;
+ };
+
+ return link;
+}

0 comments on commit 9454e66

Please sign in to comment.