-
Notifications
You must be signed in to change notification settings - Fork 0
/
d3.js ~ Dendrogram.html~
85 lines (70 loc) · 2.71 KB
/
d3.js ~ Dendrogram.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
84
85
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>d3.js ~ Dendrogram</title>
<script type="text/javascript" src="../d3.v2.js?2.9.5"></script>
<style type="text/css">
@import url("../style.css?1.10.0");
@import url("../syntax.css?1.6.0");
</style>
</head>
<body>
<div class="body">
<div class="content">
<div class="topbar">
<a href="http://d3js.org/">Overview</a>
<b><a href="https://github.com/mbostock/d3/wiki/Gallery">Examples</a></b>
<a href="https://github.com/mbostock/d3/wiki">Documentation</a>
<a href="https://github.com/mbostock/d3">Source</a>
</div>
<div class="sidebar">
<h1>d3.js</h1>
</div>
<h1 id='dendrogram'>Dendrogram</h1>
<div class='gallery' id='chart'> </div><link href='cluster.css' rel='stylesheet' type='text/css' /><script src='cluster.js' type='text/javascript'> </script>
<p>A dendrogram is a node-link diagram that places leaf nodes of the tree at the same depth. In this example, the classes (leaf nodes) are aligned on the right edge, with the packages (internal nodes) to the left. Data shows the <a href='http://flare.prefuse.org/'>Flare</a> class hierarchy, courtesy Jeff Heer.</p>
<h3 id='source_code'>Source Code</h3>
<div class='highlight'><pre></span>
</code></pre>
</div>
</div>
<div class="foot">Copyright © 2012 <a href="http://bost.ocks.org/mike/">Mike Bostock</a></div>
</div>
</div>
<script type="text/javascript" src="brainData.js"></script>
<script type="text/javascript" >
var width = 960,
height = 2200;
var cluster = d3.layout.cluster()
.size([height, width - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40, 0)");
d3.json("../data/flare.json", function(json) {
var nodes = cluster.nodes(json);
var link = vis.selectAll("path.link")
.data(cluster.links(nodes))
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3)
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; });
});
</script>
</body>
</html>