title
1.3: Graphing with Chart.js - Working With Data & APIs in JavaScript

description
The lesson continues working with tabular data (CSV) and examines how to graph the data in an HTML5 canvas with Chart.js. 🎥 NEXT LESSON: https://youtu.be/uxf0--uiX0I 🎥 PREVIOUS LESSON: https://youtu.be/RfMkdvN-23o 🎥 FULL COURSE: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X 💻https://github.com/CodingTrain/Intro-to-Data-APIs-JS 🔗https://www.chartjs.org/ 🚂 Website: http://thecodingtrain.com/ 💖 Patreon: https://patreon.com/codingtrain 🛒 Store: https://www.designbyhumans.com/shop/codingtrain/ 📚 Books: https://www.amazon.com/shop/thecodingtrain 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 Processing: https://processing.org Welcome to Working with Data and APIs in JavaScript! This course is for aspiring developers who want to learn how to work with data in web applications. How do you retrieve, collect, and store data? The course will be taught through a series of creating three data projects. 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '1.3: Graphing with Chart.js - Working With Data & APIs in JavaScript', 'heatmap': [{'end': 706.697, 'start': 685.409, 'weight': 1}], 'summary': 'Tutorial covers graphing csv data with chart.js, customizing chart.js functions for simplicity and efficiency, visualizing and customizing temperature data using javascript, and refactoring code, labeling data, and visualizing data with chart.js, providing step-by-step instructions and emphasizing ease of use and efficiency.', 'chapters': [{'end': 392.823, 'segs': [{'end': 29.813, 'src': 'embed', 'start': 0.945, 'weight': 0, 'content': [{'end': 2.807, 'text': "Let's review what we did in the previous video.", 'start': 0.945, 'duration': 1.862}, {'end': 4.549, 'text': 'So this video is entirely dependent.', 'start': 2.847, 'duration': 1.702}, {'end': 9.614, 'text': 'This is part two of graphing a CSV data file.', 'start': 4.569, 'duration': 5.045}, {'end': 17.983, 'text': 'So in the previous video, we went and got global world temperatures, the average world temperature from 1880 to present.', 'start': 9.955, 'duration': 8.028}, {'end': 21.767, 'text': 'We got that as a CSV, comma separated values file from NASA.', 'start': 18.003, 'duration': 3.764}, {'end': 27.031, 'text': 'We parsed it using some simple string parsing techniques with the split function.', 'start': 22.688, 'duration': 4.343}, {'end': 29.813, 'text': "Now we're able to console log that data.", 'start': 27.512, 'duration': 2.301}], 'summary': 'In the previous video, global world temperatures were graphed from a csv file obtained from nasa, covering the period from 1880 to present.', 'duration': 28.868, 'max_score': 0.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM945.jpg'}, {'end': 126.905, 'src': 'embed', 'start': 99.901, 'weight': 1, 'content': [{'end': 104.064, 'text': "There's a lot of examples, a lot of documentation, the source code on GitHub.", 'start': 99.901, 'duration': 4.163}, {'end': 106.826, 'text': 'I encourage you to check out more about the JavaScript library.', 'start': 104.164, 'duration': 2.662}, {'end': 110.409, 'text': "I'm going to move to this Get Started page.", 'start': 107.246, 'duration': 3.163}, {'end': 115.534, 'text': 'which will give me the basic techniques for using chart.js.', 'start': 111.129, 'duration': 4.405}, {'end': 119.638, 'text': 'So first thing is, how do I even import the library? And this is crucial.', 'start': 115.834, 'duration': 3.804}, {'end': 121.98, 'text': "I'm going to use a chart.js CDN.", 'start': 119.718, 'duration': 2.262}, {'end': 126.905, 'text': "So CDN stands for Content Delivery Network, meaning I'm going to load the library via URL.", 'start': 122.34, 'duration': 4.565}], 'summary': 'Learn about chart.js via documentation and examples on github. utilize cdn for library import.', 'duration': 27.004, 'max_score': 99.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM99901.jpg'}, {'end': 210.786, 'src': 'embed', 'start': 181.111, 'weight': 2, 'content': [{'end': 187.015, 'text': 'So open script tag, source equals this, and the URL, and then close script tag.', 'start': 181.111, 'duration': 5.904}, {'end': 189.437, 'text': 'So now I have chart.js loaded.', 'start': 187.075, 'duration': 2.362}, {'end': 197.055, 'text': 'The next thing I need is I need to have a canvas in my HTML itself.', 'start': 190.464, 'duration': 6.591}, {'end': 198.898, 'text': 'So I need to add a canvas element.', 'start': 197.355, 'duration': 1.543}, {'end': 202.704, 'text': "I'm going to give it an ID like chart.", 'start': 200.921, 'duration': 1.783}, {'end': 206.742, 'text': 'And I think I also need to give it a width.', 'start': 204.64, 'duration': 2.102}, {'end': 208.944, 'text': "Let's just try 400 and a height.", 'start': 207.123, 'duration': 1.821}, {'end': 210.786, 'text': '400 and those should be in quotes.', 'start': 209.785, 'duration': 1.001}], 'summary': "Loaded chart.js and added canvas element with id 'chart' and dimensions 400x400.", 'duration': 29.675, 'max_score': 181.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM181111.jpg'}, {'end': 276.592, 'src': 'embed', 'start': 233.653, 'weight': 3, 'content': [{'end': 237.638, 'text': 'This is code for some sort of bar chart with some data.', 'start': 233.653, 'duration': 3.985}, {'end': 243.586, 'text': "So one way that we could actually start working with this is let's just copy paste and take this code.", 'start': 237.879, 'duration': 5.707}, {'end': 246.869, 'text': "So when you're working with a new library, you can try a variety of things.", 'start': 243.846, 'duration': 3.023}, {'end': 248.151, 'text': 'You could read through the documentation.', 'start': 246.889, 'duration': 1.262}, {'end': 249.192, 'text': 'You could find an example.', 'start': 248.191, 'duration': 1.001}, {'end': 252.515, 'text': 'For me, this getting started example is going to be perfect to work with.', 'start': 249.412, 'duration': 3.103}, {'end': 253.736, 'text': "So I'm just going to take this.", 'start': 252.795, 'duration': 0.941}, {'end': 254.938, 'text': "I'm going to copy it.", 'start': 253.756, 'duration': 1.182}, {'end': 259.221, 'text': "And I'm going to paste it here at the top of my scripts tag.", 'start': 255.898, 'duration': 3.323}, {'end': 260.964, 'text': 'So there it is.', 'start': 260.483, 'duration': 0.481}, {'end': 266.569, 'text': 'So in theory, when I refresh the page, I should see a chart.', 'start': 261.124, 'duration': 5.445}, {'end': 276.592, 'text': "No, no, what happened? So we've now encountered something that has to do with the asynchronous events that happen when you load a web page.", 'start': 267.625, 'duration': 8.967}], 'summary': 'Working with code to create a bar chart, encountering asynchronous events.', 'duration': 42.939, 'max_score': 233.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM233653.jpg'}], 'start': 0.945, 'title': 'Graphing csv data with chart.js and adding chart.js to html', 'summary': 'Discusses graphing a csv data file containing global world temperatures from 1880 to present using the javascript library chart.js, emphasizing its ease of use and providing step-by-step instructions for importing the library, adding a canvas, and drawing the chart. it also explains the process of adding the chart.js library to an html file, creating a canvas element with an id and dimensions, and modifying the sample code to display a chart with data.', 'chapters': [{'end': 143.254, 'start': 0.945, 'title': 'Graphing csv data with chart.js', 'summary': 'Discusses graphing a csv data file containing global world temperatures from 1880 to present using the javascript library chart.js, emphasizing its ease of use and providing step-by-step instructions for importing the library, adding a canvas, and drawing the chart.', 'duration': 142.309, 'highlights': ['The chapter introduces the process of graphing a CSV data file containing global world temperatures from 1880 to present using the JavaScript library Chart.js. It discusses the process of obtaining global world temperatures as a CSV file from NASA and parsing it using simple string parsing techniques with the split function.', 'The chapter highlights the various approaches for creating charts, including using JavaScript libraries like D3, HTML5 Canvas, drawing functions, and p5.js, but emphasizes the use of Chart.js for its simplicity and ease of use. It mentions the availability of various approaches for creating charts, such as using JavaScript libraries like D3 and HTML5 Canvas, but favors Chart.js due to its simplicity and ease of use.', 'The chapter provides step-by-step instructions for using Chart.js, including importing the library via URL using a CDN and accessing the Get Started page for basic techniques. It offers step-by-step instructions for importing Chart.js via a CDN and accessing the Get Started page for basic techniques, emphasizing the ease of importing the library.']}, {'end': 392.823, 'start': 143.274, 'title': 'Adding chart.js to html', 'summary': 'Explains the process of adding the chart.js library to an html file, creating a canvas element with an id and dimensions, and modifying the sample code to display a chart with data.', 'duration': 249.549, 'highlights': ['The process of adding the chart.js library to an HTML file and creating a canvas element with an ID and dimensions. The speaker explains how to add the chart.js library to an HTML file and create a canvas element with an ID and dimensions, emphasizing the importance of these steps in preparing to display a chart.', 'Modifying the sample code to display a chart with data by updating the labels and changing variable declarations to use const instead of var. The speaker demonstrates modifying the sample code to display a chart with data, specifically focusing on updating the labels and variable declarations to achieve the desired chart display.', 'Encountering and resolving errors related to asynchronous events when loading a web page, including identifying and correcting an error with the canvas ID. The speaker encounters and resolves errors related to asynchronous events during web page loading, particularly identifying and correcting an error with the canvas ID, which is crucial to understanding and resolving issues related to chart display.']}], 'duration': 391.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM945.jpg', 'highlights': ['The chapter introduces the process of graphing a CSV data file containing global world temperatures from 1880 to present using the JavaScript library Chart.js.', 'The chapter provides step-by-step instructions for using Chart.js, including importing the library via URL using a CDN and accessing the Get Started page for basic techniques.', 'The process of adding the chart.js library to an HTML file and creating a canvas element with an ID and dimensions.', 'Modifying the sample code to display a chart with data by updating the labels and changing variable declarations to use const instead of var.', 'Encountering and resolving errors related to asynchronous events when loading a web page, including identifying and correcting an error with the canvas ID.']}, {'end': 594.878, 'segs': [{'end': 453.653, 'src': 'embed', 'start': 426.653, 'weight': 0, 'content': [{'end': 430.116, 'text': 'So now I have my data parsing, I have my chart creation.', 'start': 426.653, 'duration': 3.463}, {'end': 437.262, 'text': "So what I want to do is parse all the data and start adding the labels to the chart that's being drawn on the canvas.", 'start': 430.436, 'duration': 6.826}, {'end': 438.323, 'text': "Let's see what happens there.", 'start': 437.442, 'duration': 0.881}, {'end': 443.01, 'text': "Hmm, OK, don't see any labels.", 'start': 439.389, 'duration': 3.621}, {'end': 451.973, 'text': 'Now I have the other problem that I was thinking would happen, which is I am making the chart first and then loading the data.', 'start': 443.61, 'duration': 8.363}, {'end': 453.653, 'text': 'So this is a problem.', 'start': 452.573, 'duration': 1.08}], 'summary': 'Data parsing and chart creation encountered issues with adding labels and loading data.', 'duration': 27, 'max_score': 426.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM426653.jpg'}, {'end': 517.642, 'src': 'embed', 'start': 485.603, 'weight': 1, 'content': [{'end': 489.305, 'text': "So I'm going to say function chart it.", 'start': 485.603, 'duration': 3.702}, {'end': 494.577, 'text': "And all of that's going to be in a function.", 'start': 491.796, 'duration': 2.781}, {'end': 503.679, 'text': 'Now, this example that was provided on the chart.js getting started page has a lot of really useful, but for me right now, extra stuff in it.', 'start': 494.617, 'duration': 9.062}, {'end': 508.84, 'text': 'So there are a lot of configuration options, how you can have the chart appear.', 'start': 504.119, 'duration': 4.721}, {'end': 511.581, 'text': "I'm actually going to just remove those right now.", 'start': 508.86, 'duration': 2.721}, {'end': 517.642, 'text': "As an exercise for you that I'll suggest at the end is maybe find different ways of drawing the chart by looking up in the documentation.", 'start': 511.741, 'duration': 5.901}], 'summary': 'Removing extra configuration options from chart.js example.', 'duration': 32.039, 'max_score': 485.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM485603.jpg'}, {'end': 578.865, 'src': 'embed', 'start': 545.915, 'weight': 2, 'content': [{'end': 551.76, 'text': "I actually don't like something about what I'm doing here, so I'm going to do some refactoring as we get to the end, to clean up how.", 'start': 545.915, 'duration': 5.845}, {'end': 555.784, 'text': "I'm going to communicate between getting the data and drawing the chart.", 'start': 551.76, 'duration': 4.024}, {'end': 559.166, 'text': "But for right now, I'm going to make xlabels a global variable.", 'start': 556.024, 'duration': 3.142}, {'end': 566.422, 'text': "I'm going to call the chart it function and call the getData function.", 'start': 560.067, 'duration': 6.355}, {'end': 569.843, 'text': 'Still the same problem.', 'start': 568.903, 'duration': 0.94}, {'end': 578.865, 'text': 'Well, you would think, OK, what if I call getData before chart it? Still the same problem, because remember, getData is asynchronous.', 'start': 570.043, 'duration': 8.822}], 'summary': 'Refactoring for data communication and chart drawing, facing asynchronous issue', 'duration': 32.95, 'max_score': 545.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM545915.jpg'}], 'start': 393.943, 'title': 'Chart.js function customization', 'summary': 'Discusses customizing chart.js functions by removing unnecessary configuration options and sticking to one color, with an emphasis on simplicity and efficiency.', 'chapters': [{'end': 485.123, 'start': 393.943, 'title': 'Creating chart labels and data parsing', 'summary': 'Discusses creating chart labels and data parsing, encountering issues with label display and asynchronous data loading, leading to the decision to separate chart creation into a different function.', 'duration': 91.18, 'highlights': ['The issue of not seeing any labels on the chart is encountered, attributed to creating the chart before loading the data.', "The process of asynchronously fetching data using 'await fetch' and 'await response.text' is described, leading to the decision to separate chart creation into a separate function.", 'The creation of a separate function for chart creation is decided upon to address the issue of asynchronous data loading and label display on the chart.']}, {'end': 527.266, 'start': 485.603, 'title': 'Chart.js function customization', 'summary': 'Discusses customizing chart.js functions by removing unnecessary configuration options and sticking to one color, with an emphasis on simplicity and efficiency.', 'duration': 41.663, 'highlights': ['The example on the chart.js getting started page includes a lot of configuration options, which can be simplified for efficiency.', 'The focus is on removing unnecessary elements and sticking to one color for the chart, emphasizing simplicity and efficiency.', 'The suggestion to explore different ways of drawing the chart by referring to the documentation encourages further learning and experimentation.']}, {'end': 594.878, 'start': 527.286, 'title': 'Refactoring for asynchronous function', 'summary': "Discusses the process of refactoring a function to make it asynchronous, specifically by making 'chartit' an asynchronous function and using 'await' to ensure it waits till the data is done before proceeding, to resolve the issue of 'xlabels is not defined' and to improve communication between getting the data and drawing the chart.", 'duration': 67.592, 'highlights': ["The solution involves making 'chartIt' an asynchronous function and using 'await' to ensure it waits till the data is done before proceeding.", "The issue of 'xlabels is not defined' is addressed by making 'xlabels' a global variable.", 'Refactoring is planned to improve communication between getting the data and drawing the chart.']}], 'duration': 200.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM393943.jpg', 'highlights': ['Separate chart creation function to address asynchronous data loading and label display.', 'Simplify chart.js configuration for efficiency by removing unnecessary elements and sticking to one color.', 'Refactor to improve communication between data retrieval and chart drawing.']}, {'end': 803.72, 'segs': [{'end': 653.901, 'src': 'embed', 'start': 623.305, 'weight': 0, 'content': [{'end': 631.089, 'text': "And then here, when I'm reading each temperature, I'm going to say yTemps.pushTemp.", 'start': 623.305, 'duration': 7.784}, {'end': 633.51, 'text': "So now let's take a look at this.", 'start': 631.709, 'duration': 1.801}, {'end': 634.25, 'text': 'There we go.', 'start': 633.63, 'duration': 0.62}, {'end': 641.193, 'text': 'Now we see the global temperature from 1880 all the way to 2018.', 'start': 634.67, 'duration': 6.523}, {'end': 644.275, 'text': "Now what's going on here? Negative 0.2, 0.", 'start': 641.193, 'duration': 3.082}, {'end': 653.901, 'text': 'What are these temperatures? Remember, these are the difference from the global mean between the period of 1951 and 1980.', 'start': 644.275, 'duration': 9.626}], 'summary': 'Analyzing global temperatures from 1880 to 2018, showing difference from 1951-1980 mean.', 'duration': 30.596, 'max_score': 623.305, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM623305.jpg'}, {'end': 733.557, 'src': 'heatmap', 'start': 685.409, 'weight': 2, 'content': [{'end': 694.694, 'text': "Well, I think what's going on here if I'm right, we'll find out in a second is that any time you're doing parsing from a text file,", 'start': 685.409, 'duration': 9.285}, {'end': 695.775, 'text': 'your stuff is still text?', 'start': 694.694, 'duration': 1.081}, {'end': 696.675, 'text': "It's a string.", 'start': 695.915, 'duration': 0.76}, {'end': 699.577, 'text': "It doesn't know how to add 14 to a string.", 'start': 697.096, 'duration': 2.481}, {'end': 706.697, 'text': "I can actually use a function called parseFloat, which is a global JavaScript function that's available,", 'start': 699.857, 'duration': 6.84}, {'end': 710.501, 'text': 'that takes a string and turns it into a number.', 'start': 706.697, 'duration': 3.804}, {'end': 715.065, 'text': 'so now I can actually add the number 14 to the number temp.', 'start': 710.501, 'duration': 4.564}, {'end': 716.066, 'text': 'so now we should see.', 'start': 715.065, 'duration': 1.001}, {'end': 717.127, 'text': 'there we go.', 'start': 716.066, 'duration': 1.061}, {'end': 717.948, 'text': 'we can see.', 'start': 717.127, 'duration': 0.821}, {'end': 724.013, 'text': 'this is the actual average temperature from 1880 to 2018.', 'start': 717.948, 'duration': 6.065}, {'end': 725.033, 'text': 'This is a bar chart.', 'start': 724.013, 'duration': 1.02}, {'end': 727.454, 'text': "I don't think the bar chart is the best way to describe this.", 'start': 725.073, 'duration': 2.381}, {'end': 731.136, 'text': "It's also kind of funny to me that this one is colored differently.", 'start': 727.474, 'duration': 3.662}, {'end': 733.557, 'text': "I think that's because I removed the color thing.", 'start': 731.176, 'duration': 2.381}], 'summary': 'Using parsefloat function to convert text to number for temperature data visualization.', 'duration': 51.17, 'max_score': 685.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM685409.jpg'}, {'end': 782.749, 'src': 'embed', 'start': 758.71, 'weight': 5, 'content': [{'end': 764.894, 'text': 'This is a good example of where I need to look up in the documentation because I have no idea how to turn the fill below the line off.', 'start': 758.71, 'duration': 6.184}, {'end': 768.537, 'text': "It's probably some parameter that either goes in options or with the data set.", 'start': 765.475, 'duration': 3.062}, {'end': 771.139, 'text': "Let's see if I can find that on the chart.js website.", 'start': 768.777, 'duration': 2.362}, {'end': 774.901, 'text': 'Here along the side is all of the different things.', 'start': 771.959, 'duration': 2.942}, {'end': 782.749, 'text': "I think I imagine if I go into line, It's showing me line, example usage, data set properties, fill, there we go.", 'start': 774.941, 'duration': 7.808}], 'summary': 'The speaker navigates the chart.js documentation to find information on turning off the fill below the line, eventually finding the relevant property under data set properties.', 'duration': 24.039, 'max_score': 758.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM758710.jpg'}], 'start': 595.139, 'title': 'Data visualization and chart customization', 'summary': 'Discusses data visualization and temperature analysis using javascript, highlighting the global temperature data from 1880 to 2018 and the customization of a bar chart to a line chart using chart.js, achieving a visually improved representation of average temperature.', 'chapters': [{'end': 710.501, 'start': 595.139, 'title': 'Data visualization and temperature analysis', 'summary': 'Discusses data visualization and temperature analysis using javascript, with a focus on parsing, manipulating, and displaying global temperature data from 1880 to 2018, highlighting the difference from the global mean temperature of 14 degrees celsius.', 'duration': 115.362, 'highlights': ['Parsing and displaying global temperature data from 1880 to 2018 The chapter explains the process of parsing and displaying global temperature data from 1880 to 2018, providing a visual representation of the temperature fluctuations over the years.', 'Manipulating temperature data to show difference from the global mean of 14 degrees Celsius The chapter emphasizes the manipulation of temperature data to showcase the difference from the global mean temperature of 14 degrees Celsius, offering insights into the temperature variations between the period of 1951 and 1980.', 'Use of parseFloat function to convert string to number for temperature manipulation The chapter introduces the use of the parseFloat function in JavaScript to convert string data representing temperatures to numerical values, facilitating accurate temperature manipulation and analysis.']}, {'end': 803.72, 'start': 710.501, 'title': 'Customizing chart visualization', 'summary': 'Demonstrates customizing a bar chart to a line chart using chart.js, specifically altering colors and removing fill below the line, achieving a visually improved average temperature representation from 1880 to 2018.', 'duration': 93.219, 'highlights': ['By adjusting the chart type from bar to line and removing fill below the line, the average temperature from 1880 to 2018 is visually improved.', 'Changing the color settings and removing the fill below the line results in a visually improved representation of the average temperature from 1880 to 2018.', 'Consulting the chart.js documentation led to successfully customizing the visualization of the average temperature representation from 1880 to 2018.']}], 'duration': 208.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM595139.jpg', 'highlights': ['Parsing and displaying global temperature data from 1880 to 2018, providing a visual representation of temperature fluctuations.', 'Manipulating temperature data to show the difference from the global mean of 14 degrees Celsius, offering insights into temperature variations.', 'Use of parseFloat function to convert string to number for accurate temperature manipulation and analysis.', 'Adjusting the chart type from bar to line and removing fill below the line for visually improved average temperature representation.', 'Changing color settings and removing fill below the line for visually improved average temperature representation.', 'Consulting the chart.js documentation for successful customization of average temperature visualization.']}, {'end': 1176.023, 'segs': [{'end': 871.472, 'src': 'embed', 'start': 803.981, 'weight': 0, 'content': [{'end': 808.144, 'text': 'I probably want to think about what this label is to be more accurate.', 'start': 803.981, 'duration': 4.163}, {'end': 809.284, 'text': 'This is pretty important.', 'start': 808.344, 'duration': 0.94}, {'end': 814.849, 'text': "So how about I say exactly what the data is? So here's the exact data I got.", 'start': 809.665, 'duration': 5.184}, {'end': 819.37, 'text': 'The zonal annual means, the combined land surface air and sea water surface temperature.', 'start': 815.749, 'duration': 3.621}, {'end': 823.131, 'text': 'So land ocean temperature index.', 'start': 820.01, 'duration': 3.121}, {'end': 827.553, 'text': "So let's change the label to this.", 'start': 823.551, 'duration': 4.002}, {'end': 832.294, 'text': 'In Celsius.', 'start': 830.914, 'duration': 1.38}, {'end': 834.235, 'text': 'And then I have to type that degrees symbol.', 'start': 832.634, 'duration': 1.601}, {'end': 840.217, 'text': "Does anybody know how to type the degrees symbol? Apparently it's option shift 8 to type the degrees symbol.", 'start': 834.255, 'duration': 5.962}, {'end': 841.237, 'text': 'I have not actually tried this.', 'start': 840.237, 'duration': 1}, {'end': 841.897, 'text': "Let's see if it works.", 'start': 841.277, 'duration': 0.62}, {'end': 843.618, 'text': 'Yes! There we go.', 'start': 842.517, 'duration': 1.101}, {'end': 844.498, 'text': "We've got Celsius.", 'start': 843.658, 'duration': 0.84}, {'end': 848.674, 'text': 'And let me go back, and we can see, there we go.', 'start': 846.352, 'duration': 2.322}, {'end': 850.415, 'text': 'So now I have my label up there.', 'start': 848.694, 'duration': 1.721}, {'end': 853.498, 'text': 'What I want to do, let me refactor this code a little bit.', 'start': 851.236, 'duration': 2.262}, {'end': 856.44, 'text': "So I don't really love the use of these global variables here.", 'start': 853.718, 'duration': 2.722}, {'end': 865.307, 'text': "I think what would make more sense, and there's so many different ways we could do this, but let me just do one way to make it a little simpler.", 'start': 856.46, 'duration': 8.847}, {'end': 871.472, 'text': "Let me actually have a local variable here, which are both, I'm going to call these x's and y's.", 'start': 865.387, 'duration': 6.085}], 'summary': 'Refactoring code to use local variables instead of global variables.', 'duration': 67.491, 'max_score': 803.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM803981.jpg'}, {'end': 1041.262, 'src': 'embed', 'start': 1010.234, 'weight': 1, 'content': [{'end': 1012.076, 'text': 'Now you can see the degree symbol is there.', 'start': 1010.234, 'duration': 1.842}, {'end': 1013.857, 'text': 'So let me just spread this back out again.', 'start': 1012.416, 'duration': 1.441}, {'end': 1017.38, 'text': 'I feel like the canvas size is weird.', 'start': 1013.937, 'duration': 3.443}, {'end': 1018.461, 'text': "So I'm going to make this like 800 by 400.", 'start': 1017.4, 'duration': 1.061}, {'end': 1019.081, 'text': 'There we go.', 'start': 1018.461, 'duration': 0.62}, {'end': 1021.683, 'text': "And then I'm going to get rid of the console.", 'start': 1019.161, 'duration': 2.522}, {'end': 1024.925, 'text': 'And voila, we have our finished chart.', 'start': 1022.003, 'duration': 2.922}, {'end': 1035.557, 'text': 'that shows the combined land surface air and sea surface water temperature in Celsius average from 1880 all the way to 2018.', 'start': 1025.546, 'duration': 10.011}, {'end': 1041.262, 'text': 'And you can see here, by the way, some very, very good evidence that the Earth is warming.', 'start': 1035.557, 'duration': 5.705}], 'summary': 'A chart displaying land and sea surface temperatures from 1880 to 2018 shows evidence of earth warming.', 'duration': 31.028, 'max_score': 1010.234, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM1010234.jpg'}, {'end': 1097.546, 'src': 'embed', 'start': 1073.117, 'weight': 4, 'content': [{'end': 1079.858, 'text': "And we've seen how to adjust a little bit of the sort of styles and layout and format of that chart.", 'start': 1073.117, 'duration': 6.741}, {'end': 1083.839, 'text': 'So what should you do here? So you have a number of couple of different options.', 'start': 1080.278, 'duration': 3.561}, {'end': 1089.1, 'text': 'One exercise is just do exactly the same thing as I have here, but do it with your own data.', 'start': 1084.319, 'duration': 4.781}, {'end': 1097.546, 'text': "What's some CSV data that you can find? Another thing that might be fun to try is go and get the p5.js library.", 'start': 1089.26, 'duration': 8.286}], 'summary': 'Learn to adjust chart styles and format, practice with own data, and try using p5.js library.', 'duration': 24.429, 'max_score': 1073.117, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM1073117.jpg'}], 'start': 803.981, 'title': 'Refactoring code, labeling data, and visualizing data with chart.js', 'summary': 'Covers accurately labeling temperature data, refactoring code, using chart.js to visualize data, and suggestions for further exercises, concluding with a preview of the next project.', 'chapters': [{'end': 853.498, 'start': 803.981, 'title': 'Refactoring code and labeling data', 'summary': 'Discusses accurately labeling the zonal annual means of combined land and sea temperature data in celsius, including the process of typing the degrees symbol and refactoring the code.', 'duration': 49.517, 'highlights': ['The chapter emphasizes accurately labeling the zonal annual means of combined land and sea temperature data in Celsius, with the process of typing the degrees symbol and refactoring the code.', 'The speaker discusses the process of accurately labeling the zonal annual means of combined land and sea temperature data in Celsius and typing the degrees symbol using option shift 8.', 'The speaker demonstrates the process of accurately typing the degrees symbol using option shift 8 and refactoring the code to ensure accuracy in the labeling of temperature data.']}, {'end': 1176.023, 'start': 853.718, 'title': 'Using chart.js to visualize data', 'summary': 'Discusses using local variables instead of global variables to operate independently, visualizing data using chart.js, adjusting the styling and format of the chart, and suggestions for further exercises, concluding with a preview of the next project on obtaining and visualizing real-time data from a web api.', 'duration': 322.305, 'highlights': ['The chapter discusses using local variables instead of global variables to operate independently, which could cause problems later down the road.', 'Visualizing data using Chart.js and adjusting the styling and format of the chart, resulting in the display of land and sea surface temperature data from 1880 to 2018 and demonstrating evidence of global warming.', 'Suggestions for further exercises include working with own CSV data, using p5.js to draw a line graph, and graphing multiple lines on the same chart for comparison, followed by a preview of the next project on obtaining and visualizing real-time data from a web API.']}], 'duration': 372.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5-ptp9tRApM/pics/5-ptp9tRApM803981.jpg', 'highlights': ['The speaker demonstrates the process of accurately typing the degrees symbol using option shift 8 and refactoring the code to ensure accuracy in the labeling of temperature data.', 'Visualizing data using Chart.js and adjusting the styling and format of the chart, resulting in the display of land and sea surface temperature data from 1880 to 2018 and demonstrating evidence of global warming.', 'The chapter emphasizes accurately labeling the zonal annual means of combined land and sea temperature data in Celsius, with the process of typing the degrees symbol and refactoring the code.', 'The chapter discusses using local variables instead of global variables to operate independently, which could cause problems later down the road.', 'Suggestions for further exercises include working with own CSV data, using p5.js to draw a line graph, and graphing multiple lines on the same chart for comparison, followed by a preview of the next project on obtaining and visualizing real-time data from a web API.']}], 'highlights': ['Visualizing and customizing temperature data using javascript, and refactoring code, labeling data, and visualizing data with chart.js, providing step-by-step instructions and emphasizing ease of use and efficiency.', 'Separate chart creation function to address asynchronous data loading and label display.', 'Simplify chart.js configuration for efficiency by removing unnecessary elements and sticking to one color.', 'Parsing and displaying global temperature data from 1880 to 2018, providing a visual representation of temperature fluctuations.', 'Manipulating temperature data to show the difference from the global mean of 14 degrees Celsius, offering insights into temperature variations.', 'Use of parseFloat function to convert string to number for accurate temperature manipulation and analysis.', 'Adjusting the chart type from bar to line and removing fill below the line for visually improved average temperature representation.', 'The speaker demonstrates the process of accurately typing the degrees symbol using option shift 8 and refactoring the code to ensure accuracy in the labeling of temperature data.', 'Visualizing data using Chart.js and adjusting the styling and format of the chart, resulting in the display of land and sea surface temperature data from 1880 to 2018 and demonstrating evidence of global warming.', 'The chapter emphasizes accurately labeling the zonal annual means of combined land and sea temperature data in Celsius, with the process of typing the degrees symbol and refactoring the code.', 'The chapter discusses using local variables instead of global variables to operate independently, which could cause problems later down the road.']}