-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdonutchart.html
123 lines (91 loc) · 3.2 KB
/
donutchart.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
114
115
116
117
118
119
120
121
122
123
<doctype html>
<html>
<head>
<title>D3 example</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var canvas = d3.select("body").append("svg")
.attr('width', 1500)
.attr('height', 1500);
var data =[10, 20,50, 80, 100];
var r =200;
// var p = Math.PI*2;
var color = d3.scale.ordinal()
.range(["darkgreen", "darkred", "lightblue", "darkorange", "steelblue"]);
var group = canvas.append("g")
.attr('transform', 'translate(' + 300 + ',' + 300+ ')');
// // var line = d3.svg.line()
// // .x(function(d){ return d.x; })
// // .y(function(d){ return d.y; });//each x corodinate oof line
var arc =d3.svg.arc()
.innerRadius(r-20)
.outerRadius(r)
// .startAngle(0)
var pie = d3.layout.pie()
.value(function(d){ return d; })
//bind data to doc.
var arcs = group.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr('class', 'arc')
//create path
arcs.append("path")
// .attr('d', arc)
.style('fill', function(d){ return color(d.data);})
.transition().delay(function(d, i) { return i * 500; }).duration(500)
.attrTween('d', function(d) {
// var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
return function(t) {
// d.endAngle = i(t);
return arc(d);
}
});
arcs.append("text")
.attr('transform', function(d){ return 'translate(' + arc.centroid(d) + ')';})
.attr('text-anchor', "middle" )
.attr('font-size', "1.5em" )
.text(function(d){return d.data ;})
//ends
// ************************
//basic arc
// var r = 300;
// var p = Math.PI*2;
// var arc = d3.svg.arc()
// .innerRadius(r-20)
// .outerRadius(r)
// .startAngle(0)
// .endAngle(p-1);
// group.append("path")
// .attr('d', arc)
//ends
// group.selectAll("path")
// .data([data])
// .enter()
// .append("path")
// .attr('d', line)
// .attr('fill', "none")
// .attr('stroke', "#000")
// .attr('stroke-width', 10);
// d3.json("mydata.json", function(data){
// canvas.selectAll("rect")
// .data(data)
// .enter()
// .append("rect")
// .attr('width', function(d){ return d.age * 10})
// .attr('height', 48)
// .attr('y', function(d, i ){ return i * 50 })
// .attr('fill', "blue")
// canvas.selectAll("text")
// .data(data)
// .enter()
// .append("text")
// .attr('fill', "white")
// .attr('y', function(d, i){ return i * 50 +24 })
// .text(function(d){ return d.Name ;})
// })
</script>
</body>
</html>