-
Notifications
You must be signed in to change notification settings - Fork 2
/
Graph.html
197 lines (180 loc) · 5.58 KB
/
Graph.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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html>
<head>
<title>Line and Bar Graphs with Hover Animation</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
<style>
.graph-container {
display: inline-block;
margin: 20px;
}
.tooltip {
position: absolute;
text-align: center;
padding: 4px;
background: #333;
color: #fff;
border: 1px solid #666;
border-radius: 4px;
pointer-events: none;
}
</style>
</head>
<body>
<h1>Line and Bar Graphs with Hover Animation</h1>
<div class="graph-container" id="line-chart"></div>
<div class="graph-container" id="bar-chart"></div>
<script>
// Data for the line graph
var lineData = [
{ x: 0, y: 10 },
{ x: 1, y: 20 },
{ x: 2, y: 30 },
{ x: 3, y: 25 },
{ x: 4, y: 40 },
{ x: 5, y: 35 },
];
// Data for the bar graph
var barData = [
{ label: "Category A", value: 15 },
{ label: "Category B", value: 25 },
{ label: "Category C", value: 20 },
{ label: "Category D", value: 30 },
];
var margin = { top: 20, right: 20, bottom: 30, left: 60 };
var width = 400 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
// Create scales for the line chart
var xLine = d3
.scaleLinear()
.domain([
0,
d3.max(lineData, function (d) {
return d.x;
}),
])
.range([0, width]);
var yLine = d3
.scaleLinear()
.domain([
0,
d3.max(lineData, function (d) {
return d.y;
}),
])
.range([height, 0]);
// Create an SVG element for the line chart
var svgLine = d3
.select("#line-chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Create the line generator with a curve interpolation
var line = d3
.line()
.x(function (d) {
return xLine(d.x);
})
.y(function (d) {
return yLine(d.y);
})
.curve(d3.curveCardinal); // You can adjust the curve type
// Draw the smooth line for the line chart
var path = svgLine
.append("path")
.datum(lineData)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
.attr("d", line)
.on("mouseover", function () {
// Change the line appearance on hover
path.attr("stroke", "orange").attr("stroke-width", 4); // Adjust the line width on hover
})
.on("mouseout", function () {
// Restore the default line appearance on mouseout
path.attr("stroke", "steelblue").attr("stroke-width", 2);
});
// Add x-axis for the line chart
svgLine
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xLine));
// Add y-axis for the line chart
svgLine.append("g").call(d3.axisLeft(yLine));
// Create scales for the bar chart
var xBar = d3
.scaleBand()
.domain(
barData.map(function (d) {
return d.label;
})
)
.range([0, width])
.padding(0.2);
var yBar = d3
.scaleLinear()
.domain([
0,
d3.max(barData, function (d) {
return d.value;
}),
])
.range([height, 0]);
// Create an SVG element for the bar chart
var svgBar = d3
.select("#bar-chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Create a tooltip element for the bar chart
var tooltip = d3
.select("#bar-chart")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Draw the bars for the bar chart with a tooltip
var bars = svgBar
.selectAll("rect")
.data(barData)
.enter()
.append("rect")
.attr("x", function (d) {
return xBar(d.label);
})
.attr("y", function (d) {
return yBar(d.value);
})
.attr("width", xBar.bandwidth())
.attr("height", function (d) {
return height - yBar(d.value);
})
.attr("fill", "lightcoral") // Default bar color
.on("mouseover", function (d) {
d3.select(this).attr("fill", "orange"); // Change the color on hover
// Show the tooltip with data
tooltip.transition().duration(200).style("opacity", 0.9);
tooltip
.html(d.label + ": " + d.value)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");
})
.on("mouseout", function () {
d3.select(this).attr("fill", "lightcoral"); // Restore the default color on mouseout
// Hide the tooltip
tooltip.transition().duration(500).style("opacity", 0);
});
// Add x-axis for the bar chart
svgBar
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xBar));
// Add y-axis for the bar chart
svgBar.append("g").call(d3.axisLeft(yBar));
</script>
</body>
</html>