Coding Challenge #57: Mapping Earthquake Data

References:

Videos:

Related Coding Challenges:

Timestamps:
00:00 Introduction
01:51 Map Projections
04:45 Using the Mapbox Static Map
06:34 Adjusting the parameters to get a World Map
08:48 Latitudes and Longitudes
11:13 Converting Coordinates to pixel space
16:38 Drawing a point on the map
20:39 Loading and parsing earthquake data from USGS
26:05 Ideas and Suggestions
26:38 Drawing the size of point based on magnitude of earthquake
32:48 More Suggestions and Wrapping Up

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#earthquakedata #mapbox #mapping #mercatorprojection #p5js

[TorSkywalker]

I think I watched about 30 of your videos until I finally realized that you are THE Daniel Shiffman lol!
My Professor used to refer to your book and also used your code examples to teach us about flocking and processing in college - such a relief to see that you are actually human and not the perfect genius programming robot I always imagined you to be! :'D

You are a great teacher - I love your videos! Really entertaining and interesting at the same time!
Greetings from Germany!

[leeritenour]

For those who are wondering how *translate()* and *rectMode()* work, here is some information for you. (I am not a smart guy and new to p5js, so I spent some time studying the meaning behind these commands that Dan used in the code.) Hope this would help.

*translate(width/2, height/2);* // move the origin to the center of the canvas
*imageMode(CENTER);*
/* Above two commands make the canvas an x-y plane where (0, 0) is at the center.
The map that Dan retrieves are based on the longitude and latitude as (0, 0).
In the real world, all longitude and latitude values (positive/negative)
are referred based on location (0, 0).
That's why Dan wanted to "map" the map to the real world's perspective */
/* imageMode(CENTER) interprets the second and third parameters of image()
as the image's center point. If two additional parameters are specified,
they are used to set the image's width and height. */

*image(worldMapImage, 0, 0);*
/* Because of CENTER mode, the (0, 0) indicates the center of the image.
And due to translate(width/2, height/2), (0, 0) is at the center of the Canvas. */

Here are my Gists with code examples and canvas illustration.
tanslate():
rectMode() --> works the same way as imageMode()

Cheers.

[checkmarcus]

These videos always motivate me to keep learning how to code

[baseti]

the mapbox images are using 512 x 512 tiles. if you request an image with dimensions that are factors of 512, everything works great. however, if a dimension is not a factor of 512 -- for example, 1200 -- mapbox will return the closest 512 factor size scaled to the requested dimension -- for example, 1200 would return a 1024 image scaled to 1200. thus, you need to determine the final tile width and height and then use half of that size in the mercX and mercY methods instead of 512 -- for example, 1200 would be a tile size of 600 instead of 512.

here is some sample code:

at the top of setup() before calling merX or mercY:

// mapbox tiles are 512 x 512 -- need to scale if image size isn't on a 512 boundary

tileWidth = mapWidth / floor(mapWidth / 512);
tileHeight = mapHeight / floor(mapHeight / 512);

mapWidth and mapHeight are the width and height of the requested mapbox image.

then, change the mercX and mercY methods to use half the tile size:

function mercX(lon)
{
// var a = (256 / PI) * pow(2, zoom);
var a = ((tileWidth / 2) / PI) * pow(2, zoom);
var b = (radians(lon) + PI);

return a * b;
}

function mercY(lat)
{
// var a = (256 / PI) * pow(2, zoom);
var a = ((tileHeight / 2) / PI) * pow(2, zoom);
var c = tan(PI / 4 + radians(lat) / 2);
var b = PI - log(c);

return a * b;
}

[minecraftisinnow]

Not a single dislike, this channel is amazing. and you are an amazing person Daniel :)

[moistgiraffe]

the 10 people who disliked left the video at "the earth is a sphere"

[zakirsobirov]

The following code
mag = pow( 10, mag );
mag = sqrt(mag);
can be replaced with
mag = pow( 10, mag / 2 );
That will not only shorten the code, but also reduce the amount of calculations.

[markemerson]

all teachers, tutors, mentors please take note of how to totally engage your audience and make learning exciting and enjoyable. watch these tutorials by Daniel Shiffman. bravo.

[abdirahmanburyar]

You made things simple. Am new to code for JavaScript but i think now am intermediate.
You always telling me to go back to code.
You are my #1 motivator of my struggling to code.
Thanks alot

[simonsays]

The Richter Scale is logarithmic in two different ways, it is either a base-10 logarithm of shaking amplitude, although aesthetically it probably makes more sense for the map to be based on the amount of energy produced, in which case it is approximately a base-31.6 log-scale.

[stevenxw]

my favorite programming video series, hands down

[mfaison]

Dan, more map stuff would be great, and something I'm working on now is adapting Processing sketches to project onto a planetarium dome (I know Paul Bourke has a lot of theory stuff on dome projections).

We love you. We know it, you know it. But now let's be objective. AI, stats and deep learning tutorials. :)

[Stead]

I was writting a p5 apps which was showing ADS-B data from aircraft and I had to do all with Cartesian Lat/Lng to X/y conversion, and you just came up with a simpler solution! :)

[aehphea]

Thank you very much Dan. It's amazing you reach out to us with these.

[Algebrodadio]

You could consider adding tooltips to the the data. For example - hovering your mouse over a data point could give you more information, or more precise information, about the earthquake.

[malik]

Thank you SO MUCH for making awesome videos like these! I just found your channel and instantly subscribed. Keep'em coming please!

[DoctorJonesPhD]

Another awesome video! In the future could you do an in-depth series where you build a platformer like Super Mario from scratch? Maybe show how to manipulate hit boxes and integrate images and sound files?

[pranav_r]

Coding challenge topics:
3d Delaunay triangulation (most important!)
Procedural sound/ ambient music generator
Ultra-simple 2D side-scrolling game
Machine learning for the side-scrolling game
Other cool 3D stuff

I know these are demanding topics (do it in parts?), but hey, they're interesting!

[tiklyspade]

Its impossible to dislike a video like this.