Coding Challenge #57: Mapping Earthquake Data

Channel:

The Coding Train

Subscribers:

1,740,000

Published on February 13, 2017 5:04:54 PM ● Video Link: https://www.youtube.com/watch?v=ZiYdOwOrGyc

Duration: 33:51

144,255 views

3,138

In this coding challenge, I visualize earthquake data from the USGS by mapping the latitude, longitude and the magnitude of earthquakes with p5.js. The map imagery is pulled from mapbox and the math demonstrated converts latitude, longitude to x,y via Web Mercator. Code: https://thecodingtrain.com/challenges/57-mapping-earthquake-data

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/i0icLNOuf

🎥 Previous video: https://youtu.be/OAcXnzRNiCY?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/dbs4IYGfAXc?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🗺️ Mapbox: https://www.mapbox.com/
📄 Web Mercator on Wikipedia: https://en.wikipedia.org/wiki/Web_Mercator
🌍 Earthquake Database: http://earthquake.usgs.gov/data/

Videos:
🚂 Working with Data and APIs: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X
🔣 Regular Expressions Series: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YEypLuls7iidwHMdCM6o2w

Related Coding Challenges:
🚂 58 3D Earthquake Data Visualization: https://youtu.be/dbs4IYGfAXc

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

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#earthquakedata #mapbox #mapping #mercatorprojection #p5js