Coding Challenge #109: Visualizing 500,000 Subscribers

Channel:

The Coding Train

Subscribers:

1,740,000

Published on July 9, 2018 1:07:58 PM ● Video Link: https://www.youtube.com/watch?v=Ae73YY_GAU8

Duration: 51:07

219,456 views

6,404

Celebrating the 500,000 subscribers milestone, I create a map visualization of Coding Train subscriber locations around the world! Code: https://thecodingtrain.com/challenges/109-visualizing-500000-subscribers

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

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

References:
🔗 Mappa.js Simple Map: https://mappa.js.org/docs/simple-map.html
🔗 Maps, Maps, Maps!: https://medium.com/processing-foundation/maps-maps-maps-f0914218c87b
🔗 Countries latitude and longitude: https://gist.github.com/sindresorhus/1341699
🔗 Leaflet: https://leafletjs.com/
🔗 500k Subscriber Map: https://github.com/CodingTrain/500k-Subscriber-Map
🔗 CodingTrain 500k Sub Special: https://codingtrain.github.io/500k-Subscriber-Map/

Live Stream Archive:
🔴 Coding Train Live 144: https://youtu.be/UI5c1te1MjI?t=1495s

Timestamps:
0:00 Introduce the coding challenge
0:42 Describe Mappa.js
1:07 Introduce the YouTube dataset
2:42 Reference Mappa.js library and tutorial
3:38 Preload YouTube data
5:30 Debug loading function
8:12 Parse .csv file
9:20 Extract data values
11:57 Load Mappa.js
12:48 Mention Leaflet integration
13:55 Describe map types: static and tile
14:38 Create a tile map
15:25 Overlay the map on a canvas
17:07 Debug Mappa.js
17:38 Add map tiles
18:34 Refine initial map
19:06 Draw a circle with a fixed position
20:10 Draw a circle considering longitude and latitude
21:20 Reference a dataset with the coordinates for the world's countries
22:48 Load country data
23:48 Associate YouTube data by country ID
24:26 Extract longitude and latitude
25:20 Draw a circle with the coordinates
27:27 Show subscriber map
28:15 Update the diameter of the circles
31:12 Examine map update
32:30 Consider the zoom level
34:25 Pre-process YouTube data
36:22 Find the minimum and maximum number of subscribers
37:10 Update drawing logic
39:20 Map diameter considering the minimum and maximum values
40:35 Debug diameter value
42:22 Convert subscriber count to number
43:58 Update scale according to the zoom value
46:28 Load a different dataset
47:24 Highlight the number of views
48:05 Highlight watch times
48:25 Conclude the coding challenge

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

#datavisualization #worldmap #javascript #p5js