-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (54 loc) · 3.68 KB
/
index.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
<html>
<!--
References:
https://gist.github.com/enjalot/1203641
-->
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="fn.js"></script>
<script src="data.js"></script>
</head>
<body>
<h1>How to Be Popular</h1>
<script type="text/javascript">
var w = 800, //width
h = 600, //height
r = 150, //radius
innerRadius=50,
attr = "Grades";
//I chose a pastel color palette because it was cooler
var colors = shuffle(["#F7977A","#FDC68A","#FFF79A","#C4DF9B","#82CA9D","#6ECFF6","#7EA7D8","#8882BE","#F49AC2"]);
var pie_data = count_categories(data,attr);
var vis = d3.select("body")
.append("svg") //create the SVG element inside the <body>
.data([pie_data]) //associate our data with the document
.attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag
.attr("height", h)
.append("g") //make a group to hold our pie chart
.attr("transform", "translate(" + r + "," + r + ")"); //move the center of the pie chart from 0, 0 to radius, radius
var arc = d3.svg.arc() //this will create <path> elements for us using arc data
.outerRadius(r).innerRadius(innerRadius);
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array
var arcs = vis.selectAll("g") //this selects all <g> elements with class slice (there aren't any yet)
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
.append("g"); //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
arcs.append("path")
.attr("fill", function(d, i) { return colors[i%colors.length]; } ) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function
arcs.append("text") //add a label to each slice
.attr("transform", function(d) { //set the label's origin to the center of the arc
//we have to make sure to set these before calling arc.centroid
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50]
})
.attr("text-anchor", "middle") //center the text on it's origin
.text(function(d, i) { return pie_data[i].label; }); //get the label from our original data arrayo
vis.append("text").attr("x",-30).attr("font-size",120/attr.length).text(attr);//Adding the text in the middle
</script>
</body>
</html>