-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathSandD.html
173 lines (155 loc) · 7.03 KB
/
SandD.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Graph using D3.js</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
<style>
.line {
fill: none;
stroke-width: 2px;
}
.axis-label {
font: 12px sans-serif;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
const data = [
// your data here
{date: "202004", count: 160583, supply: 2485, stations: 100},
{date: "202005", count: 167209, supply: 2485, stations: 100},
{date: "202006", count: 198897, supply: 2485, stations: 100},
{date: "202007", count: 215174, supply: 2485, stations: 100},
{date: "202008", count: 204543, supply: 2485, stations: 100},
{date: "202009", count: 251591, supply: 2485, stations: 100},
{date: "202010", count: 227858, supply: 2485, stations: 100},
{date: "202011", count: 232847, supply: 2485, stations: 100},
{date: "202012", count: 220527, supply: 2485, stations: 100},
{date: "202101", count: 187821, supply: 2485, stations: 100},
{date: "202102", count: 153276, supply: 2485, stations: 100},
{date: "202103", count: 264545, supply: 2485, stations: 100},
{date: "202104", count: 251193, supply: 2485, stations: 100},
{date: "202105", count: 269975, supply: 7370, stations: 292},
{date: "202106", count: 236110, supply: 9825, stations: 377},
{date: "202107", count: 373416, supply: 12419, stations: 480},
{date: "202108", count: 601959, supply: 14613, stations: 564},
{date: "202109", count: 906934, supply: 16771, stations: 641},
{date: "202110", count: 1175422, supply: 18276, stations: 708},
{date: "202111", count: 1424950, supply: 20375, stations: 788},
{date: "202112", count: 1429135, supply: 21281, stations: 833},
{date: "202201", count: 1371395, supply: 22494, stations: 897},
{date: "202202", count: 1047153, supply: 22965, stations: 918},
{date: "202203", count: 2021983, supply: 24515, stations: 991},
{date: "202204", count: 1987820, supply: 25670, stations: 1043},
{date: "202205", count: 1599400, supply: 26193, stations: 1074},
{date: "202206", count: 2030794, supply: 26480, stations: 1090},
{date: "202207", count: 2660347, supply: 27078, stations: 1115},
{date: "202208", count: 2890765, supply: 27568, stations: 1141},
{date: "202209", count: 2632276, supply: 28189, stations: 1172},
{date: "202210", count: 2430187, supply: 28788, stations: 1206},
{date: "202211", count: 3019656, supply: 29110, stations: 1225},
{date: "202212", count: 2628740, supply: 29312, stations: 1235},
{date: "202301", count: 2686167, supply: 29369, stations: 1239},
{date: "202302", count: 2837717, supply: 29508, stations: 1247},
{date: "202303", count: 3774370, supply: 29940, stations: 1274},
{date: "202304", count: 3365049, supply: 30002, stations: 1278},
{date: "202305", count: 3641896, supply: 30050, stations: 1280},
{date: "202306", count: 3362023, supply: 30158, stations: 1286},
{date: "202307", count: 3055147, supply: 30273, stations: 1293},
{date: "202308", count: 2722839, supply: 30530, stations: 1309},
{date: "202309", count: 2863438, supply: 30693, stations: 1317},
{date: "202310", count: 2843257, supply: 30693, stations: 1317},
{date: "202311", count: 2941065, supply: 30693, stations: 1317}
];
const margin = {top: 20, right: 60, bottom: 50, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const parseDate = d3.timeParse("%Y%m");
data.forEach(d => {
d.date = parseDate(d.date);
d.count = +d.count;
d.supply = +d.supply;
d.stations = +d.stations;
});
const x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([0, width]);
const yCount = d3.scaleLinear()
.domain([0, d3.max(data, d => d.count)])
.nice()
.range([height, 0]);
const ySupply = d3.scaleLinear()
.domain([0, d3.max(data, d => d.supply)])
.nice()
.range([height, 0]);
const lineCount = d3.line()
.x(d => x(d.date))
.y(d => yCount(d.count));
const lineSupply = d3.line()
.x(d => x(d.date))
.y(d => ySupply(d.supply));
svg.append("g")
.call(d3.axisLeft(yCount))
.append("text")
.attr("class", "axis-label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "-3.5em")
.attr("text-anchor", "end")
.text("Count");
svg.append("g")
.attr("transform", `translate(${width}, 0)`) // 오른쪽으로 이동
.call(d3.axisRight(ySupply)) // 오른쪽 y축 추가
.append("text")
.attr("class", "axis-label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "1em")
.attr("text-anchor", "end")
.text("Supply");
svg.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x)
.tickFormat(d3.timeFormat("%Y-%m")))
.selectAll("text")
.attr("transform", "rotate(45)")
.style("text-anchor", "start");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("stroke", "blue")
.attr("d", lineCount);
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("stroke", "green")
.attr("d", lineSupply);
svg.append("text")
.attr("transform", `translate(${width/2},${height + margin.bottom})`)
.style("text-anchor", "middle")
.text("Date");
svg.append("text")
.attr("x", width - 40)
.attr("y", height - 250)
.attr("text-anchor", "end")
.attr("font-size", "12px")
.attr("fill", "blue")
.text("Count");
svg.append("text")
.attr("x", width - 72)
.attr("y", height - 230)
.attr("text-anchor", "start")
.attr("font-size", "12px")
.attr("fill", "green")
.text("Supply");
</script>
</body>
</html>