Last active
January 15, 2021 00:26
-
-
Save kaz-a/e8e8b70d599a3fd9d44a to your computer and use it in GitHub Desktop.
Earthquakes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <meta name='viewport' content="width=device-width,initial-scale=1" /> | |
| <title>Earthquakes</title> | |
| <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> | |
| <style> | |
| body{ | |
| font-family: 'Open Sans', sans-serif; | |
| background: #fff; | |
| } | |
| svg { | |
| margin: 30px; | |
| } | |
| .land { | |
| fill: #d1b2b7; | |
| opacity: .5; | |
| } | |
| .earthquakes { | |
| fill: #684218; | |
| opacity: .3; | |
| stroke: #684218; | |
| stroke-width: 1px; | |
| } | |
| .sphere { | |
| fill: #edddce; | |
| } | |
| .text { | |
| color: #684218; | |
| margin: 30px auto; | |
| } | |
| #textBox { | |
| border-right: solid #684218 1px; | |
| } | |
| p { | |
| font-size: 12px; | |
| } | |
| h4 { | |
| margin-top: -1px; | |
| } | |
| hr { | |
| padding: 0; | |
| border-top: 1px dashed #684218; | |
| text-align: left; | |
| width: 100%; | |
| } | |
| .subheader { | |
| margin-top: -25px; | |
| } | |
| .info2 { | |
| font-size: 12px; | |
| padding-top: 140px; | |
| } | |
| .second_info { | |
| margin-left: 30px; | |
| } | |
| .third_info { | |
| margin-left: -20px; | |
| } | |
| .time { | |
| margin-top: -27px; | |
| } | |
| .line { | |
| width: 300px; | |
| height: 20px; | |
| border-bottom: 1px solid #684218; | |
| -webkit-transform: translateY(420px) translateX(540px) rotate(160deg); | |
| position: absolute; | |
| } | |
| </style> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="col-xs-12 col-md-12 text"> | |
| <div class="col-xs-3 col-md-3" id = "textBox"><h1>Earthquakes</h1><br /><p class="subheader">November - December 2015</p></div> | |
| <div class="col-xs-6 col-md-6"><p class="info"></p> | |
| </div> | |
| <div class="col-xs-12 col-md-12"> | |
| <div class="col-xs-10 col-md-8 globe"></div> | |
| <div class="col-xs-2 col-md-2 info2"></div> | |
| </div> | |
| </div> | |
| <script> | |
| var width = 800, height = 600; | |
| // for rotation | |
| var width = 800, | |
| height = 600, | |
| origin = [71, -42], | |
| velocity = [.010, -0], | |
| time = Date.now(); | |
| rotate = [0, 0]; | |
| var sphere = {type: "Sphere"}; | |
| // projection | |
| var projection = d3.geo.orthographic() | |
| .scale(height / 2.1) | |
| .translate([width / 2, height / 2]) | |
| .clipAngle(90) | |
| .precision(.5); | |
| var path = d3.geo.path().projection(projection); | |
| var svg = d3.select(".globe").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var g = svg.append("g"); | |
| // drawing dark grey spehere | |
| g.append("path") | |
| .datum(sphere) | |
| .attr("class", "sphere") | |
| .attr("d", path); | |
| //Load land data | |
| d3.json("https://raw.githubusercontent.com/Kaz-A/earthquakes/master/world-110m.json", function(error, topo) { | |
| if (error) throw error; | |
| var land = topojson.feature(topo, topo.objects.land); | |
| svg.append("path") | |
| .datum(land) | |
| .attr("class", "land") | |
| .attr("d", path); | |
| spinning_globe(); | |
| }); | |
| //Load earthquake data | |
| d3.json("https://raw.githubusercontent.com/Kaz-A/earthquakes/master/earthquakes.geojson", function(error, data) { | |
| if (error) throw error; | |
| // determine circle size by magnitude | |
| earthquakes_array = []; | |
| time_array = []; | |
| for (i = 0; i < data.features.length; i++) { | |
| earthquakes_array.push(data.features[i].properties.mag); | |
| time_array.push(data.features[i].properties.time); | |
| }; | |
| timeMin = time_array.sort(d3.ascending)[0]; | |
| timeMax = time_array.sort(d3.descending)[0]; | |
| rMin = earthquakes_array.sort(d3.ascending)[0]; | |
| rMax = earthquakes_array.sort(d3.descending)[0]; | |
| // contents for info1 and info2 | |
| var dataSource = "<a href = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php'>USGS</a>"; | |
| var kaz = "<a href = 'https://github.com/Kaz-A'>Kaz-A</a>"; | |
| d3.select(".info").html("Visualizing all the earthquakes of the world that occurred <br />between " + | |
| timeMin + " and " + timeMax + | |
| ".<br />Data source: " + dataSource + " (as of 12/12/2015)<br />Visualization by " + kaz); | |
| d3.select(".info2") | |
| .html("Locations with higher magnitude are shown with bigger circles.<hr /><div class='first_info hidden'>The highest magnitude observed during this period was<br /><h4>" + rMax + "</h4></div><br /><div class='second_info'>Observed in <h4>210km S of Tarauaca, Brazil</h4><br /><p class='time'>on 2015-11-24@22:50:53</p></div><br /><div class='third_info'>and <h4>169km WNW of Iberia, Peru</h4><br /><p class='time'>on 2015-11-24@22:45:38</p></div>"); | |
| // fade in the info2 text | |
| $(document).ready(function () { | |
| $("div.hidden").fadeIn(2400).removeClass("hidden"); | |
| $(".second_info, h5, time").hide().delay(3000).fadeIn(4000); | |
| $(".third_info, h5, time").hide().delay(8000).fadeIn(4000); | |
| }); | |
| var rScale = d3.scale.linear().domain([rMin, rMax]).range([1, 10]); | |
| path.pointRadius(function(d) { | |
| return rScale(d.properties.mag); | |
| }); | |
| // Draw circles | |
| svg.selectAll("path.earthquakes").data(data.features) | |
| .enter().append("path") | |
| .attr("class", "earthquakes") | |
| .attr("d", path) | |
| .filter(function(d) { return d.properties.mag >= 7.6 }) | |
| .style("fill", "red") | |
| .style("opacity", "1") | |
| .style("stroke", "red"); | |
| spinning_globe(); | |
| }); | |
| function spinning_globe(){ | |
| d3.timer(function() { | |
| // get current time | |
| var dt = Date.now() - time; | |
| // get the new position from modified projection function | |
| projection.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]); | |
| // update earthquakes/land positions | |
| svg.selectAll("path.land").attr("d", path); | |
| svg.selectAll("path.earthquakes").attr("d", path); | |
| }); | |
| }; | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment