-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathbarInt.html
103 lines (93 loc) · 3.59 KB
/
barInt.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<script src="Traffic_Crashes.js"></script>
<script src="button_bar.js"></script>
<script src="crashData.js"></script>
<style class = "scroll">
#staticbar {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 5%;
/* clear: top; */
}
#hbar1 {
position: absolute;
top: 6%;
left: 30%;
width: 50%;
height: 120%;
}
#hbar2 {
position: absolute;
top: 6%;
left: 60%;
width: 50%;
height: 120%;
}
</style>
</head>
<body>
<a href="index.html">
<button>Home</button>
</a>
<a href="Multilinked-Bar.html">
<button>Multi Linked Bar Chart</button>
</a>
<a href="scatter.html">
<button>Brushable Scatterplot</button>
</a>
<a href="barInt.html">
<button>Interactive Bar Chart</button>
<a href="map.html">
<button>Map</button>
</a>
<br>
<!-- <div><br></div> -->
<!-- <h1>Multi-linked Interactive Bar Chart</h1> -->
<!-- <div><br></div> -->
<input type="radio" name="season" onclick = "summer();">Summers</button>
<input type="radio" name="season" onclick = "winter();">Winters</button>
<input type="radio" name="season" onclick = "allyear();">All Year</button>
<h2>Seasonal Trends</h2>
<div id="staticbar"></div>
<div id="hbar1"></div>
<div id="hbar2"></div>
<!-- <div id="hbar3"></div> -->
<script>
w = crashData.filter(c => c.CRASH_MONTH<5 || c.CRASH_MONTH>8);
summers = crashData.filter(c => c.CRASH_MONTH>4 && c.CRASH_MONTH<9);
function clear(){
document.getElementById("hbar1").innerHTML= "";
document.getElementById("staticbar").innerHTML= "";
document.getElementById("hbar2").innerHTML= "";
}
function summer(){
clear();
console.log("Summer clicked");
barchart1(summers, 'WEATHER_CONDITION', find_scale('WEATHER_CONDITION'), "Weather Condition - Summers", "staticbar");
barchart1(summers, 'MOST_SEVERE_INJURY', find_scale('MOST_SEVERE_INJURY'), "Driver Injury - Summers", "hbar1");
barchart1(summers, 'ROADWAY_SURFACE_COND', find_scale('ROADWAY_SURFACE_COND'), "Road Condition - Summers","hbar2");
}
function winter(){
clear();
console.log("winter clicked" + w);
barchart1(w, 'WEATHER_CONDITION', find_scale('WEATHER_CONDITION'), "Weather Condition - Winters","staticbar");
barchart1(w, 'MOST_SEVERE_INJURY', find_scale('MOST_SEVERE_INJURY'), "Driver Injury - Winters", "hbar1");
barchart1(w, 'ROADWAY_SURFACE_COND', find_scale('ROADWAY_SURFACE_COND'), "Road Condition - Winters","hbar2");
}
function allyear(){
clear();
console.log("allyear clicked");
barchart1(crashData, 'WEATHER_CONDITION', find_scale('WEATHER_CONDITION'), "Weather Condition - All Year","staticbar");
barchart1(crashData, 'MOST_SEVERE_INJURY', find_scale('MOST_SEVERE_INJURY'), "Driver Injury - All Year", "hbar1");
barchart1(crashData, 'ROADWAY_SURFACE_COND', find_scale('ROADWAY_SURFACE_COND'), "Road Condition - All Year","hbar2");
}
</script>
</body>
</html>