View difference between Paste ID: <a href="/s81DE9FK">s81DE9FK</a> and <a href="/sr2Z6sVR">sr2Z6sVR</a>

    <!DOCTYPE html>
1		<!DOCTYPE html>
2		<meta charset="utf-8">
3		<style>
4
5
6		.node {
7		cursor: pointer;
8		}
9
10		.node:hover {
11		stroke: #000;
12		stroke-width: 1.5px;
13		}
14
15		.node--leaf {
16		fill: white;
17		}
18
19		.label {
20		font: 0px "Helvetica Neue", Helvetica, Arial, sans-serif;
21		text-anchor: middle;
22		text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
23		}
24
25		.label,
26		.node--root,
27		.node--leaf {
28		pointer-events: none;
29		}
30
31		</style>
32		<!-- <body> -->
33		<p>Twitter</p>
34		<svg width="960" height="960"></svg>
35		<script src="https://d3js.org/d3.v4.min.js"></script>
36		<script>
37
38		var svg2 = d3.select("svg"),
39		margin = 20,
40		diameter = +svg2.attr("width"),
41		g = svg2.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
42
43		var color = d3.scaleLinear()
44		.domain([-1, 5])
45		.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
46		.interpolate(d3.interpolateHcl);
47
48		var pack = d3.pack()
49		.size([diameter - margin, diameter - margin])
50		.padding(2);
51
52		d3.json("data1.json", function(error, root) {
53		if (error) throw error;
54
55		root = d3.hierarchy(root)
56		.sum(function(d) { return d.size; })
57		.sort(function(a, b) { return b.value - a.value; });
58
59		var focus = root,
60		nodes = pack(root).descendants(),
61		view;
62
63		var circle = g.selectAll("circle")
64		.data(nodes)
65		.enter().append("circle")
66		.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
67		.style("fill", function(d) { return d.children ? color(d.depth) : null; })
68		.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
69
70		var text = g.selectAll("text")
71		.data(nodes)
72		.enter().append("text")
73		.attr("class", "label")
74		.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
75		.style("display", function(d) { return d.parent === root ? "inline" : "none"; })
76		.text(function(d) { return d.data.name; });
77
78		var node = g.selectAll("circle,text");
79
80		svg2
81		.style("background", color(-1))
82		.on("click", function() { zoom(root); });
83
84		zoomTo([root.x, root.y, root.r * 2 + margin]);
85
86		function zoom(d) {
87		var focus0 = focus; focus = d;
88
89		var transition = d3.transition()
90		.duration(d3.event.altKey ? 7500 : 750)
91		.tween("zoom", function(d) {
92		var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
93		return function(t) { zoomTo(i(t)); };
94		});
95
96		transition.selectAll("text")
97		.filter(function(d) { return d.parent === focus \|\| this.style.display === "inline"; })
98		.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
99		.on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
100		.on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
101		}
102
103		function zoomTo(v) {
104		var k = diameter / v[2]; view = v;
105		node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
106		circle.attr("r", function(d) { return d.r * k; });
107		}
108		});
109
110
111		var svg = d3.select("svg"),
112		margin = 20,
113		diameter = +svg.attr("width"),
114		g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
115
116		var color = d3.scaleLinear()
117		.domain([-1, 5])
118		.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
119		.interpolate(d3.interpolateHcl);
120
121		var pack = d3.pack()
122		.size([diameter - margin, diameter - margin])
123		.padding(2);
124
125		d3.json("data2.json", function(error, root) {
126		if (error) throw error;
127
128		root = d3.hierarchy(root)
129		.sum(function(d) { return d.size; })
130		.sort(function(a, b) { return b.value - a.value; });
131
132		var focus = root,
133		nodes = pack(root).descendants(),
134		view;
135
136		var circle = g.selectAll("circle")
137		.data(nodes)
138		.enter().append("circle")
139		.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
140		.style("fill", function(d) { return d.children ? color(d.depth) : null; })
141		.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
142
143		var text = g.selectAll("text")
144		.data(nodes)
145		.enter().append("text")
146		.attr("class", "label")
147		.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
148		.style("display", function(d) { return d.parent === root ? "inline" : "none"; })
149		.text(function(d) { return d.data.name; });
150
151		var node = g.selectAll("circle,text");
152
153		svg
154		.style("background", color(-1))
155		.on("click", function() { zoom(root); });
156
157		zoomTo([root.x, root.y, root.r * 2 + margin]);
158
159		function zoom(d) {
160		var focus0 = focus; focus = d;
161
162		var transition = d3.transition()
163		.duration(d3.event.altKey ? 7500 : 750)
164		.tween("zoom", function(d) {
165		var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
166		return function(t) { zoomTo(i(t)); };
167		});
168
169		transition.selectAll("text")
170		.filter(function(d) { return d.parent === focus \|\| this.style.display === "inline"; })
171		.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
172		.on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
173		.on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
174		}
175
176		function zoomTo(v) {
177		var k = diameter / v[2]; view = v;
178		node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
179		circle.attr("r", function(d) { return d.r * k; });
180		}
181		});
182		</script>