forked from sarahghp/DN-Sunburst
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdesignerNews.html
113 lines (86 loc) · 2.39 KB
/
designerNews.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
font-family: Georgia;
font-size: 30px;
text-align: center;
margin: 50px 0 0 0;
background-color: #2d72d9;
}
#title {
margin: 50px 0 0 0;
color: #fff;
}
#viz {
margin: 50px 0 0 0;
cursor: pointer;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="title">Kelly S. started it all.</div>
<script>
//based on mbostock's sunburst (http://bl.ocks.org/mbostock/4063423)
var width = 1024,
height = 700,
radius = Math.min(width, height) / 2,
color = "#12376f";
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("id", "viz")
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height * .42 + ")");
function cleanChildren(children) {
var cleaned = new Array();
for(var i = 0; i<children.length; i++){
if (children[i]){
cleaned.push(children[i]);
}
}
return cleaned;
}
var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, 1.8 * radius * radius])
.value(function(d) { return 1; })
.children(function(d) {
return cleanChildren(d.invited);
} );
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("https://news.layervault.com/u/tree.json", function(error, root) {
var path = svg.datum(root).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc)
.style("stroke", "#2d72d9")
.style("fill", color)
.style("fill-rule", "evenodd")
.on("mouseover", function(d){
var name = d.display_name;
var number
if (!d.children){
number = 0;
}
else number = d.children.length;
$("#title").text(name + " invited " + number + " other users.");
})
.on("click", function(d){
window.open("https://news.layervault.com/u/"+d.id);
})
;
});
d3.select(self.frameElement).style("height", height + "px");
</script>
</body>
</html>