-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdonut chart with animation.html
109 lines (89 loc) · 2.55 KB
/
donut chart with animation.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
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.toolTip {
position: absolute;
display: none;
width: auto;
height: auto;
background: none repeat scroll 0 0 white;
border: 0 none;
border-radius: 8px 8px 8px 8px;
box-shadow: -3px 3px 15px #888888;
color: black;
font: 12px sans-serif;
padding: 5px;
text-align: center;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var div = d3.select("body").append("div").attr("class", "toolTip");
var dataset = [
{ name: 'Firearms', total: 8124, percent: 67.9 },
{ name: 'Knives or cutting instruments', total: 1567, percent: 13.1 },
{ name: 'Other weapons', total: 1610, percent: 13.5 },
{ name: 'Hands, fists, feet, etc.', total: 660, percent: 5.5 }
];
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);
var arc = d3.svg.arc()
.outerRadius(radius * 0.9)
.innerRadius(radius * 0);
var pie = d3.layout.pie()
.sort(null)
.startAngle(1.1*Math.PI)
.endAngle(3.1*Math.PI)
.value(function(d) { return d.total; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(dataset))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.style("fill", function(d) { return color(d.data.name); })
.transition().delay(function(d,i) {
return i * 500; }).duration(500)
.attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle+0, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d)
}
});
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.transition()
.delay(1000)
.text(function(d) { return d.data.name; });
d3.selectAll("path").on("mousemove", function(d) {
div.style("left", d3.event.pageX+10+"px");
div.style("top", d3.event.pageY-25+"px");
div.style("display", "inline-block");
div.html((d.data.name)+"<br>"+(d.data.total) + "<br>"+(d.data.percent) + "%");
});
d3.selectAll("path").on("mouseout", function(d){
div.style("display", "none");
});
//d3.select("body").transition().style("background-color", "#d3d3d3");
function type(d) {
d.total = +d.total;
return d;
}
</script>