bracket/bracket.html at master · WillTurman/bracket · GitHub

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
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
}

</style>
<body>
<script src="/js/d3.v3.min.js"></script>
<script>

var width = 960,
	height = 700,
	radius = Math.min(width, height) / 2,
	color = d3.scale.category20c();

var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height *.52 + ")");

var partition = d3.layout.partition()
	.sort(null)
	.size([2 * Math.PI, radius * radius])
	.value(function(d) { return 1; });

var arc = d3.svg.arc()
	.startAngle(function(d) { return d.x })
	.endAngle(function(d) { return d.x + d.dx; })
	.innerRadius(function(d) { return Math.sqrt(d.y); })
	.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

d3.json("http://willturman.com/flare.json", function(error, data) {
	console.log(data);
	var path = svg.datum(data).selectAll("path")
		.data(partition.nodes)
		.enter().append("path")
		.attr("d", arc)
		.style("stroke", "#fff")
		.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
		.style("fill-rule", "evenodd")
		.each(stash)
		.on("mouseover", function(d) { console.log(d); });
});

function stash(d) {
	d.x0 = d.x;
	d.dx0 = d.dx;
}


d3.select(self.frameElement).style("height", height + 30 + "px");

</script>

	<p><strong>. . .</strong></p>
</body>
</html>