-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
92 lines (84 loc) · 3.27 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>d3 donut dial</title>
<style media="screen">
html,body{height: 100vh;}
body {
margin: 0;
font: 15px/1 sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 3px;
}
</style>
</head>
<body>
<div id="a1" class="wrpr"></div>
<div id="a2" class="wrpr"></div>
<div id="a3" class="wrpr"></div>
<div id="b1" class="wrpr"></div>
<div id="b2" class="wrpr"></div>
<div id="b3" class="wrpr"></div>
<div id="c1" class="wrpr"></div>
<div id="c2" class="wrpr"></div>
<div id="c3" class="wrpr"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
function createPieDonuts(obj) {
"use strict";
let data = [obj.percent, 100 - obj.percent];
let width = obj.size,height = obj.size,radius = Math.min(width, height) / 2;
let pie = d3.layout.pie().sort(null);
let arc = d3.svg.arc()
.innerRadius(radius - obj.size / 7)
.outerRadius(radius);
let svg = d3
.select(obj.element)
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
svg
.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("fill", (d, i) => (obj.colors[i]))
.attr("d", arc);
svg
.append("text")
.attr("fill", (d, i) => (obj.colors[i]))
.attr("text-anchor", "middle")
.attr("font-size", "2.3em")
.attr("dy", ".2em")
.text(obj.percent)
.append("tspan")
// .attr("font-size", ".5em")
.text("%");
svg
.append("text")
.attr("fill", (d, i) => (obj.colors[i]))
.attr("text-anchor", "middle")
.attr("y", 28)
.attr("font-weight", "bold")
.text(obj.text.toUpperCase());
}
createPieDonuts({percent: 25,size: 200,element: "#a1",colors: ["#c51162", "#f8bbd0"],text: "Person",});
createPieDonuts({percent: 75,size: 200,element: "#a2",colors: ["#6200ea", "#d1c4e9"],text: "Place",});
createPieDonuts({percent: 50,size: 200,element: "#a3",colors: ["#2962ff", "#bbdefb"],text: "Thing",});
createPieDonuts({percent: 35,size: 200,element: "#b1",colors: ["#00b8d4", "#b2ebf2"],text: "When",});
createPieDonuts({percent: 85,size: 200,element: "#b2",colors: ["#00c853", "#c8e6c9"],text: "Where",});
createPieDonuts({percent: 60,size: 200,element: "#b3",colors: ["#aeea00", "#f0f4c3"],text: "Why",});
createPieDonuts({percent: 15,size: 200,element: "#c1",colors: ["#ffab00", "#ffecb3"],text: "First",});
createPieDonuts({percent: 65,size: 200,element: "#c2",colors: ["#dd2c00", "#ffccbc"],text: "Second",});
createPieDonuts({percent: 40,size: 200,element: "#c3",colors: ["#263238", "#cfd8dc"],text: "Third",});
</script>
</body>
</html>