title
No Black Box Machine Learning Course – Learn Without Libraries
description
In this No Black Box Machine Learning Course in JavaScript, you will gain a deep understanding of machine learning systems by coding without relying on libraries. This unique approach not only demystifies the inner workings of machine learning but also significantly enhances software development skills.
✏️ Course created by @Radu (PhD in Computer Science)
🎥 Watch part two: https://youtu.be/3wwiOSxDAmg
HOMEWORK
🏠 1st assignment spreadsheet: https://docs.google.com/spreadsheets/d/16wIddJ9jKAAvJOXPcF0gNRx39AOE9A2-mQeK6UR2qnY/edit?usp=sharing
🏠 Submit all other assignments to Radu's Discord Server: https://discord.com/invite/gJFcF5XVn9
GITHUB LINKS
💻 Drawing App: https://github.com/gniziemazity/drawing-app
💻 Data: https://github.com/gniziemazity/drawing-data
💻 Custom Chart Component: https://github.com/gniziemazity/javascript_chart
💻 Full Course Code (In Parts): https://github.com/gniziemazity/ml-course
PREREQUISITES
🎥 Interpolation: https://youtu.be/J_puRs40GhM
🎥 Linear Algebra: https://youtu.be/nzyOCd9FcCA
🎥 Trigonometry: https://youtu.be/xK3vKWMFVgw
LINKS
🔗 Check out the Recognizer we'll build in this course: https://radufromfinland.com/projects/ml/recognizer
🔗 Draw for Radu, Call for help video: https://youtu.be/Yw2QZ1vq2ek
🔗 Draw for Radu, Data collection tool: https://radufromfinland.com/projects/ml
🔗 Radu's Self-driving Car Course: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
🔗 Radu's older Machine Learning video: https://youtu.be/QXB1ytG95gs
🔗 CHART TUTORIAL (mentioned at 01:45:27): https://youtu.be/n8uCt1TSGKE
🔗 CHART CODE: https://github.com/gniziemazity/javascript_chart
TOOLS
🔧 Visual Studio Code: https://code.visualstudio.com/download
🔧 Google Chrome: https://www.google.com/chrome
🔧 Node JS: https://nodejs.org/en/download
(make sure you add 'node' and 'npm' to the PATH environment variables when asked!)
TIMESTAMPS
⌨️(0:00:00) Introduction
⌨️(0:05:04) Drawing App
⌨️(0:46:46) Homework 1
⌨️(0:47:05) Working with Data
⌨️(1:08:54) Data Visualizer
⌨️(1:29:52) Homework 2
⌨️(1:30:05) Feature Extraction
⌨️(1:38:07) Scatter Plot
⌨️(1:46:12) Custom Chart
⌨️(2:01:03) Homework 3
⌨️(2:01:35) Nearest Neighbor Classifier
⌨️(2:43:21) Homework 4 (better box)
⌨️(2:43:53) Data Scaling
⌨️(2:54:45) Homework 5
⌨️(2:55:23) K Nearest Neighbors Classifier
⌨️(3:04:18) Homework 6
⌨️(3:04:49) Model Evaluation
⌨️(3:21:29) Homework 7
⌨️(3:22:01) Decision Boundaries
⌨️(3:39:26) Homework 8
⌨️(3:39:59) Python & SkLearn
⌨️(3:50:35) Homework 9
detail
{'title': 'No Black Box Machine Learning Course – Learn Without Libraries', 'heatmap': [], 'summary': 'The course covers machine learning in javascript, building a web app for data collection, optimizing canvas, implementing sketching system and local file saving, processing raw data and dataset generation, creating web app, data viewer, image thumbnails, feature extraction, chart visualization, data inspection and visualization techniques, and implementing nearest neighbor and k-nearest-neighbor classifiers with a focus on javascript to python transition and achieving 39.62% accuracy with 10 nearest neighbors.', 'chapters': [{'end': 259.173, 'segs': [{'end': 44.723, 'src': 'embed', 'start': 0.109, 'weight': 0, 'content': [{'end': 3.672, 'text': 'Welcome to this no black box machine learning course.', 'start': 0.109, 'duration': 3.563}, {'end': 11.878, 'text': 'in JavaScript, you will gain a deep understanding of machine learning systems by coding without relying on libraries.', 'start': 3.672, 'duration': 8.206}, {'end': 20.485, 'text': 'This unique approach not only demystifies the inner workings of machine learning, but also significantly enhances software development skills.', 'start': 12.479, 'duration': 8.006}, {'end': 28.411, 'text': 'The course is designed and taught by Radu, who has a PhD in computer science and, as a university lecturer,', 'start': 20.925, 'duration': 7.486}, {'end': 35.236, 'text': 'from building a drawing app and working with data to exploring, feature extraction and implementing various classifiers.', 'start': 28.411, 'duration': 6.825}, {'end': 44.723, 'text': 'This course covers a wide array of topics that will equip you with the knowledge and expertise to create your own machine learning driven applications.', 'start': 35.836, 'duration': 8.887}], 'summary': 'No black box ml course in javascript, demystifies ml, taught by phd radu, covers wide array of topics.', 'duration': 44.614, 'max_score': 0.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k109.jpg'}, {'end': 113.656, 'src': 'embed', 'start': 86.374, 'weight': 3, 'content': [{'end': 89.535, 'text': "It's a drawing app that works on desktop and mobile devices.", 'start': 86.374, 'duration': 3.161}, {'end': 93.776, 'text': "We'll later reuse this sketchpad component to build a recognizer as well.", 'start': 90.275, 'duration': 3.501}, {'end': 102.08, 'text': "Next, I'll teach you how to process and visualize the data collected with the tool, the drawings you made when I asked for help.", 'start': 95.689, 'duration': 6.391}, {'end': 107.449, 'text': "If you missed that video and want your drawings to be used at some point, it's not too late to do it now.", 'start': 102.761, 'duration': 4.688}, {'end': 113.656, 'text': 'Then we move on to feature extraction and visualization.', 'start': 110.575, 'duration': 3.081}], 'summary': 'Drawing app for desktop and mobile, used to build a recognizer, process and visualize data, feature extraction and visualization.', 'duration': 27.282, 'max_score': 86.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k86374.jpg'}, {'end': 180.598, 'src': 'embed', 'start': 148.345, 'weight': 5, 'content': [{'end': 155.75, 'text': 'Being able to collect data, visualize it, clean it, and shape it in a useful form are all really important steps you need to do in practice.', 'start': 148.345, 'duration': 7.405}, {'end': 160.052, 'text': 'And not understanding data well is why people fail at machine learning.', 'start': 156.21, 'duration': 3.842}, {'end': 164.375, 'text': 'Even the most sophisticated libraries fail if the data is not what you expect.', 'start': 160.412, 'duration': 3.963}, {'end': 166.056, 'text': 'But this is our data.', 'start': 164.835, 'duration': 1.221}, {'end': 167.216, 'text': 'You made part of it.', 'start': 166.136, 'duration': 1.08}, {'end': 169.458, 'text': "So I'm pretty sure we won't have that problem.", 'start': 167.537, 'duration': 1.921}, {'end': 180.598, 'text': 'Now, the simplest learning method I can think of is the nearest neighbor classifier.', 'start': 176.457, 'duration': 4.141}], 'summary': 'Understanding and shaping data is crucial for successful machine learning; nearest neighbor classifier is a simple learning method.', 'duration': 32.253, 'max_score': 148.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k148345.jpg'}, {'end': 226.338, 'src': 'embed', 'start': 196.541, 'weight': 4, 'content': [{'end': 199.761, 'text': "but very few people can explain why, at least from what I've seen.", 'start': 196.541, 'duration': 3.22}, {'end': 202.662, 'text': "I'll make sure you understand why it helps.", 'start': 200.541, 'duration': 2.121}, {'end': 211.604, 'text': 'We then implement the more advanced k-nearest neighbors classifier and calculate its accuracy for different values of k.', 'start': 203.717, 'duration': 7.887}, {'end': 217.39, 'text': "To understand things even better, I'll teach you how to compute decision boundaries and display them on our chart.", 'start': 211.604, 'duration': 5.786}, {'end': 226.338, 'text': 'Now, at work, I teach a version of this course in Python, and a poll I made recently shows that some of you are interested in that as well.', 'start': 218.607, 'duration': 7.731}], 'summary': 'Teaching k-nearest neighbors classifier and decision boundaries with python.', 'duration': 29.797, 'max_score': 196.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k196541.jpg'}], 'start': 0.109, 'title': 'Machine learning in javascript', 'summary': 'Introduces a machine learning course in javascript, emphasizing coding without libraries, taught by a lecturer with a phd in computer science. it covers a wide array of topics to equip learners with expertise to create ml-driven applications. another focus is on building a drawing recognizer web app using machine learning, emphasizing data collection, visualization, nearest neighbor classifier implementation, and transitioning to python review.', 'chapters': [{'end': 64.327, 'start': 0.109, 'title': 'No black box ml in javascript', 'summary': 'Introduces a machine learning course in javascript, focusing on coding without libraries to gain a deep understanding of machine learning systems and enhance software development skills, led by a lecturer with a phd in computer science, covering a wide array of topics to equip learners with the expertise to create machine learning-driven applications.', 'duration': 64.218, 'highlights': ['Coding without relying on libraries demystifies the inner workings of machine learning and enhances software development skills.', 'The course is designed and taught by Radu, a university lecturer with a PhD in computer science, covering a wide array of topics to equip learners with the knowledge and expertise to create machine learning-driven applications.', 'The unique approach of coding without relying on libraries significantly enhances software development skills and provides a deep understanding of machine learning systems.']}, {'end': 259.173, 'start': 64.327, 'title': 'Building a drawing recognizer with machine learning', 'summary': 'Focuses on building a web app for recognizing drawings using machine learning, including data collection, visualization, nearest neighbor classifier implementation, and transitioning to a python review, emphasizing the importance of understanding data in machine learning.', 'duration': 194.846, 'highlights': ['Teaching how to build a data collection tool and a drawing app that works on desktop and mobile devices. Data collection tool, drawing app for desktop and mobile, reusing sketchpad component.', 'Teaching processing and visualization of collected data, emphasizing the importance of understanding and shaping data for machine learning. Data processing, data visualization, importance of understanding data for machine learning.', 'Implementing the nearest neighbor classifier and integrating it with the sketchpad, explaining data scaling and its importance in machine learning. Implementation of nearest neighbor classifier, integration with sketchpad, data scaling importance.', 'Implementing the more advanced k-nearest neighbors classifier, calculating its accuracy for different values of k, and teaching how to compute decision boundaries and display them on a chart. Implementation of k-nearest neighbors classifier, accuracy calculation, decision boundaries computation.', 'Reviewing the course content in Python, utilizing libraries and emphasizing the need for understanding data in machine learning. Reviewing course content in Python, utilizing libraries, emphasis on understanding data in machine learning.']}], 'duration': 259.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k109.jpg', 'highlights': ['The course is designed and taught by Radu, a university lecturer with a PhD in computer science, covering a wide array of topics to equip learners with the knowledge and expertise to create machine learning-driven applications.', 'Coding without relying on libraries demystifies the inner workings of machine learning and enhances software development skills.', 'The unique approach of coding without relying on libraries significantly enhances software development skills and provides a deep understanding of machine learning systems.', 'Teaching how to build a data collection tool and a drawing app that works on desktop and mobile devices.', 'Implementing the more advanced k-nearest neighbors classifier, calculating its accuracy for different values of k, and teaching how to compute decision boundaries and display them on a chart.', 'Reviewing the course content in Python, utilizing libraries and emphasizing the need for understanding data in machine learning.']}, {'end': 1069.185, 'segs': [{'end': 347.851, 'src': 'embed', 'start': 293.828, 'weight': 0, 'content': [{'end': 297.51, 'text': 'It will ask for some information first and then tell you what you need to draw.', 'start': 293.828, 'duration': 3.682}, {'end': 304.452, 'text': 'This sketch pad also has undo and save functionalities and it works on desktop and mobile devices as well.', 'start': 297.53, 'duration': 6.922}, {'end': 312.155, 'text': "We'll implement everything in this course using Visual Studio Code and to test we'll use a web browser.", 'start': 305.813, 'duration': 6.342}, {'end': 324.946, 'text': "Today we build a web application, so let's begin by creating a new folder called web, and inside this folder we'll create our first file,", 'start': 313.001, 'duration': 11.945}, {'end': 334.911, 'text': 'creator.html. it will be a web page that we use to create data for our dataset.', 'start': 324.946, 'duration': 9.965}, {'end': 344.95, 'text': 'now we begin to type basic html and In the head I will give this page a title.', 'start': 334.911, 'duration': 10.039}, {'end': 347.851, 'text': "Let's call it Data Creator.", 'start': 345.87, 'duration': 1.981}], 'summary': 'Tutorial on creating a web application with a sketch pad, undo and save functionalities, using visual studio code and a web browser.', 'duration': 54.023, 'max_score': 293.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k293828.jpg'}, {'end': 468.674, 'src': 'embed', 'start': 437.774, 'weight': 5, 'content': [{'end': 441.597, 'text': "and inside I'm going to add basic styles for the page.", 'start': 437.774, 'duration': 3.823}, {'end': 452.387, 'text': "for the body, I'm going to set the font family to Arial and the background color will be sky blue.", 'start': 441.597, 'duration': 10.79}, {'end': 455.85, 'text': 'I will also add some styles for this content.', 'start': 452.387, 'duration': 3.463}, {'end': 460.209, 'text': 'I want it to be in the middle of the page always.', 'start': 455.85, 'duration': 4.359}, {'end': 468.674, 'text': "so the position will be absolute and i'm gonna give it 50 from the top and 50 from the left.", 'start': 460.209, 'duration': 8.465}], 'summary': 'Setting arial font for body, sky blue background, and content positioned in the middle.', 'duration': 30.9, 'max_score': 437.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k437774.jpg'}, {'end': 618.056, 'src': 'embed', 'start': 591.173, 'weight': 3, 'content': [{'end': 605.056, 'text': "we'll use an HTML canvas element and I will create it here as an attribute of this class by calling document createElement canvas like this", 'start': 591.173, 'duration': 13.883}, {'end': 614.935, 'text': 'I will set the width of this canvas to be the size and the height of this canvas to be the size as well.', 'start': 606.693, 'duration': 8.242}, {'end': 618.056, 'text': "And let's give it also a little bit of style.", 'start': 615.755, 'duration': 2.301}], 'summary': 'Using html canvas element to create a resizable square.', 'duration': 26.883, 'max_score': 591.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k591173.jpg'}, {'end': 751.433, 'src': 'embed', 'start': 712.37, 'weight': 1, 'content': [{'end': 720.314, 'text': 'And the first thing that we will do is add to our canvas an unmousedown event listener, like this.', 'start': 712.37, 'duration': 7.944}, {'end': 726.258, 'text': 'We will detect the onMouseDown action and we will figure out the coordinates.', 'start': 721.277, 'duration': 4.981}, {'end': 738.101, 'text': 'We will do this by first getting the rectangle of the canvas bounding area with this function.', 'start': 727.799, 'duration': 10.302}, {'end': 751.433, 'text': 'And then we will obtain the mouse coordinates by taking the client X of this event minus the left side of this rectangle.', 'start': 739.101, 'duration': 12.332}], 'summary': 'Add unmousedown event listener, detect onmousedown action, and obtain mouse coordinates.', 'duration': 39.063, 'max_score': 712.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k712370.jpg'}, {'end': 872.781, 'src': 'embed', 'start': 845.057, 'weight': 2, 'content': [{'end': 851.612, 'text': 'Refresh And now when we are clicking, we get these integer values that are easier to work with.', 'start': 845.057, 'duration': 6.555}, {'end': 857.558, 'text': "Let's remove this debugging and start creating our path that we draw on the sketch path.", 'start': 852.153, 'duration': 5.405}, {'end': 866.654, 'text': 'So I will say here, this path is an array that contains the mouse.', 'start': 858.819, 'duration': 7.835}, {'end': 872.781, 'text': "When we just click on the canvas, that's what we get, one point added into this path array.", 'start': 867.154, 'duration': 5.627}], 'summary': 'Creating a path array with integer values for mouse clicks.', 'duration': 27.724, 'max_score': 845.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k845057.jpg'}], 'start': 259.654, 'title': 'Building a drawing app with javascript', 'summary': 'Covers building a web application for data collection, including creating a web page, linking a css file, implementing a sketchpad, adding basic styles, and implementing a sketchpad using an external javascript file with html canvas element and event listeners.', 'chapters': [{'end': 499.157, 'start': 259.654, 'title': 'Building a drawing app for data collection', 'summary': 'Covers building a web application for data collection, including creating a web page, linking a css file, implementing a sketchpad, and adding basic styles for the page.', 'duration': 239.503, 'highlights': ['Building a web application for data collection by creating a web page and linking a CSS file.', 'Implementing a sketchpad with undo and save functionalities for data collection.', 'Adding basic styles for the web page including setting the font family to Arial and the background color to sky blue.']}, {'end': 1069.185, 'start': 499.588, 'title': 'Implementing sketchpad with javascript', 'summary': 'Covers implementing a sketchpad using an external javascript file, creating an html canvas element, adding event listeners to detect mouse actions, and initializing the path for drawing on the sketchpad.', 'duration': 569.597, 'highlights': ['Creating an HTML canvas element with specified size and style The canvas element is created with a default size of 400 and a background color of white, and a box shadow is added for styling.', 'Adding event listeners to detect mouse actions and obtaining mouse coordinates Event listeners are added to detect mouse actions like onMouseDown and onMouseMove, and the coordinates of the mouse are obtained for drawing on the canvas.', 'Initializing the path for drawing on the sketchpad and tracking the number of points added to the path The path for drawing on the sketchpad is initialized, and the number of points added to the path is tracked using event listeners for onMouseDown, onMouseMove, and onMouseUp.']}], 'duration': 809.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k259654.jpg', 'highlights': ['Implementing a sketchpad with undo and save functionalities for data collection.', 'Adding event listeners to detect mouse actions and obtaining mouse coordinates.', 'Initializing the path for drawing on the sketchpad and tracking the number of points added to the path.', 'Creating an HTML canvas element with specified size and style.', 'Building a web application for data collection by creating a web page and linking a CSS file.', 'Adding basic styles for the web page including setting the font family to Arial and the background color to sky blue.']}, {'end': 2035.342, 'segs': [{'end': 1147.007, 'src': 'embed', 'start': 1070.286, 'weight': 6, 'content': [{'end': 1084.514, 'text': 'Now this getMouse function, we can write it here as mouse is equal to this.getMouse with the event parameter.', 'start': 1070.286, 'duration': 14.228}, {'end': 1089.662, 'text': 'And I can copy this for the top part here as well.', 'start': 1085.157, 'duration': 4.505}, {'end': 1092.525, 'text': "Let's refresh.", 'start': 1091.804, 'duration': 0.721}, {'end': 1101.976, 'text': 'And the same functionality as before, but now the code is much easier to read and simpler.', 'start': 1094.307, 'duration': 7.669}, {'end': 1108.093, 'text': 'All we need to do now is draw on the canvas instead of logging these numbers here.', 'start': 1103.129, 'duration': 4.964}, {'end': 1113.017, 'text': 'So let me write here this redraw.', 'start': 1109.014, 'duration': 4.003}, {'end': 1115.459, 'text': 'This will redraw everything on the canvas.', 'start': 1113.137, 'duration': 2.322}, {'end': 1117.761, 'text': "It's a method that we'll implement next.", 'start': 1115.92, 'duration': 1.841}, {'end': 1122.385, 'text': "And I'm going to write it here like so.", 'start': 1118.682, 'duration': 3.703}, {'end': 1131.154, 'text': 'We will start with clearing the canvas using the clearRect method, starting at 00,', 'start': 1124.008, 'duration': 7.146}, {'end': 1138.2, 'text': 'the top left corner and going all the way to canvasWidth and canvasHeight.', 'start': 1131.154, 'duration': 7.046}, {'end': 1141.783, 'text': 'And then we are going to draw our path.', 'start': 1139.641, 'duration': 2.142}, {'end': 1147.007, 'text': "For that, I'm going to implement a drawUtility object.", 'start': 1142.703, 'duration': 4.304}], 'summary': 'Simplified code for mouse functionality and canvas drawing implemented, making it easier to read and write.', 'duration': 76.721, 'max_score': 1070.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k1070286.jpg'}, {'end': 1217.024, 'src': 'embed', 'start': 1183.827, 'weight': 10, 'content': [{'end': 1190.732, 'text': "And we initialize our object called draw like this, and let's add the path function to it.", 'start': 1183.827, 'duration': 6.905}, {'end': 1198.998, 'text': "It's going to have a context, a path, and the default color set to black.", 'start': 1192.173, 'duration': 6.825}, {'end': 1205.452, 'text': 'So the stroke style is going to be set to the given color, black in this case.', 'start': 1200.546, 'duration': 4.906}, {'end': 1209.436, 'text': "And let's set here a line width, maybe three.", 'start': 1206.553, 'duration': 2.883}, {'end': 1211.698, 'text': 'We begin the path.', 'start': 1210.597, 'duration': 1.101}, {'end': 1217.024, 'text': "And now we're going to move to the first point in the path.", 'start': 1212.74, 'duration': 4.284}], 'summary': "Initializing object 'draw' with path function and default color set to black, setting stroke style and line width.", 'duration': 33.197, 'max_score': 1183.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k1183827.jpg'}, {'end': 1379.939, 'src': 'embed', 'start': 1310.115, 'weight': 0, 'content': [{'end': 1316.918, 'text': 'And also the line cap, this ending here that is straight, I would like it to be more round.', 'start': 1310.115, 'duration': 6.803}, {'end': 1318.238, 'text': 'It looks better like that.', 'start': 1317.178, 'duration': 1.06}, {'end': 1324.76, 'text': 'So we can change these things like so.', 'start': 1319.418, 'duration': 5.342}, {'end': 1329.63, 'text': "Let's save this, refresh.", 'start': 1328.029, 'duration': 1.601}, {'end': 1333.692, 'text': 'And now the line cap is round.', 'start': 1330.45, 'duration': 3.242}, {'end': 1339.395, 'text': 'And when we change direction like that, we also have a round corner point here.', 'start': 1334.292, 'duration': 5.103}, {'end': 1341.556, 'text': "So those problems don't happen anymore.", 'start': 1339.815, 'duration': 1.741}, {'end': 1344.258, 'text': 'Let me zoom back out.', 'start': 1342.357, 'duration': 1.901}, {'end': 1353.423, 'text': "Okay To draw multiple paths, I'm going to generate here a new function.", 'start': 1346.519, 'duration': 6.904}, {'end': 1360.866, 'text': 'again a context, paths this time, and then again a default color set to black.', 'start': 1354.722, 'duration': 6.144}, {'end': 1372.174, 'text': 'And what we will do is go through all the paths, and for each path, we draw a path with these properties.', 'start': 1361.907, 'duration': 10.267}, {'end': 1379.939, 'text': 'So what we do here is reuse this other function from above to draw multiple paths instead.', 'start': 1372.854, 'duration': 7.085}], 'summary': 'Improving the design by rounding line caps, corners, and drawing multiple paths with a new function.', 'duration': 69.824, 'max_score': 1310.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k1310115.jpg'}, {'end': 1604.555, 'src': 'embed', 'start': 1509.736, 'weight': 2, 'content': [{'end': 1514.119, 'text': "I'm going to save this, refresh, and notice how the width has changed.", 'start': 1509.736, 'duration': 4.383}, {'end': 1521.684, 'text': 'Here at the top, you can choose multiple devices if you want to try them out, but this one has a width of 375,', 'start': 1514.439, 'duration': 7.245}, {'end': 1525.666, 'text': 'and my canvas here is a little bit too large.', 'start': 1521.684, 'duration': 3.982}, {'end': 1539.679, 'text': 'So you can actually fix this by specifying here comma, and then maximum scale, something like 0.9.', 'start': 1526.467, 'duration': 13.212}, {'end': 1546.083, 'text': "In this case, it's going to rescale everything a little bit downwards to 90%.", 'start': 1539.679, 'duration': 6.404}, {'end': 1548.865, 'text': 'And my canvas fits even on these smaller screens.', 'start': 1546.083, 'duration': 2.782}, {'end': 1553.227, 'text': "Now, we don't want users to zoom in and out on this page.", 'start': 1549.925, 'duration': 3.302}, {'end': 1560.734, 'text': 'And we can prevent that by going here and specifying user scalable zero.', 'start': 1553.988, 'duration': 6.746}, {'end': 1562.976, 'text': 'But there is a big problem here.', 'start': 1561.395, 'duration': 1.581}, {'end': 1565.517, 'text': "This sketchpad just doesn't work.", 'start': 1562.996, 'duration': 2.521}, {'end': 1568.399, 'text': "I'm trying to draw now and it doesn't work.", 'start': 1566.317, 'duration': 2.082}, {'end': 1576.703, 'text': 'And the reason for that is that the event listeners for the touch are different than the event listeners for the mouse.', 'start': 1568.819, 'duration': 7.884}, {'end': 1581.046, 'text': 'So we are going to go to our sketchpad to add event listeners.', 'start': 1577.243, 'duration': 3.803}, {'end': 1591.525, 'text': "And here I'm going to write untouched start a new event listener.", 'start': 1581.766, 'duration': 9.759}, {'end': 1601.653, 'text': "I'm going to get the location from the event touches and I'm going to just call onMouseDown with this.", 'start': 1591.525, 'duration': 10.128}, {'end': 1604.555, 'text': 'so the same code from here.', 'start': 1601.653, 'duration': 2.902}], 'summary': 'Adjust canvas width to 375, prevent zoom, fix touch event listeners.', 'duration': 94.819, 'max_score': 1509.736, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k1509736.jpg'}, {'end': 1814.902, 'src': 'embed', 'start': 1777.136, 'weight': 3, 'content': [{'end': 1789.324, 'text': "so if this path's length is greater than zero, this undo button is going to be enabled.", 'start': 1777.136, 'duration': 12.188}, {'end': 1801.235, 'text': "otherwise this undo button is going to be disabled now if I'm going to refresh this and undo two times.", 'start': 1789.324, 'duration': 11.911}, {'end': 1803.416, 'text': 'This is a disabled button here.', 'start': 1801.795, 'duration': 1.621}, {'end': 1805.117, 'text': 'We can make it look nicer.', 'start': 1803.736, 'duration': 1.381}, {'end': 1814.902, 'text': "If we go to styles, I'm just going to add the general style for buttons and say, I want the cursor to be pointer.", 'start': 1805.517, 'duration': 9.385}], 'summary': 'Undo button enables if path length > 0. cursor set to pointer for nicer look.', 'duration': 37.766, 'max_score': 1777.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k1777136.jpg'}, {'end': 1947.216, 'src': 'embed', 'start': 1912.54, 'weight': 5, 'content': [{'end': 1917.963, 'text': 'We have to record who the person is and to have a button to advance to the next drawing.', 'start': 1912.54, 'duration': 5.423}, {'end': 1929.951, 'text': "I'm going to go here to Creator and actually we also need to make this sketchpad invisible at the beginning while we ask the people who they are.", 'start': 1919.284, 'duration': 10.667}, {'end': 1931.872, 'text': "So let's start with that.", 'start': 1930.731, 'duration': 1.141}, {'end': 1943.133, 'text': "I'm going to go here and say style visibility is hidden in the beginning.", 'start': 1932.272, 'duration': 10.861}, {'end': 1947.216, 'text': 'Let me just put this div on a new line there.', 'start': 1943.953, 'duration': 3.263}], 'summary': "Recording person's identity and hiding sketchpad initially for user input.", 'duration': 34.676, 'max_score': 1912.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k1912540.jpg'}], 'start': 1070.286, 'title': 'Simplifying code, optimizing canvas, and implementing undo functionality', 'summary': 'Discusses simplifying code with draw functions, optimizing canvas for mobile devices, and implementing undo functionality, resulting in easier-to-read code, proper functionality on mobile devices, and dataset creation.', 'chapters': [{'end': 1467.328, 'start': 1070.286, 'title': 'Simplifying code with draw functions', 'summary': 'Discusses simplifying code by implementing a draw function to redraw everything on the canvas and using a draw utility object to handle path drawing, line cap, and line join, resulting in easier-to-read code and improved visual appearance.', 'duration': 397.042, 'highlights': ['The chapter discusses simplifying code by implementing a draw function to redraw everything on the canvas and using a draw utility object to handle path drawing, line cap, and line join, resulting in easier-to-read code and improved visual appearance.', 'The draw function is implemented to redraw everything on the canvas, making the code much easier to read and simpler.', 'The draw utility object is introduced to handle path drawing, line cap, and line join, with specific implementation details such as setting stroke style, line width, and using moveTo and lineTo functions.', 'The implementation of line cap and line join in the draw utility object improves the visual appearance by creating round corner points and rounded line endings, addressing issues with sudden directional changes and straight endings.', 'A new function is generated to handle drawing multiple paths by looping through all the paths and using the draw function to draw each path with specified properties, leading to improved functionality in the sketch pad.']}, {'end': 1604.555, 'start': 1474.341, 'title': 'Optimizing canvas for mobile devices', 'summary': 'Discusses optimizing the canvas for mobile devices, including setting the viewport meta tag, specifying the device width, preventing zoom, and adapting event listeners for touch input, ultimately ensuring proper functionality on smaller screens.', 'duration': 130.214, 'highlights': ['The event listeners for touch input need to be adjusted to accommodate differences from mouse event listeners, ensuring proper functionality on mobile devices.', "Setting the viewport meta tag with the content 'width=device-width' adjusts the canvas to fit smaller screens, with a specific example of setting maximum scale to 0.9 for rescaling.", "Preventing users from zooming in and out on the page by specifying 'user-scalable=0' in the meta tag ensures a consistent canvas display on mobile devices."]}, {'end': 2035.342, 'start': 1604.555, 'title': 'Implementing undo functionality and dataset creation', 'summary': 'Covers implementing undo functionality for drawing, styling the undo button, and starting to create a dataset by making the sketchpad invisible and adding input fields and a start button.', 'duration': 430.787, 'highlights': ['Implementing undo functionality for drawing and enabling/disabling the undo button based on the number of actions performed. The undo functionality is implemented by adding an undo button with a click event listener to pop from the paths and redraw everything. The undo button is enabled or disabled based on the length of the paths, ensuring it works appropriately.', 'Styling the undo button to enhance its appearance and functionality. The undo button is styled by setting the cursor to a pointer, removing the border, adjusting the padding, height, border radius, and colors for the button and its hover and disabled states, resulting in a more aesthetically pleasing and user-friendly button.', "Starting to create a dataset by making the sketchpad invisible and adding input fields and a start button. The process of creating a dataset begins by setting the sketchpad to be invisible, adding an input field for the user's name, and a start button to initiate the next step of the dataset creation process."]}], 'duration': 965.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k1070286.jpg', 'highlights': ['A new function is generated to handle drawing multiple paths by looping through all the paths and using the draw function to draw each path with specified properties, leading to improved functionality in the sketch pad.', 'The implementation of line cap and line join in the draw utility object improves the visual appearance by creating round corner points and rounded line endings, addressing issues with sudden directional changes and straight endings.', "Setting the viewport meta tag with the content 'width=device-width' adjusts the canvas to fit smaller screens, with a specific example of setting maximum scale to 0.9 for rescaling.", 'The undo button is enabled or disabled based on the length of the paths, ensuring it works appropriately.', 'Styling the undo button to enhance its appearance and functionality. The undo button is styled by setting the cursor to a pointer, removing the border, adjusting the padding, height, border radius, and colors for the button and its hover and disabled states, resulting in a more aesthetically pleasing and user-friendly button.', "Starting to create a dataset by making the sketchpad invisible and adding input fields and a start button. The process of creating a dataset begins by setting the sketchpad to be invisible, adding an input field for the user's name, and a start button to initiate the next step of the dataset creation process.", 'The chapter discusses simplifying code by implementing a draw function to redraw everything on the canvas and using a draw utility object to handle path drawing, line cap, and line join, resulting in easier-to-read code and improved visual appearance.', 'The event listeners for touch input need to be adjusted to accommodate differences from mouse event listeners, ensuring proper functionality on mobile devices.', "Preventing users from zooming in and out on the page by specifying 'user-scalable=0' in the meta tag ensures a consistent canvas display on mobile devices.", 'The draw function is implemented to redraw everything on the canvas, making the code much easier to read and simpler.', 'The draw utility object is introduced to handle path drawing, line cap, and line join, with specific implementation details such as setting stroke style, line width, and using moveTo and lineTo functions.']}, {'end': 2822.927, 'segs': [{'end': 2116.885, 'src': 'embed', 'start': 2063.509, 'weight': 0, 'content': [{'end': 2070.119, 'text': 'This is where we will store all the paths that people are drawing for each of the different drawings that we ask them to do.', 'start': 2063.509, 'duration': 6.61}, {'end': 2077.797, 'text': 'Now, because my system is online and several students could theoretically be drawing at the same time,', 'start': 2071.713, 'duration': 6.084}, {'end': 2082.059, 'text': 'I have a more complex code on the backend to make sure session IDs are unique.', 'start': 2077.797, 'duration': 4.262}, {'end': 2084.801, 'text': "But so far, this hasn't been useful.", 'start': 2082.78, 'duration': 2.021}, {'end': 2086.762, 'text': 'All timestamps are unique.', 'start': 2085.281, 'duration': 1.481}, {'end': 2090.924, 'text': "And it's not a big surprise, really, given they have millisecond precision.", 'start': 2087.222, 'duration': 3.702}, {'end': 2096.848, 'text': "So I won't go into more details here and keep it simple like this with just the timestamps.", 'start': 2091.605, 'duration': 5.243}, {'end': 2100.941, 'text': "So let's implement our start function next.", 'start': 2098.18, 'duration': 2.761}, {'end': 2105.582, 'text': 'I will do it here at the bottom and say start.', 'start': 2101.581, 'duration': 4.001}, {'end': 2116.885, 'text': 'And check if there is a value provided in the student field, this input field from above.', 'start': 2108.423, 'duration': 8.462}], 'summary': 'Storing unique paths with millisecond precision timestamps for online drawing system.', 'duration': 53.376, 'max_score': 2063.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k2063509.jpg'}, {'end': 2342.763, 'src': 'embed', 'start': 2229.806, 'weight': 2, 'content': [{'end': 2236.207, 'text': "And then we'll also modify the innerHTML of the advanced button from start to next.", 'start': 2229.806, 'duration': 6.401}, {'end': 2244.014, 'text': 'I will also change the onClick event on the button to next.', 'start': 2239.153, 'duration': 4.861}, {'end': 2248.495, 'text': 'And this is going to be a new function that we will implement here.', 'start': 2244.534, 'duration': 3.961}, {'end': 2261.157, 'text': 'What we do inside it is we increase the index and we are going to copy the same things from here.', 'start': 2253.076, 'duration': 8.081}, {'end': 2265.958, 'text': 'We are going to get another label.', 'start': 2263.518, 'duration': 2.44}, {'end': 2269.777, 'text': 'And we are going to update the instructions like this.', 'start': 2266.576, 'duration': 3.201}, {'end': 2279.3, 'text': 'Now, before we increase this index, we are going to go up here and try to get the paths that were drawn using the sketch pad.', 'start': 2270.437, 'duration': 8.863}, {'end': 2291.063, 'text': 'So if there are paths, if there are no paths, we warn and say, draw something first.', 'start': 2280.96, 'duration': 10.103}, {'end': 2295.155, 'text': 'and return.', 'start': 2294.295, 'duration': 0.86}, {'end': 2297.837, 'text': "so the code doesn't go further.", 'start': 2295.155, 'duration': 2.682}, {'end': 2302.699, 'text': 'but if it goes here we can get the label of the path that was drawn.', 'start': 2297.837, 'duration': 4.862}, {'end': 2322.608, 'text': 'so still this index and here we can store in the data at the drawings of the given label, the paths coming from the sketchpad like this', 'start': 2302.699, 'duration': 19.909}, {'end': 2331.255, 'text': 'And the sketchpad will also need the function to reset itself, to empty the paths and redraw everything.', 'start': 2323.749, 'duration': 7.506}, {'end': 2334.537, 'text': "So let's implement this too.", 'start': 2332.336, 'duration': 2.201}, {'end': 2340.442, 'text': 'But before that, this is a problem here, redefining this label.', 'start': 2335.018, 'duration': 5.424}, {'end': 2342.763, 'text': 'This is going to be the next label.', 'start': 2340.522, 'duration': 2.241}], 'summary': 'Modify button and implement new function to update and store paths.', 'duration': 112.957, 'max_score': 2229.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k2229806.jpg'}, {'end': 2617.159, 'src': 'embed', 'start': 2585.106, 'weight': 5, 'content': [{'end': 2592.468, 'text': 'So the data that we are collecting, the paths that people are drawing, are going to be saved as a JSON string in a file.', 'start': 2585.106, 'duration': 7.362}, {'end': 2598.909, 'text': 'JSON stands for JavaScript Object Notation, a standard format for storing data like what we have here.', 'start': 2593.168, 'duration': 5.741}, {'end': 2604.811, 'text': "It's humanly readable, and most programming languages have support for it as well, like JavaScript.", 'start': 2599.51, 'duration': 5.301}, {'end': 2617.159, 'text': 'In JavaScript, we use JSON stringify to convert data into a JSON string and JSON parse to convert the JSON string back into an object.', 'start': 2608.891, 'duration': 8.268}], 'summary': 'Data paths collected as json string, readable and supported by most programming languages.', 'duration': 32.053, 'max_score': 2585.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k2585106.jpg'}, {'end': 2822.927, 'src': 'embed', 'start': 2754.55, 'weight': 7, 'content': [{'end': 2766.275, 'text': "I mean, for example, if you want to draw maybe a line like a horizon and then your line just continues there, it's not a nice user experience.", 'start': 2754.55, 'duration': 11.725}, {'end': 2778.737, 'text': "So to fix that, you can go to the sketch pad, And the event listener that you're going to add for onMouseUp is going to be on the document instead.", 'start': 2767.596, 'duration': 11.141}, {'end': 2781.339, 'text': 'Like this.', 'start': 2780.879, 'duration': 0.46}, {'end': 2786.283, 'text': 'And we have to do the same thing for the onTouchEnd event.', 'start': 2782.46, 'duration': 3.823}, {'end': 2789.045, 'text': 'Like this.', 'start': 2788.624, 'duration': 0.421}, {'end': 2795.57, 'text': 'Refresh Go here.', 'start': 2790.446, 'duration': 5.124}, {'end': 2797.291, 'text': 'Release the mouse.', 'start': 2796.43, 'duration': 0.861}, {'end': 2804.793, 'text': 'and then go back in, the Unmouse app has triggered and now we can start to draw a new path.', 'start': 2798.368, 'duration': 6.425}, {'end': 2815.161, 'text': "It would be nice to know if this system works on all devices, and I'd be grateful if you test it for me.", 'start': 2810.297, 'duration': 4.864}, {'end': 2822.927, 'text': "There's a spreadsheet in the description where you can fill in the device name, operating system, browser version, and report if anything is wrong.", 'start': 2815.701, 'duration': 7.226}], 'summary': 'Improving user experience by fixing the sketch pad event listeners for onmouseup and ontouchend. testing needed on all devices.', 'duration': 68.377, 'max_score': 2754.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k2754550.jpg'}], 'start': 2035.843, 'title': 'Implementing sketching system and local file saving', 'summary': 'Details the implementation of an interactive sketching system, covering data structure, session management, user input validation, and sketch pad functionalities. it also explains how to implement local file saving in a sketchpad application using javascript and json, enabling users to save their drawings locally and includes a request for user testing across different devices.', 'chapters': [{'end': 2459.072, 'start': 2035.843, 'title': 'Implementing interactive sketching system', 'summary': 'Details the implementation of an interactive sketching system, including data structure, session management, user input validation, and sketch pad functionality, with a particular emphasis on the start and next functions, as well as the storing of drawings and resetting the sketch pad.', 'duration': 423.229, 'highlights': ["The system includes an object with fields for the student, unique session identifiers derived from timestamps, and storage for drawings' paths, with a mechanism to ensure unique session IDs and unique timestamps, although the latter is found to be inherently unique due to millisecond precision.", 'The start function involves validating the student input, setting the student field, and managing the visibility of input and sketchpad elements, while prompting the user to type their name first and displaying alerts accordingly.', 'The implementation defines an index for the drawings list, sets instructions for the initial drawing, and modifies the innerHTML of the advanced button, including the onClick event, and introduces the next function to handle the transition to the next drawing.', 'The next function manages the index increment, retrieves the label of the next thing to draw, updates the instructions, and handles the paths drawn using the sketch pad by storing them in the data at the drawings of the given label.', "The sketchpad functionality includes a public reset method to empty the paths and redraw everything, with the demonstration of the system's data collection and the presence of an issue when reaching the end of the drawings list, prompting the need for an update to the instructions based on the index's relationship with the label's length."]}, {'end': 2822.927, 'start': 2459.232, 'title': 'Implementing local file saving', 'summary': 'Explains how to implement local file saving in a sketchpad application using javascript and json, enabling users to save their drawings locally, and the process involves creating and downloading a file, encoding data as a json string, and triggering the download action, with a request for user testing across different devices.', 'duration': 363.695, 'highlights': ['The process involves creating and downloading a file, encoding data as a JSON string, and triggering the download action, enabling users to save their drawings locally.', 'The data collected, representing the paths that people are drawing, is saved as a JSON string in a file, which is humanly readable and widely supported across programming languages.', 'Users are instructed to place the downloaded file alongside others in the dataset, with the explanation that this will make more sense after the next lecture.', 'A request is made for user testing across different devices, with a provided spreadsheet for users to fill in the device name, operating system, browser version, and report any issues.', 'The event listener for onMouseUp is modified to be on the document instead of the sketch pad, ensuring that the action triggers properly even after moving out of the page and back in, providing a better user experience.']}], 'duration': 787.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k2035843.jpg', 'highlights': ["The system includes an object with fields for the student, unique session identifiers, and storage for drawings' paths.", 'The start function involves validating student input, setting the student field, and managing the visibility of input and sketchpad elements.', 'The implementation defines an index for the drawings list, sets instructions for the initial drawing, and modifies the innerHTML of the advanced button.', 'The next function manages the index increment, retrieves the label of the next thing to draw, updates the instructions, and handles the paths drawn using the sketch pad.', "The sketchpad functionality includes a public reset method to empty the paths and redraw everything, with a demonstration of the system's data collection.", 'The process involves creating and downloading a file, encoding data as a JSON string, and triggering the download action, enabling users to save their drawings locally.', 'The data collected, representing the paths that people are drawing, is saved as a JSON string in a file, which is humanly readable and widely supported across programming languages.', 'A request is made for user testing across different devices, with a provided spreadsheet for users to fill in the device name, operating system, browser version, and report any issues.', 'The event listener for onMouseUp is modified to be on the document instead of the sketch pad, ensuring that the action triggers properly even after moving out of the page and back in.']}, {'end': 3903.926, 'segs': [{'end': 2851.912, 'src': 'embed', 'start': 2823.507, 'weight': 0, 'content': [{'end': 2825.289, 'text': 'Great if you propose solutions as well.', 'start': 2823.507, 'duration': 1.782}, {'end': 2831.483, 'text': 'The data I collected from you is just a bunch of JSON files like the one we saw earlier.', 'start': 2826.701, 'duration': 4.782}, {'end': 2837.046, 'text': 'Each of these contains the session ID, student name and eight different drawings.', 'start': 2832.104, 'duration': 4.942}, {'end': 2841.769, 'text': 'At the moment there are about 500 files and you can get them from GitHub.', 'start': 2837.807, 'duration': 3.962}, {'end': 2845.531, 'text': "The number is still growing and I'll be updating it from time to time.", 'start': 2842.229, 'duration': 3.302}, {'end': 2851.912, 'text': "Now the drawings are grouped together by the session, and that's not convenient in the long run.", 'start': 2846.491, 'duration': 5.421}], 'summary': 'Approximately 500 json files with session ids, student names, and 8 drawings each, available on github and continuously growing; drawings currently grouped by session, posing inconvenience in the long run.', 'duration': 28.405, 'max_score': 2823.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k2823507.jpg'}, {'end': 3006.216, 'src': 'embed', 'start': 2948.849, 'weight': 1, 'content': [{'end': 2950.79, 'text': 'So this is the folder we just created.', 'start': 2948.849, 'duration': 1.941}, {'end': 2958.973, 'text': 'Inside it, we are going to create a new folder called raw.', 'start': 2952.307, 'duration': 6.666}, {'end': 2964.618, 'text': 'This is going to contain the raw information collected from the drawing app.', 'start': 2960.735, 'duration': 3.883}, {'end': 2971.745, 'text': "I'm going to go inside it and paste all the data I've collected from students over the past few months.", 'start': 2965.699, 'duration': 6.046}, {'end': 2976.489, 'text': 'There are almost 500 submissions, each with eight different drawings.', 'start': 2972.105, 'duration': 4.384}, {'end': 2978.031, 'text': "It's really amazing.", 'start': 2976.85, 'duration': 1.181}, {'end': 2987.063, 'text': "Now, each of these files contain eight drawings, and we're going to process these to create a dataset where each sample is a drawing.", 'start': 2979.358, 'duration': 7.705}, {'end': 2993.708, 'text': "I'll go back to the data directory here and create a new folder called dataset.", 'start': 2988.044, 'duration': 5.664}, {'end': 3000.612, 'text': "And inside of this dataset folder, I'm going to create two different folders.", 'start': 2996.109, 'duration': 4.503}, {'end': 3006.216, 'text': 'One will hold the JSON representation of our samples, and the other one will be an image form.', 'start': 3001.453, 'duration': 4.763}], 'summary': 'Created raw folder with 500 submissions, each with 8 drawings, and dataset folder with json and image subfolders.', 'duration': 57.367, 'max_score': 2948.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k2948849.jpg'}, {'end': 3586.338, 'src': 'embed', 'start': 3556.637, 'weight': 3, 'content': [{'end': 3565.401, 'text': 'so now the draw exists, but we still need the canvas and, unlike in the browser here, we have to install the canvas separately.', 'start': 3556.637, 'duration': 8.764}, {'end': 3580.036, 'text': 'we go to the terminal and type npm, install canvas and now the node package manager is installing the canvas on our system.', 'start': 3565.401, 'duration': 14.635}, {'end': 3586.338, 'text': 'now i basically installed the library, even though i said no libraries in the course intro.', 'start': 3580.036, 'duration': 6.302}], 'summary': 'Installed canvas library using npm for drawing in node.js', 'duration': 29.701, 'max_score': 3556.637, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k3556637.jpg'}, {'end': 3840.587, 'src': 'embed', 'start': 3803.276, 'weight': 4, 'content': [{'end': 3817.76, 'text': 'I paste everything from earlier and at the bottom we need to type if the type of module is not undefined, we export the constants now.', 'start': 3803.276, 'duration': 14.484}, {'end': 3827.358, 'text': "if we go back to the terminal and rerun the script, it works, But it's slow and it would be nice to have a progress indicator here.", 'start': 3817.76, 'duration': 9.598}, {'end': 3831.441, 'text': "I'll implement one in a new file called utils.", 'start': 3828.218, 'duration': 3.223}, {'end': 3836.244, 'text': "Let's write here utils.js.", 'start': 3833.122, 'duration': 3.122}, {'end': 3840.587, 'text': 'And we create the utils object.', 'start': 3838.025, 'duration': 2.562}], 'summary': 'Implemented progress indicator in new utils.js file.', 'duration': 37.311, 'max_score': 3803.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k3803276.jpg'}], 'start': 2823.507, 'title': 'Processing raw data and dataset generation', 'summary': 'Covers converting 500 json files into a dataset containing session ids, student names, and eight drawings each for visualization. it also details setting up a node.js environment, processing submissions, and generating a dataset, emphasizing code organization and visualization.', 'chapters': [{'end': 2867.275, 'start': 2823.507, 'title': 'Processing raw data into a dataset', 'summary': 'Covers the process of converting a collection of json files into a dataset, consisting of about 500 files with session ids, student names, and eight drawings each, which are then processed into a more manageable form for data visualization.', 'duration': 43.768, 'highlights': ['The data consists of about 500 files, each containing session IDs, student names, and eight different drawings.', 'The chapter covers the process of converting the raw data into a dataset, which makes each drawing a sample for easier management and visualization.', 'The number of files is still growing and will be updated from time to time.']}, {'end': 3193.441, 'start': 2867.275, 'title': 'Node.js backend environment setup', 'summary': 'Covers setting up node.js, creating directories, processing almost 500 submissions with eight different drawings each, and creating a dataset using node.js for visualization, with a focus on using the terminal and file system.', 'duration': 326.166, 'highlights': ["Almost 500 submissions with eight drawings each processed to create a dataset The folder 'raw' contains almost 500 submissions, each with eight different drawings, which will be processed to create a dataset.", 'Setting up Node.js and creating directories for data storage The process involves setting up Node.js, creating directories for data storage, and using the terminal for navigation and file creation.', 'Focus on using the terminal and file system for dataset generation The chapter emphasizes the use of the terminal and file system for dataset generation, with a focus on using Node.js for visualization.']}, {'end': 3903.926, 'start': 3194.481, 'title': 'Dataset generation process', 'summary': 'Details the process of generating a dataset, including creating sample files, testing the code, visualizing the data, and organizing code into separate files and directories.', 'duration': 709.445, 'highlights': ["The code is tested using the command 'node datasetgenerator.js', resulting in the creation of a new file called samples.json in the data and dataset directory. Testing the code using 'node datasetgenerator.js' generates a new file called samples.json in the data and dataset directory.", 'The creation of image representations for each sample is discussed, including the use of the generate image file function, drawing paths, and storing the drawings as PNG images. The process involves creating image representations for each sample using the generate image file function, drawing paths, and storing the drawings as PNG images.', "The canvas module is installed using the command 'npm install canvas' to enable drawing functions in the node script. The canvas module is installed using the command 'npm install canvas' to enable drawing functions in the node script.", 'An indicator for tracking progress is implemented in the new file called utils.js, featuring a print progress function that calculates and displays the percentage completion of a process. An indicator for tracking progress is implemented in the new file called utils.js, featuring a print progress function that calculates and displays the percentage completion of a process.', 'The code is organized by creating separate files and directories for common functions, constants, and utilities, enhancing modularity and efficiency in the dataset generation process. The code is organized by creating separate files and directories for common functions, constants, and utilities, enhancing modularity and efficiency in the dataset generation process.']}], 'duration': 1080.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k2823507.jpg', 'highlights': ['The data consists of about 500 files, each containing session IDs, student names, and eight different drawings.', "Almost 500 submissions with eight drawings each processed to create a dataset The folder 'raw' contains almost 500 submissions, each with eight different drawings, which will be processed to create a dataset.", 'The code is organized by creating separate files and directories for common functions, constants, and utilities, enhancing modularity and efficiency in the dataset generation process.', "The canvas module is installed using the command 'npm install canvas' to enable drawing functions in the node script.", 'An indicator for tracking progress is implemented in the new file called utils.js, featuring a print progress function that calculates and displays the percentage completion of a process.']}, {'end': 5303.186, 'segs': [{'end': 3925.943, 'src': 'embed', 'start': 3904.467, 'weight': 0, 'content': [{'end': 3915.235, 'text': "Above here, I'm going to implement this format percent function, which just takes a value and it's going to return the value multiplied by 100.", 'start': 3904.467, 'duration': 10.768}, {'end': 3919.398, 'text': 'And then I want to have a two decimal precision here.', 'start': 3915.235, 'duration': 4.163}, {'end': 3922.54, 'text': 'I will also concatenate the percent symbol.', 'start': 3920.158, 'duration': 2.382}, {'end': 3925.943, 'text': "Now let's export this object down here.", 'start': 3923.701, 'duration': 2.242}], 'summary': 'Implement a format percent function to multiply a value by 100 and add two decimal precision and a percent symbol.', 'duration': 21.476, 'max_score': 3904.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k3904467.jpg'}, {'end': 3999.707, 'src': 'embed', 'start': 3970.249, 'weight': 1, 'content': [{'end': 3972.29, 'text': 'because each file contains eight drawings.', 'start': 3970.249, 'duration': 2.041}, {'end': 3977.772, 'text': "Let's save this, rerun the script, and now we have a nice progress indicator here.", 'start': 3972.81, 'duration': 4.962}, {'end': 3987.762, 'text': 'Now, keep in mind that these images are already here and what this script is doing is regenerating them over and over again every time we run it.', 'start': 3979.258, 'duration': 8.504}, {'end': 3993.084, 'text': 'I just did this to teach you about the file structure and the progress indicator.', 'start': 3988.702, 'duration': 4.382}, {'end': 3994.845, 'text': "Okay, it's done.", 'start': 3993.885, 'duration': 0.96}, {'end': 3999.707, 'text': "Now we're going to start building a web application that can display this dataset.", 'start': 3995.866, 'duration': 3.841}], 'summary': 'A script regenerates eight drawings to teach about file structure and progress indicator, now moving to building a web application.', 'duration': 29.458, 'max_score': 3970.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k3970249.jpg'}, {'end': 4268.57, 'src': 'embed', 'start': 4237.545, 'weight': 2, 'content': [{'end': 4248.995, 'text': "i'm going to save this and open this viewer html and there they are in the console our samples, all 3968 of them.", 'start': 4237.545, 'duration': 11.45}, {'end': 4258.603, 'text': 'we can investigate them here, what they are, who made them, and so on.', 'start': 4248.995, 'duration': 9.608}, {'end': 4265.589, 'text': 'Next, I want to create a table with these samples so that each row are all the samples from one specific user.', 'start': 4259.167, 'duration': 6.422}, {'end': 4268.57, 'text': "I'm going to have to group these by the student ID.", 'start': 4266.11, 'duration': 2.46}], 'summary': '3968 samples are displayed in console. table to be created by grouping samples by student id.', 'duration': 31.025, 'max_score': 4237.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k4237545.jpg'}, {'end': 4583.663, 'src': 'embed', 'start': 4551.138, 'weight': 3, 'content': [{'end': 4555.66, 'text': "And below, we're going to loop through the samples and add each of them independently.", 'start': 4551.138, 'duration': 4.522}, {'end': 4559.822, 'text': 'Sample of samples.', 'start': 4557.921, 'duration': 1.901}, {'end': 4565.064, 'text': 'I will take out here just the ID and the label of the samples.', 'start': 4560.922, 'duration': 4.142}, {'end': 4566.705, 'text': 'They are really all that we need.', 'start': 4565.204, 'duration': 1.501}, {'end': 4574.328, 'text': "And I'm going to create an image element next.", 'start': 4569.025, 'duration': 5.303}, {'end': 4577.269, 'text': 'Like so.', 'start': 4576.829, 'duration': 0.44}, {'end': 4583.663, 'text': 'and I will assign the source of this image to be the path of this image file.', 'start': 4578.038, 'duration': 5.625}], 'summary': 'Loop through samples, add independently. extract id and label. create image element.', 'duration': 32.525, 'max_score': 4551.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k4551138.jpg'}, {'end': 4859.852, 'src': 'embed', 'start': 4815.064, 'weight': 4, 'content': [{'end': 4820.386, 'text': 'we append the sample container.', 'start': 4815.064, 'duration': 5.322}, {'end': 4828.748, 'text': "okay, save the file, refresh the page and it's worse than before, but that's okay.", 'start': 4820.386, 'duration': 8.362}, {'end': 4829.788, 'text': "we'll fix it in css.", 'start': 4828.748, 'duration': 1.04}, {'end': 4836.517, 'text': "I'm gonna implement the class for the sample container first.", 'start': 4831.912, 'duration': 4.605}, {'end': 4851.993, 'text': "We'll give it the white background, text-aligned center, order radius 10%.", 'start': 4841.582, 'duration': 10.411}, {'end': 4853.395, 'text': 'I want it to have round corners.', 'start': 4851.993, 'duration': 1.402}, {'end': 4856.11, 'text': 'and margin one pixel.', 'start': 4854.83, 'duration': 1.28}, {'end': 4859.852, 'text': "Now I'll explain this flex part a little bit later.", 'start': 4856.911, 'duration': 2.941}], 'summary': 'Implementing css class for sample container with white background, text-aligned center, rounded corners, and 1px margin.', 'duration': 44.788, 'max_score': 4815.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k4815064.jpg'}, {'end': 4951.474, 'src': 'embed', 'start': 4923.112, 'weight': 5, 'content': [{'end': 4934.737, 'text': 'But we can do a quick fix here by typing an overflow of hidden to the sample container, save the file, refresh the page.', 'start': 4923.112, 'duration': 11.625}, {'end': 4939.288, 'text': "And now the structure is good, but the text doesn't fit entirely.", 'start': 4935.686, 'duration': 3.602}, {'end': 4941.069, 'text': "But it's not a big deal.", 'start': 4939.928, 'duration': 1.141}, {'end': 4944.25, 'text': "On a normal zoom level and a larger screen, it's just fine.", 'start': 4941.369, 'duration': 2.881}, {'end': 4951.474, 'text': 'Now, before we look a bit through these drawings, I have to talk a bit about flagged users.', 'start': 4945.671, 'duration': 5.803}], 'summary': "A quick fix for overflow issue in the sample container. text doesn't entirely fit, but not a big deal. discussion on flagged users.", 'duration': 28.362, 'max_score': 4923.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k4923112.jpg'}], 'start': 3904.467, 'title': 'Implementing functions and creating web app, data viewer, image thumbnails, and improving display and styling', 'summary': 'Covers the implementation of a format percent function, creation of a javascript object for web app communication, data viewer app setup with 3968 samples and 8 different samples per user, creation of image thumbnails with css alignment, and improving display with 10% space allocation for samples and 20% for labels, also discussing debugging text overflow issues and user flagging for data cleaning.', 'chapters': [{'end': 4121.442, 'start': 3904.467, 'title': 'Implementing format percent function and creating web app', 'summary': 'Details the implementation of a format percent function to export an object, including the progress indicator within a script and the creation of a javascript object to communicate between node scripts and web apps.', 'duration': 216.975, 'highlights': ['The chapter explains the implementation of a format percent function to return a value multiplied by 100 with two decimal precision and a percent symbol, followed by exporting the object (Relevance: 5)', 'The script includes a progress indicator that displays the count and maximum value, which is calculated as the number of files in a directory multiplied by eight, improving visualization and tracking of the dataset generation process (Relevance: 4)', "Creation of a JavaScript object to facilitate communication between node scripts and web apps, with the addition of a path to the js objects directory in constants.js and the creation of a 'samples.js' file to contain the JavaScript object (Relevance: 3)"]}, {'end': 4549.445, 'start': 4121.442, 'title': 'Creating data viewer app', 'summary': 'Discusses creating a data viewer app for a dataset, including setting up the html structure, grouping data by student id, and creating a table to display the data, with the output showing 3968 samples and 8 different samples per user.', 'duration': 428.003, 'highlights': ['The output shows 3968 samples and 8 different samples per user. The output of the viewer HTML displays 3968 samples and 8 different samples per user, with each row representing all the samples from one specific user.', 'Setting up the HTML structure for the data viewer app. The process involves creating a new file called viewer.html, including a meta tag for supporting UTF characters, linking an external style sheet, and writing the HTML structure with a div to contain the dataset, and including JavaScript files for further functionality.', 'Implementing a group by function to group data by student ID. In the utils.js file, a group by function is implemented to group the data by student ID, allowing for the display of samples for each student and creating a table to showcase the data.']}, {'end': 4701.219, 'start': 4551.138, 'title': 'Creating image thumbnails and aligning names', 'summary': 'Covers the process of creating image thumbnails and aligning names using css, resulting in a display of sample images with their corresponding labels, achieving a visually appealing layout and alignment. additionally, the chapter showcases the use of a display flex property and the width attributes to improve the display of the sample images.', 'duration': 150.081, 'highlights': ['Creating image thumbnails by looping through samples and adding each independently with an assigned source and style, resulting in a visually appealing display of sample images with their labels.', 'Using CSS to align the names of the samples at the center and adjusting the width attributes to improve the display layout, achieving a visually appealing presentation.', 'Concatenating the image path with the ID to create the image file path, demonstrating efficient use of coding techniques and logic in creating dynamic image sources for the thumbnails.', 'Utilizing the display flex property and adjusting the width attributes to enhance the display of sample images, resulting in a visually improved layout and alignment.', 'Adding align items to center to ensure proper alignment of the sample names, improving the overall visual presentation of the sample images.']}, {'end': 4899.878, 'start': 4702.64, 'title': 'Improving display and styling', 'summary': 'Discusses improving the display and styling of the samples, including adding a white background, modifying the thumbnail size, and adjusting the space allocation, with each sample taking 10% and the label taking 20% of the space.', 'duration': 197.238, 'highlights': ['Added white background to sample containers The speaker added a white background to the sample containers for improved styling.', 'Modified thumbnail size to 100% The speaker modified the thumbnail size to 100% for better display.', 'Adjusted space allocation for samples and labels The speaker adjusted the space allocation, with each sample taking 10% and the label taking 20% of the space for improved visual layout.']}, {'end': 5303.186, 'start': 4900.198, 'title': 'Desktop application debugging and user flagging', 'summary': 'Discusses debugging a desktop application for text overflow issues, and implementing user flagging to blur specific images based on flagged user ids, along with observations about the drawings and potential data cleaning improvements.', 'duration': 402.988, 'highlights': ['The chapter explains debugging a desktop application by applying an overflow of hidden to fix text overflow issues, and discusses the implementation of user flagging to blur specific images based on flagged user IDs.', 'The transcript highlights the identification of drawings that might cause trouble and the process of adding flagged user IDs in the code to blur their images, aiming to prevent potential issues.', 'The speaker comments on the drawings, mentioning observations about the creations, such as noticing some problems and praising the quality of certain drawings, hinting at potential data cleaning and model improvement discussions in the future.']}], 'duration': 1398.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k3904467.jpg', 'highlights': ['The chapter explains the implementation of a format percent function to return a value multiplied by 100 with two decimal precision and a percent symbol, followed by exporting the object (Relevance: 5)', 'The script includes a progress indicator that displays the count and maximum value, which is calculated as the number of files in a directory multiplied by eight, improving visualization and tracking of the dataset generation process (Relevance: 4)', 'The output shows 3968 samples and 8 different samples per user. The output of the viewer HTML displays 3968 samples and 8 different samples per user, with each row representing all the samples from one specific user.', 'Creating image thumbnails by looping through samples and adding each independently with an assigned source and style, resulting in a visually appealing display of sample images with their labels.', 'Utilizing the display flex property and adjusting the width attributes to enhance the display of sample images, resulting in a visually improved layout and alignment.', 'The chapter explains debugging a desktop application by applying an overflow of hidden to fix text overflow issues, and discusses the implementation of user flagging to blur specific images based on flagged user IDs.']}, {'end': 7240.057, 'segs': [{'end': 5524.846, 'src': 'embed', 'start': 5479.099, 'weight': 2, 'content': [{'end': 5486.562, 'text': "Let's save this file and move to the node directory where we're going to create our feature extraction script.", 'start': 5479.099, 'duration': 7.463}, {'end': 5505.61, 'text': "Let's create a new file here called FeatureExtractor.js and begin by including the constants from CommonConstants.js,", 'start': 5487.603, 'duration': 18.007}, {'end': 5516.123, 'text': "and I'm going to include also the features file that we just created.", 'start': 5505.61, 'duration': 10.513}, {'end': 5524.846, 'text': "now i'm going to use file system and begin by reading the samples.", 'start': 5516.123, 'duration': 8.723}], 'summary': 'Creating featureextractor.js with constants and reading samples using file system.', 'duration': 45.747, 'max_score': 5479.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k5479099.jpg'}, {'end': 5657.791, 'src': 'embed', 'start': 5594.762, 'weight': 1, 'content': [{'end': 5600.065, 'text': 'and get point count from the paths, like so.', 'start': 5594.762, 'duration': 5.303}, {'end': 5602.246, 'text': 'Let me close this for loop.', 'start': 5600.826, 'duration': 1.42}, {'end': 5612.172, 'text': "And before we can write this to a features file, I'm going to also mention here what are the names we want these features to have.", 'start': 5603.087, 'duration': 9.085}, {'end': 5615.634, 'text': 'Path count, point count.', 'start': 5612.812, 'duration': 2.822}, {'end': 5622.498, 'text': "And now I'm going to write all this information in a new file.", 'start': 5616.514, 'duration': 5.984}, {'end': 5625.983, 'text': 'We have to implement this constant soon.', 'start': 5623.581, 'duration': 2.402}, {'end': 5634.608, 'text': "And I'm going to stringify a new object with the feature names and the samples.", 'start': 5626.883, 'duration': 7.725}, {'end': 5636.81, 'text': 'I just combine both of them in one file.', 'start': 5634.828, 'duration': 1.982}, {'end': 5641.433, 'text': "Let's save this and define this constant next.", 'start': 5638.311, 'duration': 3.122}, {'end': 5657.791, 'text': "So I'm going to constants and under these samples here, I'm going to write features also in the dataset directory, another file called features.json.", 'start': 5641.753, 'duration': 16.038}], 'summary': 'Implementing feature extraction with path and point count, saving to features.json', 'duration': 63.029, 'max_score': 5594.762, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k5594762.jpg'}, {'end': 5928.345, 'src': 'embed', 'start': 5888.034, 'weight': 4, 'content': [{'end': 5891.617, 'text': "These points are what we're gonna visualize next using a Google chart.", 'start': 5888.034, 'duration': 3.583}, {'end': 5899.773, 'text': 'And yeah, I know I said no libraries, but this is a temporary thing.', 'start': 5893.251, 'duration': 6.522}, {'end': 5900.693, 'text': "You'll see.", 'start': 5900.273, 'duration': 0.42}, {'end': 5913.156, 'text': "We'll display the chart in a new div called ChartContainer.", 'start': 5905.834, 'duration': 7.322}, {'end': 5918.717, 'text': 'And Google Charts expect first here some options.', 'start': 5914.576, 'duration': 4.141}, {'end': 5922.638, 'text': "I'm going to start to define these options in an object.", 'start': 5919.037, 'duration': 3.601}, {'end': 5928.345, 'text': 'the width, for example, 400 pixels, the height.', 'start': 5924.383, 'duration': 3.962}], 'summary': 'Visualize data with google chart, temporarily using libraries, defining options like width and height.', 'duration': 40.311, 'max_score': 5888.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k5888034.jpg'}, {'end': 6075.44, 'src': 'embed', 'start': 6044.84, 'weight': 0, 'content': [{'end': 6052.666, 'text': 'And wow, we can see now some drawings have like 200 paths and 15, 000 points.', 'start': 6044.84, 'duration': 7.826}, {'end': 6053.787, 'text': 'This is amazing.', 'start': 6052.906, 'duration': 0.881}, {'end': 6056.008, 'text': "I don't think mine have something like that.", 'start': 6054.167, 'duration': 1.841}, {'end': 6059.611, 'text': "I'm really curious to see which these are from the data.", 'start': 6056.268, 'duration': 3.343}, {'end': 6061.012, 'text': "And we'll get to that.", 'start': 6060.191, 'duration': 0.821}, {'end': 6065.274, 'text': "But first, let's see if we can zoom into this place.", 'start': 6061.472, 'duration': 3.802}, {'end': 6067.916, 'text': 'I want to investigate even deeper.', 'start': 6065.374, 'duration': 2.542}, {'end': 6075.44, 'text': "And by default, this won't let me unless I go here and add a few more options.", 'start': 6068.436, 'duration': 7.004}], 'summary': 'Some drawings contain 200 paths and 15,000 points, prompting a desire for further investigation.', 'duration': 30.6, 'max_score': 6044.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k6044840.jpg'}, {'end': 6297.929, 'src': 'embed', 'start': 6273.167, 'weight': 7, 'content': [{'end': 6282.174, 'text': 'But what did work is to use a slightly different version of the Google chart, a different library which they called the materials charts,', 'start': 6273.167, 'duration': 9.007}, {'end': 6284.035, 'text': 'which supports transparency as well.', 'start': 6282.174, 'duration': 1.861}, {'end': 6293.707, 'text': 'To do that, you have to replace here core chart with scatter in our case, or you can add that one as well if you want to support both.', 'start': 6284.841, 'duration': 8.866}, {'end': 6297.929, 'text': 'And this bottom part right here will be a little bit different.', 'start': 6294.207, 'duration': 3.722}], 'summary': 'Using materials charts with transparency for better visualization.', 'duration': 24.762, 'max_score': 6273.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k6273167.jpg'}, {'end': 6460.396, 'src': 'embed', 'start': 6431.805, 'weight': 8, 'content': [{'end': 6436.607, 'text': 'The one for the chart graphics and the one for the math.', 'start': 6431.805, 'duration': 4.802}, {'end': 6440.989, 'text': 'Now here the options, I tried to simplify a little bit.', 'start': 6437.528, 'duration': 3.461}, {'end': 6445.251, 'text': 'All my charts are usually square in aspect ratio.', 'start': 6441.909, 'duration': 3.342}, {'end': 6455.515, 'text': 'So I just put here size and the other ones I replaced with axis labels, just the feature names directly.', 'start': 6445.311, 'duration': 10.204}, {'end': 6460.396, 'text': 'And then the styles, I pass those from utils, like so.', 'start': 6456.375, 'duration': 4.021}], 'summary': 'Charts are square, simplified options, with axis labels directly.', 'duration': 28.591, 'max_score': 6431.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k6431805.jpg'}, {'end': 6817.308, 'src': 'embed', 'start': 6785.359, 'weight': 9, 'content': [{'end': 6790.241, 'text': 'and block center will make it scroll to be in the middle of the page.', 'start': 6785.359, 'duration': 4.882}, {'end': 6794.423, 'text': "Let's close this, save the file, refresh.", 'start': 6790.861, 'duration': 3.562}, {'end': 6799.265, 'text': "And now if we press the car, we immediately jump to Claudio's car.", 'start': 6795.223, 'duration': 4.042}, {'end': 6804.727, 'text': "And if I'm gonna go back up, let's check this house.", 'start': 6801.586, 'duration': 3.141}, {'end': 6808.128, 'text': 'And this is amazing.', 'start': 6806.908, 'duration': 1.22}, {'end': 6811.65, 'text': 'Claudio has both items with the most number of points.', 'start': 6808.489, 'duration': 3.161}, {'end': 6814.487, 'text': 'And we also see a problem here.', 'start': 6812.907, 'duration': 1.58}, {'end': 6817.308, 'text': "We shouldn't have two emphasized items anymore.", 'start': 6814.608, 'duration': 2.7}], 'summary': "Website scrolling issue fixed, claudio's car has most points, emphasized item problem identified.", 'duration': 31.949, 'max_score': 6785.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k6785359.jpg'}, {'end': 6956.988, 'src': 'embed', 'start': 6888.757, 'weight': 5, 'content': [{'end': 6890.217, 'text': 'This is where the chart is gonna be.', 'start': 6888.757, 'duration': 1.46}, {'end': 6897.94, 'text': 'Back to CSS, we can define here the style for chart container.', 'start': 6891.318, 'duration': 6.622}, {'end': 6899.967, 'text': 'Position will be fixed.', 'start': 6898.786, 'duration': 1.181}, {'end': 6902.688, 'text': 'Right will be zero.', 'start': 6901.527, 'duration': 1.161}, {'end': 6905.649, 'text': 'Top will be 50%.', 'start': 6903.688, 'duration': 1.961}, {'end': 6908.751, 'text': 'And this will just make its top part to be in the middle.', 'start': 6905.649, 'duration': 3.102}, {'end': 6910.912, 'text': 'I want it to be in the middle.', 'start': 6909.211, 'duration': 1.701}, {'end': 6921.637, 'text': 'So we translate nothing horizontally, but by minus 50% of its height vertically.', 'start': 6911.432, 'duration': 10.205}, {'end': 6923.458, 'text': "Let's save this.", 'start': 6922.717, 'duration': 0.741}, {'end': 6932.634, 'text': "Refresh And now if I'm going to press these items, I don't need to scroll back to the chart anymore.", 'start': 6924.978, 'duration': 7.656}, {'end': 6941.419, 'text': 'I would also like to have selection happen the other way around, like clicking on these items.', 'start': 6935.876, 'duration': 5.543}, {'end': 6951.485, 'text': 'To do that, we go to display.js at the top here and add our click handler also to the sample container.', 'start': 6943.08, 'duration': 8.405}, {'end': 6956.988, 'text': 'Like so.', 'start': 6956.327, 'duration': 0.661}], 'summary': 'Css defines fixed-position chart container for improved interaction and selection.', 'duration': 68.231, 'max_score': 6888.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k6888757.jpg'}], 'start': 5373.539, 'title': 'Implementing feature extraction and chart visualization', 'summary': 'Details the process of implementing functions to extract features from drawings, updating javascript files, and visualizing data using google charts, resulting in the successful display of 200 paths and 15,000 points. it also covers adding styling to achieve dense data representation and user interaction, as well as creating a fixed chart with selection functionality for detailed drawings by various users.', 'chapters': [{'end': 5749.934, 'start': 5373.539, 'title': 'Feature extraction process', 'summary': "Details the process of implementing functions to extract features from drawings, including the creation of 'features.js' to store functions for path and point counts, and the use of 'featureextractor.js' to read and extract features from samples, ultimately resulting in the creation of 'features.json' and dataset visualization.", 'duration': 376.395, 'highlights': ["Creation of 'features.js' to store functions for path and point counts The chapter discusses the creation of 'features.js' to contain functions for obtaining the path count and point count from given paths.", "Use of 'FeatureExtractor.js' to read and extract features from samples The 'FeatureExtractor.js' is utilized to read and extract features from samples, resulting in the creation of a new file called 'features.json' with the extracted features.", "Visualization of dataset features and the creation of 'features.json' The process concludes with the visualization of the dataset features, showing the feature names and samples, and the creation of 'features.json' containing the extracted features."]}, {'end': 6147.982, 'start': 5750.595, 'title': 'Javascript file update and google chart visualization', 'summary': 'Covers the process of updating a javascript file with new information, integrating it into a feature extractor, and visualizing data using google charts, resulting in the successful display of 200 paths and 15,000 points.', 'duration': 397.387, 'highlights': ['Successfully updated a JavaScript file with new information and integrated it into a feature extractor. The speaker defines a new file path for another JavaScript file, which holds information as a JavaScript object. The file is then integrated into the feature extractor, allowing for the inclusion of values from feature names and samples as JSON.', 'Visualized data using Google Charts, displaying 200 paths and 15,000 points. The speaker successfully visualizes data using Google Charts to display 200 paths and 15,000 points, expressing amazement at the outcome.', 'Configured the Google Chart to enable zoom functionality and utilize different colors for each class. The speaker configures the Google Chart to enable zoom functionality, utilizing various options such as drag to zoom and right-click to reset. Additionally, the speaker demonstrates how to use different colors, one for each class, in the visualization.']}, {'end': 6854.893, 'start': 6148.642, 'title': 'Implementing styling in chart', 'summary': 'Details the process of adding styling to a chart, including the use of primary colors, transparency, and custom chart implementation, with a focus on achieving dense data representation and user interaction.', 'duration': 706.251, 'highlights': ['The chapter outlines the addition of styling to a chart, including the use of primary colors and transparency to represent dense data (e.g., car - gray, fish - red, house - yellow, tree - green, bicycle - cyan, guitar - blue, pencil - magenta, clock - light gray).', 'It discusses the challenges with achieving transparency using the core chart and the successful implementation using the material charts library, allowing for zooming and color support, but lacking in other functionalities.', 'The chapter introduces a custom chart implementation with simplified options, aspect ratio adjustments, and the use of styles from utils, enabling user interaction and data representation enhancements.', 'It demonstrates the addition of emojis to represent data points, addressing issues with color reliance and providing a more accessible visualization for users with color perception difficulties.', 'The chapter presents the generation of images for different shapes based on specified colors, enhancing the visual representation of data points and supporting user interaction.', 'It showcases the implementation of a callback function for item selection and the use of Emphasize class for highlighting selected items, improving user interaction and data exploration.', 'The chapter concludes with the automatic scrolling to emphasized items and the resolution of the issue of multiple emphasized items, enhancing user experience in data exploration.']}, {'end': 7240.057, 'start': 6854.893, 'title': 'Creating fixed chart and selection functionality', 'summary': 'Demonstrates creating a fixed chart on scroll and implementing selection functionality, resulting in a fully functional chart with smooth interaction, and detailed drawings by various users.', 'duration': 385.164, 'highlights': ['Implementing fixed positioning for the chart container to remain in the middle of the screen on scroll The chapter demonstrates setting the position of the chart container to be fixed, ensuring it stays in the middle of the screen on scroll, enhancing user experience.', 'Developing selection functionality for items in the chart and list, allowing for seamless interaction and deselection The chapter showcases the development of selection functionality for items in the chart and list, enabling seamless interaction and deselection, improving user engagement.', 'Adjusting size of the chart for better visibility and exploring detailed drawings by various users The chapter illustrates the adjustment of the chart size for improved visibility and explores detailed drawings by various users, showcasing their creativity and effort.']}], 'duration': 1866.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k5373539.jpg', 'highlights': ['Successfully visualized data using Google Charts, displaying 200 paths and 15,000 points.', "Creation of 'features.js' to store functions for path and point counts.", "Use of 'FeatureExtractor.js' to read and extract features from samples.", "Visualization of dataset features and the creation of 'features.json'.", 'Configured the Google Chart to enable zoom functionality and utilize different colors for each class.', 'Developing selection functionality for items in the chart and list, allowing for seamless interaction and deselection.', 'Implementing fixed positioning for the chart container to remain in the middle of the screen on scroll.', 'The chapter outlines the addition of styling to a chart, including the use of primary colors and transparency to represent dense data.', 'The chapter introduces a custom chart implementation with simplified options, aspect ratio adjustments, and the use of styles from utils, enabling user interaction and data representation enhancements.', 'The chapter concludes with the automatic scrolling to emphasized items and the resolution of the issue of multiple emphasized items, enhancing user experience in data exploration.']}, {'end': 8529.39, 'segs': [{'end': 7288.86, 'src': 'embed', 'start': 7242.559, 'weight': 0, 'content': [{'end': 7247.804, 'text': 'Having a fast, responsive system like this is a huge help when you inspect your data.', 'start': 7242.559, 'duration': 5.245}, {'end': 7254.991, 'text': "Otherwise, you'd have to do a lot of manual work, like maybe get the ID somehow and look for it in the files.", 'start': 7248.385, 'duration': 6.606}, {'end': 7257.573, 'text': "It's slow and mistakes can happen.", 'start': 7255.491, 'duration': 2.082}, {'end': 7261.577, 'text': 'Try working smart all the time and avoid silly mistakes like that.', 'start': 7258.034, 'duration': 3.543}, {'end': 7275.609, 'text': 'Can you extract two other features from the samples and show them on the chart? If you need inspiration, you can watch my older video here.', 'start': 7267.642, 'duration': 7.967}, {'end': 7278.752, 'text': 'It also teaches how to extract features from the pixels.', 'start': 7276.069, 'duration': 2.683}, {'end': 7280.573, 'text': "Something we'll do a bit later.", 'start': 7279.112, 'duration': 1.461}, {'end': 7283.796, 'text': "Now, when you're done, look at the structure.", 'start': 7281.714, 'duration': 2.082}, {'end': 7288.86, 'text': 'Is it any better? Useful features should group together samples of the same type.', 'start': 7284.276, 'duration': 4.584}], 'summary': 'Efficient system reduces manual work, emphasizes working smart, and focuses on grouping useful features together.', 'duration': 46.301, 'max_score': 7242.559, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k7242559.jpg'}, {'end': 7387.071, 'src': 'embed', 'start': 7354.793, 'weight': 2, 'content': [{'end': 7357.554, 'text': 'on the input container and save the file.', 'start': 7354.793, 'duration': 2.761}, {'end': 7359.055, 'text': "Let's refresh.", 'start': 7358.294, 'duration': 0.761}, {'end': 7361.836, 'text': 'And there is our sketch pad right here.', 'start': 7360.175, 'duration': 1.661}, {'end': 7363.897, 'text': 'And it works.', 'start': 7363.396, 'duration': 0.501}, {'end': 7366.858, 'text': 'This is the benefit of working with components.', 'start': 7364.177, 'duration': 2.681}, {'end': 7371.6, 'text': "Now let's add some styles for it.", 'start': 7369.779, 'duration': 1.821}, {'end': 7375.141, 'text': 'I want it to float as well over the data next to the chart.', 'start': 7371.7, 'duration': 3.441}, {'end': 7387.071, 'text': "In style CSS, I'm gonna go at the bottom and define here a style for input container, position fixed.", 'start': 7376.607, 'duration': 10.464}], 'summary': 'Demonstrated adding styles for input container, achieving floating effect next to the chart.', 'duration': 32.278, 'max_score': 7354.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k7354793.jpg'}, {'end': 7854.901, 'src': 'embed', 'start': 7820.07, 'weight': 3, 'content': [{'end': 7823.733, 'text': 'so the path count is zero and the point count is also zero.', 'start': 7820.07, 'duration': 3.663}, {'end': 7833.259, 'text': "But if I'm going to start to draw something here, you can see the first number is the path count and the second number is the point count.", 'start': 7824.693, 'duration': 8.566}, {'end': 7834.74, 'text': 'how many points are being drawn?', 'start': 7833.259, 'duration': 1.481}, {'end': 7841.865, 'text': "If I'm gonna start another path, I have two and the point count is still going up.", 'start': 7836.241, 'duration': 5.624}, {'end': 7845.308, 'text': 'And so on.', 'start': 7844.807, 'duration': 0.501}, {'end': 7849.559, 'text': 'It also updates on undo.', 'start': 7848.058, 'duration': 1.501}, {'end': 7854.901, 'text': "We're back to zero zero.", 'start': 7853.7, 'duration': 1.201}], 'summary': 'The transcript describes drawing with path and point counts, showing how they change and update with each action.', 'duration': 34.831, 'max_score': 7820.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k7820070.jpg'}, {'end': 7937.119, 'src': 'embed', 'start': 7891.748, 'weight': 4, 'content': [{'end': 7892.629, 'text': "Let's save this.", 'start': 7891.748, 'duration': 0.881}, {'end': 7906.053, 'text': "And in Chart.js I'm going to go just below the constructor and add here show dynamic point as a public method.", 'start': 7893.129, 'duration': 12.924}, {'end': 7917.158, 'text': "given a point, let's set an attribute to this value and redraw.", 'start': 7906.053, 'duration': 11.105}, {'end': 7926.663, 'text': 'now this dynamic point is going to be here an attribute of the chart class.', 'start': 7917.158, 'duration': 9.505}, {'end': 7937.119, 'text': "initially it's going to be null and to draw it we'll go in this draw method at the end, just before drawing the axes,", 'start': 7926.663, 'duration': 10.456}], 'summary': 'Add a public method in chart.js to show and redraw dynamic points.', 'duration': 45.371, 'max_score': 7891.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k7891748.jpg'}, {'end': 8268.669, 'src': 'embed', 'start': 8239.225, 'weight': 5, 'content': [{'end': 8241.726, 'text': 'And these features are just not very good.', 'start': 8239.225, 'duration': 2.501}, {'end': 8243.847, 'text': 'It looks really mixed, in my opinion.', 'start': 8241.866, 'duration': 1.981}, {'end': 8246.907, 'text': "So let's try to compute some other features.", 'start': 8244.447, 'duration': 2.46}, {'end': 8254.11, 'text': "I'm going to go to common, feature functions, and let's calculate the width of the drawing.", 'start': 8247.448, 'duration': 6.662}, {'end': 8258.671, 'text': "For that, I'm going to write a function called getWidth.", 'start': 8254.889, 'duration': 3.782}, {'end': 8268.669, 'text': 'Given the paths, we take out the points as we did in the get point count function.', 'start': 8260.139, 'duration': 8.53}], 'summary': 'Developing new features, like calculating the width of the drawing, but current features are subpar.', 'duration': 29.444, 'max_score': 8239.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k8239225.jpg'}], 'start': 7242.559, 'title': 'Data inspection and visualization techniques', 'summary': 'Covers optimizing data inspection, creating an interactive chart control panel, updating and extracting features in javascript, implementing dynamic points on a chart, and drawing feature extraction, emphasizing efficient data analysis and improved user experience.', 'chapters': [{'end': 7416.453, 'start': 7242.559, 'title': 'Optimizing data inspection process', 'summary': 'Discusses the benefits of a fast, responsive system for data inspection, emphasizing the avoidance of manual work and errors, while also highlighting the importance of organizing and visualizing useful features for efficient data analysis.', 'duration': 173.894, 'highlights': ['A fast, responsive system for data inspection reduces manual work and errors, promoting efficient analysis.', 'Organizing and visualizing useful features is crucial for grouping samples and improving the data structure.', 'Utilizing components like the sketch pad and applying styles can enhance data visualization and analysis.']}, {'end': 7612.981, 'start': 7417.673, 'title': 'Interactive chart control panel', 'summary': 'Details the process of creating an interactive control panel to show/hide a data input field, position it over the chart, and use css to hide the background when the input is active, improving user experience and functionality.', 'duration': 195.308, 'highlights': ['The process of creating an interactive control panel to show/hide a data input field. ', 'Positioning the control panel over the chart using CSS for better alignment and user experience. ', 'Using CSS to hide the background when the input is active, enhancing the user experience and functionality. ']}, {'end': 7770.362, 'start': 7613.961, 'title': 'Updating and extracting features in javascript', 'summary': 'Details updating a sketch pad by adding a second parameter, implementing a function to extract features when the drawing updates, and resolving conflicts by renaming objects to avoid naming clashes.', 'duration': 156.401, 'highlights': ['Adding a second parameter on update callback The speaker opens the sketch pad and adds a second parameter on update, allowing for null, followed by storing this callback function as an attribute.', 'Implementing function to extract features when drawing updates The speaker explains the implementation of a function to extract features when the drawing updates, similar to the feature extractor, and demonstrates the process with code.', "Resolving naming conflicts by renaming objects The speaker addresses naming conflicts by renaming objects to 'feature functions' throughout the code to avoid clashes, ensuring smooth functionality."]}, {'end': 8238.584, 'start': 7774.346, 'title': 'Implementing dynamic point on chart', 'summary': 'Demonstrates the process of implementing a dynamic point on a chart, including updating path and point counts, adding a dynamic point in chart.js, and enhancing visibility by overlaying a transparent point on the chart background.', 'duration': 464.238, 'highlights': ['Updating path and point counts to reflect drawing actions, with the path count and point count dynamically changing as drawing progresses.', 'Implementing dynamic point functionality in Chart.js by adding a public method to set the point location and incorporating it into the draw method for visualization.', 'Enhancing visibility of the dynamic point by overlaying a transparent white point with a large size on the chart background, ensuring visibility even when the chart is zoomed in.', "Integrating functionality to hide the dynamic point when the input container is made invisible in display.js, ensuring the dynamic point's visibility is tied to user actions."]}, {'end': 8529.39, 'start': 8239.225, 'title': 'Drawing feature extraction', 'summary': 'Covers the computation of width and height features from drawing paths, the restructuring of feature functions, and regenerating the features to improve the dataset, resulting in proper feature names and values for the 400-pixel canvas.', 'duration': 290.165, 'highlights': ['Computation of width and height features from drawing paths The speaker explains the process of calculating the width and height of the drawing by extracting points and using the min and max functions from the math library, resulting in easy-to-understand features.', "Restructuring of feature functions The speaker restructures the feature functions by creating an 'in use' object and updating references, enabling a more general code that can handle any number of features, creating a multi-dimensional point.", 'Regenerating the features to improve the dataset The speaker regenerates the features in the data set, resulting in new proper values for the width and height features, addressing the issue of improper feature names and ensuring correctness for the 400-pixel canvas.']}], 'duration': 1286.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k7242559.jpg', 'highlights': ['A fast, responsive system for data inspection reduces manual work and errors, promoting efficient analysis.', 'Organizing and visualizing useful features is crucial for grouping samples and improving the data structure.', 'Utilizing components like the sketch pad and applying styles can enhance data visualization and analysis.', 'Updating path and point counts to reflect drawing actions, with the path count and point count dynamically changing as drawing progresses.', 'Implementing dynamic point functionality in Chart.js by adding a public method to set the point location and incorporating it into the draw method for visualization.', 'Computation of width and height features from drawing paths The speaker explains the process of calculating the width and height of the drawing by extracting points and using the min and max functions from the math library, resulting in easy-to-understand features.']}, {'end': 11029.188, 'segs': [{'end': 8598.971, 'src': 'embed', 'start': 8564.113, 'weight': 2, 'content': [{'end': 8567.234, 'text': 'Now our Node scripts and the web page are in sync.', 'start': 8564.113, 'duration': 3.121}, {'end': 8574.417, 'text': "And something is weird here, isn't it? Look at this one drawing, this one house.", 'start': 8569.232, 'duration': 5.185}, {'end': 8577.22, 'text': 'It has a width of 900 something.', 'start': 8574.817, 'duration': 2.403}, {'end': 8582.645, 'text': 'How can that be? Our canvas for drawing on the sketch pad was 400 maximum.', 'start': 8577.76, 'duration': 4.885}, {'end': 8591.634, 'text': "What is this place? Let's hide this input and aha, interesting, Herminio.", 'start': 8583.426, 'duration': 8.208}, {'end': 8598.971, 'text': 'Looks like this horizontal line somehow might extend out of the canvas.', 'start': 8593.948, 'duration': 5.023}], 'summary': 'Node scripts and web page synced; drawing issue with 900 width, canvas 400 max.', 'duration': 34.858, 'max_score': 8564.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k8564113.jpg'}, {'end': 9237.065, 'src': 'embed', 'start': 9207.228, 'weight': 3, 'content': [{'end': 9210.09, 'text': 'It will have the point and the label.', 'start': 9207.228, 'duration': 2.862}, {'end': 9221.399, 'text': 'So in this draw method we have to take out here the point and the label separately from this dynamic point.', 'start': 9210.69, 'duration': 10.709}, {'end': 9228.963, 'text': "And I'm going to replace here with point like this.", 'start': 9222.561, 'duration': 6.402}, {'end': 9237.065, 'text': "And instead of a black dot here, I'm going to draw it using an image, using the predicted label.", 'start': 9229.763, 'duration': 7.302}], 'summary': 'Draw method replaces black dot with predicted label image.', 'duration': 29.837, 'max_score': 9207.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k9207228.jpg'}, {'end': 9533.769, 'src': 'embed', 'start': 9507.509, 'weight': 6, 'content': [{'end': 9512.913, 'text': "It's because it's displaying the data to fit in this square aspect ratio here.", 'start': 9507.509, 'duration': 5.404}, {'end': 9517.456, 'text': 'The width is squished like this.', 'start': 9515.234, 'duration': 2.222}, {'end': 9522.606, 'text': 'and it gives the illusion that the car here is closer.', 'start': 9518.945, 'duration': 3.661}, {'end': 9525.567, 'text': "But it's not, not in the data space.", 'start': 9523.426, 'duration': 2.141}, {'end': 9528.268, 'text': 'And this is where people start to get confused.', 'start': 9526.147, 'duration': 2.121}, {'end': 9533.769, 'text': "They look at things like this and they don't understand why their machine learning methods work differently.", 'start': 9528.908, 'duration': 4.861}], 'summary': 'Data display in square aspect ratio confuses viewers, affecting machine learning methods.', 'duration': 26.26, 'max_score': 9507.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k9507509.jpg'}, {'end': 9593.566, 'src': 'embed', 'start': 9562.858, 'weight': 7, 'content': [{'end': 9573.14, 'text': 'For the right will be min x plus delta, and for the top will be min y plus delta, like this.', 'start': 9562.858, 'duration': 10.282}, {'end': 9576.241, 'text': "Let's save this refresh.", 'start': 9574.04, 'duration': 2.201}, {'end': 9584.778, 'text': 'And now our chart looks like this, with a lot of empty space here, because the maximum delta, the one from the width,', 'start': 9577.731, 'duration': 7.047}, {'end': 9586.239, 'text': 'is applied on the height as well.', 'start': 9584.778, 'duration': 1.461}, {'end': 9588.702, 'text': "And that's why most charts don't do this.", 'start': 9586.539, 'duration': 2.163}, {'end': 9593.566, 'text': "We don't like empty space in general, so stretching is default functionality here.", 'start': 9589.182, 'duration': 4.384}], 'summary': 'Charts default to stretching to avoid empty space, as demonstrated by the maximum delta being applied to both width and height.', 'duration': 30.708, 'max_score': 9562.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k9562858.jpg'}, {'end': 9743.167, 'src': 'embed', 'start': 9628.159, 'weight': 4, 'content': [{'end': 9631.902, 'text': "I'm going to go to feature functions here.", 'start': 9628.159, 'duration': 3.743}, {'end': 9634.103, 'text': "Let's comment these out.", 'start': 9632.682, 'duration': 1.421}, {'end': 9639.866, 'text': 'And type here name path count.', 'start': 9636.344, 'duration': 3.522}, {'end': 9646.433, 'text': 'Feature functions get path count.', 'start': 9643.029, 'duration': 3.404}, {'end': 9651.478, 'text': 'And the second one, point count.', 'start': 9648.395, 'duration': 3.083}, {'end': 9658.106, 'text': 'Feature functions get point count.', 'start': 9654.362, 'duration': 3.744}, {'end': 9659.167, 'text': 'Save this.', 'start': 9658.626, 'duration': 0.541}, {'end': 9664.253, 'text': 'In our terminal, re-extract the features.', 'start': 9659.888, 'duration': 4.365}, {'end': 9666.283, 'text': 'And look at that.', 'start': 9665.583, 'duration': 0.7}, {'end': 9669.706, 'text': 'All our data is essentially on one line.', 'start': 9667.184, 'duration': 2.522}, {'end': 9673.828, 'text': "This path count feature isn't treated equally at all.", 'start': 9669.786, 'duration': 4.042}, {'end': 9676.93, 'text': 'We basically have just one dimensional data here.', 'start': 9674.088, 'duration': 2.842}, {'end': 9679.191, 'text': "Let's zoom in and see this better.", 'start': 9677.41, 'duration': 1.781}, {'end': 9694.561, 'text': "And let's try drawing something.", 'start': 9692.94, 'duration': 1.621}, {'end': 9698.149, 'text': 'This is now our zero zero point.', 'start': 9695.967, 'duration': 2.182}, {'end': 9701.411, 'text': "It's classified as a fish according to these features now.", 'start': 9698.289, 'duration': 3.122}, {'end': 9713.24, 'text': "And if I'm going to start drawing, I can see going up very quickly, increasing the point count.", 'start': 9702.352, 'duration': 10.888}, {'end': 9724.395, 'text': 'And now a little bit to the right when the path count increased, but to draw anything, you really generate a lot of points relative to the path count.', 'start': 9714.389, 'duration': 10.006}, {'end': 9731.199, 'text': "And if we visualize the data as we did before, I'm going to keep this other variant for reference.", 'start': 9725.236, 'duration': 5.963}, {'end': 9736.623, 'text': 'You will see that this path count has almost no effect on the classification.', 'start': 9732.58, 'duration': 4.043}, {'end': 9743.167, 'text': "Let's save, refresh, and let's zoom in here to see what happens.", 'start': 9737.944, 'duration': 5.223}], 'summary': "Analyzing feature functions and visualizing data, revealing path count's minimal effect on classification.", 'duration': 115.008, 'max_score': 9628.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k9628159.jpg'}, {'end': 9881.975, 'src': 'embed', 'start': 9850.249, 'weight': 10, 'content': [{'end': 9853.031, 'text': 'And there are two techniques people commonly use for this.', 'start': 9850.249, 'duration': 2.782}, {'end': 9861.101, 'text': "The one I'll focus on is called normalization, where the values are remapped to be between 0 and 1.", 'start': 9853.512, 'duration': 7.589}, {'end': 9865.764, 'text': "We'll normalize the data here after we have the feature values.", 'start': 9861.101, 'duration': 4.663}, {'end': 9871.688, 'text': "And we do that by calling a function we'll need to implement in utils.", 'start': 9867.445, 'duration': 4.243}, {'end': 9875.991, 'text': 'NormalizePoints that takes the sample points.', 'start': 9872.929, 'duration': 3.062}, {'end': 9881.975, 'text': 'So from the samples, we remap them to extract just a point like this.', 'start': 9876.171, 'duration': 5.804}], 'summary': 'Normalization technique remaps values between 0 and 1.', 'duration': 31.726, 'max_score': 9850.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k9850249.jpg'}, {'end': 9997.854, 'src': 'embed', 'start': 9965.109, 'weight': 11, 'content': [{'end': 9967.491, 'text': 'Now back down here.', 'start': 9965.109, 'duration': 2.382}, {'end': 9969.992, 'text': 'we can loop with another variable,', 'start': 9967.491, 'duration': 2.501}, {'end': 9984.51, 'text': 'j through each of these dimensions and update min of j to be the minimum between the previous min of j and whatever the point of i and j is.', 'start': 9969.992, 'duration': 14.518}, {'end': 9992.692, 'text': 'Same thing for the max, but using the maximum function from the math library.', 'start': 9986.731, 'duration': 5.961}, {'end': 9994.853, 'text': 'And now we have our min and max.', 'start': 9993.252, 'duration': 1.601}, {'end': 9997.854, 'text': 'With them, we transform our data next.', 'start': 9995.333, 'duration': 2.521}], 'summary': 'Loop through dimensions to update min and max values for transformation.', 'duration': 32.745, 'max_score': 9965.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k9965109.jpg'}, {'end': 10581.049, 'src': 'embed', 'start': 10463.15, 'weight': 0, 'content': [{'end': 10465.812, 'text': "But I like Terminio's house, so I'm going to bring it back.", 'start': 10463.15, 'duration': 2.662}, {'end': 10480.181, 'text': 'There it is.', 'start': 10479.57, 'duration': 0.611}, {'end': 10490.445, 'text': 'Normalization is very sensitive to outlier points.', 'start': 10487.583, 'duration': 2.862}, {'end': 10495.509, 'text': 'One way to deal with this is to automatically detect outliers and remove them.', 'start': 10491.246, 'duration': 4.263}, {'end': 10502.875, 'text': 'Another way is to use standardization, a different data scaling technique, where, instead of min and max,', 'start': 10496.31, 'duration': 6.565}, {'end': 10510.481, 'text': 'we compute the mean and standard deviation and then remap each feature by subtracting the mean and dividing by the standard deviation.', 'start': 10502.875, 'duration': 7.606}, {'end': 10515.865, 'text': 'Standardization is less sensitive to outliers, and it would work better in our case.', 'start': 10511.241, 'duration': 4.624}, {'end': 10522.955, 'text': 'Think you can implement it? Share your code with me and the first to get it right will get a shout out in a future video.', 'start': 10516.929, 'duration': 6.026}, {'end': 10530.202, 'text': 'A generalization of the nearest neighbor classifier is the k-nearest-neighbors classifier,', 'start': 10524.176, 'duration': 6.026}, {'end': 10533.846, 'text': 'where k is the number of neighbors that will play a role in the classification.', 'start': 10530.202, 'duration': 3.644}, {'end': 10536.848, 'text': "We'll decide the class based on the majority.", 'start': 10534.626, 'duration': 2.222}, {'end': 10540.172, 'text': "Let's try drawing something here.", 'start': 10538.65, 'duration': 1.522}, {'end': 10572.027, 'text': 'Oh, come on, I tried my best.', 'start': 10570.126, 'duration': 1.901}, {'end': 10574.827, 'text': "Let's see what's around it.", 'start': 10573.687, 'duration': 1.14}, {'end': 10581.049, 'text': 'There is this one tree here that is closest.', 'start': 10577.928, 'duration': 3.121}], 'summary': 'Use standardization to remove outliers and improve classification accuracy.', 'duration': 117.899, 'max_score': 10463.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k10463150.jpg'}, {'end': 10772.982, 'src': 'embed', 'start': 10736.458, 'weight': 14, 'content': [{'end': 10737.399, 'text': 'It finds the nearest.', 'start': 10736.458, 'duration': 0.941}, {'end': 10740.6, 'text': "Let's change it a little bit, increase its width.", 'start': 10738.279, 'duration': 2.321}, {'end': 10747.462, 'text': 'Yeah, all good.', 'start': 10746.381, 'duration': 1.081}, {'end': 10749.722, 'text': "But now let's find more neighbors.", 'start': 10747.762, 'duration': 1.96}, {'end': 10754.764, 'text': "Let's say maybe 10.", 'start': 10750.363, 'duration': 4.401}, {'end': 10757.685, 'text': 'And handle this new logic with multiple values.', 'start': 10754.764, 'duration': 2.921}, {'end': 10761.526, 'text': "Let's figure out the nearest samples next.", 'start': 10758.665, 'duration': 2.861}, {'end': 10772.982, 'text': 'They are going to be coming from the indices if we map them so that each index becomes the sample at that index.', 'start': 10764.119, 'duration': 8.863}], 'summary': 'Increasing width, finding 10 neighbors, mapping indices to samples.', 'duration': 36.524, 'max_score': 10736.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k10736458.jpg'}, {'end': 10902.768, 'src': 'embed', 'start': 10873.164, 'weight': 5, 'content': [{'end': 10882.813, 'text': "So let's put an S here and also need to make sure up here where we classified that we get nearest samples as well.", 'start': 10873.164, 'duration': 9.649}, {'end': 10888.418, 'text': 'We will also be passing nearest samples to show dynamic point.', 'start': 10883.273, 'duration': 5.145}, {'end': 10891.561, 'text': "We will draw lines to all of them, you'll see.", 'start': 10889.098, 'duration': 2.463}, {'end': 10893.983, 'text': 'We do that inside of the chart.', 'start': 10892.181, 'duration': 1.802}, {'end': 10902.768, 'text': 'First, we need to update this nearest sample in the constructor to nearest samples.', 'start': 10895.885, 'duration': 6.883}], 'summary': "Update 's' classification and draw lines to nearest samples in chart constructor.", 'duration': 29.604, 'max_score': 10873.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k10873164.jpg'}], 'start': 8529.831, 'title': 'Machine learning implementation', 'summary': 'Covers synchronizing node scripts with a website, handling outliers, implementing dynamic point appearance, data visualization challenges, normalization techniques, and the k-nearest-neighbors classifier, with a focus on outlier identification, point appearance, data scaling, and nearest neighbors search.', 'chapters': [{'end': 9040.077, 'start': 8529.831, 'title': 'Synchronizing node scripts with website and handling outliers', 'summary': 'Discusses synchronizing node scripts with a website, handling outliers in data collection, and implementing a classification function based on nearest neighbors with a focus on identifying and addressing outliers in the dataset.', 'duration': 510.246, 'highlights': ["Implementing a classification function based on nearest neighbors Describes the process of implementing a classification function based on nearest neighbors to identify and classify drawings, with the example of classifying a drawing as a 'car' and 'pencil'.", 'Identifying and addressing outliers in the dataset Highlights the discussion about handling outliers in data collection, emphasizing the common occurrence of outliers and the need to expect and address them in the dataset.', 'Synchronizing Node scripts with a website Explains the process of synchronizing Node scripts with a website to ensure they are in sync, with the example of making drawings appear on the website after implementing changes in the code.']}, {'end': 9388.35, 'start': 9040.597, 'title': 'Implementing dynamic point appearance', 'summary': 'Covers implementing dynamic point appearance based on classification labels, drawing different objects and connecting them to the nearest sample.', 'duration': 347.753, 'highlights': ["Implementing dynamic point appearance based on classification labels The code is updated to display dynamic point appearance based on classification labels, changing the point's appearance depending on the drawn object.", "Drawing and classifying different objects The system is able to classify and display different objects such as a car, house, clock, and fish based on the drawn input, demonstrating the system's functionality and sensitivity.", 'Connecting drawn objects to the nearest sample The chapter demonstrates the process of connecting the drawn objects to the nearest sample using a line, enhancing the visualization of the sampled data points.']}, {'end': 9826.453, 'start': 9389.791, 'title': 'Data visualization and normalization', 'summary': 'Discusses the challenges of data visualization, specifically related to squishing and stretching of data in charts, and the importance of data scaling and normalization to ensure equal significance of features, with a focus on path count and point count.', 'duration': 436.662, 'highlights': ["The chart displaying the data to fit in a square aspect ratio causes confusion as it gives the illusion of closer proximity, leading to misunderstanding of machine learning methods. Confusion caused by the chart's misleading display, impacting understanding of machine learning methods.", 'The process of calculating delta on x and y, and storing the maximum of these two to recompute the maximum values, results in a chart with empty space due to default stretching functionality. Calculation of delta leading to a chart with empty space due to default stretching functionality.', 'The challenge of uneven treatment of features is highlighted through the example of path count feature not being treated equally, resulting in data being essentially one dimensional. Unequal treatment of features, specifically the path count feature, leading to essentially one dimensional data.', 'The impact of squishing on data visualization is demonstrated through the example of the path count having minimal effect on classification due to squishing, emphasizing the need for data scaling to ensure equal significance of features. Demonstration of minimal effect of path count on classification due to squishing, emphasizing the need for data scaling.']}, {'end': 10522.955, 'start': 9827.553, 'title': 'Data normalization and feature scaling', 'summary': 'Discusses the process of data normalization, focusing on the technique of normalization, where values are remapped to be between 0 and 1, and the impact of outlier points on normalization, highlighting the need for standardization as a less sensitive alternative.', 'duration': 695.402, 'highlights': ['Normalization involves remapping feature values to be between 0 and 1, achieved by implementing a function called NormalizePoints, and is essential for leveling the playing field in classification. remapping values to be between 0 and 1', 'The process involves initializing minimum and maximum values for each dimension, updating them by looping through the points and dimensions, and transforming the data to be between 0 and 1 by subtracting the minimum value and dividing by the difference. initializing minimum and maximum values, updating values through looping, transforming data to be between 0 and 1', 'The impact of outlier points on data distribution is demonstrated, prompting the consideration of standardization as a less sensitive alternative to normalization, involving computation of mean and standard deviation to remap each feature. demonstration of the impact of outlier points, consideration of standardization as a less sensitive alternative']}, {'end': 11029.188, 'start': 10524.176, 'title': 'K-nearest-neighbors classifier', 'summary': 'Discusses the k-nearest-neighbors classifier, where the number of neighbors (k) plays a role in classification, and demonstrates the process of updating the nearest neighbors search and handling multiple values.', 'duration': 505.012, 'highlights': ['The chapter discusses the K-nearest-neighbors classifier and the role of k in classification. The k-nearest-neighbors classifier is explained, where the number of neighbors (k) influences the classification process.', 'The process of updating the nearest neighbors search to return more items is demonstrated. The process of updating the nearest neighbors search is demonstrated by modifying the get nearest function to return a specified number of neighbors.', 'Handling multiple values in the nearest neighbors logic is illustrated. The chapter illustrates the process of handling multiple values in the nearest neighbors logic by mapping indices to samples and determining the majority through counts and labels.']}], 'duration': 2499.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k8529831.jpg', 'highlights': ['Implementing a classification function based on nearest neighbors to identify and classify drawings', 'Identifying and addressing outliers in the dataset', 'Synchronizing Node scripts with a website to ensure they are in sync', 'Implementing dynamic point appearance based on classification labels', 'Drawing and classifying different objects such as a car, house, clock, and fish', 'Connecting drawn objects to the nearest sample using a line', "Confusion caused by the chart's misleading display, impacting understanding of machine learning methods", 'Calculation of delta leading to a chart with empty space due to default stretching functionality', 'Unequal treatment of features, specifically the path count feature, leading to essentially one dimensional data', 'Demonstration of minimal effect of path count on classification due to squishing, emphasizing the need for data scaling', 'Normalization involves remapping feature values to be between 0 and 1', 'Initializing minimum and maximum values, updating values through looping, transforming data to be between 0 and 1', 'Demonstration of the impact of outlier points, consideration of standardization as a less sensitive alternative', 'The k-nearest-neighbors classifier is explained, where the number of neighbors (k) influences the classification process', 'The process of updating the nearest neighbors search to return more items is demonstrated', 'The chapter illustrates the process of handling multiple values in the nearest neighbors logic by mapping indices to samples and determining the majority through counts and labels']}, {'end': 13869.697, 'segs': [{'end': 11088.449, 'src': 'embed', 'start': 11061.673, 'weight': 2, 'content': [{'end': 11067.817, 'text': 'Try to calculate the probability for the classification to be correct based on the number of neighbors of the predicted class.', 'start': 11061.673, 'duration': 6.144}, {'end': 11072.059, 'text': "Most libraries have support for this feature and it's a useful thing to have.", 'start': 11068.617, 'duration': 3.442}, {'end': 11081.044, 'text': 'Other variants of the nearest neighbor classifiers exist as well, like a version weighted by distance or one that considers a fixed size neighborhood.', 'start': 11073.18, 'duration': 7.864}, {'end': 11088.449, 'text': "Think you can implement any of these? Share your code with me and I'll showcase my favorite implementations in a future video.", 'start': 11081.885, 'duration': 6.564}], 'summary': 'Calculating probability for classification using nearest neighbor classifiers, considering variants like weighted distance and fixed size neighborhood.', 'duration': 26.776, 'max_score': 11061.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k11061673.jpg'}, {'end': 11540.414, 'src': 'embed', 'start': 11512.23, 'weight': 3, 'content': [{'end': 11516.774, 'text': 'Now, before continuing, we need to talk about normalization one more time.', 'start': 11512.23, 'duration': 4.544}, {'end': 11524.34, 'text': "You see these numbers here, they are coming because we normalized the whole data and that's not proper.", 'start': 11517.354, 'duration': 6.986}, {'end': 11527.123, 'text': 'We have no idea what the testing set will be.', 'start': 11524.721, 'duration': 2.402}, {'end': 11530.425, 'text': 'So we should normalize only with the training data.', 'start': 11527.803, 'duration': 2.622}, {'end': 11540.414, 'text': 'In feature extractor, we go here where normalizing happens and we replace this with training.', 'start': 11531.466, 'duration': 8.948}], 'summary': 'Normalize only with training data to ensure proper data handling.', 'duration': 28.184, 'max_score': 11512.23, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k11512230.jpg'}, {'end': 12146.942, 'src': 'embed', 'start': 12118.18, 'weight': 1, 'content': [{'end': 12120.701, 'text': "I'll choose my favorite and refactor the code in that way.", 'start': 12118.18, 'duration': 2.521}, {'end': 12125.923, 'text': 'Decision boundaries are a useful way to understand the classifier.', 'start': 12122.52, 'duration': 3.403}, {'end': 12131.268, 'text': "I'll show you how to generate decision boundary plots and how to display them on our chart.", 'start': 12126.604, 'duration': 4.664}, {'end': 12136.993, 'text': "Now, this spider is cool, but it's not very informative.", 'start': 12132.329, 'duration': 4.664}, {'end': 12146.942, 'text': 'I mean, to figure out why this is a house, you would need to count all of these different things and not very useful really.', 'start': 12137.814, 'duration': 9.128}], 'summary': 'Refactor code, analyze decision boundaries, and visualize with plots.', 'duration': 28.762, 'max_score': 12118.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k12118180.jpg'}, {'end': 13248.917, 'src': 'embed', 'start': 13213.659, 'weight': 4, 'content': [{'end': 13215.9, 'text': 'In JavaScript, we use JSON a lot.', 'start': 13213.659, 'duration': 2.241}, {'end': 13220.403, 'text': "like here where we're writing our features.", 'start': 13217.361, 'duration': 3.042}, {'end': 13226.707, 'text': "It's possible to do this also in Python, but more common there is to use CSV files.", 'start': 13221.424, 'duration': 5.283}, {'end': 13235.352, 'text': "So let's go to utils.js and implement the function to convert our samples to CSV format.", 'start': 13227.727, 'duration': 7.625}, {'end': 13248.917, 'text': "Let's call it 2CSV and it will take as parameters the headers of the data, the name of the features and the samples array.", 'start': 13240.049, 'duration': 8.868}], 'summary': 'Javascript heavily uses json, while python commonly uses csv files for data handling.', 'duration': 35.258, 'max_score': 13213.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k13213659.jpg'}, {'end': 13735.609, 'src': 'embed', 'start': 13697.89, 'weight': 0, 'content': [{'end': 13702.651, 'text': "Now let's remove this and do our k-nearest-neighbor classification.", 'start': 13697.89, 'duration': 4.761}, {'end': 13723.676, 'text': 'I will import from the scikit-learn neighbors the k-neighbors classifier and instantiate this like so where we can pass how many neighbors we want to use.', 'start': 13703.351, 'duration': 20.325}, {'end': 13726.622, 'text': 'In the web app, we used 50.', 'start': 13724.781, 'duration': 1.841}, {'end': 13731.666, 'text': "So let's set here and neighbors to 50.", 'start': 13726.622, 'duration': 5.044}, {'end': 13735.609, 'text': 'And there are many possible parameters here for all kinds of variants.', 'start': 13731.666, 'duration': 3.943}], 'summary': 'Using k-nearest-neighbor classification with 50 neighbors for web app.', 'duration': 37.719, 'max_score': 13697.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k13697890.jpg'}], 'start': 11031.509, 'title': 'Implementing nearest neighbor and k-nearest-neighbor classifiers', 'summary': "Discusses the implementation of nearest neighbor classifiers, achieving an accuracy of 39.62% with 10 nearest neighbors, refactoring code for better structure, transitioning from javascript to python, and achieving a 50-neighbor classification for evaluating the model's accuracy.", 'chapters': [{'end': 11662.042, 'start': 11031.509, 'title': 'Nearest neighbor classifiers', 'summary': "Discusses the implementation of nearest neighbor classifiers, including calculating the probability for classification, evaluating a classifier's accuracy, and visualizing training and testing data.", 'duration': 630.533, 'highlights': ['The chapter discusses the implementation of nearest neighbor classifiers The chapter delves into the implementation of nearest neighbor classifiers, including various variants and the importance of testing on a lot of data.', "Calculating the probability for classification and evaluating a classifier's accuracy The transcript emphasizes the calculation of the probability for correct classification based on the number of neighbors and the evaluation of a classifier's accuracy through testing on a lot of data.", 'Visualizing training and testing data The chapter demonstrates the process of visualizing training and testing data, including the importance of normalization and the use of training data for normalization.']}, {'end': 12008.36, 'start': 11662.762, 'title': 'Implementing k-nearest-neighbor classifier', 'summary': 'Discusses implementing a k-nearest-neighbor classifier, with a focus on classifying unknown points, visualizing correct classifications, and calculating accuracy, achieving an accuracy of 39.62% by considering 10 nearest neighbors and determining that using multiple neighbors was indeed a good idea.', 'duration': 345.598, 'highlights': ['Achieving an accuracy of 39.62% by considering 10 nearest neighbors The chapter discusses calculating accuracy and achieving an accuracy of 39.62% by considering 10 nearest neighbors.', 'Determining that using multiple neighbors was indeed a good idea The chapter highlights that using multiple neighbors was a good idea by comparing the accuracy with and without using multiple neighbors.', 'Visualizing correct classifications by styling the background of correct points The chapter explains visualizing correct classifications by styling the background of correct points in the display, making them appear light green.', 'Classifying unknown points using the k-nearest-neighbor classifier The chapter discusses classifying unknown points using the k-nearest-neighbor classifier and updating the test label based on the classification results.']}, {'end': 12452.324, 'start': 12008.36, 'title': 'Implementing knn classifier and refactoring code', 'summary': 'Discusses achieving an accuracy of 43.6% with basic features, implementing a knn classifier, and refactoring code for better structure and decision boundary plots in chart.js.', 'duration': 443.964, 'highlights': ['Achieving an accuracy of 43.6% with basic features The speaker mentions achieving an accuracy of 43.6% using basic features, indicating a significant performance with minimal input.', 'Implementing a KNN classifier and testing its accuracy The chapter details the implementation of a KNN classifier and the process of testing its accuracy using testing samples, with the aim of achieving better than random guessing.', 'Refactoring code for better structure and decision boundary plots in chart.js The speaker emphasizes the need for refactoring code for better structure, as well as the generation and display of decision boundary plots in chart.js to understand the classifier.']}, {'end': 13211.838, 'start': 12453.404, 'title': 'Refactoring evaluation script and decision boundary plot', 'summary': 'Outlines the process of refactoring the evaluation script to ensure code consistency, generating a decision boundary plot of 100x100 pixels, and later a higher resolution plot of 5000x5000 pixels, as well as the implementation of adding a background image to a chart in viewer html.', 'duration': 758.434, 'highlights': ['Refactoring the evaluation script to ensure code consistency The speaker modifies the run evaluation script by destructuring the label as predicted label, exports the object in knn.js for web usage, and checks for the existing module to use from utils get nearest.', 'Generating a decision boundary plot of 100x100 pixels The speaker demonstrates the process of creating a pixel-based decision boundary plot by normalizing and coloring pixels based on predicted values, then saving the plot as a 100x100 pixel PNG image.', 'Implementing the addition of a background image to a chart in Viewer HTML The speaker explains the process of adding a background image, specifically the decision boundary plot, to a chart in Viewer HTML, and outlines the modifications made to the chart.js file to enable this feature.']}, {'end': 13869.697, 'start': 13213.659, 'title': 'Javascript to python transition', 'summary': "Discusses transitioning from javascript to python, including implementing a function to convert samples to csv format, re-implementing k-nearest neighbor algorithm in python, and evaluating the model's accuracy, achieving a 50-neighbor classification and suggesting further exploration with matplotlib for visualizing feature values and decision boundaries.", 'duration': 656.038, 'highlights': ['The chapter discusses transitioning from JavaScript to Python, including implementing a function to convert samples to CSV format The chapter covers the transition from JavaScript to Python, focusing on implementing a function (2CSV) to convert samples to CSV format, which is common in Python.', "Re-implementing k-nearest neighbor algorithm in Python and evaluating the model's accuracy, achieving a 50-neighbor classification The chapter explores re-implementing the k-nearest neighbor algorithm in Python, achieving a 50-neighbor classification and evaluating the model's accuracy.", 'Suggesting further exploration with matplotlib for visualizing feature values and decision boundaries The chapter encourages further exploration with matplotlib for visualizing feature values and decision boundaries, suggesting customization and sharing of the code for potential showcase.']}], 'duration': 2838.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDDjtwQDw2k/pics/vDDjtwQDw2k11031509.jpg', 'highlights': ['Achieving an accuracy of 50-neighbor classification in Python', 'Refactoring code for better structure and decision boundary plots', 'Calculating the probability for classification and evaluating accuracy', 'Visualizing training and testing data, emphasizing normalization', 'Transitioning from JavaScript to Python, implementing CSV conversion']}], 'highlights': ['1 The course is designed and taught by Radu, a university lecturer with a PhD in computer science, covering a wide array of topics to equip learners with the knowledge and expertise to create machine learning-driven applications.', '1 Coding without relying on libraries demystifies the inner workings of machine learning and enhances software development skills.', '1 Teaching how to build a data collection tool and a drawing app that works on desktop and mobile devices.', '1 Implementing the more advanced k-nearest neighbors classifier, calculating its accuracy for different values of k, and teaching how to compute decision boundaries and display them on a chart.', '1 Reviewing the course content in Python, utilizing libraries and emphasizing the need for understanding data in machine learning.', '2 Implementing a sketchpad with undo and save functionalities for data collection.', '2 Adding event listeners to detect mouse actions and obtaining mouse coordinates.', '3 A new function is generated to handle drawing multiple paths by looping through all the paths and using the draw function to draw each path with specified properties, leading to improved functionality in the sketch pad.', '3 The implementation of line cap and line join in the draw utility object improves the visual appearance by creating round corner points and rounded line endings, addressing issues with sudden directional changes and straight endings.', "3 Setting the viewport meta tag with the content 'width=device-width' adjusts the canvas to fit smaller screens, with a specific example of setting maximum scale to 0.9 for rescaling.", "4 The system includes an object with fields for the student, unique session identifiers, and storage for drawings' paths.", '4 The process involves creating and downloading a file, encoding data as a JSON string, and triggering the download action, enabling users to save their drawings locally.', '5 The code is organized by creating separate files and directories for common functions, constants, and utilities, enhancing modularity and efficiency in the dataset generation process.', '5 An indicator for tracking progress is implemented in the new file called utils.js, featuring a print progress function that calculates and displays the percentage completion of a process.', '6 The chapter explains the implementation of a format percent function to return a value multiplied by 100 with two decimal precision and a percent symbol, followed by exporting the object.', '6 The script includes a progress indicator that displays the count and maximum value, which is calculated as the number of files in a directory multiplied by eight, improving visualization and tracking of the dataset generation process.', '7 Successfully visualized data using Google Charts, displaying 200 paths and 15,000 points.', '7 Developing selection functionality for items in the chart and list, allowing for seamless interaction and deselection.', '8 A fast, responsive system for data inspection reduces manual work and errors, promoting efficient analysis.', '8 Updating path and point counts to reflect drawing actions, with the path count and point count dynamically changing as drawing progresses.', '9 Implementing a classification function based on nearest neighbors to identify and classify drawings.', '9 Demonstration of the impact of outlier points, consideration of standardization as a less sensitive alternative.', '10 Achieving an accuracy of 50-neighbor classification in Python.']}