hello everybody welcome to Observable I'm Jeremy and today we're going to be visualizing some live earthquake data from the USGS in ten minutes or less so here we go so this is observable and the first thing we're gonna do is create a new blank notebook and this notebooks gonna be about earthquakes so we'll give it that title and then make a new cell and the first place to start when we're going to fetch our earthquake data is the URL of the USGS server that provides a GeoJSON file that has information for every quake that's happened around the world in the last week so we fill in that URL and as you can see that's just a JavaScript a piece of code with a string as the value and we're going to use the fetch web API to fetch the contents of that URL now that gets you a response but we're gonna it gives you a promise for the value we're gonna wait for that promise to resolve and get the JSON out of out of that URL so here we've got a feature collection of GeoJSON with a whole bunch of quakes in it you can see there's Alaska a magnitude 17 let's pull out an example earthquake here so that we can take a look at some of the properties so that's let's say the xxx earthquake in that list and we'll look at its properties and we'll see that it's a 4
6 off Papua New Guinea so we've got all the information we need to plot these earthquakes the next thing we need is a map of the world so mike has published some natural earth world maps in a few different resolutions we're going to go fetch one off of NPM through the unpkg service so we're going to get world add lists at a 110 meter resolution and that's a topo JSON file we'll get the wait for the Jason and get that back out and this gives us countries and raw land as you can see in the inspector there so what we're going to do is change the definition here and instead of just getting the value we're gonna use TopoJSON to pull out just the country's feature of that of that world geography so we'll do a topojsonfeature we'll take the world and we'll extract the countries now this isn't going to work because we've never loaded TopoJSON yet TopoJSON isn't defined so to fix that let's load in TopoJSON from NPM will require it this is a similar kind of thing that returns a promise and once it comes back the world will reevaluate and now we have our array of countries in the world with their geographies we'll also going to need d3 to do this this little map so we'll load in d3 as well and then the next step is to create the canvas that we want to draw the world into so let's set a size we'll start with 500 pixels tall and we'll call it our globe we'll get a canvas element from the standard library so I'm going to get a context for that canvas element which is going to be sized at 500 pixels by 500 pixels we'll pull off the canvas attribute and then return it and we'll see that we have a 500 pixel canvas now in our notebook cool shrink it down a little bit let's make it 400 and let's start to draw with it so the first thing we're going to do is draw the globe we'll start by by drawing the ocean underneath and then we'll draw the land on top so we'll set the line width of our canvas object to 15 fill it with some lovely light blue and then create a path that draws a circle and the circle will be centered at the middle of the canvas so that's as divided by 2 and then it will have it'll have the radius and we'll draw an arc from 0 to 2 pi so that'll be a full circle and we'll fill it and we'll stroke it and then we'll see that I forgot to define radius so let's make the radius be the size of the canvas divided by 2 and we have our nice Alice blue globe centered with the radius being half the width of the canvas all right that's step one now let's draw some land so in order to draw the land we're gonna need to do a d3 projection will use a geo orthographic which will make it look like we're looking at the globe from outer space we're gonna scale it down to the radius of the globe that we're trying to do and we'll move it over to the center of the screen and that that's our projection right there and then we'll make a path generator from d3 a geo path and then we're gonna tell that path to use that projection in that context now we've got our we've got our projection and we can proceed to draw the countries that we loaded earlier so we'll change the line width to make it a little bit thinner and change the color instead of blue will draw sort of a whitish little off-white color and then we'll draw the the world that we loaded in with the fetch API will begin the path will use the d3 geo path and then fill it and Stroke it and wallah we've got our countries but it looks like I made a typo fillStyle was with an I there you go fix the typo and you can see the difference in colors so we have our little d3 sketch being rendered to a canvas here the next thing we're going to do is to draw some earthquakes so in order to draw earthquakes we'll adjust the size of the world and we'll need to make a function for telling us how big those earthquakes should be drawn all we have right now is magnitude as numbers and their latitude and longitude so let's make us a function that gives us the size of the quake radius and pixels based on its magnitude these are quake magnitude So we'll use a square root scale and we'll give it just a starter domain and range and then we'll return a function here that uses that scale to compute the size of an earthquake based on a single quake object so if you pass in a quake let's say that you scale that quake and we can look down in our example quake and see that it's got a magnitude property so that one's 46 so we're gonna we're gonna do a little exponential sort of square root wrong to get a nice magnitude scale because earthquake magnitudes are are very nonlinear in their force and that will be our quick radius function so you can see the value of that cell is a function that takes a quake and it's going to return that radius so it's time to draw the quakes to do this all we have to do is set a color will make the quicks red to start and then we'll set the radius of the earthquake to be that function passing in passing in a quick object and getting back that radius value and then for each earthquake in the data set we will draw that earthquake will begin a path and then will path it pass the quake and then fill it we don't need lines around them we don't need to stroke it there you go a whole bunch of red earthquakes positioned on the d3 globe
This isn't really satisfactory the earthquakes are a little bit overlapping and bright red so let's change the opacity on them instead of just being the string red as the color let's use d3 color set it to red and then we'll change the opacity a little bit and let's make them 025 alpha so that they oh they can overlap and you can see where you have a whole bunch of quakes in one spot now this isn't quite good enough either because the world is stuck in space at 0 degrees of longitude so let's rotate the projection and let's rotate it first by 90 degrees you can see now the Americas we can do 190 and go over into Australia but let's take that value and make it a live variable that we can control so instead of rotating by 90 we'll create a slider down here I'll say I'm going to have a view of rotation is the standard library function called DOMrange which gives you an HTML range input will go from 0 degrees to 360 degrees and that gives me a slider that values from 0 to 360 and now I'll use the value of that slider which is rotation and you can see that as that value changes the code is re-executed and you get a new drawing and notice what i don't have to do here – I don't have to reinstantiate or reload the page or adjust my definition of the function and we can do the same thing for the earthquake size so here we have quake size as a value that goes from 0 to 12 and we'll use that in the quake radius function to say that the range goes from 0 to quake size and you can see without changing anything the chart is updating with sort of dynamically sized earthquakes and it doesn't just work for a number of values it works for any value so let's change the color as well we'll use a a DOM input a color input which is a color picker in the browser and and let's change our sketch to use quake color instead of red so that'll be a color string and now we can use the color picker and adjust our earthquake colors and our size and rotation so I hope you enjoyed that there are lots of other examples of visualizations data analysis and generative art up on the observable website that you can fork and tinker around with and if any of that was too confusing or if there was too much magic going on I encourage you to check out the introduction series of notebooks that walks you through what makes the Observable runtime different than just a regular JavaScript and introduces you to some of the standard library features that can help so cheers from all of us at ObservableHQcom we're certainly having a lot of fun with this and are looking forward to seeing what you make!
Source: Youtube
Observable: An Earthquake Globe in Ten Minutes
No comments:
Post a Comment