title
Coding Challenge #109: Visualizing 500,000 Subscribers
description
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
detail
{'title': 'Coding Challenge #109: Visualizing 500,000 Subscribers', 'heatmap': [{'end': 153.791, 'start': 123.3, 'weight': 0.974}, {'end': 1904.054, 'start': 1866.172, 'weight': 0.779}, {'end': 3007.744, 'start': 2961.093, 'weight': 1}], 'summary': 'Discusses visualizing a large subscriber base using mappa.js and leaflet, troubleshooting csv data loading, extracting and analyzing subscriber data, developing interactive maps, and visualizing subscriber data by mapping country subscribers and utilizing circle sizes based on the total number of subscribers, encountering and addressing various implementation issues.', 'chapters': [{'end': 153.791, 'segs': [{'end': 52.898, 'src': 'embed', 'start': 20.487, 'weight': 0, 'content': [{'end': 27.554, 'text': "All right, what am I going to do today? I'm going to celebrate the subscribers, the viewers of The Coding Train with a visualization.", 'start': 20.487, 'duration': 7.067}, {'end': 33.3, 'text': "And I'm going to use a library that I've been meaning to use for quite a while called Mappa.js.", 'start': 27.654, 'duration': 5.646}, {'end': 41.389, 'text': 'It was a Google Summer of Code project last summer 2017 with the Processing Foundation created by Cristobal Valenzuela.', 'start': 33.721, 'duration': 7.668}, {'end': 52.898, 'text': "So if you go to the mappa.js.org website, there's a ton of tutorials, introduction to web maps, a history of different projections.", 'start': 41.949, 'duration': 10.949}], 'summary': 'Celebrating the coding train subscribers with mappa.js, a google summer of code project from 2017 by cristobal valenzuela.', 'duration': 32.411, 'max_score': 20.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU820487.jpg'}, {'end': 109.766, 'src': 'embed', 'start': 83.077, 'weight': 1, 'content': [{'end': 87.12, 'text': "So I logged in with my account in the Creator Studio, I went to the analytics, and then there's an export to CSV.", 'start': 83.077, 'duration': 4.043}, {'end': 91.101, 'text': 'So presumably, there is some way for me to get this data with the YouTube API.', 'start': 87.58, 'duration': 3.521}, {'end': 92.921, 'text': 'And I would encourage you.', 'start': 91.781, 'duration': 1.14}, {'end': 96.082, 'text': "I'm hoping people will make stuff either with their own YouTube channels.", 'start': 92.961, 'duration': 3.121}, {'end': 98.923, 'text': "Or I think it's OK for me to publish this data.", 'start': 96.242, 'duration': 2.681}, {'end': 100.824, 'text': "There's no user information in it.", 'start': 98.943, 'duration': 1.881}, {'end': 101.904, 'text': 'So I will check.', 'start': 101.124, 'duration': 0.78}, {'end': 107.485, 'text': 'But I will also publish this data as well if people want to re-visualize it in interesting ways for me.', 'start': 101.944, 'duration': 5.541}, {'end': 108.486, 'text': 'Oh, not for me, for you.', 'start': 107.545, 'duration': 0.941}, {'end': 109.766, 'text': 'But anyway, whatever.', 'start': 108.586, 'duration': 1.18}], 'summary': 'The speaker accessed youtube analytics via creator studio, suggesting potential use of youtube api for data extraction and visualization.', 'duration': 26.689, 'max_score': 83.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU883077.jpg'}, {'end': 153.791, 'src': 'heatmap', 'start': 123.3, 'weight': 2, 'content': [{'end': 136.104, 'text': 'Ah, what I was going to show you is I have all of the subscribers by country, and I have also all of, I have watch time by country.', 'start': 123.3, 'duration': 12.804}, {'end': 137.784, 'text': 'This is the watch time in minutes.', 'start': 136.144, 'duration': 1.64}, {'end': 141.305, 'text': 'Apparently, people have watched.', 'start': 138.365, 'duration': 2.94}, {'end': 144.666, 'text': "I can't even read that that number.", 'start': 141.305, 'duration': 3.361}, {'end': 147.607, 'text': "it's 41 million 100 in the US.", 'start': 144.666, 'duration': 2.941}, {'end': 148.848, 'text': 'so 41 million minutes.', 'start': 147.607, 'duration': 1.241}, {'end': 149.468, 'text': "that's really.", 'start': 148.848, 'duration': 0.62}, {'end': 151.229, 'text': "It's really weird.", 'start': 150.548, 'duration': 0.681}, {'end': 153.791, 'text': "I mean, it wasn't just one person, I hope.", 'start': 151.249, 'duration': 2.542}], 'summary': 'There are 41 million minutes of watch time in the us.', 'duration': 30.491, 'max_score': 123.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8123300.jpg'}], 'start': 4.322, 'title': 'Mappa.js visualization', 'summary': 'Discusses plans for visualizing a large subscriber base using mappa.js, including obtaining csv files from youtube analytics and sharing data for re-visualization, with a mention of 41 million minutes of watch time by country.', 'chapters': [{'end': 153.791, 'start': 4.322, 'title': 'Coding train visualization with mappa.js', 'summary': "Discusses the creator's plan to celebrate a large number of subscribers through a visualization using mappa.js, with a mention of obtaining csv files from youtube analytics and the possibility of sharing the data for re-visualization, along with a statistic of 41 million minutes of watch time by country.", 'duration': 149.469, 'highlights': ['The creator plans to celebrate a large number of subscribers through a visualization using Mappa.js. The creator mentions celebrating a large amount of subscribers and expresses plans to use Mappa.js for visualization.', 'Mention of obtaining CSV files from YouTube Analytics and the possibility of sharing the data for re-visualization. The creator discusses obtaining CSV files from YouTube Analytics and encourages others to use the data for re-visualization, possibly through the YouTube API.', 'Statistic of 41 million minutes of watch time by country. The creator mentions having watch time data by country, specifically noting 41 million minutes in the US, highlighting the substantial engagement with the content.']}], 'duration': 149.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU84322.jpg', 'highlights': ['The creator plans to celebrate a large number of subscribers through a visualization using Mappa.js.', 'Mention of obtaining CSV files from YouTube Analytics and the possibility of sharing the data for re-visualization.', 'Statistic of 41 million minutes of watch time by country.']}, {'end': 475.995, 'segs': [{'end': 211.339, 'src': 'embed', 'start': 180.04, 'weight': 0, 'content': [{'end': 181.241, 'text': "But I'm going to use this.", 'start': 180.04, 'duration': 1.201}, {'end': 185.184, 'text': "I'm basically going to follow this tutorial by Chris called Simple Map.", 'start': 181.261, 'duration': 3.923}, {'end': 196.771, 'text': "Mappa is an interface to other mapping APIs, like Google Maps, Mapbox, Leaflet, and maybe I'm missing MapQuest.", 'start': 185.824, 'duration': 10.947}, {'end': 198.833, 'text': "Wow, MapQuest still exists? That's amazing.", 'start': 196.931, 'duration': 1.902}, {'end': 199.373, 'text': "I'm staying over here.", 'start': 198.853, 'duration': 0.52}, {'end': 200.374, 'text': 'Look, MapQuest.', 'start': 199.413, 'duration': 0.961}, {'end': 208.237, 'text': "So I'm going to use Leaflet just because you don't need an API key for Leaflet,", 'start': 201.714, 'duration': 6.523}, {'end': 211.339, 'text': 'so it makes it a little easier for me to just roll on in and make this project.', 'start': 208.237, 'duration': 3.102}], 'summary': 'Using leaflet for mapping project, no api key needed.', 'duration': 31.299, 'max_score': 180.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8180040.jpg'}, {'end': 318.928, 'src': 'embed', 'start': 289.687, 'weight': 3, 'content': [{'end': 290.567, 'text': 'subscriber data.', 'start': 289.687, 'duration': 0.88}, {'end': 294.13, 'text': "So let's first make sure I can actually load the CSV in the first place.", 'start': 290.587, 'duration': 3.543}, {'end': 297.713, 'text': "And I'm going to go over here, hit refresh.", 'start': 295.611, 'duration': 2.102}, {'end': 301.756, 'text': 'Missing initializer in const declaration.', 'start': 299.254, 'duration': 2.502}, {'end': 305.199, 'text': "Oh, okay, I can't use const here.", 'start': 302.877, 'duration': 2.322}, {'end': 307.52, 'text': 'Oh, this is such a failure already.', 'start': 305.219, 'duration': 2.301}, {'end': 312.264, 'text': "So I can't use const, why? Because this is me reassigning it.", 'start': 307.821, 'duration': 4.443}, {'end': 314.766, 'text': "I didn't assign it up there, so I'm going to use let.", 'start': 312.444, 'duration': 2.322}, {'end': 318.928, 'text': "Some other day, I'll find a perfect example.", 'start': 317.466, 'duration': 1.462}], 'summary': 'Troubleshooting csv loading with javascript, switching from const to let for reassignment.', 'duration': 29.241, 'max_score': 289.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8289687.jpg'}, {'end': 451.268, 'src': 'embed', 'start': 419.016, 'weight': 2, 'content': [{'end': 423.097, 'text': 'The test.csv file is just pending, pending, pending, pending.', 'start': 419.016, 'duration': 4.081}, {'end': 425.498, 'text': "It's never loading.", 'start': 424.638, 'duration': 0.86}, {'end': 427.438, 'text': 'Oh, it finally loaded.', 'start': 425.558, 'duration': 1.88}, {'end': 428.879, 'text': 'It took.', 'start': 428.439, 'duration': 0.44}, {'end': 433.176, 'text': "Uh, I can't, ah, I want to be able to see.", 'start': 430.354, 'duration': 2.822}, {'end': 437.879, 'text': 'It took 26 seconds, 26 seconds to load that file.', 'start': 433.196, 'duration': 4.683}, {'end': 445.284, 'text': "That file, test.csv, is exactly 12 bytes, meaning that's like two seconds per bytes.", 'start': 438.66, 'duration': 6.624}, {'end': 447.085, 'text': 'This is byte, very unreasonable.', 'start': 445.324, 'duration': 1.761}, {'end': 451.268, 'text': "So I don't know what's going on, but I don't want to blame anybody.", 'start': 447.325, 'duration': 3.943}], 'summary': 'Test.csv file took 26 seconds to load, 12 bytes, 2 seconds per byte.', 'duration': 32.252, 'max_score': 419.016, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8419016.jpg'}], 'start': 156.212, 'title': 'Mapping visualization and troubleshooting csv data loading', 'summary': 'Introduces mappa for mapping apis and the decision to use leaflet, while also discussing troubleshooting csv data loading, encountering issues with const declaration, and exploring alternative server options after a test.csv file takes 26 seconds to load.', 'chapters': [{'end': 208.237, 'start': 156.212, 'title': 'Mapping visualization tutorial', 'summary': 'Introduces mappa as an interface to various mapping apis like google maps, mapbox, leaflet, and mapquest, and the decision to use leaflet due to not needing an api key.', 'duration': 52.025, 'highlights': ['Mappa is an interface to various mapping APIs like Google Maps, Mapbox, Leaflet, and MapQuest.', 'The decision to use Leaflet is made due to not needing an API key.']}, {'end': 475.995, 'start': 208.237, 'title': 'Troubleshooting csv data loading', 'summary': 'Discusses troubleshooting the loading of csv data, encountering issues with const declaration, and exploring alternative server options after a test.csv file takes 26 seconds to load.', 'duration': 267.758, 'highlights': ['Encountering issues with const declaration and reassigning variables, opting to use let instead.', 'Experiencing a 26-second load time for a test.csv file, prompting exploration of alternative server options.', 'Discovering the test.csv file took 26 seconds to load and was only 12 bytes, indicating unreasonable loading time per byte.']}], 'duration': 319.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8156212.jpg', 'highlights': ['Mappa is an interface to various mapping APIs like Google Maps, Mapbox, Leaflet, and MapQuest.', 'The decision to use Leaflet is made due to not needing an API key.', 'Experiencing a 26-second load time for a test.csv file, prompting exploration of alternative server options.', 'Encountering issues with const declaration and reassigning variables, opting to use let instead.', 'Discovering the test.csv file took 26 seconds to load and was only 12 bytes, indicating unreasonable loading time per byte.']}, {'end': 824.788, 'segs': [{'end': 525.748, 'src': 'embed', 'start': 476.395, 'weight': 0, 'content': [{'end': 476.856, 'text': 'And look at this.', 'start': 476.395, 'duration': 0.461}, {'end': 479.637, 'text': 'Three milliseconds, test CSV.', 'start': 477.876, 'duration': 1.761}, {'end': 480.557, 'text': 'So now we can go back.', 'start': 479.657, 'duration': 0.9}, {'end': 481.598, 'text': "We're getting somewhere.", 'start': 480.577, 'duration': 1.021}, {'end': 482.758, 'text': "We're getting somewhere.", 'start': 481.618, 'duration': 1.14}, {'end': 488.02, 'text': 'I can go back to subscribers underscore geo dot CSV.', 'start': 483.118, 'duration': 4.902}, {'end': 490.381, 'text': 'There we go.', 'start': 490.001, 'duration': 0.38}, {'end': 493.883, 'text': "OK Now we've got that file.", 'start': 490.641, 'duration': 3.242}, {'end': 495.323, 'text': "I'm going to go back to the console.", 'start': 493.903, 'duration': 1.42}, {'end': 496.944, 'text': "I'm going to look at subscriber data.", 'start': 495.384, 'duration': 1.56}, {'end': 502.599, 'text': "And I can see, there we go, I've got an array with 237 rows.", 'start': 497.024, 'duration': 5.575}, {'end': 507.521, 'text': "So that means there's 237, oh, there's 53 columns.", 'start': 502.659, 'duration': 4.862}, {'end': 511.102, 'text': "There's lots of extra data in there, and there's 237 rows.", 'start': 507.541, 'duration': 3.561}, {'end': 514.383, 'text': 'Now, one thing is none of the columns have a name.', 'start': 511.402, 'duration': 2.981}, {'end': 521.385, 'text': 'So one of the things I want to do is p5, if I give it this nice little second argument and say header,', 'start': 514.644, 'duration': 6.741}, {'end': 525.748, 'text': 'I think that says the first row in the CSV file is the header.', 'start': 521.385, 'duration': 4.363}], 'summary': 'Obtained 237 rows of subscriber data with 53 columns, lacking column names.', 'duration': 49.353, 'max_score': 476.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8476395.jpg'}, {'end': 570.318, 'src': 'embed', 'start': 547.64, 'weight': 1, 'content': [{'end': 557.407, 'text': "So I'm probably going to clean up this data when I publish this just to have only the first three columns, country name, country ID, and subscribers.", 'start': 547.64, 'duration': 9.767}, {'end': 560.169, 'text': "That's all that I'm going to use for this example.", 'start': 558.047, 'duration': 2.122}, {'end': 565.994, 'text': "So now, what's next? I need a way of iterating over every single one of those.", 'start': 560.669, 'duration': 5.325}, {'end': 567.615, 'text': "So let's just look at how I might do that.", 'start': 566.014, 'duration': 1.601}, {'end': 570.318, 'text': "I don't know how, but I'll figure it out.", 'start': 568.696, 'duration': 1.622}], 'summary': 'Cleaning data for first three columns, country name, country id, and subscribers, then iterating over each one.', 'duration': 22.678, 'max_score': 547.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8547640.jpg'}, {'end': 824.788, 'src': 'embed', 'start': 770.212, 'weight': 2, 'content': [{'end': 778.82, 'text': 'Just to be clear, Leaflet is this, an open source JavaScript library for mobile-friendly interactive maps.', 'start': 770.212, 'duration': 8.608}, {'end': 785.795, 'text': 'So again, you can use Leaflet directly by just going right there and looking at how the code works.', 'start': 779.381, 'duration': 6.414}, {'end': 793.141, 'text': 'Mappa provides a layer on top of that, also because you can pick other things besides leaflet as well,', 'start': 786.075, 'duration': 7.066}, {'end': 796.343, 'text': 'as it integrates nicely with p5 and probably other JavaScript libraries.', 'start': 793.141, 'duration': 3.202}, {'end': 799.466, 'text': "All right, so now, let's just refresh.", 'start': 796.944, 'duration': 2.522}, {'end': 800.887, 'text': "Let's make sure things are still working.", 'start': 799.486, 'duration': 1.401}, {'end': 803.649, 'text': "Things are still, oh, there's an error at the top there.", 'start': 802.068, 'duration': 1.581}, {'end': 814.525, 'text': "Because it's mime type, Is x not executable? What did I do wrong here? Hmm, I have a little bit of an issue.", 'start': 807.432, 'duration': 7.093}, {'end': 817.165, 'text': "OK, I'm back.", 'start': 816.505, 'duration': 0.66}, {'end': 820.126, 'text': "It turns out that there's just a little bug with this CDN link.", 'start': 817.185, 'duration': 2.941}, {'end': 824.788, 'text': "And so I'm going to use a different CDN link, which is this one.", 'start': 820.967, 'duration': 3.821}], 'summary': 'Leaflet is an open source javascript library for interactive maps. mappa provides a layer on top, integrating with p5 and other libraries.', 'duration': 54.576, 'max_score': 770.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8770212.jpg'}], 'start': 476.395, 'title': 'Extracting and analyzing subscriber data', 'summary': 'Covers the process of extracting and analyzing subscriber data, which includes 237 rows and 53 columns, and discusses iterating over the data to extract country ids and subscribers. it also includes implementing the mappa library for interactive maps and troubleshooting a cdn link issue.', 'chapters': [{'end': 525.748, 'start': 476.395, 'title': 'Data analysis: extracting subscriber data', 'summary': 'Discusses the process of extracting and analyzing subscriber data, which includes 237 rows and 53 columns, where the first row in the csv file is the header.', 'duration': 49.353, 'highlights': ['The subscriber data consists of an array with 237 rows and 53 columns, containing substantial extra data.', 'The first row in the CSV file is considered as the header for the data, facilitating its organization.']}, {'end': 824.788, 'start': 526.57, 'title': 'Iterating over data and implementing mappa library', 'summary': 'Discusses iterating over subscriber data to extract country ids and subscribers, and then implementing the mappa library for interactive maps, with a brief mention of troubleshooting a cdn link issue.', 'duration': 298.218, 'highlights': ['Iterating over subscriber data to extract country IDs and subscribers The speaker demonstrates how to iterate over the subscriber data to extract country IDs and subscribers, mentioning the intention to clean up the data to only include the first three columns: country name, country ID, and subscribers.', 'Implementing the Mappa library for interactive maps The speaker discusses the process of implementing the Mappa library for interactive maps, emphasizing the use of Leaflet as an open-source JavaScript library for mobile-friendly interactive maps and the integration with p5 and other JavaScript libraries.', 'Troubleshooting a CDN link issue The speaker encounters an error related to a CDN link and troubleshoots the issue by using a different CDN link, resolving the problem.']}], 'duration': 348.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8476395.jpg', 'highlights': ['The subscriber data consists of an array with 237 rows and 53 columns, containing substantial extra data.', 'Iterating over subscriber data to extract country IDs and subscribers, and cleaning up the data to only include the first three columns: country name, country ID, and subscribers.', 'Implementing the Mappa library for interactive maps, emphasizing the use of Leaflet as an open-source JavaScript library for mobile-friendly interactive maps and the integration with p5 and other JavaScript libraries.', 'Troubleshooting a CDN link issue by using a different CDN link, resolving the problem.', 'The first row in the CSV file is considered as the header for the data, facilitating its organization.']}, {'end': 1334.315, 'segs': [{'end': 941.154, 'src': 'embed', 'start': 912.035, 'weight': 5, 'content': [{'end': 917.379, 'text': "And let's just give it a latitude, longitude of zero, zero and a zoom level of four.", 'start': 912.035, 'duration': 5.344}, {'end': 918.58, 'text': "That was what's in the tutorial.", 'start': 917.419, 'duration': 1.161}, {'end': 921.403, 'text': "And let's see if we see that at all.", 'start': 918.981, 'duration': 2.422}, {'end': 923.084, 'text': "I'm going to go here.", 'start': 922.404, 'duration': 0.68}, {'end': 930.53, 'text': 'And so now, one thing is, let me get rid of the canvas.', 'start': 924.325, 'duration': 6.205}, {'end': 934.977, 'text': "So I'm probably missing a step here.", 'start': 933.072, 'duration': 1.905}, {'end': 939.79, 'text': "I know that I have to overlay the canvas, but let's see, I don't see the map yet.", 'start': 935.077, 'duration': 4.713}, {'end': 941.154, 'text': 'Do I need to overlay the canvas?', 'start': 939.83, 'duration': 1.324}], 'summary': 'Tutorial sets location at 0,0 with zoom 4, troubleshooting map display.', 'duration': 29.119, 'max_score': 912.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8912035.jpg'}, {'end': 1049.297, 'src': 'embed', 'start': 997.324, 'weight': 0, 'content': [{'end': 1004.591, 'text': 'So now, if we go here, oops, train map overlay is not a function.', 'start': 997.324, 'duration': 7.267}, {'end': 1007.948, 'text': "Okay, what did I get wrong? I'm doing a terrible job here.", 'start': 1005.307, 'duration': 2.641}, {'end': 1009.309, 'text': 'Let me go to the tutorial.', 'start': 1008.189, 'duration': 1.12}, {'end': 1012.531, 'text': 'My map dot overlay canvas.', 'start': 1010.19, 'duration': 2.341}, {'end': 1015.293, 'text': 'Did I say overlay with a capital L? Yes, I did.', 'start': 1012.591, 'duration': 2.702}, {'end': 1017.394, 'text': 'Overlay is one word, people.', 'start': 1015.873, 'duration': 1.521}, {'end': 1020.315, 'text': 'Lowercase L.', 'start': 1018.254, 'duration': 2.061}, {'end': 1021.876, 'text': 'Okay, here we go.', 'start': 1020.315, 'duration': 1.561}, {'end': 1025.318, 'text': 'Onload setup sketch.', 'start': 1023.237, 'duration': 2.081}, {'end': 1030.243, 'text': 'Hmm, what did I get wrong now? So much for my no editing.', 'start': 1025.438, 'duration': 4.805}, {'end': 1031.525, 'text': 'Oh, there was another edit there.', 'start': 1030.364, 'duration': 1.161}, {'end': 1036.108, 'text': "Unfortunately, for whatever reason, whatever I'm doing is giving me an error.", 'start': 1032.204, 'duration': 3.904}, {'end': 1043.071, 'text': 'I discovered if I revert back to one version earlier of the MAPPA library, then the error goes away.', 'start': 1036.428, 'duration': 6.643}, {'end': 1044.153, 'text': 'So I can refresh.', 'start': 1043.332, 'duration': 0.821}, {'end': 1045.434, 'text': 'Oops, I have to hit Save.', 'start': 1044.233, 'duration': 1.201}, {'end': 1047.675, 'text': 'And then I can refresh.', 'start': 1046.734, 'duration': 0.941}, {'end': 1049.297, 'text': 'Aha, now, okay.', 'start': 1047.695, 'duration': 1.602}], 'summary': 'Encountered errors while using the mappa library, resolved by reverting to an earlier version.', 'duration': 51.973, 'max_score': 997.324, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8997324.jpg'}, {'end': 1089.091, 'src': 'embed', 'start': 1063.965, 'weight': 1, 'content': [{'end': 1070.307, 'text': 'So one of the things is, I have to specify a particular set of tiles that I want to load.', 'start': 1063.965, 'duration': 6.342}, {'end': 1078.969, 'text': 'And if I would have just read further down in the tutorial, it would show me that actually one way to do that is to put all of those things.', 'start': 1070.767, 'duration': 8.202}, {'end': 1083.05, 'text': 'Like I was saying I want the center to be 0, 0 and the zoom level to be 4.', 'start': 1079.069, 'duration': 3.981}, {'end': 1084.53, 'text': 'Now I need to also give it a style.', 'start': 1083.05, 'duration': 1.48}, {'end': 1086.57, 'text': 'All those can go into a JavaScript object.', 'start': 1084.67, 'duration': 1.9}, {'end': 1089.091, 'text': "So I'm just going to copy paste this from here.", 'start': 1086.93, 'duration': 2.161}], 'summary': 'Specify tiles, center at 0,0, zoom 4, and style using javascript object.', 'duration': 25.126, 'max_score': 1063.965, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81063965.jpg'}, {'end': 1258.204, 'src': 'embed', 'start': 1224.548, 'weight': 3, 'content': [{'end': 1233.93, 'text': 'So the idea here is that I have a latitude and longitude and I want to find the pixel location of that no matter where the map is.', 'start': 1224.548, 'duration': 9.382}, {'end': 1242.266, 'text': "So let's just take this No matter what zoom is, let's take this and copy it into our code.", 'start': 1234.131, 'duration': 8.135}, {'end': 1253.138, 'text': 'And I should now see, hit refresh, oops, I got an error again.', 'start': 1248.073, 'duration': 5.065}, {'end': 1256.041, 'text': 'Oh, my map.', 'start': 1254.78, 'duration': 1.261}, {'end': 1258.204, 'text': 'I called it train map.', 'start': 1257.163, 'duration': 1.041}], 'summary': 'Objective: convert latitude and longitude to pixel location on map, encountering errors.', 'duration': 33.656, 'max_score': 1224.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81224548.jpg'}, {'end': 1312.837, 'src': 'embed', 'start': 1288.276, 'weight': 4, 'content': [{'end': 1294.121, 'text': 'which is a data set that has the latitude value for every single country.', 'start': 1288.276, 'duration': 5.845}, {'end': 1296.883, 'text': "So I'm just going to, I think I could probably Google for it.", 'start': 1294.361, 'duration': 2.522}, {'end': 1303.349, 'text': 'Canonical countries csv lat long, something like that, would probably, yes.', 'start': 1297.664, 'duration': 5.685}, {'end': 1304.309, 'text': "This is what I'm looking for.", 'start': 1303.369, 'duration': 0.94}, {'end': 1306.691, 'text': "I'm looking for the countries.csv data set.", 'start': 1304.329, 'duration': 2.362}, {'end': 1312.837, 'text': 'And this now has a country, every country with a latitude and longitude associated with it.', 'start': 1307.592, 'duration': 5.245}], 'summary': 'Searching for countries.csv dataset with latitude and longitude for every country.', 'duration': 24.561, 'max_score': 1288.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81288276.jpg'}], 'start': 825.289, 'title': 'Interactive map development', 'summary': 'Explores creating interactive maps using mappa and p5.js libraries, specifying zoom levels, drawing shapes, and mapping coordinates to pixel locations. it also addresses data set acquisition and challenges faced.', 'chapters': [{'end': 1110.08, 'start': 825.289, 'title': 'Creating tile maps with mappa library', 'summary': 'Explores creating tile maps using the mappa library, encountering errors and version issues, while aiming to center the map around 0,0 with a zoom level of 4, and overlaying the canvas to display the map.', 'duration': 284.791, 'highlights': ['Encountering errors and version issues with the MAPPA library, reverting to an earlier version to resolve errors and aiming to use the most recent version in the source code. The speaker encounters errors and version issues with the MAPPA library, leading to reverting to an earlier version to resolve errors and aiming to use the most recent version in the source code.', 'Aiming to center the map around 0,0 with a zoom level of 4 and specifying a particular set of tiles to load. The chapter focuses on centering the map around 0,0 with a zoom level of 4 and the need to specify a particular set of tiles to load for the map.', "Overlaying the canvas to display the map and encountering issues with the 'overlay' function, finding and correcting the error with the function syntax. The chapter covers overlaying the canvas to display the map and the speaker's process of finding and correcting the error with the 'overlay' function syntax."]}, {'end': 1334.315, 'start': 1111.846, 'title': 'Interactive map development and data set acquisition', 'summary': 'Focuses on developing an interactive map using p5.js, specifying initial dimensions and zoom levels, drawing shapes over the map, and mapping latitude and longitude coordinates to pixel locations, while also considering data set acquisition and challenges faced during the process.', 'duration': 222.469, 'highlights': ['The chapter demonstrates the initial setup for an interactive map, specifying dimensions of 800 by 600 and a default zoom level of 1.5, showcasing the ability to draw shapes over the map and address visual artifacts through the clear function. Initial setup for the interactive map includes specifying dimensions of 800 by 600, setting a default zoom level of 1.5, and demonstrating the ability to draw shapes over the map while addressing visual artifacts through the clear function.', 'The process involves mapping latitude and longitude coordinates to pixel locations, ensuring that drawn elements remain consistent with map interactions and zoom levels, ultimately achieving the desired outcome for interactive visualizations. Mapping latitude and longitude coordinates to pixel locations ensures that drawn elements remain consistent with map interactions and zoom levels, ultimately achieving the desired outcome for interactive visualizations.', "The chapter also addresses the need for acquiring a data set containing latitude and longitude values for countries, showcasing the attempt to locate and download the 'countries.csv' data set, encountering challenges in the process, and eventually finding a solution through a GitHub gist. The chapter addresses the need for acquiring a data set containing latitude and longitude values for countries, showcasing the attempt to locate and download the 'countries.csv' data set, encountering challenges in the process, and eventually finding a solution through a GitHub gist."]}], 'duration': 509.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU8825289.jpg', 'highlights': ['Encountering errors and version issues with the MAPPA library, reverting to an earlier version to resolve errors and aiming to use the most recent version in the source code.', 'Aiming to center the map around 0,0 with a zoom level of 4 and specifying a particular set of tiles to load.', "Overlaying the canvas to display the map and encountering issues with the 'overlay' function, finding and correcting the error with the function syntax.", 'Mapping latitude and longitude coordinates to pixel locations ensures that drawn elements remain consistent with map interactions and zoom levels, ultimately achieving the desired outcome for interactive visualizations.', "The chapter addresses the need for acquiring a data set containing latitude and longitude values for countries, showcasing the attempt to locate and download the 'countries.csv' data set, encountering challenges in the process, and eventually finding a solution through a GitHub gist.", 'The chapter demonstrates the initial setup for an interactive map, specifying dimensions of 800 by 600 and a default zoom level of 1.5, showcasing the ability to draw shapes over the map and address visual artifacts through the clear function.']}, {'end': 1908.277, 'segs': [{'end': 1367.474, 'src': 'embed', 'start': 1334.575, 'weight': 1, 'content': [{'end': 1338.298, 'text': 'And this is now every single country code with the lat long.', 'start': 1334.575, 'duration': 3.723}, {'end': 1341.14, 'text': "I'm going to assume that this is correct.", 'start': 1339.319, 'duration': 1.821}, {'end': 1344.082, 'text': "I'm going to copy paste this into a new file.", 'start': 1341.62, 'duration': 2.462}, {'end': 1348.484, 'text': "I'm going to call this countries.csv.", 'start': 1344.582, 'duration': 3.902}, {'end': 1352.466, 'text': "And I'm going to paste it in here.", 'start': 1350.225, 'duration': 2.241}, {'end': 1356.008, 'text': "So now I have, oh, not csv, it's JSON, excuse me.", 'start': 1352.886, 'duration': 3.122}, {'end': 1359.87, 'text': 'Countries JSON.', 'start': 1357.228, 'duration': 2.642}, {'end': 1366.273, 'text': "And so now I have all the countries, and they're lat long in JSON.", 'start': 1361.751, 'duration': 4.522}, {'end': 1367.474, 'text': 'So now I need to go back to my code.', 'start': 1366.293, 'duration': 1.181}], 'summary': "Create json file 'countries.json' with lat long for all countries.", 'duration': 32.899, 'max_score': 1334.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81334575.jpg'}, {'end': 1459.224, 'src': 'embed', 'start': 1425.049, 'weight': 4, 'content': [{'end': 1426.03, 'text': "I'm going to go over here.", 'start': 1425.049, 'duration': 0.981}, {'end': 1431.913, 'text': 'I think that in a moment, I am going to now get the country ID.', 'start': 1426.05, 'duration': 5.863}, {'end': 1439.738, 'text': 'Now, I think something a little bit funny is going on here, where if I look here, the country IDs are in capital letters.', 'start': 1431.993, 'duration': 7.745}, {'end': 1443.881, 'text': "And in my countries.json file, they're lowercase letters.", 'start': 1440.279, 'duration': 3.602}, {'end': 1446.303, 'text': "So I'm going to need to be conscientious about that.", 'start': 1443.901, 'duration': 2.402}, {'end': 1453.828, 'text': 'So I want to say let country equal row.get country ID.', 'start': 1446.723, 'duration': 7.105}, {'end': 1459.224, 'text': "And I'm going to say, I think I could just say to lower case.", 'start': 1455.14, 'duration': 4.084}], 'summary': 'Identifying country ids, adjusting case sensitivity, and converting to lowercase.', 'duration': 34.175, 'max_score': 1425.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81425049.jpg'}, {'end': 1615.738, 'src': 'embed', 'start': 1573.065, 'weight': 3, 'content': [{'end': 1577.726, 'text': "Ooh, let's say no loop, by the way, because right now I just want to do it once.", 'start': 1573.065, 'duration': 4.661}, {'end': 1582.208, 'text': 'Okay, so those look like the country codes.', 'start': 1580.087, 'duration': 2.121}, {'end': 1587.55, 'text': "Now, let's see.", 'start': 1582.428, 'duration': 5.122}, {'end': 1591.971, 'text': 'So this is countries.', 'start': 1590.851, 'duration': 1.12}, {'end': 1595.132, 'text': 'Countries.ad is that.', 'start': 1593.732, 'duration': 1.4}, {'end': 1604.365, 'text': 'And so I should be saying console log lat long.', 'start': 1598.191, 'duration': 6.174}, {'end': 1605.106, 'text': "Let's look at that.", 'start': 1604.485, 'duration': 0.621}, {'end': 1609.135, 'text': "OK, oh, there's some that are undefined.", 'start': 1607.514, 'duration': 1.621}, {'end': 1615.738, 'text': "So for whatever reason, I have some countries in my data set that I don't have a lat long for.", 'start': 1609.795, 'duration': 5.943}], 'summary': 'Reviewing country codes and data, identifying undefined lat long values.', 'duration': 42.673, 'max_score': 1573.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81573065.jpg'}, {'end': 1670.5, 'src': 'embed', 'start': 1642.024, 'weight': 5, 'content': [{'end': 1657.632, 'text': 'Oh! So look at this, look at all of you beautiful people all over the world who are subscribed to this channel from all of these different countries.', 'start': 1642.024, 'duration': 15.608}, {'end': 1659.133, 'text': 'This is amazing.', 'start': 1658.273, 'duration': 0.86}, {'end': 1662.875, 'text': "Oh, and I got this horrible thing going on where I'm console logging.", 'start': 1659.733, 'duration': 3.142}, {'end': 1664.216, 'text': 'Gotta get rid of that.', 'start': 1663.476, 'duration': 0.74}, {'end': 1668.919, 'text': 'You do not want to console log from within a loop, within a loop, a zillion things.', 'start': 1664.797, 'duration': 4.122}, {'end': 1670.5, 'text': "That'll really mess stuff up.", 'start': 1669.399, 'duration': 1.101}], 'summary': 'Acknowledgment of global audience, caution against excessive console logging.', 'duration': 28.476, 'max_score': 1642.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81642024.jpg'}, {'end': 1777.361, 'src': 'embed', 'start': 1750.106, 'weight': 2, 'content': [{'end': 1754.169, 'text': "Let's say this is a country with 10 subscribers, and this is a country with 5 subscribers.", 'start': 1750.106, 'duration': 4.063}, {'end': 1757.217, 'text': 'Have I visualized this accurately? No.', 'start': 1754.429, 'duration': 2.788}, {'end': 1758.577, 'text': 'The answer is no.', 'start': 1757.837, 'duration': 0.74}, {'end': 1759.758, 'text': 'Why? Think about this for a second.', 'start': 1758.657, 'duration': 1.101}, {'end': 1766.659, 'text': 'If I were to do this, this is a bar chart, 5, and this is 10, this is accurate.', 'start': 1760.738, 'duration': 5.921}, {'end': 1768.319, 'text': 'This is twice the size of this.', 'start': 1766.679, 'duration': 1.64}, {'end': 1771.54, 'text': 'Is this twice the size of this? Well, the radius here is 5.', 'start': 1769.199, 'duration': 2.341}, {'end': 1777.361, 'text': 'Can I make these 8 and 4? Let me make these 8 and 4.', 'start': 1771.54, 'duration': 5.821}], 'summary': 'Visual representation of 10 and 5 subscribers inaccurately portrayed as twice the size, corrected to 8 and 4.', 'duration': 27.255, 'max_score': 1750.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81750106.jpg'}, {'end': 1826.031, 'src': 'embed', 'start': 1799.855, 'weight': 0, 'content': [{'end': 1804.719, 'text': 'What I actually want to do is take the total number of subscribers and apply the square root to it.', 'start': 1799.855, 'duration': 4.864}, {'end': 1812.483, 'text': "so that when it's being visualized into a circle, it will actually be representative.", 'start': 1805.459, 'duration': 7.024}, {'end': 1816.766, 'text': 'the area of that circle will represent the total number of subscribers.', 'start': 1812.483, 'duration': 4.283}, {'end': 1819.887, 'text': 'Okay, we can come back over here now.', 'start': 1817.646, 'duration': 2.241}, {'end': 1823.71, 'text': 'All right, so here we go, this is where I am.', 'start': 1822.169, 'duration': 1.541}, {'end': 1826.031, 'text': 'Let me see, what was the zoom level when I opened it up? Great.', 'start': 1823.73, 'duration': 2.301}], 'summary': 'Apply square root to total subscribers for representative circle visualization.', 'duration': 26.176, 'max_score': 1799.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81799855.jpg'}, {'end': 1904.054, 'src': 'heatmap', 'start': 1866.172, 'weight': 0.779, 'content': [{'end': 1871.238, 'text': "And I'm going to give this some alpha because I have a feeling I'm going to have some really big circles.", 'start': 1866.172, 'duration': 5.066}, {'end': 1872.359, 'text': "And now I'm going to refresh.", 'start': 1871.638, 'duration': 0.721}, {'end': 1874.511, 'text': 'There we go.', 'start': 1873.951, 'duration': 0.56}, {'end': 1875.051, 'text': 'Look at this.', 'start': 1874.671, 'duration': 0.38}, {'end': 1878.372, 'text': 'We have now visualized the subscribers.', 'start': 1875.271, 'duration': 3.101}, {'end': 1880.953, 'text': 'And we can see here, this makes sense.', 'start': 1879.153, 'duration': 1.8}, {'end': 1884.715, 'text': 'There is a lot of subscribers in India.', 'start': 1881.013, 'duration': 3.702}, {'end': 1889.416, 'text': 'And we can look at Africa.', 'start': 1886.395, 'duration': 3.021}, {'end': 1892.197, 'text': 'We can see that South Africa and Kenya and Nigeria.', 'start': 1889.436, 'duration': 2.761}, {'end': 1904.054, 'text': 'If we look up here in Europe, And we can kind of see here that Deutschland, Germany, and England over here.', 'start': 1892.217, 'duration': 11.837}], 'summary': 'Visualized subscriber distribution: india has the most, followed by south africa, kenya, nigeria, germany, and england.', 'duration': 37.882, 'max_score': 1866.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81866172.jpg'}], 'start': 1334.575, 'title': 'Visualizing subscriber data', 'summary': 'Discusses mapping country subscribers using lat long data in a json file to plot circles on a map, visualizing subscriber data by sizing circles based on the total number of subscribers and addressing issues encountered during implementation.', 'chapters': [{'end': 1641.924, 'start': 1334.575, 'title': 'Mapping country subscribers', 'summary': 'Discusses loading country codes with lat long into a json file, then utilizing the data to plot circles on a map for each country with subscribers, encountering issues with undefined lat long data.', 'duration': 307.349, 'highlights': ['The speaker loads country codes with lat long into a JSON file, intending to use the data to plot circles on a map for countries with subscribers.', 'The speaker encounters an issue with some countries having undefined lat long data, leading to an error when attempting to draw circles on the map.', 'The speaker observes that the country codes are in capital letters, while in the JSON file, they are in lowercase, indicating a need to be conscientious about case sensitivity when retrieving data.']}, {'end': 1908.277, 'start': 1642.024, 'title': 'Visualizing subscriber data in circles', 'summary': 'Discusses visualizing subscriber data by sizing circles according to the total number of subscribers, explaining the need to be conscientious about accurately representing the total number of subscribers, and implementing the visualization in a program.', 'duration': 266.253, 'highlights': ['The chapter emphasizes the importance of accurately representing the total number of subscribers by sizing circles according to the square root of the subscriber count, ensuring that the area of the circle represents the total number of subscribers.', 'The speaker identifies the need to avoid console logging from within a loop, which can negatively impact the functionality of the program.', 'The speaker demonstrates the process of visualizing subscriber data using circles and successfully implements the visualization in the program, showcasing the distribution of subscribers across different countries.']}], 'duration': 573.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81334575.jpg', 'highlights': ['The speaker emphasizes accurately representing subscriber count by sizing circles based on the square root of the count.', 'The speaker loads country codes with lat long into a JSON file to plot circles on a map for countries with subscribers.', 'The speaker successfully implements the visualization of subscriber data using circles, showcasing the distribution of subscribers across different countries.', 'The speaker encounters an issue with some countries having undefined lat long data, leading to an error when attempting to draw circles on the map.', 'The speaker observes that the country codes are in capital letters, while in the JSON file, they are in lowercase, indicating a need to be conscientious about case sensitivity when retrieving data.', 'The speaker identifies the need to avoid console logging from within a loop, which can negatively impact the functionality of the program.']}, {'end': 2615.49, 'segs': [{'end': 1967.737, 'src': 'embed', 'start': 1933.071, 'weight': 0, 'content': [{'end': 1941.937, 'text': 'The circles are not resizing according to the zoom level.', 'start': 1933.071, 'duration': 8.866}, {'end': 1946.7, 'text': "So how do I do that? There's got to be a way in the Mappa library.", 'start': 1941.997, 'duration': 4.703}, {'end': 1951.203, 'text': "Let's look at the API.", 'start': 1947.32, 'duration': 3.883}, {'end': 1960.432, 'text': 'So if I go under leaflet, We can see, look, this is actually changing, right? We can see this example, the circles are changing.', 'start': 1951.243, 'duration': 9.189}, {'end': 1961.913, 'text': "And let's see how that's done.", 'start': 1960.452, 'duration': 1.461}, {'end': 1967.737, 'text': 'Map.zoom So map.zoom.', 'start': 1964.375, 'duration': 3.362}], 'summary': "Circles in mappa library aren't resizing with zoom level. needs investigation using the api.", 'duration': 34.666, 'max_score': 1933.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81933071.jpg'}, {'end': 2111.531, 'src': 'embed', 'start': 2052.458, 'weight': 1, 'content': [{'end': 2058.436, 'text': 'So what I need to do is say times zoom And then now, look at this.', 'start': 2052.458, 'duration': 5.978}, {'end': 2059.775, 'text': "Everything's way too big.", 'start': 2058.616, 'duration': 1.159}, {'end': 2064.056, 'text': 'So now I need to figure out an effective way to lower everything.', 'start': 2060.077, 'duration': 3.979}, {'end': 2069.678, 'text': 'So one thing I could do is I could find the, I probably should just pre-process the data in setup.', 'start': 2064.097, 'duration': 5.581}, {'end': 2073.039, 'text': "There's no reason for me to do all this parsing over and over again.", 'start': 2069.697, 'duration': 3.342}, {'end': 2075.998, 'text': 'So let me pre-process the data in setup.', 'start': 2073.059, 'duration': 2.939}, {'end': 2081.92, 'text': "And I'm going to create my own array.", 'start': 2078.199, 'duration': 3.721}, {'end': 2085.261, 'text': "So I'm going to say data is an array.", 'start': 2082.28, 'duration': 2.981}, {'end': 2089.175, 'text': "Then I'm going to go to Setup.", 'start': 2088.114, 'duration': 1.061}, {'end': 2092.237, 'text': "I'm going to paste in that loop.", 'start': 2090.876, 'duration': 1.361}, {'end': 2094.098, 'text': "I'm going to get the country.", 'start': 2092.877, 'duration': 1.221}, {'end': 2097.861, 'text': "And then here, I'm going to get the pixel.", 'start': 2096.159, 'duration': 1.702}, {'end': 2099.762, 'text': "Oh, I don't want the pixel location.", 'start': 2098.001, 'duration': 1.761}, {'end': 2102.224, 'text': 'I just want the lat long and the sub count.', 'start': 2099.782, 'duration': 2.442}, {'end': 2111.531, 'text': "So then I'm going to say, what am I going to say here? I'm going to say data.push.", 'start': 2103.825, 'duration': 7.706}], 'summary': 'Pre-process data in setup to create array for efficient parsing.', 'duration': 59.073, 'max_score': 2052.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU82052458.jpg'}, {'end': 2171.224, 'src': 'embed', 'start': 2139.167, 'weight': 4, 'content': [{'end': 2143.491, 'text': 'I want to create an object with these properties, and the properties have the same name of the variables.', 'start': 2139.167, 'duration': 4.324}, {'end': 2144.812, 'text': "You don't have to do that anymore.", 'start': 2143.671, 'duration': 1.141}, {'end': 2149.335, 'text': 'JavaScript, new fancy JavaScript, ES something or other, allows me to just do this.', 'start': 2144.892, 'duration': 4.443}, {'end': 2153.119, 'text': 'Lat long sub count.', 'start': 2150.276, 'duration': 2.843}, {'end': 2164.56, 'text': "And by definition, It's going to assume that if I generate an object this way, that I want the property name to be the same name.", 'start': 2153.299, 'duration': 11.261}, {'end': 2171.224, 'text': 'I want the property name to be the same name as as the actual variable name itself.', 'start': 2164.56, 'duration': 6.664}], 'summary': "Javascript's new feature allows creating objects with properties having the same name as variables.", 'duration': 32.057, 'max_score': 2139.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU82139167.jpg'}, {'end': 2573.197, 'src': 'embed', 'start': 2543.823, 'weight': 2, 'content': [{'end': 2545.463, 'text': "Oh, they must, they're strings.", 'start': 2543.823, 'duration': 1.64}, {'end': 2548.204, 'text': "They're not numbers.", 'start': 2546.604, 'duration': 1.6}, {'end': 2549.325, 'text': 'Look at this.', 'start': 2548.704, 'duration': 0.621}, {'end': 2555.166, 'text': "If they're strings in alphabetical order, nine eight is greater than nine 79.", 'start': 2550.645, 'duration': 4.521}, {'end': 2558.127, 'text': 'Ah, I was not being careful.', 'start': 2555.166, 'duration': 2.961}, {'end': 2561.768, 'text': "The value that I'm getting out of the table is not a number.", 'start': 2558.467, 'duration': 3.301}, {'end': 2563.929, 'text': 'I need to convert it to a number.', 'start': 2562.368, 'duration': 1.561}, {'end': 2573.197, 'text': "It's by default, and I think probably I might have been able to say something like get number with the P5 API, or I'm not sure, let's see.", 'start': 2565.393, 'duration': 7.804}], 'summary': 'String comparison issue identified, conversion to number needed.', 'duration': 29.374, 'max_score': 2543.823, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU82543823.jpg'}], 'start': 1908.317, 'title': 'Circle size and javascript arrays', 'summary': 'Covers adjusting circle sizes on a map based on zoom level using mappa library and leaflet api, along with utilizing enhanced object literals in javascript to process data and handling issues with data type conversion.', 'chapters': [{'end': 2075.998, 'start': 1908.317, 'title': 'Adjusting circle size based on zoom level', 'summary': 'Focuses on adjusting the size of circles on a map based on the zoom level, using the mappa library and leaflet api to dynamically change the circle sizes and considering preprocessing the data in setup to optimize performance.', 'duration': 167.681, 'highlights': ['Using map.zoom to dynamically change circle size based on zoom level The chapter discusses using the map.zoom function to adjust the size of circles on a map based on the zoom level, aiming to dynamically change the circle sizes as the map is zoomed in or out.', 'Considering pre-processing data in setup to optimize performance The author considers pre-processing the data in the setup to avoid repetitive parsing and improve performance, emphasizing the need to optimize the data handling process for efficiency.']}, {'end': 2615.49, 'start': 2078.199, 'title': 'Javascript array and enhanced object literals', 'summary': 'Discusses creating arrays, using enhanced object literals in javascript to process data, and identifying and resolving issues with converting string to number data type.', 'duration': 537.291, 'highlights': ['Using enhanced object literals in JavaScript for creating objects with properties having the same name as the variables. The speaker discusses using enhanced object literals in JavaScript, which allows creating objects with properties having the same name as the variables, demonstrating a new feature in JavaScript for creating object literals.', 'Identifying and resolving issues with converting string to number data type. The speaker identifies and resolves issues with converting string data to number data type, highlighting the importance of converting data types for accurate processing and calculations.', 'Discussing the process of creating arrays and using loops to process and manipulate array data. The speaker discusses the process of creating arrays and using loops to process and manipulate array data, showcasing practical implementation of array manipulation in JavaScript.']}], 'duration': 707.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU81908317.jpg', 'highlights': ['Using map.zoom to dynamically change circle size based on zoom level', 'Considering pre-processing data in setup to optimize performance', 'Identifying and resolving issues with converting string to number data type', 'Discussing the process of creating arrays and using loops to process and manipulate array data', 'Using enhanced object literals in JavaScript for creating objects with properties having the same name as the variables']}, {'end': 3056.039, 'segs': [{'end': 2670.92, 'src': 'embed', 'start': 2616.331, 'weight': 0, 'content': [{'end': 2633.199, 'text': "So now, if I zoom in, The sizes aren't changing, right? The size, no, but I want it to, Oi! I'm learning a lot from doing this video.", 'start': 2616.331, 'duration': 16.868}, {'end': 2641.024, 'text': "It turns out, and this shouldn't have been a surprise to me, I have encountered this before, I think, that it's not a linear relationship.", 'start': 2634.46, 'duration': 6.564}, {'end': 2646.887, 'text': "When I zoom from 1 to 2, or 2 to 4, I'm not just doubling the size.", 'start': 2641.104, 'duration': 5.783}, {'end': 2654.251, 'text': "In fact, so multiplying by the zoom isn't really getting me a consistent sized circle as I'm moving and zooming around.", 'start': 2647.347, 'duration': 6.904}, {'end': 2657.933, 'text': 'So what I really actually want to do is not multiply by the zoom value.', 'start': 2654.531, 'duration': 3.402}, {'end': 2665.437, 'text': "And I think it's going to be a little easier to see if I say constant zoom equals, so just put it in a variable, train map zoom.", 'start': 2658.373, 'duration': 7.064}, {'end': 2670.92, 'text': 'And what I want to do is the scale.', 'start': 2665.917, 'duration': 5.003}], 'summary': "Zooming doesn't result in consistent circle size, need to use scale instead.", 'duration': 54.589, 'max_score': 2616.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU82616331.jpg'}, {'end': 2929.923, 'src': 'embed', 'start': 2882.363, 'weight': 1, 'content': [{'end': 2888.667, 'text': "There we go, so now we're looking at this map based on views, and now let's look at watch time.", 'start': 2882.363, 'duration': 6.304}, {'end': 2895.711, 'text': 'And I can go to switch it out just by commenting it to watch time minutes.', 'start': 2891.288, 'duration': 4.423}, {'end': 2898.338, 'text': 'And they all kind of look the same.', 'start': 2896.756, 'duration': 1.582}, {'end': 2900.921, 'text': "Be interesting to see what's the relative difference.", 'start': 2898.639, 'duration': 2.282}, {'end': 2903.104, 'text': 'These are like watch time per subscriber.', 'start': 2900.941, 'duration': 2.163}, {'end': 2904.746, 'text': "That's something I could visualize here.", 'start': 2903.344, 'duration': 1.402}, {'end': 2911.194, 'text': "I'm sure that many of you watching this could come up with a much more stylish or perhaps more effective way of communicating this.", 'start': 2905.467, 'duration': 5.727}, {'end': 2917.718, 'text': "So here's the thing, I will publish these data files along with the source code for this particular video.", 'start': 2911.514, 'duration': 6.204}, {'end': 2918.859, 'text': 'I would love to see you.', 'start': 2917.778, 'duration': 1.081}, {'end': 2927.282, 'text': 'maybe we can have some rainbow themed, train themed visualizations and try it with other.', 'start': 2918.859, 'duration': 8.423}, {'end': 2929.923, 'text': 'try it with other mapping APIs.', 'start': 2927.282, 'duration': 2.641}], 'summary': 'Analyzing map views and watch time, seeking more effective visualization methods, and encouraging collaboration for visualizations and mapping apis.', 'duration': 47.56, 'max_score': 2882.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU82882363.jpg'}, {'end': 3007.744, 'src': 'heatmap', 'start': 2961.093, 'weight': 1, 'content': [{'end': 2975.268, 'text': 'So, just to quickly make that, if I say frame count Module is 255, and you know the scale, the size, the scale is also times.', 'start': 2961.093, 'duration': 14.175}, {'end': 2982.836, 'text': 'you know sine of frame count times 0.01 or something right?', 'start': 2975.268, 'duration': 7.568}, {'end': 2986.119, 'text': "I'm just going to add some weird stuff to animate it right?", 'start': 2982.876, 'duration': 3.243}, {'end': 2988.641, 'text': 'You can see that these are now hold on.', 'start': 2986.399, 'duration': 2.242}, {'end': 2993.755, 'text': 'let me have that animate a little faster, 0.1..', 'start': 2988.641, 'duration': 5.114}, {'end': 3000.319, 'text': "You can see that they're blinking, right? And that blinking is going to stay consistent as I move around the map.", 'start': 2993.755, 'duration': 6.564}, {'end': 3002.201, 'text': 'And the color is changing.', 'start': 3001.18, 'duration': 1.021}, {'end': 3004.382, 'text': 'So this is the other thing you can do.', 'start': 3002.381, 'duration': 2.001}, {'end': 3007.744, 'text': 'You can animate this stuff.', 'start': 3006.283, 'duration': 1.461}], 'summary': 'Module frame count 255 scales and animates with blinking and color changes.', 'duration': 46.651, 'max_score': 2961.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU82961093.jpg'}], 'start': 2616.331, 'title': 'Visualizing data on youtube', 'summary': 'Explores the non-linear relationship between zoom and circle size in data visualization, and the visualization of youtube data on a map, including subscribers, watch time, and views per country, with an emphasis on audience engagement and creative communication.', 'chapters': [{'end': 2751.297, 'start': 2616.331, 'title': 'Non-linear zoom relationship in visualizing data', 'summary': 'Discusses the non-linear relationship between zoom and circle size, showcasing the challenge of achieving a consistent size when zooming, and the adjustment made to address this by using a scale function and mapping the circle size between 1 and 10 pixels, achieving the desired visual effect.', 'duration': 134.966, 'highlights': ['Using the scale function and mapping the circle size between 1 and 10 pixels The adjustment made to address the non-linear relationship between zoom and circle size, resulting in a consistent size when zooming.', 'Challenge of achieving a consistent size when zooming Discussing the difficulty of obtaining a consistent circle size when zooming due to the non-linear relationship between zoom and size.', 'Not a linear relationship between zoom and circle size Explaining the non-linear relationship between zoom and circle size, where zooming from 1 to 2 or 2 to 4 does not simply double the size.']}, {'end': 3056.039, 'start': 2751.357, 'title': 'Visualizing youtube data', 'summary': 'Discusses visualizing youtube data on a map, exploring subscribers, watch time, and views per country, while also encouraging audience participation and creative data communication.', 'duration': 304.682, 'highlights': ['The chapter discusses visualizing YouTube data on a map, exploring subscribers, watch time, and views per country The speaker explores visualizing YouTube data on a map, focusing on subscribers, watch time, and views per country.', 'Encourages audience participation and creative data communication The speaker encourages audience participation and creativity in communicating data, inviting viewers to share their visualizations and ideas for improvement.', 'Demonstrates animating the map based on data and encourages experimentation with data visualization The speaker demonstrates animating the map based on data and encourages experimentation with different ways of visualizing data and maps.']}], 'duration': 439.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ae73YY_GAU8/pics/Ae73YY_GAU82616331.jpg', 'highlights': ['Using the scale function and mapping the circle size between 1 and 10 pixels to address the non-linear relationship between zoom and circle size.', 'The chapter discusses visualizing YouTube data on a map, exploring subscribers, watch time, and views per country.', 'The adjustment made to address the non-linear relationship between zoom and circle size, resulting in a consistent size when zooming.', 'The speaker encourages audience participation and creativity in communicating data, inviting viewers to share their visualizations and ideas for improvement.']}], 'highlights': ['The speaker successfully implements the visualization of subscriber data using circles, showcasing the distribution of subscribers across different countries.', 'The creator plans to celebrate a large number of subscribers through a visualization using Mappa.js.', 'The subscriber data consists of an array with 237 rows and 53 columns, containing substantial extra data.', 'Mappa is an interface to various mapping APIs like Google Maps, Mapbox, Leaflet, and MapQuest.', 'Using the scale function and mapping the circle size between 1 and 10 pixels to address the non-linear relationship between zoom and circle size.']}