/
earthquakes.html
166 lines (142 loc) · 5.99 KB
/
earthquakes.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
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<title> Earthquake Data</title>
<!-- Custom styles for this template -->
<link rel="stylesheet" href="css/dc.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/crossfilter.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="js/dc.min.js"></script>
</head>
<body>
<main role="main" class="container">
<div class='row'>
<div id="mapid" class="col-6"></div>
<div class="col-6">
<div id='magnitude-chart'>
<h4> Number of Events by Magnitude </h4>
</div>
<div id='depth-chart'>
<h4> Events by Depth (km) </h4>
</div>
</div>
</div>
<div class='row'>
<div id='time-chart' class="single-col">
<h4> Events per hour </h4>
</div>
</div>
<table class="table table-hover" id="dc-table-graph">
<thead>
<tr class="header">
<th>DTG</th>
<th>Magnitude</th>
<th>Depth</th>
<th>Latitude</th>
<th>Longitude</th>
</tr>
</thead>
</table>
</main>
<script type="text/javascript">
// Create the dc.js chart objects & link to div
let magnitudeChart = dc.barChart('#magnitude-chart')
let depthChart = dc.barChart('#depth-chart')
let timeChart = dc.lineChart('#time-chart')
let tableChart = dc.dataTable('#dc-table-graph')
let map = L.map('mapid').setView([-41.05,172.93], 5);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/">OpenStreetMap</a>contributors',
maxZoom: 17
}).addTo(map);
// load data from a csv file
d3.csv("data/earthquakes.csv").then(function (data) {
// format our data
let utcParse = d3.utcParse('%Y-%m-%dT%H:%M:%S')
data.forEach(function(d){
d.dtg = utcParse(d.origintime.substr(0,19))
d.magnitude = d3.format('.1f')(d.magnitude)
d.depth = d3.format('d')(d.depth)
let circle = L.circle([d.latitude, d.longitude], d.magnitude * 3000, {
color: '#fd8d3c',
weight: 2,
fillColor: '#fecc5c',
fillOpacity: 0.5
}).addTo(map);
circle.bindPopup("Magnitude - " + d.magnitude + "</br>" +
"Data - " + d.dtg + "<br/>" + "Profundidade - " + d.depth);
})
// Run the data through crossfilter and load our 'facts'
let facts = dc.crossfilter(data)
let dateDim = facts.dimension(d => d.dtg)
//Create a dimension for Magnitude
let magnitudeDim = facts.dimension(d => d.magnitude)
//Create a group for Magnitude that just counts the number of elements in the group
let magnitudeGroup = magnitudeDim.group()
// Create a dimension for Depth
let depthDim = facts.dimension(d => d.depth)
//Create a group for Depth that just counts the number of elements in the group
let depthGroup = depthDim.group()
// Create a dimension just for the hour from the datetime in the dataset
//hint: use d3.time.hour() function
let hourDim = facts.dimension(d => d3.timeHour(d.dtg))
//Create a group for the hour dimension that just counts the number of elements per hour
let hourGroup = hourDim.group()
// Setup the charts
magnitudeChart
.width(480)
.height(150)
.dimension(magnitudeDim)
.group(magnitudeGroup)
.x(d3.scaleLinear().domain([0.5, 8]))
.gap(65)
.elasticY(true)
// Configure Magnitude Bar Graph
// 480 x 150
// x dimension domain: [0.5, 8]
//use a gap of 65, this number is very obscure. It seems to depend on the width of the chart and on the number of dimensions. It was found using trial and error.
//set elasticY to true
depthChart
.width(480)
.height(150)
.dimension(depthDim)
.group(depthGroup)
.x(d3.scaleLinear().domain([0, 100]))
// Configure Depth bar graph
// 480 x 150
// x dimension domain: [0, 100]
timeChart
.width(960)
.height(150)
.dimension(hourDim)
.group(hourGroup)
.x(d3.scaleTime().domain(d3.extent(data, d => d.dtg)))
// Configure Time line graph
// height: 150
//x dimension: build the time scale from the data: d3.time.scale().domain(d3.extent(data, function(d) { return d.dtime; }))
tableChart
.width(960)
.height(800)
.dimension(dateDim)
.group( d => "Earthquake Table" )
.size(10)
.columns([ 'dtg', 'magnitude', 'depth','latitude', 'longitude'])
.sortBy( d => d.dtg )
.order(d3.ascending);
// Render the Charts
dc.renderAll();
});
</script>
<!-- Bootstrap javascript files -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>