forked from emeeks/d3_in_action_2
-
Notifications
You must be signed in to change notification settings - Fork 4
/
4_16.html
97 lines (86 loc) · 3.25 KB
/
4_16.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
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
</head>
<body>
<div id="viz">
<svg style="width:600px;height:600px;" ></svg>
</div>
<script>
d3.csv("../data/boxplot.csv", scatterplot)
function scatterplot(data) {
xScale = d3.scaleLinear().domain([1,8]).range([20,470]);
yScale = d3.scaleLinear().domain([0,100]).range([480,20]);
yAxis = d3.axisRight()
.scale(yScale)
.ticks(8)
.tickSize(-470);
d3.select("svg").append("g")
.attr("transform", "translate(470,0)")
.attr("id", "yAxisG")
.call(yAxis);
xAxis = d3.axisBottom()
.scale(xScale)
.tickSize(-470)
.tickValues([1,2,3,4,5,6,7]);
d3.select("svg").append("g")
.attr("transform", "translate(0,480)")
.attr("id", "xAxisG")
.call(xAxis);
d3.select("svg").selectAll("g.box")
.data(data).enter()
.append("g")
.attr("class", "box")
.attr("transform", d => `translate( ${xScale(d.day)} , ${yScale(d.median)} )`)
.each(function(d,i) {
d3.select(this)
.append("line")
.attr("class", "range")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", yScale(d.max) - yScale(d.median))
.attr("y2", yScale(d.min) - yScale(d.median))
.style("stroke", "black")
.style("stroke-width", "4px");
d3.select(this)
.append("line")
.attr("class", "max")
.attr("x1", -10)
.attr("x2", 10)
.attr("y1", yScale(d.max) - yScale(d.median))
.attr("y2", yScale(d.max) - yScale(d.median))
.style("stroke", "black")
.style("stroke-width", "4px");
d3.select(this)
.append("line")
.attr("class", "min")
.attr("x1", -10)
.attr("x2", 10)
.attr("y1", yScale(d.min) - yScale(d.median))
.attr("y2", yScale(d.min) - yScale(d.median))
.style("stroke", "black")
.style("stroke-width", "4px");
d3.select(this)
.append("rect")
.attr("class", "range")
.attr("width", 20)
.attr("x", -10)
.attr("y", yScale(d.q3) - yScale(d.median))
.attr("height", yScale(d.q1) - yScale(d.q3))
.style("fill", "white")
.style("stroke", "black")
.style("stroke-width", "2px");
d3.select(this)
.append("line")
.attr("x1", -10)
.attr("x2", 10)
.attr("y1", 0)
.attr("y2", 0)
.style("stroke", "darkgray")
.style("stroke-width", "4px");
});
}
</script>
</body>
</html>