title
Data Visualization with D3 – Full Course for Beginners [2022]

description
Learn data visualization with D3.js. D3 is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. This course is an edited collection of live streams taught by Dr. Curran Kelleher. He is one of the top D3 instructors in the world. He has a Ph.D. in Computer Science, and has taught at universities including MIT. ✏️ Check out Dr. Curran Kelleher's channel: https://www.youtube.com/channel/UCSwd_9jyX4YtDYm9p9MxQqw ⭐️ Course Resources ⭐️ 🔗 https://vizhub.com/blog/2021/02/20/new-livestream-series-get-it-right-in-black-and-white/ 🔗 https://vizhub.com/forum/t/get-it-right-in-black-white-index/110 ⭐️ Course Contents ⭐️ ⌨️ (00:00:00) Introduction ⌨️ (00:06:16) SVG Fundamentals ⌨️ (01:05:11) Pseudo Visualizations ⌨️ (02:16:26) Sol LeWitt in Vanilla JS ⌨️ (03:32:31) Sol LeWitt in D3 ⌨️ (05:08:31) D3 Selections ⌨️ (06:43:11) JavaScript Modules & Build Tools ⌨️ (08:04:07) Productizing a Codebase ⌨️ (10:25:28) Scatter Plot ⌨️ (11:56:28) Reusable Charts ⌨️ (13:28:27) Dynamic Charts ⌨️ (15:07:37) Charts with Menus ⌨️ (16:35:23) Quantitative and Categorical ⌨️ (18:17:35) Closing the Series -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'Data Visualization with D3 – Full Course for Beginners [2022]', 'heatmap': [{'end': 21113.454, 'start': 20402.948, 'weight': 0.927}, {'end': 70351.42, 'start': 69653.087, 'weight': 1}], 'summary': 'A year-long live data visualization series with 5,000 unique vizhub users covers html, css, svg basics, javascript, d3, array methods, github setup, and d3 visualization techniques, including transitions and troubleshooting, aiming to enhance and monetize vizhub for web technology education.', 'chapters': [{'end': 376.159, 'segs': [{'end': 200.137, 'src': 'embed', 'start': 116.97, 'weight': 0, 'content': [{'end': 118.511, 'text': 'you could integrate with different frameworks.', 'start': 116.97, 'duration': 1.541}, {'end': 129.221, 'text': "Another key difference is that this is going to be live, it's going to be like a TV show about data visualization.", 'start': 121.252, 'duration': 7.969}, {'end': 138.631, 'text': "So you can tune in live to the event, I'm going to have, you know, YouTube chat open, and I'll be responsive to that during the event.", 'start': 130.002, 'duration': 8.629}, {'end': 152.446, 'text': "And I'm also inviting a small group of friends and special guests to participate with me live on the stream with their audio.", 'start': 140.538, 'duration': 11.908}, {'end': 157.169, 'text': 'So we can have direct discussions during this event.', 'start': 152.966, 'duration': 4.203}, {'end': 165.815, 'text': "The reason why I'm doing this is because in previous courses, I was sitting there all alone making these videos.", 'start': 158.67, 'duration': 7.145}, {'end': 173.54, 'text': 'And if I forgot to say something or cover something, It would come up only, you know, a week later.', 'start': 166.495, 'duration': 7.045}, {'end': 177.302, 'text': "That's why I want to have this live element to it.", 'start': 174.18, 'duration': 3.122}, {'end': 183.346, 'text': 'This is a great opportunity to explain everything step by step.', 'start': 179.344, 'duration': 4.002}, {'end': 186.088, 'text': "So there's lots of time here.", 'start': 184.267, 'duration': 1.821}, {'end': 190.711, 'text': 'I think this series, my intention at the moment is to have this series go for about a year.', 'start': 186.188, 'duration': 4.523}, {'end': 196.334, 'text': 'So this will be a recurring event every single Saturday for a year at this time.', 'start': 191.791, 'duration': 4.543}, {'end': 197.555, 'text': 'I mean, I might change the time.', 'start': 196.554, 'duration': 1.001}, {'end': 200.137, 'text': "But there's lots of time.", 'start': 198.175, 'duration': 1.962}], 'summary': 'Live data visualization show with live discussions and special guests, recurring every saturday for about a year.', 'duration': 83.167, 'max_score': 116.97, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw116970.jpg'}], 'start': 0.069, 'title': 'Live data visualization series', 'summary': 'Introduces a year-long live data visualization series, featuring weekly sessions with special guests, interactive discussions, and a comprehensive learning experience for the viewers.', 'chapters': [{'end': 116.97, 'start': 0.069, 'title': 'Live stream on data visualization with d3', 'summary': "Discusses current's live stream series and course on data visualization with svg and d3, highlighting the popularity of the 2018 version and the focus on pure d3 in the 2020 version.", 'duration': 116.901, 'highlights': ["Current's live stream series and course on data visualization with SVG and D3 Current is an expert in data visualizations and is offering a long-running live stream series and course focusing on data visualization using SVG and D3.", 'Popularity of the 2018 version of the course The 2018 version of the course on data visualization with D3 was quite popular, indicating a strong interest in the topic among the audience.', 'Focus on pure D3 in the 2020 version of the course The 2020 version of the course, DataVis 2020, is oriented around pure D3, addressing the feedback on how to achieve visualization without React and emphasizing problem-solving with D3.']}, {'end': 376.159, 'start': 116.97, 'title': 'Live data visualization series', 'summary': 'Introduces a live data visualization series that will run for about a year, every saturday, with special guests and interactive discussions to provide a comprehensive learning experience for the viewers.', 'duration': 259.189, 'highlights': ['The series will run for about a year, every single Saturday, providing a recurring event for the viewers. The series will run for about a year, every single Saturday.', 'Special guests and a small group of friends will participate with the host in live discussions, providing an interactive element to the event. Special guests and a small group of friends will participate in live discussions.', 'The host aims to provide a comprehensive understanding of data visualization, allowing ample time for explanations and discussions. The host aims to provide a comprehensive understanding of data visualization.', 'Participants, including professionals from different fields, express their excitement and expectations to learn deeply from the series. Participants express their excitement and expectations to learn deeply from the series.']}], 'duration': 376.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw69.jpg', 'highlights': ["Current's live stream series and course on data visualization with SVG and D3", 'The 2018 version of the course on data visualization with D3 was quite popular', 'The 2020 version of the course, DataVis 2020, is oriented around pure D3', 'The series will run for about a year, every single Saturday', 'Special guests and a small group of friends will participate in live discussions', 'The host aims to provide a comprehensive understanding of data visualization', 'Participants express their excitement and expectations to learn deeply from the series']}, {'end': 3651.893, 'segs': [{'end': 413.591, 'src': 'embed', 'start': 377.119, 'weight': 15, 'content': [{'end': 377.98, 'text': 'All right, here we go.', 'start': 377.119, 'duration': 0.861}, {'end': 384.022, 'text': 'This is episode one of Get It Right in Black and White, SVG Fundamentals.', 'start': 378.16, 'duration': 5.862}, {'end': 390.825, 'text': "What we'll cover today is what is HTML, CSS, and SVG.", 'start': 385.443, 'duration': 5.382}, {'end': 407.93, 'text': 'Adding an SVG element to an HTML page creating circles, rectangles, and lines, adding text in SVG, and customizing the font with CSS.', 'start': 392.126, 'duration': 15.804}, {'end': 413.591, 'text': 'Alright, so HTML, Hyper Text Markup Language.', 'start': 409.79, 'duration': 3.801}], 'summary': 'Introduction to html, css, and svg fundamentals in episode one of get it right in black and white, covering svg elements and their customization with css.', 'duration': 36.472, 'max_score': 377.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw377119.jpg'}, {'end': 707.919, 'src': 'embed', 'start': 635.86, 'weight': 1, 'content': [{'end': 639.621, 'text': 'SVG stands for scalable vector graphics.', 'start': 635.86, 'duration': 3.761}, {'end': 649.645, 'text': "So scalable vector graphics, it's a way of representing computer graphics that is based on the geometries and the shapes.", 'start': 640.742, 'duration': 8.903}, {'end': 662.307, 'text': "So, for example, If you have the letter S and you zoom it in with SVG because it's vector graphics, you don't lose any crispness,", 'start': 650.546, 'duration': 11.761}, {'end': 666.952, 'text': 'because the graphics are defined in terms of the geometries themselves.', 'start': 662.307, 'duration': 4.645}, {'end': 680.977, 'text': 'Points and, you know, lines that connect the points as opposed to raster images like PNGs, bitmaps, JPEGs.', 'start': 667.733, 'duration': 13.244}, {'end': 684.497, 'text': 'These are images defined in terms of pixels.', 'start': 681.637, 'duration': 2.86}, {'end': 691.819, 'text': 'And a pixel is one of these little squares on your screen.', 'start': 687.518, 'duration': 4.301}, {'end': 700.654, 'text': 'So if you zoom it, the pixels will get blown up or blurry.', 'start': 693.628, 'duration': 7.026}, {'end': 707.919, 'text': 'Often when you scale a raster, it ends up getting blurry because the rendering engine tries to compensate.', 'start': 701.995, 'duration': 5.924}], 'summary': 'Svg uses geometries, not pixels, providing crispness and scalability.', 'duration': 72.059, 'max_score': 635.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw635860.jpg'}, {'end': 930.901, 'src': 'embed', 'start': 897.634, 'weight': 18, 'content': [{'end': 904.836, 'text': 'So, yeah, it does introduce a lot of capabilities to HTML that HTML does not have without SVG.', 'start': 897.634, 'duration': 7.202}, {'end': 909.097, 'text': 'Thank you.', 'start': 908.717, 'duration': 0.38}, {'end': 912.798, 'text': 'Thanks Karan.', 'start': 909.277, 'duration': 3.521}, {'end': 916.039, 'text': "And we'll get into those specifics and see what they are.", 'start': 912.918, 'duration': 3.121}, {'end': 922.401, 'text': 'So in Wikipedia it says SVG is an extensible markup language.', 'start': 918.119, 'duration': 4.282}, {'end': 926.817, 'text': "Yeah So I'm confused.", 'start': 923.881, 'duration': 2.936}, {'end': 930.901, 'text': 'Is it a language itself or is it just a tag in HTML??', 'start': 927.077, 'duration': 3.824}], 'summary': 'Svg introduces new capabilities to html, expanding its functionality. it is an extensible markup language, not just an html tag.', 'duration': 33.267, 'max_score': 897.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw897634.jpg'}, {'end': 1012.134, 'src': 'embed', 'start': 977.916, 'weight': 0, 'content': [{'end': 984.308, 'text': 'In a sense, HTML It used to be at least a strict subset of XML.', 'start': 977.916, 'duration': 6.392}, {'end': 987.928, 'text': "I think now there's some more language features of HTML than XML.", 'start': 984.368, 'duration': 3.56}, {'end': 990.149, 'text': 'But XML, I think, came first.', 'start': 988.388, 'duration': 1.761}, {'end': 996.53, 'text': 'So the comments that you see in HTML are derived or inherited from XML.', 'start': 991.069, 'duration': 5.461}, {'end': 1003.232, 'text': 'The notion of tags with openings and closing is from XML.', 'start': 998.491, 'duration': 4.741}, {'end': 1012.134, 'text': 'And so what it says in the Wikipedia article is that SVG is based on XML.', 'start': 1004.412, 'duration': 7.722}], 'summary': 'Html has evolved from a strict subset of xml, with xml being the predecessor. svg is based on xml.', 'duration': 34.218, 'max_score': 977.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw977916.jpg'}, {'end': 1589.117, 'src': 'embed', 'start': 1547.753, 'weight': 13, 'content': [{'end': 1562.722, 'text': 'The head of an HTML page, it defines stuff that sort of is not directly visible on the page, but may have some side effects.', 'start': 1547.753, 'duration': 14.969}, {'end': 1576.05, 'text': "For example, the title tag is a tag that goes into the head, and I believe it's actually required to have a valid HTML document.", 'start': 1563.803, 'duration': 12.247}, {'end': 1589.117, 'text': 'So if you were to have a text file on your machine called index.html and double-click it and open it in the browser,', 'start': 1578.171, 'duration': 10.946}], 'summary': 'The head of an html page defines important but not directly visible content, such as the title tag, which is required for a valid html document.', 'duration': 41.364, 'max_score': 1547.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw1547753.jpg'}, {'end': 1910.936, 'src': 'embed', 'start': 1874.112, 'weight': 8, 'content': [{'end': 1881.614, 'text': 'So you could say body, not body, SVG, not SVG, circle, and then not circle.', 'start': 1874.112, 'duration': 7.502}, {'end': 1891.762, 'text': "But the circle doesn't actually show because there's no attributes of it defined.", 'start': 1882.674, 'duration': 9.088}, {'end': 1896.746, 'text': 'And in HTML, attributes are specified like this.', 'start': 1892.382, 'duration': 4.364}, {'end': 1898.828, 'text': 'CX equals..', 'start': 1897.907, 'duration': 0.921}, {'end': 1910.936, 'text': '50 Cx is the attribute that defines the center x coordinate of the circle in pixels.', 'start': 1902.411, 'duration': 8.525}], 'summary': 'Html attributes like cx define the center x coordinate of a circle in pixels.', 'duration': 36.824, 'max_score': 1874.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw1874112.jpg'}, {'end': 2015.162, 'src': 'embed', 'start': 1980.314, 'weight': 9, 'content': [{'end': 1984.817, 'text': 'So my understanding of what the difference is between an element and a tag..', 'start': 1980.314, 'duration': 4.503}, {'end': 1992.544, 'text': 'is that a tag strictly refers to the text in the source code of the HTML.', 'start': 1986.097, 'duration': 6.447}, {'end': 2001.072, 'text': "So when I select this text on my screen, that's an SVG tag, and that's a closing SVG tag.", 'start': 1993.305, 'duration': 7.767}, {'end': 2015.162, 'text': "And then, when the page runs in the browser, that tag, which is part of the source code, it's part of the text of the source code.", 'start': 2002.053, 'duration': 13.109}], 'summary': 'A tag in html refers to text in the source code, such as svg tags.', 'duration': 34.848, 'max_score': 1980.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw1980314.jpg'}, {'end': 2266.223, 'src': 'embed', 'start': 2234.737, 'weight': 11, 'content': [{'end': 2238.6, 'text': "I mean, a tag is just It's static.", 'start': 2234.737, 'duration': 3.863}, {'end': 2248.266, 'text': 'It just gets loaded once from the source code, but an element, the instantiation of the tag is dynamic, meaning it can change at runtime.', 'start': 2239.28, 'duration': 8.986}, {'end': 2249.727, 'text': "So it's.", 'start': 2248.666, 'duration': 1.061}, {'end': 2255.411, 'text': "I'm changing it manually by you know, changing this text in the Chrome dev tools,", 'start': 2249.727, 'duration': 5.684}, {'end': 2261.535, 'text': 'but you can also make these same kind of dynamic changes using JavaScript.', 'start': 2255.411, 'duration': 6.124}, {'end': 2266.223, 'text': "And we'll do that in future episodes.", 'start': 2263.621, 'duration': 2.602}], 'summary': 'A tag is static, loaded once, while an element is dynamic and can change at runtime. changes can be made manually or using javascript.', 'duration': 31.486, 'max_score': 2234.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw2234737.jpg'}, {'end': 2555.362, 'src': 'embed', 'start': 2522.21, 'weight': 2, 'content': [{'end': 2528.796, 'text': 'So let me just use prettier on this so we can see clearly this rectangle.', 'start': 2522.21, 'duration': 6.586}, {'end': 2536.277, 'text': 'Rectangles are another fundamental SVG shape.', 'start': 2532.296, 'duration': 3.981}, {'end': 2541.038, 'text': 'You can create a rectangle with the rect element.', 'start': 2538.758, 'duration': 2.28}, {'end': 2548.58, 'text': 'X and Y are the coordinates of the upper left corner of that rectangle.', 'start': 2542.339, 'duration': 6.241}, {'end': 2551.801, 'text': 'Rectangles can have width and height.', 'start': 2549.901, 'duration': 1.9}, {'end': 2555.362, 'text': 'These are all in pixels.', 'start': 2554.342, 'duration': 1.02}], 'summary': 'Svg tutorial: rectangles are fundamental shapes with x, y, width, and height attributes in pixels.', 'duration': 33.152, 'max_score': 2522.21, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw2522210.jpg'}, {'end': 2868.578, 'src': 'embed', 'start': 2839.382, 'weight': 19, 'content': [{'end': 2846.464, 'text': "I mean, if we set X to 600, that rectangle is going to be totally off to the side, and it's going to get clipped out, and you won't be able to see it.", 'start': 2839.382, 'duration': 7.082}, {'end': 2856.666, 'text': "So, yeah, I mean, you can totally put stuff in an SVG that's outside the bounds of the width and height, and you just won't be able to see it.", 'start': 2848.824, 'duration': 7.842}, {'end': 2868.578, 'text': "Yeah, And there's a similar construct called an SVG clip path that I think we'll get into a lot later on, but that with an SVG clip path you can.", 'start': 2858.976, 'duration': 9.602}], 'summary': 'Setting x to 600 causes rectangle to be clipped out of view in svg.', 'duration': 29.196, 'max_score': 2839.382, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw2839382.jpg'}], 'start': 377.119, 'title': 'Fundamentals of html, css, and svg', 'summary': "Covers the basics of html, css, and svg, including their definitions, functionalities, and history, with html being an open standard maintained by w3c, css as a style sheet language, and svg as an api within the html standard, along with their respective additional features and use cases. it also explores the advantages of scalable vector graphics (svg) over raster images, and discusses the role of svg in expanding html's capabilities. additionally, it introduces using vizhub for creating and modifying code for html pages and explains working with svg in vizhub, including the coordinate space of svg and creation of shapes. vizhub has a community of 5,000 unique users.", 'chapters': [{'end': 633.722, 'start': 377.119, 'title': 'Html, css, and svg fundamentals', 'summary': 'Covers the basics of html, css, and svg, including their definitions, functionalities, and history, with html being an open standard maintained by w3c, css as a style sheet language, and svg as an api within the html standard, along with their respective additional features and use cases.', 'duration': 256.603, 'highlights': ['HTML is an open standard maintained by W3C and was invented in 1993 by Tim Berners-Lee, with the current standard being HTML5.', 'CSS is a style sheet language embedded within HTML, allowing for the styling of elements on a web page by setting properties such as color, font, and size.', 'SVG is an API within the HTML standard, allowing for the creation of scalable vector graphics, which is useful for creating interactive and animated web graphics.']}, {'end': 1214.656, 'start': 635.86, 'title': 'Understanding scalable vector graphics (svg)', 'summary': "Explains the advantages of scalable vector graphics (svg) over raster images, highlighting its crispness when zoomed, its programmability, and the additional capabilities it offers compared to html. it also provides insights into svg's xml-based nature and its relationship with html and xml. additionally, it discusses the role of svg in expanding html's capabilities and its connection to vector-based fonts and xml-based document formats like rss and atom. finally, it touches upon the shift from xml to json in data interchange, emphasizing json's readability and current preference over xml.", 'duration': 578.796, 'highlights': ['The advantages of SVG over raster images, including its ability to maintain crispness when zoomed, its suitability for data visualization, and its ease of programmability, making it ideal for various applications (e.g., PDF output, web browser scalability).', 'The additional capabilities offered by SVG compared to HTML, such as the extensive library of graphics capabilities, including paths, lines, areas, color blending, and text utilities, expanding the range of graphical elements that can be created.', 'The XML-based nature of SVG and its relationship with HTML and XML, highlighting the structure and nesting of tags, and its connection to the origins of HTML as a strict subset of XML.', "The role of SVG in expanding HTML's capabilities, specifically addressing the limitations of using divs and CSS for graphics in the early days of HTML and the significant expansion of graphical capabilities offered by SVG.", 'The connection between vector-based fonts and XML-based document formats like RSS and Atom, emphasizing the scalability and quality retention of vector-based fonts and the common syntax shared with XML-based formats.', "The shift from XML to JSON in data interchange, emphasizing JSON's readability, reduced verbosity, and its increasing preference over XML for new projects, while acknowledging the continued use of XML in legacy systems like SOAP protocols."]}, {'end': 1684.396, 'start': 1216.858, 'title': 'Creating stuff with code', 'summary': 'Discusses using vizhub, which has a community of 5,000 unique users, to create and modify code for html pages, emphasizing the structure of html and the role of the document object model (dom) in web development.', 'duration': 467.538, 'highlights': ['VizHub has an active community with approximately 5,000 unique users over its history, and it is used daily for creating and modifying content.', 'The segment focuses on using VizHub to create and modify HTML code, starting with forking a template and editing it in a browser-based IDE.', 'The role and structure of HTML, including the doc type, opening and closing tags, and the creation of the Document Object Model (DOM), are explained in detail.', 'The significance of the head and body sections of an HTML page, the required title tag in the head, and the ability to view page source in a browser are highlighted.']}, {'end': 2407.938, 'start': 1685.788, 'title': 'Working with svg and vizhub', 'summary': 'Introduces working with svg in vizhub, explaining how to create svg shapes and highlighting the distinction between tags and elements, with the demonstration of manual dom manipulation using chrome devtools and the utility of prettier.', 'duration': 722.15, 'highlights': ['The distinction between tags and elements is explained, emphasizing that tags are static while elements are dynamic, and the demonstration of manual DOM manipulation using Chrome DevTools is shown. The chapter delves into the distinction between tags and elements, highlighting that tags are static while elements are dynamic, and demonstrates manual DOM manipulation using Chrome DevTools.', 'The chapter introduces working with SVG in VizHub, explaining how to create SVG shapes and demonstrating the manual DOM manipulation using Chrome DevTools. The chapter provides an introduction to working with SVG in VizHub, explaining the creation of SVG shapes and demonstrating manual DOM manipulation using Chrome DevTools.', 'The utility of Prettier for code formatting is mentioned, and its integration into VizHub is demonstrated. The utility of Prettier for code formatting is mentioned, and its integration into VizHub is demonstrated.']}, {'end': 3651.893, 'start': 2411.038, 'title': 'Understanding svg coordinate space and shapes', 'summary': 'Explains the coordinate space of svg, the creation of shapes like rectangles and lines, the z-index ordering of svg elements, the limitations of svg width and height, and the usage of svg paths to create versatile shapes, with a focus on the d attribute and its case sensitivity.', 'duration': 1240.855, 'highlights': ['SVG coordinate space has the origin in the upper left, with X increasing moving the shape to the right and Y increasing moving the shape down. The coordinate space of SVG has the origin in the upper left, with X increasing moving the shape to the right and Y increasing moving the shape down.', 'Explains the creation of rectangles and their attributes such as X, Y, width, height, fill, stroke, and stroke width. Rectangles can be created with the rect element, utilizing attributes such as X, Y, width, height, fill, stroke, and stroke width.', 'Discusses the Z-index ordering of SVG elements, noting that the ordering of elements in the SVG document determines their stacking order. In SVG, the Z-index ordering is determined by the ordering of elements in the SVG document, which impacts the stacking order of elements.', 'Illustrates the limitations of SVG width and height, where elements outside the specified width and height are clipped. SVG width and height limitations result in elements outside the specified dimensions being clipped, affecting their visibility.', 'Details the usage of SVG paths to create versatile shapes, focusing on the D attribute and its case sensitivity. SVG paths are utilized to create versatile shapes, with a specific focus on the D attribute and its case sensitivity, impacting the behavior of path commands.']}], 'duration': 3274.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw377119.jpg', 'highlights': ['HTML is an open standard maintained by W3C and was invented in 1993 by Tim Berners-Lee, with the current standard being HTML5.', 'CSS is a style sheet language embedded within HTML, allowing for the styling of elements on a web page by setting properties such as color, font, and size.', 'SVG is an API within the HTML standard, allowing for the creation of scalable vector graphics, which is useful for creating interactive and animated web graphics.', 'The advantages of SVG over raster images, including its ability to maintain crispness when zoomed, its suitability for data visualization, and its ease of programmability, making it ideal for various applications (e.g., PDF output, web browser scalability).', 'The additional capabilities offered by SVG compared to HTML, such as the extensive library of graphics capabilities, including paths, lines, areas, color blending, and text utilities, expanding the range of graphical elements that can be created.', 'The XML-based nature of SVG and its relationship with HTML and XML, highlighting the structure and nesting of tags, and its connection to the origins of HTML as a strict subset of XML.', "The role of SVG in expanding HTML's capabilities, specifically addressing the limitations of using divs and CSS for graphics in the early days of HTML and the significant expansion of graphical capabilities offered by SVG.", 'The connection between vector-based fonts and XML-based document formats like RSS and Atom, emphasizing the scalability and quality retention of vector-based fonts and the common syntax shared with XML-based formats.', "The shift from XML to JSON in data interchange, emphasizing JSON's readability, reduced verbosity, and its increasing preference over XML for new projects, while acknowledging the continued use of XML in legacy systems like SOAP protocols.", 'VizHub has an active community with approximately 5,000 unique users over its history, and it is used daily for creating and modifying content.', 'The segment focuses on using VizHub to create and modify HTML code, starting with forking a template and editing it in a browser-based IDE.', 'The role and structure of HTML, including the doc type, opening and closing tags, and the creation of the Document Object Model (DOM), are explained in detail.', 'The distinction between tags and elements is explained, emphasizing that tags are static while elements are dynamic, and the demonstration of manual DOM manipulation using Chrome DevTools is shown.', 'The chapter introduces working with SVG in VizHub, explaining how to create SVG shapes and demonstrating the manual DOM manipulation using Chrome DevTools.', 'The utility of Prettier for code formatting is mentioned, and its integration into VizHub is demonstrated.', 'SVG coordinate space has the origin in the upper left, with X increasing moving the shape to the right and Y increasing moving the shape down.', 'Explains the creation of rectangles and their attributes such as X, Y, width, height, fill, stroke, and stroke width.', 'Discusses the Z-index ordering of SVG elements, noting that the ordering of elements in the SVG document determines their stacking order.', 'Illustrates the limitations of SVG width and height, where elements outside the specified width and height are clipped.', 'Details the usage of SVG paths to create versatile shapes, focusing on the D attribute and its case sensitivity.']}, {'end': 5679.562, 'segs': [{'end': 4040.607, 'src': 'embed', 'start': 4007.327, 'weight': 1, 'content': [{'end': 4014.376, 'text': "Before we get into all of that, I just want to reflect on what we've gotten into so far.", 'start': 4007.327, 'duration': 7.049}, {'end': 4020.939, 'text': "It's been HTML, which is comprised of SVG, CSS, and JavaScript.", 'start': 4014.856, 'duration': 6.083}, {'end': 4025.341, 'text': 'And we have delved into SVG a little bit more.', 'start': 4021.599, 'duration': 3.742}, {'end': 4031.543, 'text': "So within that SVG concept, we're looking at circles, lines, and paths.", 'start': 4025.541, 'duration': 6.002}, {'end': 4040.607, 'text': "And I think I'll be evolving this diagram as we go to add in all the various concepts that we learn about.", 'start': 4032.323, 'duration': 8.284}], 'summary': 'Html, svg, css, and javascript explored, focusing on circles, lines, and paths.', 'duration': 33.28, 'max_score': 4007.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw4007327.jpg'}, {'end': 4474.18, 'src': 'embed', 'start': 4435.992, 'weight': 0, 'content': [{'end': 4437.613, 'text': "There's an option here to set the height.", 'start': 4435.992, 'duration': 1.621}, {'end': 4439.695, 'text': 'I just wanted to make sure everybody was aware of this.', 'start': 4437.893, 'duration': 1.802}, {'end': 4446.005, 'text': 'So yeah, you can use that to change the aspect ratio of the viz.', 'start': 4441.621, 'duration': 4.384}, {'end': 4451.37, 'text': 'And this one also blew my mind.', 'start': 4449.768, 'duration': 1.602}, {'end': 4453.752, 'text': 'Look at that.', 'start': 4453.271, 'duration': 0.481}, {'end': 4467.183, 'text': 'Took my avatar with GIMP and, you know, exported the paths to SVG.', 'start': 4459.997, 'duration': 7.186}, {'end': 4467.864, 'text': 'Pretty wild.', 'start': 4467.424, 'duration': 0.44}, {'end': 4474.18, 'text': 'And this one also uses the hover CSS selector.', 'start': 4470.157, 'duration': 4.023}], 'summary': 'Options to set height, change aspect ratio, export paths to svg, use hover css selector.', 'duration': 38.188, 'max_score': 4435.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw4435992.jpg'}, {'end': 4831.196, 'src': 'embed', 'start': 4763.615, 'weight': 2, 'content': [{'end': 4766.037, 'text': "That's the language used inside of SVG images.", 'start': 4763.615, 'duration': 2.422}, {'end': 4769.139, 'text': 'So I hope that answers the question.', 'start': 4767.038, 'duration': 2.101}, {'end': 4773.098, 'text': 'Is that clear enough? Yes, it does.', 'start': 4769.339, 'duration': 3.759}, {'end': 4792.883, 'text': 'Nice And is everything inside SVG tags text data? Well, this comes to the point of the distinction between the document and the DOM.', 'start': 4773.298, 'duration': 19.585}, {'end': 4796.141, 'text': 'This came up last time too.', 'start': 4795, 'duration': 1.141}, {'end': 4805.446, 'text': "I think it was Adeel that asked, what is the difference between a tag and an element? And I gave an answer that I don't think was 100% accurate.", 'start': 4796.521, 'duration': 8.925}, {'end': 4808.947, 'text': 'Anita did some researching and reading about this.', 'start': 4806.426, 'duration': 2.521}, {'end': 4813.47, 'text': 'And I wanted to just clarify this point.', 'start': 4810.148, 'duration': 3.322}, {'end': 4831.196, 'text': 'That in a document, meaning in the text that defines an HTML document, the source code in the html file, there are elements there,', 'start': 4815.891, 'duration': 15.305}], 'summary': 'Discussion about svg language inside html documents.', 'duration': 67.581, 'max_score': 4763.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw4763615.jpg'}, {'end': 5060.873, 'src': 'embed', 'start': 5030.502, 'weight': 4, 'content': [{'end': 5032.923, 'text': 'It actually transitions.', 'start': 5030.502, 'duration': 2.421}, {'end': 5040.845, 'text': "So if I set the width to be 400, it transitions because there's a CSS transition applied to it.", 'start': 5033.583, 'duration': 7.262}, {'end': 5046.107, 'text': "But what I'm doing here is manipulating the DOM by using the Chrome DevTools.", 'start': 5041.706, 'duration': 4.401}, {'end': 5050.949, 'text': "And in the future, we're going to use JavaScript to manipulate the DOM.", 'start': 5047.068, 'duration': 3.881}, {'end': 5053.726, 'text': "Yeah, but we're not quite there yet.", 'start': 5052.645, 'duration': 1.081}, {'end': 5060.873, 'text': 'So going through the submissions, I want to highlight this one by Ideal.', 'start': 5056.309, 'duration': 4.564}], 'summary': 'Transitioning width to 400 with css, future plan to use javascript for dom manipulation.', 'duration': 30.371, 'max_score': 5030.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw5030502.jpg'}], 'start': 3654.273, 'title': 'Engaging with vizhub forum and svg optimization', 'summary': 'Discusses the decision to use vizhub forum for asynchronous communication, encourages audience participation through exercises, explores pseudo-visualizations with svg, and covers optimizing svg display in html. it also delves into using css classes in svg elements and the usage of gradients and animations.', 'chapters': [{'end': 3723.115, 'start': 3654.273, 'title': 'Asynchronous communication decision', 'summary': 'Discusses the decision to use the vizhub forum instead of d3 slack for asynchronous communication due to the transient nature of d3 slack and lack of history preservation, while considering the possibility of creating a d3 slack channel.', 'duration': 68.842, 'highlights': ['The decision to use the VizHub forum for asynchronous communication is driven by the transient nature of D3 Slack and the lack of history preservation with the free plan of Slack.', 'Consideration of creating a D3 Slack channel is mentioned as a potential alternative for asynchronous communication.', 'The speaker mentions previous experience using Slack for the DataVis 2020 series and highlights the loss of valuable activity in the D3 Slack due to the lack of history preservation.']}, {'end': 3912.314, 'start': 3724.608, 'title': 'Engage with vizhub forum', 'summary': 'Introduces vizhub forum as a platform to engage with the series, encourages audience participation by providing exercises at the end of each episode, and promotes sharing work on the forum to build a community.', 'duration': 187.706, 'highlights': ['The chapter introduces VizHub forum as a platform to engage with the series. The speaker plans to maintain an index on the forum with resources for all episodes, aiming to build a community of people following the series and participating.', 'Exercises are provided at the end of each episode to encourage audience engagement. Audience is encouraged to make something creative with basic SVG shapes by forking the examples and sharing their work on the VizHub forum.', 'The speaker promotes sharing work on the forum to build a community. Audience is urged to fork, modify, and share their work on the forum, with the possibility of introducing a slack channel for discussions if the forum does not work out.']}, {'end': 4305.861, 'start': 3913.035, 'title': 'Pseudo-visualizations with svg', 'summary': 'Covers the exploration of pseudo-visualizations using basic svg shapes to approximate visualizations, discussing exercises submissions, and highlighting the integration of design tools, with an emphasis on css transitions and animations.', 'duration': 392.826, 'highlights': ['Discussion on creating pseudo-visualizations using basic SVG shapes The chapter focuses on using basic SVG shapes to create pseudo scatterplots, bar charts, line charts, and area charts, aiming to understand the fundamental shapes involved in visualizations.', 'Review of exercise submissions and integration with design tools The discussion involves reviewing exercise submissions, emphasizing the artistic and creative use of SVG shapes, and highlighting integrations with design tools like Figma.', 'Explanation of CSS transitions and animations for SVG elements A detailed explanation is provided on using CSS for transitions and animations on SVG elements, showcasing a practical example with a rectangle and its properties, including width, height, fill, x, y position, and the transition effect on hover.']}, {'end': 4541.265, 'start': 4305.881, 'title': 'Optimizing svg display in html', 'summary': 'Discusses optimizing svg display in html by removing default margin and scroll bars through css, setting height using vizhub, and utilizing hover css selector for interactive transformations.', 'duration': 235.384, 'highlights': ['CSS can be used to remove default margin in HTML, improving display quality and aesthetics.', 'Using overflow hidden in CSS can eliminate scroll bars, providing a clean canvas for SVG display.', 'VizHub allows setting the height of visualizations to improve aspect ratio and eliminate scroll bars.', 'Utilizing the hover CSS selector enables interactive transformations such as scaling, rotating, and translating elements.']}, {'end': 5132.538, 'start': 4542.366, 'title': 'Svg, css classes, and dom basics', 'summary': "Covers the usage of css classes and ids in svg elements, the distinction between a tag and an element in the dom, and the relationship between svg and xml, with a highlight on ideal's beautiful animation featuring gradients and animate tags.", 'duration': 590.172, 'highlights': ["Ideal's beautiful animation with sun setting and color changing demonstrates the use of gradients and animate tags, showcasing advanced SVG techniques.", 'The distinction between ID and class is that ID is intended for a single element, while class is for a group of multiple elements.', 'The living, breathing DOM is a dynamic structure, while elements in the document are fixed when the page loads, clarifying the difference between a tag and an element.', 'SVG exists as a standalone image format based on XML, and the language used inside SVG images is XML, making it similar to HTML and XML.', 'CSS can be used to select all elements that have a specific class using the dot prefix on the CSS selector, allowing for targeted styling of specific SVG elements.']}, {'end': 5679.562, 'start': 5134.519, 'title': 'Svg gradient and animation', 'summary': 'Covers the use of radial and linear gradients, experimenting with cx and cy properties, and animating gradients using the animate tag to change colors over a period of time.', 'duration': 545.043, 'highlights': ['The animate tag was used to change the values of the stop color from Alice Blue to Steel Blue and back to Alice Blue over a period of time, providing a smooth transition in the foreground landscape.', 'The use of radial and linear gradients, experimenting with CX and CY properties, and understanding the offset property in stop tags were key learning points in the chapter.', 'Experimenting with the quadratic Bezier curve using control points to define the curve and understanding its effect on the final point location helped in grasping its functionality.']}], 'duration': 2025.289, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw3654273.jpg', 'highlights': ['The decision to use the VizHub forum for asynchronous communication is driven by the transient nature of D3 Slack and the lack of history preservation with the free plan of Slack.', 'Exercises are provided at the end of each episode to encourage audience engagement. Audience is encouraged to make something creative with basic SVG shapes by forking the examples and sharing their work on the VizHub forum.', 'Discussion on creating pseudo-visualizations using basic SVG shapes The chapter focuses on using basic SVG shapes to create pseudo scatterplots, bar charts, line charts, and area charts, aiming to understand the fundamental shapes involved in visualizations.', 'CSS can be used to remove default margin in HTML, improving display quality and aesthetics.', "Ideal's beautiful animation with sun setting and color changing demonstrates the use of gradients and animate tags, showcasing advanced SVG techniques.", 'The animate tag was used to change the values of the stop color from Alice Blue to Steel Blue and back to Alice Blue over a period of time, providing a smooth transition in the foreground landscape.']}, {'end': 8025.565, 'segs': [{'end': 6374.824, 'src': 'embed', 'start': 6341.845, 'weight': 0, 'content': [{'end': 6347.587, 'text': 'Yeah, Figma has real-time collaborations, so I can add you.', 'start': 6341.845, 'duration': 5.742}, {'end': 6350.547, 'text': 'can edit.', 'start': 6349.966, 'duration': 0.581}, {'end': 6351.688, 'text': "It's an invite.", 'start': 6350.567, 'duration': 1.121}, {'end': 6354.07, 'text': 'You should be able to see it now.', 'start': 6353.049, 'duration': 1.021}, {'end': 6361.536, 'text': 'Right, so making this pseudo bar chart, we can just change the fill of this rectangle to be black.', 'start': 6355.171, 'duration': 6.365}, {'end': 6372.266, 'text': 'And then I will copy this rectangle, move it over, and make it a little smaller.', 'start': 6363.398, 'duration': 8.868}, {'end': 6374.824, 'text': 'and then do the same thing again.', 'start': 6373.803, 'duration': 1.021}], 'summary': 'Figma allows real-time collaboration for editing, enabling instant sharing and editing of design elements.', 'duration': 32.979, 'max_score': 6341.845, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw6341845.jpg'}, {'end': 6468.596, 'src': 'embed', 'start': 6437.151, 'weight': 2, 'content': [{'end': 6449.76, 'text': "open it up, view the source and I'm just going to copy the inside of the SVG, because we already have an SVG sort of container in VizHub.", 'start': 6437.151, 'duration': 12.609}, {'end': 6460.728, 'text': "Then I'll go back to VizHub here and I'll fork this and I'll call it pseudo bar chart.", 'start': 6451.521, 'duration': 9.207}, {'end': 6468.596, 'text': "And I'll change the description to say an approximation of a bar chart.", 'start': 6462.372, 'duration': 6.224}], 'summary': 'Creating an approximation of a bar chart using svg in vizhub.', 'duration': 31.445, 'max_score': 6437.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw6437151.jpg'}, {'end': 6592.439, 'src': 'embed', 'start': 6559.991, 'weight': 4, 'content': [{'end': 6573.457, 'text': 'you do have to change the height of the bars, but you also need to change the y coordinates of the bars to be the y coordinate of the bottom,', 'start': 6559.991, 'duration': 13.466}, {'end': 6580.389, 'text': 'minus the change in height relative to the biggest bar.', 'start': 6574.984, 'duration': 5.405}, {'end': 6583.952, 'text': "And so we'll express all that in code later.", 'start': 6581.49, 'duration': 2.462}, {'end': 6589.356, 'text': 'But I just want to sort of foreshadow that element, you know, that aspect of bar charts.', 'start': 6584.012, 'duration': 5.344}, {'end': 6592.439, 'text': "So let's let's do some more.", 'start': 6591.078, 'duration': 1.361}], 'summary': 'Adjust bar height and y coordinates in bar charts, to be expressed in code later.', 'duration': 32.448, 'max_score': 6559.991, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw6559991.jpg'}, {'end': 7808.535, 'src': 'embed', 'start': 7772.311, 'weight': 3, 'content': [{'end': 7775.493, 'text': "With SVG, whatever's in the CSS dominates.", 'start': 7772.311, 'duration': 3.182}, {'end': 7783.958, 'text': "But with other types of tags, like straight HTML, I'm actually not sure how it is.", 'start': 7776.053, 'duration': 7.905}, {'end': 7790.582, 'text': 'I can do a little experimentation.', 'start': 7787.3, 'duration': 3.282}, {'end': 7793.003, 'text': "Yeah, let's find out.", 'start': 7792.303, 'duration': 0.7}, {'end': 7802.15, 'text': "So here's this thing that Nita made that is sort of an exploration of basic HTML elements.", 'start': 7794.744, 'duration': 7.406}, {'end': 7805.793, 'text': "There's the H1 element that ends up as this text.", 'start': 7802.951, 'duration': 2.842}, {'end': 7808.535, 'text': "There's the P element, which is a paragraph.", 'start': 7806.493, 'duration': 2.042}], 'summary': 'Svg elements dominated by css, while unsure about others. experimentation needed.', 'duration': 36.224, 'max_score': 7772.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw7772311.jpg'}, {'end': 7931.096, 'src': 'embed', 'start': 7894.887, 'weight': 1, 'content': [{'end': 7900.893, 'text': 'Right, yeah, this is called inline styles, which you can do with SVG too, by the way.', 'start': 7894.887, 'duration': 6.006}, {'end': 7911.602, 'text': 'Yeah, I believe in straight HTML like this, the color is not something, there is no attribute for color.', 'start': 7900.913, 'duration': 10.689}, {'end': 7916.286, 'text': 'And so you would do inline styles like this.', 'start': 7914.004, 'duration': 2.282}, {'end': 7927.594, 'text': 'And so in this case, Yeah, I see in the YouTube chat, Milo is saying, yeah, both things are style instructions.', 'start': 7918.068, 'duration': 9.526}, {'end': 7928.795, 'text': "That's right.", 'start': 7928.194, 'duration': 0.601}, {'end': 7929.415, 'text': "That's right.", 'start': 7928.875, 'duration': 0.54}, {'end': 7931.096, 'text': 'Yeah, it is CSS.', 'start': 7929.495, 'duration': 1.601}], 'summary': 'Inline styles used in html and svg for css, as discussed in the conversation.', 'duration': 36.209, 'max_score': 7894.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw7894887.jpg'}], 'start': 5681.466, 'title': 'Using design tools for svg illustrations', 'summary': 'Covers the use of design tools like figma, adobe illustrator, inkscape, and gimp for creating svg graphics, demonstrating control points for defining svg paths, and emphasizing the importance of sketching and mock-ups in data visualization work. it also discusses html syntax, css manipulation of the dom, and the precedence of css over dom attributes, with examples.', 'chapters': [{'end': 5738.826, 'start': 5681.466, 'title': 'Using figma for graphic design', 'summary': 'Discusses the use of figma, a design tool, for creating graphics and masks, which has been used for the series so far.', 'duration': 57.36, 'highlights': ['Figma is used to create all the graphics for the series so far, demonstrating its versatility and importance in the design process.', 'The mask applied to the video is driven by a graphic created in Figma, showcasing its practical application in the production process.']}, {'end': 6002.765, 'start': 5740.852, 'title': 'Using design tools for svg illustrations', 'summary': 'Discusses the use of design tools like adobe illustrator, inkscape, and gimp for creating svg graphics, emphasizing the importance of sketching and mock-ups in data visualization work, and demonstrates the concept of control points for defining svg paths.', 'duration': 261.913, 'highlights': ['The importance of sketching and mock-ups in data visualization work is emphasized as a crucial step before implementation with tools like D3. Sketching and doing mock-ups in a design tool are important pieces of data visualization work before implementing with D3.', 'Demonstration of using the pen tool to define SVG paths and control points to interactively control the graphics, showcasing the rapid iteration capability of design tools. Demonstrates using the pen tool to define SVG paths and control points for interactive control, highlighting the rapid iteration capability of design tools.', 'Introduction to Figma as a preferred design tool for creating SVG illustrations, highlighting its accessibility with a free account option. Introduces Figma as a preferred design tool for creating SVG illustrations, highlighting its accessibility with a free account option.']}, {'end': 6407.322, 'start': 6003.786, 'title': 'Creating pseudo scatter plot and pseudo bar chart', 'summary': 'Discusses creating a pseudo scatter plot and pseudo bar chart using svg, focusing on interoperability with html and cleaning up unnecessary attributes, and also demonstrates real-time collaboration in figma for creating bar chart design.', 'duration': 403.536, 'highlights': ['The chapter discusses creating a pseudo scatter plot and pseudo bar chart using SVG, focusing on interoperability with HTML and cleaning up unnecessary attributes. The speaker explains the process of creating a pseudo scatter plot and pseudo bar chart using SVG, emphasizing interoperability with HTML and the removal of unnecessary attributes like XMLNS, view box, and fill attributes.', 'The chapter demonstrates real-time collaboration in Figma for creating bar chart design. The speaker showcases the real-time collaboration feature in Figma for creating a bar chart design, highlighting the ease of creating and manipulating shapes with proportional spacing.']}, {'end': 7059.416, 'start': 6411.184, 'title': 'Bar chart creation and customization', 'summary': 'Discusses creating a pseudo bar chart and customizing it, including considerations for padding, labeling, and font selection, in addition to introducing the use of css and google fonts. it also highlights the importance of adjusting y-coordinates in svg to avoid an inverted bar chart.', 'duration': 648.232, 'highlights': ['The importance of adjusting y-coordinates in SVG to avoid an inverted bar chart is highlighted, emphasizing the need to change the height and y-coordinates of the bars in code later. Highlighting the potential issue when coding with D3 and the clarification on the coordinate space of the y coordinate in SVG.', 'Customizing the bar chart by introducing padding between the bars and removing unnecessary elements like background rectangles and default fills, as well as discussing the implications of changing the height of the bars. Explaining the process of introducing padding between bars and the implications of changing the height of the bars.', 'Discussing the use of CSS to style text elements within the SVG, including adjusting font size and position to align with the bars, and introducing Google Fonts as a recommended option for adding custom fonts. Detailing the use of CSS to style text elements and highlighting Google Fonts as a recommended option for custom fonts.']}, {'end': 7646.454, 'start': 7059.816, 'title': 'Html syntax and css manipulation', 'summary': 'Discusses html syntax, self-closing tags, css manipulation of the dom, and the precedence of css over dom attributes with examples. css takes precedence over dom attributes, and the fill attribute is specific to svg elements.', 'duration': 586.638, 'highlights': ['CSS takes precedence over DOM attributes CSS overrides DOM attributes, as demonstrated by setting the fill color in both HTML and CSS, where CSS takes priority over DOM attributes.', 'Explanation of the fill attribute The fill attribute is specific to SVG elements and is not applicable outside of SVG, and it can also be used as a CSS property, dominating the value from the attribute.', 'CSS as a layer on top of the DOM CSS is described as a layer on top of the DOM, depending on the DOM structure to function and instructing the browser on how to present the DOM.', 'Self-closing tags and HTML syntax The chapter discusses self-closing tags in HTML, such as the link tag, which does not require a closing tag, and describes a syntax error encountered while working with HTML.']}, {'end': 8025.565, 'start': 7648.615, 'title': 'Pseudo visualizations and css precedence', 'summary': 'Discusses pseudo visualizations using svg paths and explores css precedence, highlighting how inline styles dominate over external css and the precedence of css over attributes in html and svg.', 'duration': 376.95, 'highlights': ['The chapter demonstrates creating a pseudo line chart using SVG paths and discusses the importance of line join and cap values in SVG paths. The speaker explains the process of creating a pseudo line chart using SVG paths, emphasizing the significance of line join and cap values, providing insights into the technical aspects of SVG visualization.', 'The discussion delves into the precedence of inline styles over external CSS, with practical examples in both HTML and SVG elements. The chapter explores the precedence of inline styles over external CSS, demonstrating practical examples in both HTML and SVG elements, highlighting the dominance of inline styles in affecting visual presentation.', 'The chapter also addresses the precedence of CSS over attributes in HTML and SVG, showcasing how CSS takes priority over attributes in determining visual styles. The discussion includes an exploration of how CSS takes precedence over attributes in HTML and SVG, illustrating how CSS influences visual styles, highlighting the importance of understanding CSS precedence in web development.']}], 'duration': 2344.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw5681466.jpg', 'highlights': ['Figma is used to create all the graphics for the series so far, demonstrating its versatility and importance in the design process.', 'Demonstration of using the pen tool to define SVG paths and control points to interactively control the graphics, showcasing the rapid iteration capability of design tools.', 'The chapter demonstrates real-time collaboration in Figma for creating bar chart design, highlighting the ease of creating and manipulating shapes with proportional spacing.', 'The importance of adjusting y-coordinates in SVG to avoid an inverted bar chart is highlighted, emphasizing the need to change the height and y-coordinates of the bars in code later.', 'CSS takes precedence over DOM attributes CSS overrides DOM attributes, as demonstrated by setting the fill color in both HTML and CSS, where CSS takes priority over DOM attributes.', 'The chapter demonstrates creating a pseudo line chart using SVG paths and discusses the importance of line join and cap values in SVG paths.', 'The discussion delves into the precedence of inline styles over external CSS, with practical examples in both HTML and SVG elements.', 'The chapter also addresses the precedence of CSS over attributes in HTML and SVG, showcasing how CSS takes priority over attributes in determining visual styles.']}, {'end': 12185.596, 'segs': [{'end': 8097.613, 'src': 'embed', 'start': 8063.721, 'weight': 3, 'content': [{'end': 8070.104, 'text': 'Recreate a pseudo-visualization from one of these visualization taxonomies.', 'start': 8063.721, 'duration': 6.383}, {'end': 8074.166, 'text': 'And so I invite you to go through.', 'start': 8072.085, 'duration': 2.081}, {'end': 8087.816, 'text': 'I invite you to go through these links under data visualization taxonomies and look through all of these and then pick one to reproduce as a pseudo visualization.', 'start': 8076.511, 'duration': 11.305}, {'end': 8090.517, 'text': "There's the visual vocabulary.", 'start': 8088.696, 'duration': 1.821}, {'end': 8094.953, 'text': 'deviation, correlation.', 'start': 8093.192, 'duration': 1.761}, {'end': 8097.613, 'text': "See, there's already sort of pseudo-visualizations in here.", 'start': 8095.153, 'duration': 2.46}], 'summary': 'Recreate a pseudo-visualization from a data visualization taxonomy.', 'duration': 33.892, 'max_score': 8063.721, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw8063721.jpg'}, {'end': 8232.369, 'src': 'embed', 'start': 8200.782, 'weight': 8, 'content': [{'end': 8208.309, 'text': "I've been really looking forward to this one because it's where we're going to dive into DOM manipulation with JavaScript.", 'start': 8200.782, 'duration': 7.527}, {'end': 8212.273, 'text': "Alright, so here's what we're going to talk about this time.", 'start': 8209.471, 'duration': 2.802}, {'end': 8218.299, 'text': 'Sol LeWitt reproductions in vanilla JavaScript.', 'start': 8212.914, 'duration': 5.385}, {'end': 8225.465, 'text': 'And this thing right here on the screen is a Sol LeWitt piece.', 'start': 8218.98, 'duration': 6.485}, {'end': 8232.369, 'text': "What we'll cover today, first I would like to review the exercise submissions from last week.", 'start': 8226.946, 'duration': 5.423}], 'summary': 'Exploring dom manipulation with javascript, focusing on sol lewitt reproductions and reviewing exercise submissions.', 'duration': 31.587, 'max_score': 8200.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw8200781.jpg'}, {'end': 8473.386, 'src': 'embed', 'start': 8434.244, 'weight': 5, 'content': [{'end': 8438.246, 'text': 'very nice work by Senna.', 'start': 8434.244, 'duration': 4.002}, {'end': 8443.069, 'text': 'And Adil, check out this one by Adil.', 'start': 8440.107, 'duration': 2.962}, {'end': 8446.991, 'text': 'Oh my gosh, this one when I saw it, I was so happy.', 'start': 8443.249, 'duration': 3.742}, {'end': 8450.553, 'text': 'This is just so gorgeous, so gorgeous.', 'start': 8447.691, 'duration': 2.862}, {'end': 8460.478, 'text': 'Adil, you want to talk about this one a little bit? Yeah, this was a really nice exercise.', 'start': 8451.874, 'duration': 8.604}, {'end': 8473.386, 'text': 'Circle packing is plays on the tree structure and each circle represents a level and also a branch.', 'start': 8461.439, 'duration': 11.947}], 'summary': 'Senna and adil appreciate the beauty of circle packing, which represents a level and branch in a tree structure.', 'duration': 39.142, 'max_score': 8434.244, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw8434244.jpg'}, {'end': 9780.667, 'src': 'embed', 'start': 9751.764, 'weight': 14, 'content': [{'end': 9758.125, 'text': 'You could say const add equals a function that takes as input A and B, and then open up into curly braces.', 'start': 9751.764, 'duration': 6.361}, {'end': 9761.466, 'text': 'See when you open up into curly braces.', 'start': 9759.006, 'duration': 2.46}, {'end': 9769.408, 'text': 'you can put many, many different lines of code in there, and those lines of code will run when that function gets invoked.', 'start': 9761.466, 'duration': 7.942}, {'end': 9778.226, 'text': 'However, you need to explicitly return the thing, like this, return a plus b.', 'start': 9771.024, 'duration': 7.202}, {'end': 9780.667, 'text': 'See, now it says 15.', 'start': 9778.226, 'duration': 2.441}], 'summary': "The function 'add' takes inputs a and b, and returns their sum as 15.", 'duration': 28.903, 'max_score': 9751.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw9751764.jpg'}, {'end': 9869.871, 'src': 'embed', 'start': 9841.768, 'weight': 1, 'content': [{'end': 9847.272, 'text': "So let's say, for example, I'll start with the old school syntax.", 'start': 9841.768, 'duration': 5.504}, {'end': 9852.216, 'text': "Let's say we have a function that's going to return a person object with a first name and last name.", 'start': 9847.752, 'duration': 4.464}, {'end': 9857.82, 'text': "If we were to construct that object, let's say I'll call it person example.", 'start': 9853.457, 'duration': 4.363}, {'end': 9860.622, 'text': 'This is going to be like the output that we would like.', 'start': 9858.321, 'duration': 2.301}, {'end': 9863.585, 'text': 'First name is Jane.', 'start': 9861.483, 'duration': 2.102}, {'end': 9867.569, 'text': 'Last name is Doe.', 'start': 9864.826, 'duration': 2.743}, {'end': 9869.871, 'text': "That's a generic name.", 'start': 9867.589, 'duration': 2.282}], 'summary': 'Example function returns person object with first name jane and last name doe.', 'duration': 28.103, 'max_score': 9841.768, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw9841768.jpg'}, {'end': 10031.327, 'src': 'embed', 'start': 10003.486, 'weight': 4, 'content': [{'end': 10007.849, 'text': 'So const person equals a function that takes as input first and last.', 'start': 10003.486, 'duration': 4.363}, {'end': 10016.079, 'text': 'arrow to curly braces and then the inside of it can remain just the same like it was.', 'start': 10009.395, 'duration': 6.684}, {'end': 10021.862, 'text': 'this is one valid way to do it, and yet no issues, no confusion here.', 'start': 10016.079, 'duration': 5.783}, {'end': 10031.327, 'text': 'the place where it gets confusing is when you start to leverage the implicit return on those that arrow function syntax.', 'start': 10021.862, 'duration': 9.465}], 'summary': 'Creating a function with arrow syntax for input parameters, with no issues or confusion.', 'duration': 27.841, 'max_score': 10003.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw10003486.jpg'}, {'end': 10272.329, 'src': 'embed', 'start': 10239.643, 'weight': 0, 'content': [{'end': 10240.523, 'text': "That's the first target.", 'start': 10239.643, 'duration': 0.88}, {'end': 10249.519, 'text': 'Now to do that, I think it makes a lot of sense to use JavaScript so that we can automate the creation of those rectangles.', 'start': 10242.395, 'duration': 7.124}, {'end': 10256.002, 'text': 'Otherwise we would be, you know, creating a hundred rectangles by hand, which is just not practical.', 'start': 10249.659, 'duration': 6.343}, {'end': 10263.486, 'text': 'But to get there, we need to build up this SVG using JavaScript.', 'start': 10256.802, 'duration': 6.684}, {'end': 10272.329, 'text': 'As a first thing, I would like to create this particular SVG element using JavaScript.', 'start': 10265.265, 'duration': 7.064}], 'summary': 'To automate the creation of rectangles, javascript will be used to build up the svg, avoiding the impractical task of creating a hundred rectangles by hand.', 'duration': 32.686, 'max_score': 10239.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw10239643.jpg'}, {'end': 11053.643, 'src': 'embed', 'start': 11018.187, 'weight': 12, 'content': [{'end': 11023.313, 'text': "in recovery mode, you can edit the code and it's not going to automatically run, and then,", 'start': 11018.187, 'duration': 5.126}, {'end': 11031.762, 'text': "when you're done fixing the code that created the infinite loop, you can just hit exit recovery mode.", 'start': 11023.313, 'duration': 8.449}, {'end': 11034.926, 'text': "but anyway, hopefully, that'll never happen.", 'start': 11031.762, 'duration': 3.164}, {'end': 11041.334, 'text': "so now, Inside of this for loop, this is where I'm going to move this code.", 'start': 11034.926, 'duration': 6.408}, {'end': 11053.643, 'text': "I'm going to cut this code with control X and then paste it into this block with control V and then use prettier to update the formatting so that it's all indented properly.", 'start': 11041.434, 'duration': 12.209}], 'summary': 'In recovery mode, code editing is safe, avoiding infinite loops. prettier formats code.', 'duration': 35.456, 'max_score': 11018.187, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw11018187.jpg'}, {'end': 11214.006, 'src': 'embed', 'start': 11184.994, 'weight': 7, 'content': [{'end': 11196.638, 'text': 'But those tools do understand that document and window are things that are provided by the browser and are expected to be in the global namespace.', 'start': 11184.994, 'duration': 11.644}, {'end': 11202.821, 'text': "So, yeah, that's why you may need to use window.", 'start': 11196.698, 'duration': 6.123}, {'end': 11205.542, 'text': "And I see there's another comment.", 'start': 11204.222, 'duration': 1.32}, {'end': 11207.843, 'text': 'You do need window prefix for ESM.', 'start': 11205.582, 'duration': 2.261}, {'end': 11212.385, 'text': 'ESM Oh, modules.', 'start': 11209.064, 'duration': 3.321}, {'end': 11214.006, 'text': 'ECMAScript modules.', 'start': 11212.905, 'duration': 1.101}], 'summary': "Using 'window' prefix is required for esm (ecmascript modules)", 'duration': 29.012, 'max_score': 11184.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw11184994.jpg'}, {'end': 11431.876, 'src': 'embed', 'start': 11405.197, 'weight': 13, 'content': [{'end': 11412.004, 'text': "So yeah, that's a rundown of scoping with var versus let and const.", 'start': 11405.197, 'duration': 6.807}, {'end': 11418.09, 'text': "I'll switch it back to const because..", 'start': 11416.528, 'duration': 1.562}, {'end': 11426.754, 'text': "It's generally, I think and this is a personal preference thing it's generally good practice to use const,", 'start': 11419.811, 'duration': 6.943}, {'end': 11431.876, 'text': 'to default to using const until you have the need to reassign it and then you can use let.', 'start': 11426.754, 'duration': 5.122}], 'summary': 'Use const by default, switch to let only when reassignment is needed.', 'duration': 26.679, 'max_score': 11405.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw11405197.jpg'}], 'start': 8026.025, 'title': 'Javascript basics and dom manipulation', 'summary': "Covers javascript basics including variables, objects, functions, and dom manipulation, also discussing the recreation of pseudo-visualizations, sol lewitt's art, svg elements, javascript scoping, and reproducing sol lewitt pieces, encompassing a wide array of concepts and techniques.", 'chapters': [{'end': 8859.165, 'start': 8026.025, 'title': 'Dom manipulation with javascript', 'summary': "Discusses the exercise of recreating pseudo-visualizations from visualization taxonomies, where various participants created impressive pseudo-visualizations using tools like figma and svg, and then delves into the exploration and reproduction of sol lewitt's art pieces with code, highlighting the artist's work and its algorithmic nature.", 'duration': 833.14, 'highlights': ['Various participants created impressive pseudo-visualizations using tools like Figma and SVG, such as a pseudo Venn diagram, a pseudo Gantt chart, a pseudo slope graph, a pseudo spider chart, a pseudo icon array, and a pseudo circle packing visualization. Participants created pseudo-visualizations including a Venn diagram, Gantt chart, slope graph, spider chart, icon array, and circle packing visualization, showcasing diverse and impressive work.', "Sol LeWitt's art pieces were explored and discussed, with an emphasis on his algorithmic approach, inspiring the exploration and reproduction of his art with computer code. The chapter delves into the exploration and reproduction of Sol LeWitt's art pieces with code, highlighting the artist's work and its algorithmic nature, providing insights into his approach to art.", "Sol LeWitt's art pieces, characterized by interconnected lines, grid expansion, and textures with masking patterns, were highlighted as fundamental and ripe for implementation with computer code. The art pieces of Sol LeWitt, featuring interconnected lines, grid expansion, and textures with masking patterns, were highlighted as fundamental works, suitable for implementation with computer code."]}, {'end': 9622.07, 'start': 8859.945, 'title': 'Adding links in markdown and introduction to javascript basics', 'summary': 'Covers adding links in markdown using square brackets and parentheses, introduces javascript basics including variables, objects, arithmetic operations, for loop, and comparisons, with examples and explanations.', 'duration': 762.125, 'highlights': ['The chapter covers adding links in Markdown using square brackets and parentheses, introduces JavaScript basics including variables, objects, arithmetic operations, for loop, and comparisons, with examples and explanations.', 'Console.log works. It just outputs a number. This highlights that you can pass different types of things into console.log. It accepts strings. It accepts numbers.', 'In JavaScript, you can comment things out with two slashes. Console.log works. It just outputs a number. This highlights that you can pass different types of things into console.log. It accepts strings. It accepts numbers.', 'The way to do that is with square brackets for the text. See that becomes a link there. And then in parentheses, you put the URL where the link is going to go.', "If we say num plus plus, that increments the number by 1. That's the plus plus operator, increment operator.", 'In JavaScript, we have objects. And the way that you create an object is with a pair of curly braces. Objects can have properties inside of them, like num, for example. The dot is how you access properties within objects.', "And these are, to be clear, these are expressions in the JavaScript language that return a value that is a Boolean. And these can be nested with parentheses and whatnot. That's the beauty of programming languages.", 'For example, numbers. If I hit console.log 5, it prints out 5.']}, {'end': 10159.29, 'start': 9622.83, 'title': 'Javascript basics: objects and functions', 'summary': 'Covers the basics of javascript, including defining functions in es6 syntax, different ways of defining functions, creating objects using functions, and simplifications in es6 for defining object properties, highlighting the differences and benefits of each approach.', 'duration': 536.46, 'highlights': ['ES6 syntax for defining functions and its advantages The ES6 syntax for defining functions is introduced, showcasing its conciseness compared to the traditional way of defining functions.', 'Different ways of defining functions and their applicability The chapter discusses various ways of defining functions in JavaScript, including ES6 arrow functions and the traditional function syntax, highlighting their differences and applicability.', 'Creating objects using functions and the concept of closures The concept of creating objects using functions is explained, demonstrating how closures work and how the arguments become visible inside the closure, allowing the creation of objects with specified properties.', 'Simplifications in ES6 for defining object properties The chapter explains the simplifications in ES6 for defining object properties, showcasing the shorthand approach for assigning property names that match variable names, leading to concise and efficient code.']}, {'end': 11104.395, 'start': 10160.011, 'title': 'Creating javascript-driven svg', 'summary': 'Discusses creating svg elements and automating the creation of rectangles using javascript, including refactoring to eliminate duplicated code and using a for loop for multiple rectangles, aiming to create a textured background with 100 rectangles, each 10 pixels wide and 500 pixels high.', 'duration': 944.384, 'highlights': ['Automating the creation of rectangles using JavaScript The discussion involves using JavaScript to programmatically create a bunch of rectangles to approximate a textured background, with the aim of creating 100 rectangles, each 10 pixels wide and 500 pixels high.', "Creating SVG elements using the DOM API The transcript covers the process of creating SVG elements using the DOM API, including using 'document.createElement' and 'setAttribute' to dynamically create an SVG element and set its attributes such as width and height.", "Refactoring to eliminate duplicated logic The chapter emphasizes the use of variables and functions in JavaScript to eliminate duplicated logic, with an example of refactoring by defining 'width' and 'height' as constants and replacing hardcoded values with these variables.", "Using a for loop to create multiple rectangles The usage of a for loop is demonstrated to create multiple rectangles, with 'i' being used to vary the 'x' attribute of the rectangles, resulting in the movement of each rectangle across the screen."]}, {'end': 11500.577, 'start': 11105.756, 'title': 'Javascript scoping and window object', 'summary': 'Discusses javascript scoping, emphasizing the differences between var, let, and const, and also addresses the usage of the window object, with particular reference to the innerwidth property and its implications for different coding environments, including build tools and ecmascript modules.', 'duration': 394.821, 'highlights': ['The usage of the window object and its properties, such as innerWidth, is discussed, emphasizing that in most cases, using just the property name is sufficient for the browser to recognize it, but build tools or ESLint may require explicit usage of window, which is important for validating code. use of innerWidth property, mention of build tools and ESLint', 'Scoping in JavaScript is explained, with a focus on the block scope of const and let, contrasting it with the closure scope of var, and highlighting the implications of using var, let, and const in different contexts such as for loops and global closures. explanation of block scope of const and let, comparison with closure scope of var', 'The best practice of defaulting to const and only using let when reassignment is necessary is recommended, with a strong argument for using const to enhance code readability and ease of reasoning about code. recommendation for defaulting to const and using let only when necessary']}, {'end': 12185.596, 'start': 11504.138, 'title': 'Creating sol lewitt reproduction', 'summary': 'Illustrates the process of reproducing a sol lewitt piece using javascript dom manipulation, creating a vertical variant with textures, implementing svg masks, and challenging students to reproduce any sol lewitt piece as an exercise.', 'duration': 681.458, 'highlights': ['The chapter illustrates the process of reproducing a Sol LeWitt piece using JavaScript DOM manipulation. The speaker discusses forking a vis to create a vertical variant by changing the logic to vary y with i and adjusting width and height.', 'Creating a vertical variant with textures using JavaScript DOM manipulation. The speaker explains using SVG masks to define an alpha mask for compositing textures, creating a black background with a white circle and a white background with a black circle to invert the mask, and implementing the SVG mask using JavaScript API.', 'Challenging students to reproduce any Sol LeWitt piece as an exercise. The speaker encourages an open-ended exercise to reproduce any Sol LeWitt piece using JavaScript DOM manipulation, create generative algorithmic art in the spirit of Sol LeWitt, or add animation to the created textures.']}], 'duration': 4159.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw8026025.jpg', 'highlights': ['Participants created diverse pseudo-visualizations using Figma and SVG.', "Sol LeWitt's algorithmic art inspired exploration and reproduction with code.", "Sol LeWitt's art pieces were highlighted as fundamental for implementation with computer code.", 'The chapter covers JavaScript basics, including variables, objects, and for loops.', 'ES6 syntax for defining functions is introduced, showcasing its conciseness.', 'Different ways of defining functions in JavaScript are discussed, including ES6 arrow functions.', 'The concept of creating objects using functions and closures is explained.', 'Automating the creation of rectangles using JavaScript is discussed.', 'The process of creating SVG elements using the DOM API is covered.', 'The usage of the window object and its properties, such as innerWidth, is discussed.', 'Scoping in JavaScript is explained, focusing on const, let, and var.', 'The best practice of defaulting to const and using let only when necessary is recommended.', 'The chapter illustrates the process of reproducing a Sol LeWitt piece using JavaScript DOM manipulation.', 'Creating a vertical variant with textures using JavaScript DOM manipulation is explained.', 'Students are challenged to reproduce any Sol LeWitt piece as an exercise.']}, {'end': 16022.948, 'segs': [{'end': 12326.097, 'src': 'embed', 'start': 12300.197, 'weight': 0, 'content': [{'end': 12304.641, 'text': "That's often called a hash table in other languages.", 'start': 12300.197, 'duration': 4.444}, {'end': 12311.027, 'text': "And then there's another language called Haskell on the extreme side of functional programming.", 'start': 12305.922, 'duration': 5.105}, {'end': 12314.63, 'text': 'In Haskell, there is no mutation.', 'start': 12312.028, 'duration': 2.602}, {'end': 12316.572, 'text': 'There is no such thing as let.', 'start': 12315.191, 'duration': 1.381}, {'end': 12320.574, 'text': "And there's no such thing as reassigning a value to an object.", 'start': 12317.072, 'duration': 3.502}, {'end': 12324.256, 'text': 'So you have to create new objects all the time in Haskell.', 'start': 12321.094, 'duration': 3.162}, {'end': 12326.097, 'text': "It's what's called a pure functional language.", 'start': 12324.296, 'duration': 1.801}], 'summary': 'Haskell is a pure functional language with no mutation or reassigning of values.', 'duration': 25.9, 'max_score': 12300.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw12300197.jpg'}, {'end': 12591.801, 'src': 'embed', 'start': 12560.925, 'weight': 4, 'content': [{'end': 12568.309, 'text': "Somebody in the YouTube chat said Lisp and C's clothing is from Douglas Crockford.", 'start': 12560.925, 'duration': 7.384}, {'end': 12569.61, 'text': 'Yeah, yeah, yeah.', 'start': 12568.449, 'duration': 1.161}, {'end': 12571.551, 'text': 'Douglas Crockford.', 'start': 12570.471, 'duration': 1.08}, {'end': 12573.272, 'text': "He's got some really good stuff.", 'start': 12571.611, 'duration': 1.661}, {'end': 12580.156, 'text': 'Really good really good written pieces about JavaScript.', 'start': 12575.294, 'duration': 4.862}, {'end': 12589.52, 'text': 'Oh, someone asked, could I do this using Visual Studio Code? Yes, yes, of course.', 'start': 12582.997, 'duration': 6.523}, {'end': 12591.801, 'text': "I mean, it's just a text file here.", 'start': 12589.72, 'duration': 2.081}], 'summary': 'Douglas crockford has written really good pieces about javascript.', 'duration': 30.876, 'max_score': 12560.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw12560925.jpg'}, {'end': 12681.279, 'src': 'embed', 'start': 12649.077, 'weight': 6, 'content': [{'end': 12652.239, 'text': 'But yeah, you could totally do all this with Visual Studio Code.', 'start': 12649.077, 'duration': 3.162}, {'end': 12663.389, 'text': "And as we get deeper into JavaScript, I think I'll get deeper into showing how to work outside of VizHub using different build tools.", 'start': 12653.099, 'duration': 10.29}, {'end': 12665.972, 'text': 'Yeah, great question.', 'start': 12664.81, 'duration': 1.162}, {'end': 12677.943, 'text': "Oh, yeah, there's a discussion in the YouTube chat about classes in JavaScript is actually syntactic sugar for appending stuff to the prototype.", 'start': 12669.655, 'duration': 8.288}, {'end': 12681.279, 'text': "It's very true.", 'start': 12680.638, 'duration': 0.641}], 'summary': 'Visual studio code can be used for javascript, with plans to explore build tools and javascript classes as syntactic sugar.', 'duration': 32.202, 'max_score': 12649.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw12649077.jpg'}, {'end': 13213.144, 'src': 'embed', 'start': 13129.704, 'weight': 2, 'content': [{'end': 13130.966, 'text': 'This is the game version.', 'start': 13129.704, 'duration': 1.262}, {'end': 13134.189, 'text': 'So I was quite impressed by this.', 'start': 13132.547, 'duration': 1.642}, {'end': 13136.27, 'text': 'Check this out.', 'start': 13135.35, 'duration': 0.92}, {'end': 13140.855, 'text': 'This is so funny.', 'start': 13136.671, 'duration': 4.184}, {'end': 13145.199, 'text': "You have to click when it's black and white.", 'start': 13141.695, 'duration': 3.504}, {'end': 13147.321, 'text': 'So I just got one point.', 'start': 13145.859, 'duration': 1.462}, {'end': 13154.869, 'text': "And if you click when it's not black and white, Okay, I clicked on a black and white again.", 'start': 13147.921, 'duration': 6.948}, {'end': 13157.809, 'text': "But if you click when it's color, you lose a life.", 'start': 13154.909, 'duration': 2.9}, {'end': 13161.01, 'text': 'See that one less little icon there.', 'start': 13158.59, 'duration': 2.42}, {'end': 13168.552, 'text': 'So this is just through the roof.', 'start': 13165.751, 'duration': 2.801}, {'end': 13169.973, 'text': 'Really great job.', 'start': 13169.252, 'duration': 0.721}, {'end': 13171.493, 'text': 'Really creative.', 'start': 13170.853, 'duration': 0.64}, {'end': 13172.933, 'text': 'Very nice work.', 'start': 13172.313, 'duration': 0.62}, {'end': 13176.794, 'text': "Here's another one from Nita.", 'start': 13175.674, 'duration': 1.12}, {'end': 13179.635, 'text': 'A bunch of circles.', 'start': 13176.814, 'duration': 2.821}, {'end': 13190.939, 'text': 'wow, beautiful, beautiful grid of circles, very nice.', 'start': 13182.156, 'duration': 8.783}, {'end': 13195.761, 'text': 'do you want to talk about this one at all?', 'start': 13190.939, 'duration': 4.822}, {'end': 13197.941, 'text': 'yeah, i would like to talk about it.', 'start': 13195.761, 'duration': 2.18}, {'end': 13199.262, 'text': 'so what i did here?', 'start': 13197.941, 'duration': 1.321}, {'end': 13213.144, 'text': 'we are actually positioning each circle in x and y direction, so we are using i and j twice.', 'start': 13199.262, 'duration': 13.882}], 'summary': 'Impressed by the game, scoring one point and losing a life on color click.', 'duration': 83.44, 'max_score': 13129.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw13129704.jpg'}, {'end': 15667.228, 'src': 'embed', 'start': 15635.528, 'weight': 8, 'content': [{'end': 15648.373, 'text': 'And so the responsibility of this function is to map that entry in that array, whatever it may be, whatever shape it may be,', 'start': 15635.528, 'duration': 12.845}, {'end': 15657.3, 'text': 'onto whatever is expected for the x coordinate in this case, or in general, the you know, the attribute value of the DOM element.', 'start': 15648.373, 'duration': 8.927}, {'end': 15667.228, 'text': "And so yeah, it's a mapping function that essentially transforms the thing from data space, whatever that may be, into.", 'start': 15658.441, 'duration': 8.787}], 'summary': 'Function maps array entry to x coordinate or dom element attribute value.', 'duration': 31.7, 'max_score': 15635.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw15635528.jpg'}, {'end': 15959.723, 'src': 'embed', 'start': 15912.067, 'weight': 3, 'content': [{'end': 15919.109, 'text': "but essentially it's enter, append rect.", 'start': 15912.067, 'duration': 7.042}, {'end': 15932.408, 'text': "And so the enter selection handles the case where there's no DOM element on the page corresponding to a given data element.", 'start': 15923.482, 'duration': 8.926}, {'end': 15937.07, 'text': 'And so for each of those cases, it will append a new rectangle.', 'start': 15933.929, 'duration': 3.141}, {'end': 15945.256, 'text': 'So this .join is a short form for that in this particular case.', 'start': 15939.172, 'duration': 6.084}, {'end': 15959.723, 'text': "And then all of these lines that use .attr, they don't actually mutate anything in JavaScript.", 'start': 15947.217, 'duration': 12.506}], 'summary': 'Using .join to append new rectangles for data elements without corresponding dom elements.', 'duration': 47.656, 'max_score': 15912.067, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw15912067.jpg'}], 'start': 12188.117, 'title': 'D3 data visualization', 'summary': 'Covers d3 data visualization tool, its features, reduced code verbosity, and its application for dom manipulation and data join concept, demonstrating its api for creating rectangles and refactoring svg manipulation.', 'chapters': [{'end': 12733.23, 'start': 12188.117, 'title': 'Functional vs object-oriented programming', 'summary': 'Discusses the difference between functional programming and object-oriented programming, using javascript as an example. it also touches on the usage of typescript for type safety and the practical application of functional programming in javascript, with an intention to refactor code using d3 and functional programming in the future.', 'duration': 545.113, 'highlights': ["JavaScript is a functional language that heavily uses functions and is often referred to as 'Lisp in C's clothing'. JavaScript is highlighted as a functional language emphasizing the heavy use of functions, and it is compared to 'Lisp in C's clothing'.", 'Haskell, as an extreme side of functional programming, does not allow mutation and is classified as a pure functional language. Haskell is mentioned as an extreme side of functional programming, known for disallowing mutation and denoted as a pure functional language.', 'The practical application of functional programming is demonstrated in JavaScript, with a mention of TypeScript for type safety. The practical application of functional programming in JavaScript, along with the mention of TypeScript for type safety, is discussed.', 'The intention to refactor code using D3 and functional programming is mentioned, emphasizing the practical application of functional programming. There is an intention to refactor the code using D3 and functional programming, highlighting the practical application of functional programming.']}, {'end': 13329.771, 'start': 12735.876, 'title': 'D3 reproduction of sol lewitt piece', 'summary': 'Covers using d3 to reproduce a sol lewitt piece with different shapes, including discussions on exercise submissions from last week, refactoring code to use d3, utilizing d3 symbols, svg group elements, translating group elements, and d3 point scales, aiming to achieve multiple different shapes with different backgrounds and discussing impressive exercise submissions.', 'duration': 593.895, 'highlights': ['The chapter covers using D3 to reproduce a Sol LeWitt piece with different shapes, including discussions on exercise submissions from last week, refactoring code to use D3, utilizing D3 symbols, SVG group elements, translating group elements, and D3 point scales, aiming to achieve multiple different shapes with different backgrounds and discussing impressive exercise submissions.', 'Impressive exercise submissions are discussed, including a game version and various creative visualizations, showcasing the use of vanilla JavaScript, DOM API, and animations on the Y position of rectangles, receiving praise and appreciation from the presenter.', 'Detailed feedback and discussion on the exercise submissions, such as games, animations, and visualizations, demonstrate the creativity and diverse approaches of the participants, including the use of nested for loops to position circles and creating a grid of circles similar to the Sol LeWitt piece.']}, {'end': 13757.62, 'start': 13332.646, 'title': 'Using package.json to import d3 into a javascript program', 'summary': 'Introduces the use of package.json to import d3 version 6.6.1 into a javascript program, utilizing the es6 module syntax and explaining the purpose and context of using d3 in web development.', 'duration': 424.974, 'highlights': ['The chapter explains the process of creating a package.json file to specify dependencies, such as D3 version 6.6.1, for a JavaScript program, demonstrating the use of a content distribution network (CDN) and the ES6 module syntax to import from packages.', 'The speaker showcases the transition of JavaScript code from a script tag directly on the page to an index.js file, highlighting the ability to import functions from D3 using the ES6 module syntax and confirming the successful import of D3.', 'The discussion provides context on D3 and its structure as a collection of smaller packages composed into a monolithic library, emphasizing the convenience of pulling in the entire D3 build and the purpose of using D3 in web development.']}, {'end': 14415.155, 'start': 13758.34, 'title': 'Introduction to d3 data visualization', 'summary': 'Introduces d3, a data visualization tool, explaining its features for dom manipulation and building visualizations, highlighting its advantages in reducing code verbosity and complexity, and demonstrating the use of d3 for dom manipulation and data join concept.', 'duration': 656.815, 'highlights': ['D3 simplifies DOM manipulation and reduces code verbosity By using D3 for DOM manipulation, the code can be significantly reduced in size and becomes simpler to read and use.', 'D3 is the de facto standard for building visualizations on the web D3 is widely recognized as the standard for web visualizations due to its comprehensive utilities for building data visualizations.', "Introduction to D3 for DOM manipulation and data join concept The chapter introduces the use of D3 for DOM manipulation and explains the concept of data join, emphasizing the necessity of an array for D3's data join feature."]}, {'end': 14849.7, 'start': 14416.136, 'title': 'D3 simplified api for creating rectangles', 'summary': "Explains the simplified api for creating rectangles using d3, highlighting the use of functions to set attributes based on data, the decoupling of computation and rendering, and the use of d3's range utility to generate data arrays.", 'duration': 433.564, 'highlights': ['The attr method accepts either constant values or functions, demonstrating the use of functions to set attributes based on data from the array.', 'The decoupling of computation of marks from the rendering of marks is highlighted, providing flexibility for future changes in DOM manipulation frameworks.', "The use of D3's range utility to generate data arrays is explained, showcasing how it simplifies the process of creating arrays for data binding."]}, {'end': 16022.948, 'start': 14849.7, 'title': 'Refactoring svg manipulation with d3', 'summary': 'Details the process of refactoring svg manipulation with d3, including creating and appending masks, rectangles, circles, handling the issues of impacting the same set of rectangles, and offers solutions using classes and group elements. it also explains the role of .attr methods and the creation of new and modification of existing d3 selections.', 'duration': 1173.248, 'highlights': ['The chapter details the process of refactoring SVG manipulation with D3, including creating and appending masks, rectangles, circles, handling the issues of impacting the same set of rectangles, and offers solutions using classes and group elements. The transcript covers the process of refactoring SVG manipulation with D3, including creating and appending masks, rectangles, circles, and addressing issues with the same set of rectangles. It also presents solutions using classes and group elements to differentiate and contain the elements.', 'It also explains the role of .attr methods and the creation of new and modification of existing D3 selections. The transcript explains the role of .attr methods, which map data onto DOM elements, and clarifies the creation of new and modification of existing D3 selections, detailing the process and the patterns used, such as .join and .enter.']}], 'duration': 3834.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw12188117.jpg', 'highlights': ['D3 simplifies DOM manipulation and reduces code verbosity', 'Introduction to D3 for DOM manipulation and data join concept', 'The practical application of functional programming in JavaScript, along with the mention of TypeScript for type safety, is discussed', 'Impressive exercise submissions are discussed, including a game version and various creative visualizations, showcasing the use of vanilla JavaScript, DOM API, and animations on the Y position of rectangles, receiving praise and appreciation from the presenter', 'The chapter covers using D3 to reproduce a Sol LeWitt piece with different shapes, including discussions on exercise submissions from last week, refactoring code to use D3, utilizing D3 symbols, SVG group elements, translating group elements, and D3 point scales, aiming to achieve multiple different shapes with different backgrounds and discussing impressive exercise submissions', 'The discussion provides context on D3 and its structure as a collection of smaller packages composed into a monolithic library, emphasizing the convenience of pulling in the entire D3 build and the purpose of using D3 in web development', 'The attr method accepts either constant values or functions, demonstrating the use of functions to set attributes based on data from the array', 'The decoupling of computation of marks from the rendering of marks is highlighted, providing flexibility for future changes in DOM manipulation frameworks', "The use of D3's range utility to generate data arrays is explained, showcasing how it simplifies the process of creating arrays for data binding", 'The chapter details the process of refactoring SVG manipulation with D3, including creating and appending masks, rectangles, circles, handling the issues of impacting the same set of rectangles, and offers solutions using classes and group elements', 'It also explains the role of .attr methods and the creation of new and modification of existing D3 selections']}, {'end': 19358.443, 'segs': [{'end': 16365.305, 'src': 'embed', 'start': 16334.523, 'weight': 5, 'content': [{'end': 16348.471, 'text': 'we call symbol passing in a type and a size, and that returns a symbol generator which we then need to invoke with some arguments or no arguments.', 'start': 16334.523, 'duration': 13.948}, {'end': 16349.172, 'text': 'I guess works.', 'start': 16348.471, 'duration': 0.701}, {'end': 16358.9, 'text': "And there's just something complicated that you could do if you pass an argument, but you don't need to pass an argument.", 'start': 16350.753, 'duration': 8.147}, {'end': 16365.305, 'text': 'So once you invoke this function, it will return that string that we can use as the D attribute of the path.', 'start': 16359.96, 'duration': 5.345}], 'summary': 'Pass type and size to generate symbol for d attribute of path.', 'duration': 30.782, 'max_score': 16334.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw16334523.jpg'}, {'end': 17679.508, 'src': 'embed', 'start': 17644.301, 'weight': 4, 'content': [{'end': 17648.823, 'text': 'I think instead we want to invert this containment relationship,', 'start': 17644.301, 'duration': 4.522}, {'end': 17659.167, 'text': 'where for each symbol there should be a parent group element that gets a different transform, that gets translated differently in the X direction,', 'start': 17648.823, 'duration': 10.344}, {'end': 17662.428, 'text': 'and then within each one of those group elements, we can put the path.', 'start': 17659.167, 'duration': 3.261}, {'end': 17665.26, 'text': "Yeah, that's what I'm going to go for.", 'start': 17664.099, 'duration': 1.161}, {'end': 17679.508, 'text': "And we could keep this parent element, but I don't think it's necessary because we could just set the transform on the inner elements.", 'start': 17669.802, 'duration': 9.706}], 'summary': 'Invert containment relationship for symbols with different x-axis translations', 'duration': 35.207, 'max_score': 17644.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw17644301.jpg'}, {'end': 18792.121, 'src': 'embed', 'start': 18764.722, 'weight': 3, 'content': [{'end': 18775.609, 'text': 'So the index of the array always starts at zero and you can sort of use that to look up things at different indices, different places,', 'start': 18764.722, 'duration': 10.887}, {'end': 18776.97, 'text': 'different numbers in the list.', 'start': 18775.609, 'duration': 1.361}, {'end': 18781.953, 'text': "So let's assign this to a variable.", 'start': 18779.712, 'duration': 2.241}, {'end': 18783.695, 'text': 'Then we can do more things with it.', 'start': 18782.234, 'duration': 1.461}, {'end': 18789.959, 'text': 'const array equals this, and then we can say console.log array.', 'start': 18785.876, 'duration': 4.083}, {'end': 18792.121, 'text': 'Same thing happens.', 'start': 18791.34, 'duration': 0.781}], 'summary': 'Using array indices to access and manipulate elements in javascript.', 'duration': 27.399, 'max_score': 18764.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw18764722.jpg'}, {'end': 19040.125, 'src': 'embed', 'start': 19003.936, 'weight': 0, 'content': [{'end': 19012.478, 'text': 'So it is an object, but it inherits from this prototype, which is this built-in array class or interface.', 'start': 19003.936, 'duration': 8.542}, {'end': 19018.1, 'text': "I don't know really what the correct term is, but this is where all of these methods are defined.", 'start': 19012.618, 'duration': 5.482}, {'end': 19019.74, 'text': "So you've got array.concat.", 'start': 19018.12, 'duration': 1.62}, {'end': 19032.081, 'text': 'Every, filter, find, for each, join, map, push, reduce.', 'start': 19021.716, 'duration': 10.365}, {'end': 19036.323, 'text': "I'm just calling out the ones that I actually use on a regular basis.", 'start': 19033.222, 'duration': 3.101}, {'end': 19040.125, 'text': 'Sort, slice.', 'start': 19037.584, 'duration': 2.541}], 'summary': 'The array object inherits from a prototype with methods like concat, filter, map, and reduce.', 'duration': 36.189, 'max_score': 19003.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw19003936.jpg'}], 'start': 16023.528, 'title': 'D3 symbol generation and data join patterns', 'summary': 'Discusses using d3 to generate symbols for mask elements, refactoring to eliminate duplicated logic, creating a rendering function with color inversion, and using data join patterns to render multiple symbols. it also covers javascript arrays, range functions, and their relevance to d3 selections and data join concepts.', 'chapters': [{'end': 16834.424, 'start': 16023.528, 'title': 'D3 symbol generation and refactoring', 'summary': 'Discusses using d3 to generate symbols for mask elements, including the process of using d3 functions to create symbols and using svg group elements to transform and position the symbols. additionally, it addresses the need for refactoring to eliminate duplicated logic for future maintainability and scalability.', 'duration': 810.896, 'highlights': ['Using D3 to generate symbols for mask elements The transcript explains the process of using D3 functions to generate symbols for mask elements, including importing symbols from D3, calling d3.symbol to create symbol generators, and setting the D attribute of a path element with the generated symbol.', "Positioning and transforming symbols using SVG group elements The chapter discusses using SVG group elements to transform and position symbols by applying the 'translate' attribute to move the group element and its content, ultimately achieving the goal of centering the symbol on the screen.", 'Addressing the need for refactoring to eliminate duplicated logic The transcript emphasizes the need for refactoring to eliminate duplicated logic, as adding more shapes would require copying larger chunks of code and maintaining consistency across multiple instances, highlighting the importance of making the code more maintainable and scalable.']}, {'end': 17289.161, 'start': 16835.324, 'title': 'D3 rendering function', 'summary': 'Outlines the creation of a d3 rendering function that accepts varying arguments, such as mask id and fill, and demonstrates the use of a ternary operator for color inversion, resulting in two distinct renderings of masks.', 'duration': 453.837, 'highlights': ['The chapter introduces the creation of a D3 rendering function that accepts varying arguments, such as mask ID and fill, to generate two distinct renderings of masks, demonstrating the flexibility of the function.', "It illustrates the use of a ternary operator to handle color inversion, allowing for the dynamic adjustment of colors based on the 'inverted' argument, providing a clear example of the function's adaptability.", "The chapter also discusses the conventional way of invoking functions on selections in the D3 world, emphasizing the use of 'selection.call' to pass in arguments and demonstrating its equivalence to alternative invocation methods."]}, {'end': 17821.774, 'start': 17290.141, 'title': 'D3 data join pattern', 'summary': 'Discusses using the d3 data join pattern to render multiple symbols by iterating through an array, creating parent group elements with transformed paths, and using the join method to append path elements inside group elements.', 'duration': 531.633, 'highlights': ['The data join pattern is used to iterate through an array of symbols to render multiple paths with varying attributes, where the number of symbols available can be accessed from symbols.length.', 'Creating parent group elements with transformed paths is necessary to split the symbols apart in the x direction, allowing for individual translation and containment relationships for each symbol.', 'The join method is applied to create parent group elements and append path elements inside them, requiring the use of the long form of .join with arguments for enter, update, and exit.']}, {'end': 18497.684, 'start': 17827.58, 'title': 'D3 data join: transforming group elements', 'summary': "Delves into using the d3 data join to append and transform group elements, demonstrating how to spread shapes horizontally and vertically using the 'transform' attribute and a function of 'd', ultimately creating generative art with d3.", 'duration': 670.104, 'highlights': ['Using D3 data join to append group elements and paths, and setting D and fill attributes on each path. The process involves using the D3 data join to append group elements and paths and setting D and fill attributes on each path, allowing for the creation of multiple shapes.', "Transforming group elements to spread shapes horizontally and vertically using the 'transform' attribute and a function of 'd'. The transformation involves spreading shapes horizontally and vertically by using the 'transform' attribute and a function of 'd', allowing for the creation of abstract art and demonstrating the concept of generative art.", "Explanation of the 'enter' selection and its role in appending elements to multiple elements. The 'enter' selection is described as being populated with the case where there is no corresponding group element for a given data element, which leads to the appending of group elements for each entry in the array, thus demonstrating the process of appending elements to multiple elements."]}, {'end': 18792.121, 'start': 18498.184, 'title': 'Introduction to javascript arrays', 'summary': 'Covers javascript arrays, including syntax, manipulation, and index concepts, aiming to provide a solid understanding of arrays and functions as well as insights into d3 selections and data join concepts.', 'duration': 293.937, 'highlights': ['The chapter covers JavaScript arrays, including syntax, manipulation, and index concepts. The chapter delves into the syntax of JavaScript arrays and demonstrates how to manipulate arrays using square brackets, providing a comprehensive understanding of arrays in JavaScript.', 'Insights into D3 selections and data join concepts are explored. The chapter will get deep into D3 selections and explore the concepts of data join along with various ways of implementing them using D3 APIs, offering a detailed understanding of the D3 library.', 'Introduction to D3 using vanilla JavaScript is included. The chapter covers writing the dot range function of D3 using vanilla JavaScript, aiming to provide a good example to cement understanding of arrays and functions.']}, {'end': 19358.443, 'start': 18793.663, 'title': 'Javascript arrays and range function', 'summary': 'Covers javascript arrays, including methods like push and the flexibility of containing different types. it also explains the range function in d3, demonstrating how to create an array of integers based on a given number using for loops and array.push.', 'duration': 564.78, 'highlights': ['JavaScript arrays are flexible and can contain a mix of types like AB1 and C or AB and an object and C, unlike other languages where arrays need to contain the same type of elements. JavaScript arrays can contain a mix of types, providing flexibility in the type of elements it can store.', 'The range function in D3 creates an array of integers based on a given number, and the chapter demonstrates its implementation using for loops and array.push. The range function in D3 creates an array of integers based on a given number, and its implementation involves using for loops and array.push.', 'The for loop construct is used to iterate through the range of numbers and push the values into the array, effectively creating the desired range of integers. The for loop construct is utilized to iterate through the range of numbers and populate the array with the desired range of integers.', 'The chapter briefly introduces the typeof operator, which is useful for determining the type of variable in JavaScript, and explains its application with different data types. The chapter introduces the typeof operator, which is useful for determining the type of variable in JavaScript, and explains its application with different data types.']}], 'duration': 3334.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw16023528.jpg', 'highlights': ['The data join pattern is used to iterate through an array of symbols to render multiple paths with varying attributes, where the number of symbols available can be accessed from symbols.length.', 'Using D3 data join to append group elements and paths, and setting D and fill attributes on each path. The process involves using the D3 data join to append group elements and paths and setting D and fill attributes on each path, allowing for the creation of multiple shapes.', 'The chapter introduces the creation of a D3 rendering function that accepts varying arguments, such as mask ID and fill, to generate two distinct renderings of masks, demonstrating the flexibility of the function.', 'The chapter covers JavaScript arrays, including syntax, manipulation, and index concepts. The chapter delves into the syntax of JavaScript arrays and demonstrates how to manipulate arrays using square brackets, providing a comprehensive understanding of arrays in JavaScript.', "Positioning and transforming symbols using SVG group elements The chapter discusses using SVG group elements to transform and position symbols by applying the 'translate' attribute to move the group element and its content, ultimately achieving the goal of centering the symbol on the screen.", 'JavaScript arrays are flexible and can contain a mix of types like AB1 and C or AB and an object and C, unlike other languages where arrays need to contain the same type of elements. JavaScript arrays can contain a mix of types, providing flexibility in the type of elements it can store.']}, {'end': 23447.985, 'segs': [{'end': 21113.454, 'src': 'heatmap', 'start': 20402.948, 'weight': 0.927, 'content': [{'end': 20406.431, 'text': 'It generates a new array with all the return values.', 'start': 20402.948, 'duration': 3.483}, {'end': 20417.791, 'text': 'So if we say, like, d times 2, for example, Now we get all of the original numbers, but multiplied by two.', 'start': 20407.392, 'duration': 10.399}, {'end': 20424.094, 'text': 'So this is super useful.', 'start': 20422.474, 'duration': 1.62}, {'end': 20433.599, 'text': 'I mean, you could do all sorts of things in here, like return an object that says number is D.', 'start': 20424.194, 'duration': 9.405}, {'end': 20434.58, 'text': "Now we're talking.", 'start': 20433.599, 'duration': 0.981}, {'end': 20435.32, 'text': "Now we're talking.", 'start': 20434.6, 'duration': 0.72}, {'end': 20439.584, 'text': 'Yeah, right.', 'start': 20436.921, 'duration': 2.663}, {'end': 20445.848, 'text': 'and then, even like double, is d times two.', 'start': 20439.584, 'duration': 6.264}, {'end': 20453.613, 'text': 'so you can construct objects in this way using dot map.', 'start': 20445.848, 'duration': 7.765}, {'end': 20455.174, 'text': 'so yeah, dot map is.', 'start': 20453.613, 'duration': 1.561}, {'end': 20461.198, 'text': "it's just super useful, you know, especially when you have data loaded it from, like a csv file or something.", 'start': 20455.174, 'duration': 6.024}, {'end': 20468.202, 'text': 'you can parse dates, for example, clean up the number of fields that you have all using dot map.', 'start': 20461.198, 'duration': 7.004}, {'end': 20474.376, 'text': 'Well, for me, a lot of my work is finding an example of a visualization.', 'start': 20469.735, 'duration': 4.641}, {'end': 20475.896, 'text': "that's pretty close to what I want.", 'start': 20474.376, 'duration': 1.52}, {'end': 20478.597, 'text': "And then I have a data set that's slightly different from that.", 'start': 20475.956, 'duration': 2.641}, {'end': 20486.158, 'text': 'So most of the way of like bridging that gap is just a dot map where I make my data look like the data that the example works on.', 'start': 20479.117, 'duration': 7.041}, {'end': 20487.699, 'text': 'Does that make sense? Totally.', 'start': 20486.279, 'duration': 1.42}, {'end': 20491.24, 'text': 'Yeah And dot map can be the bridge from here to there.', 'start': 20488.499, 'duration': 2.741}, {'end': 20492.56, 'text': 'For sure.', 'start': 20492.2, 'duration': 0.36}, {'end': 20493.08, 'text': 'For sure.', 'start': 20492.8, 'duration': 0.28}, {'end': 20506.966, 'text': "Let's see what else reduce reduce.", 'start': 20502.284, 'duration': 4.682}, {'end': 20509.527, 'text': 'Yes, yes, yes, yes.', 'start': 20507.426, 'duration': 2.101}, {'end': 20511.168, 'text': 'Now reduce.', 'start': 20510.147, 'duration': 1.021}, {'end': 20519.231, 'text': "That's one of those ones that is like kind of tricky to wrap your head around and you can get through life without using reduce ever.", 'start': 20511.308, 'duration': 7.923}, {'end': 20537.046, 'text': 'However, I find that one of the most useful things with reduce is to build up an object where the keys are derived from some array.', 'start': 20521.078, 'duration': 15.968}, {'end': 20546.33, 'text': 'So let me just just try reduce console dot log my range dot reduce.', 'start': 20537.526, 'duration': 8.804}, {'end': 20551.605, 'text': 'Reduce accepts two arguments.', 'start': 20548.641, 'duration': 2.964}, {'end': 20559.036, 'text': 'The first is a function that takes as input two things, and I can never remember the order.', 'start': 20551.766, 'duration': 7.27}, {'end': 20560.779, 'text': 'Let me just consult the documentation.', 'start': 20559.136, 'duration': 1.643}, {'end': 20575.297, 'text': 'Reduce looks something like this.', 'start': 20574.016, 'duration': 1.281}, {'end': 20577.258, 'text': "You define what's called a reducer.", 'start': 20575.777, 'duration': 1.481}, {'end': 20581.341, 'text': 'It takes as input the accumulator and the current value.', 'start': 20577.758, 'duration': 3.583}, {'end': 20584.503, 'text': "And here's one that just adds them together.", 'start': 20582.722, 'duration': 1.781}, {'end': 20588.465, 'text': 'You could use this, for example, to sum all the numbers in the array.', 'start': 20584.803, 'duration': 3.662}, {'end': 20594.109, 'text': 'Current value here is one of the elements from the array.', 'start': 20589.786, 'duration': 4.323}, {'end': 20599.993, 'text': 'Accumulator is the returned value from this function.', 'start': 20595.29, 'duration': 4.703}, {'end': 20605.926, 'text': 'as it goes through.', 'start': 20603.485, 'duration': 2.441}, {'end': 20618.393, 'text': 'but the first time this this is invoked, accumulator gets the value that you pass in as the second argument to reduce.', 'start': 20605.926, 'duration': 12.467}, {'end': 20619.894, 'text': "so let's put this into practice.", 'start': 20618.393, 'duration': 1.501}, {'end': 20626.397, 'text': 'we can say dot, reduce accumulator I do like that term and I can use D.', 'start': 20619.894, 'duration': 6.503}, {'end': 20629.839, 'text': 'you know why not?', 'start': 20626.397, 'duration': 3.442}, {'end': 20641.699, 'text': 'so if we say accumulator plus D, we get 45, which is the sum of all those numbers.', 'start': 20629.839, 'duration': 11.86}, {'end': 20648.445, 'text': "And, you know, I'm not sure what it uses as the first value because I didn't pass anything.", 'start': 20642.72, 'duration': 5.725}, {'end': 20661.075, 'text': "But if you pass in zero as the second argument to reduce, that's what accumulator gets for the first entry.", 'start': 20649.265, 'duration': 11.81}, {'end': 20680.904, 'text': 'This may be kind of confusing, so let me just open it up into a function and say console.log accumulator just to see what this is.', 'start': 20664.264, 'duration': 16.64}, {'end': 20694.439, 'text': 'Looks like I have a syntax error.', 'start': 20692.177, 'duration': 2.262}, {'end': 20702.204, 'text': "Actually I didn't.", 'start': 20701.624, 'duration': 0.58}, {'end': 20713.852, 'text': "So what this is doing here is it's logging the value of the accumulator as it progresses through the array.", 'start': 20707.288, 'duration': 6.564}, {'end': 20717.055, 'text': "So here's what it's doing.", 'start': 20715.894, 'duration': 1.161}, {'end': 20722.361, 'text': "It's adding 0 which we passed in as the second argument to reduce.", 'start': 20717.115, 'duration': 5.246}, {'end': 20726.762, 'text': "And it's also adding 0, the first element of the array.", 'start': 20723.201, 'duration': 3.561}, {'end': 20731.343, 'text': 'So the first time through, this returns 0 plus 0, which is 0.', 'start': 20727.282, 'duration': 4.061}, {'end': 20732.983, 'text': "That's why it's outputting 0 twice.", 'start': 20731.343, 'duration': 1.64}, {'end': 20739.564, 'text': "And then it's returning 0 plus 1, 1 coming from the first element of the array.", 'start': 20733.723, 'duration': 5.841}, {'end': 20752.798, 'text': 'And then the next time around, accumulator is 3 because it added 1 plus 2, 2 being the next element of the array.', 'start': 20740.465, 'duration': 12.333}, {'end': 20779.352, 'text': "So to be even more clear here we can say adding accumulator plus D So now we can see that it's adding 0 plus 0, 0 plus 1, 1 plus 2.", 'start': 20753.398, 'duration': 25.954}, {'end': 20787.354, 'text': 'So 1 plus 2 is 3, and then so the output of adding 1 plus 2 is the next version of the accumulator.', 'start': 20779.352, 'duration': 8.002}, {'end': 20797.297, 'text': 'Then it adds 3 plus 3, which is 6, and then it adds 4 to that, which is 10, and then it adds 5, and so on until it gets to 45.', 'start': 20787.654, 'duration': 9.643}, {'end': 20800.378, 'text': "So that's reduce in a nutshell.", 'start': 20797.297, 'duration': 3.081}, {'end': 20808.994, 'text': "And while we're here, I do want to show the most common use case that I encounter for reduce.", 'start': 20804.272, 'duration': 4.722}, {'end': 20815.718, 'text': 'Oh, but first of all, are there any questions yet here about reduce? Yes.', 'start': 20809.975, 'duration': 5.743}, {'end': 20826.564, 'text': 'If you remove the second argument, which is zero, does it default to something??', 'start': 20815.898, 'duration': 10.666}, {'end': 20830.946, 'text': 'Could it just default to the first value of the element in this case?', 'start': 20826.924, 'duration': 4.022}, {'end': 20834.857, 'text': 'That exactly appears like what it is doing.', 'start': 20832.456, 'duration': 2.401}, {'end': 20847.403, 'text': 'Yes Yeah, it appears to be adding zero plus one in the first time around.', 'start': 20835.918, 'duration': 11.485}, {'end': 20850.044, 'text': 'And it must be getting that from the array.', 'start': 20848.083, 'duration': 1.961}, {'end': 20854.006, 'text': 'Yeah, that makes sense.', 'start': 20850.064, 'duration': 3.942}, {'end': 20862.457, 'text': 'And we can we can be totally sure but just by saying like, you know, two and three, It does.', 'start': 20854.727, 'duration': 7.73}, {'end': 20872.143, 'text': 'See?. Yeah, the first time around it takes the first two elements of the array and adds those together, meaning it takes the first element of the array,', 'start': 20862.858, 'duration': 9.285}, {'end': 20878.347, 'text': 'the thing at index 0,, treats that as accumulator and then takes the thing at index 1,, treats that as D.', 'start': 20872.143, 'duration': 6.204}, {'end': 20881.929, 'text': 'So that is what happens if you leave out the second argument.', 'start': 20878.347, 'duration': 3.582}, {'end': 20887.992, 'text': "And actually, I wasn't sure of that until I just did this just now.", 'start': 20885.15, 'duration': 2.842}, {'end': 20890.594, 'text': "I'm learning, too.", 'start': 20889.953, 'duration': 0.641}, {'end': 20901.081, 'text': "All right, I think the last thing we're going to do here with arrays is construct an object from an array.", 'start': 20895.538, 'duration': 5.543}, {'end': 20902.902, 'text': 'And let me show you what I mean.', 'start': 20901.921, 'duration': 0.981}, {'end': 20913.808, 'text': "I'm going to make a thing called entries.", 'start': 20911.867, 'duration': 1.941}, {'end': 20918.13, 'text': 'And in this thing, there will be objects.', 'start': 20915.008, 'duration': 3.122}, {'end': 20933.817, 'text': "And the key will be something like, I don't know, just a.", 'start': 20921.17, 'duration': 12.647}, {'end': 20943.943, 'text': 'All right, and value will be foo.', 'start': 20933.817, 'duration': 10.126}, {'end': 20946.424, 'text': "It's just random stuff that doesn't make any sense.", 'start': 20944.783, 'duration': 1.641}, {'end': 20957.785, 'text': 'And then we have another one where the key is b and the value is bar, just to show the mechanics of all this stuff.', 'start': 20948.154, 'duration': 9.631}, {'end': 20974.199, 'text': "So now let's say what we want is an object that actually has the key of A and the value of foo like this,", 'start': 20959.447, 'duration': 14.752}, {'end': 20978.181, 'text': 'and then the key of B and the value of bar like this.', 'start': 20974.199, 'duration': 3.982}, {'end': 20980.862, 'text': 'This is our desired result.', 'start': 20979.141, 'duration': 1.721}, {'end': 20989.025, 'text': 'So the challenge is, how do you write code that gets from this to this? I encounter this all the time.', 'start': 20981.722, 'duration': 7.303}, {'end': 20991.886, 'text': "And here's how you can do it.", 'start': 20990.865, 'duration': 1.021}, {'end': 20992.966, 'text': 'You can do it with reduce.', 'start': 20991.946, 'duration': 1.02}, {'end': 21010.503, 'text': 'entries dot, reduce, and the trick is that you start with an empty object, so you pass in an empty object as the second argument to dot reduce,', 'start': 20996.698, 'duration': 13.805}, {'end': 21021.747, 'text': "and then this reducer function takes as input the accumulator, and I'll call it D, just by convention.", 'start': 21010.503, 'duration': 11.244}, {'end': 21031.933, 'text': 'and in the body of this reducer we ultimately want to return the accumulator.', 'start': 21021.747, 'duration': 10.186}, {'end': 21034.014, 'text': "I mean, so here's the approach.", 'start': 21031.953, 'duration': 2.061}, {'end': 21039.019, 'text': "I'm going to, I'm going to add a property to this object and then return the object.", 'start': 21034.155, 'duration': 4.864}, {'end': 21044.564, 'text': 'So we return accumulator.', 'start': 21040.02, 'duration': 4.544}, {'end': 21058.36, 'text': 'But before we do that, we can say accumulator at d.key equals d.value.', 'start': 21045.465, 'duration': 12.895}, {'end': 21063.564, 'text': 'And then we got that object that we were trying to get.', 'start': 21061.142, 'duration': 2.422}, {'end': 21088.536, 'text': "And by the way, I'm not sure I've introduced this syntax yet, but if you have an object, let's say you have an object you could say object, dot, a,", 'start': 21068.507, 'duration': 20.029}, {'end': 21092.68, 'text': 'equals foo, like this.', 'start': 21088.536, 'duration': 4.144}, {'end': 21102.69, 'text': "but there's an equivalent syntax where you could say object at a, like this, using these square brackets, and that's equivalent.", 'start': 21092.68, 'duration': 10.01}, {'end': 21107.795, 'text': 'So now object has a is foo like that.', 'start': 21105.573, 'duration': 2.222}, {'end': 21113.454, 'text': 'But anyway, yeah, this is how you can use reduce to accomplish that task.', 'start': 21108.971, 'duration': 4.483}], 'summary': 'Using dot map and reduce to manipulate arrays and construct objects, demonstrated with examples and explanations.', 'duration': 710.506, 'max_score': 20402.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw20402948.jpg'}, {'end': 20475.896, 'src': 'embed', 'start': 20445.848, 'weight': 12, 'content': [{'end': 20453.613, 'text': 'so you can construct objects in this way using dot map.', 'start': 20445.848, 'duration': 7.765}, {'end': 20455.174, 'text': 'so yeah, dot map is.', 'start': 20453.613, 'duration': 1.561}, {'end': 20461.198, 'text': "it's just super useful, you know, especially when you have data loaded it from, like a csv file or something.", 'start': 20455.174, 'duration': 6.024}, {'end': 20468.202, 'text': 'you can parse dates, for example, clean up the number of fields that you have all using dot map.', 'start': 20461.198, 'duration': 7.004}, {'end': 20474.376, 'text': 'Well, for me, a lot of my work is finding an example of a visualization.', 'start': 20469.735, 'duration': 4.641}, {'end': 20475.896, 'text': "that's pretty close to what I want.", 'start': 20474.376, 'duration': 1.52}], 'summary': 'Dot map is super useful for data manipulation and visualization.', 'duration': 30.048, 'max_score': 20445.848, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw20445848.jpg'}, {'end': 20872.143, 'src': 'embed', 'start': 20835.918, 'weight': 6, 'content': [{'end': 20847.403, 'text': 'Yes Yeah, it appears to be adding zero plus one in the first time around.', 'start': 20835.918, 'duration': 11.485}, {'end': 20850.044, 'text': 'And it must be getting that from the array.', 'start': 20848.083, 'duration': 1.961}, {'end': 20854.006, 'text': 'Yeah, that makes sense.', 'start': 20850.064, 'duration': 3.942}, {'end': 20862.457, 'text': 'And we can we can be totally sure but just by saying like, you know, two and three, It does.', 'start': 20854.727, 'duration': 7.73}, {'end': 20872.143, 'text': 'See?. Yeah, the first time around it takes the first two elements of the array and adds those together, meaning it takes the first element of the array,', 'start': 20862.858, 'duration': 9.285}], 'summary': 'The program adds the first two elements of an array, resulting in 1.', 'duration': 36.225, 'max_score': 20835.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw20835918.jpg'}, {'end': 21626.162, 'src': 'embed', 'start': 21532.405, 'weight': 1, 'content': [{'end': 21535.907, 'text': 'And that is the selection of that one SVG element.', 'start': 21532.405, 'duration': 3.502}, {'end': 21556.91, 'text': 'At this point, if we were to inspect the DOM, we can see that there is in fact an SVG element there in the DOM.', 'start': 21537.708, 'duration': 19.202}, {'end': 21560.835, 'text': "And I'm noticing there's an extra script tag.", 'start': 21558.833, 'duration': 2.002}, {'end': 21565.462, 'text': "Yeah, there's an empty script tag.", 'start': 21564.201, 'duration': 1.261}, {'end': 21566.444, 'text': "We'll just get rid of that.", 'start': 21565.623, 'duration': 0.821}, {'end': 21581.994, 'text': 'we can see that in fact there is an SVG element appended to the body right here.', 'start': 21576.812, 'duration': 5.182}, {'end': 21595.639, 'text': 'So to work with SVG, we need to give this SVG element width and height.', 'start': 21582.994, 'duration': 12.645}, {'end': 21607.434, 'text': 'So we can say attr, to set the attribute of that DOM element of width to be width,', 'start': 21595.839, 'duration': 11.595}, {'end': 21618.579, 'text': "which is a variable that I'll create and I'll derive that from the actual width of the browser.", 'start': 21607.434, 'duration': 11.145}, {'end': 21626.162, 'text': "so we can say window.innerWidth and we're also going to want height as window.innerHeight.", 'start': 21618.579, 'duration': 7.583}], 'summary': 'Working with svg elements, setting width and height dynamically based on window size.', 'duration': 93.757, 'max_score': 21532.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw21532405.jpg'}, {'end': 21819.171, 'src': 'embed', 'start': 21780.075, 'weight': 0, 'content': [{'end': 21784.738, 'text': 'to get rid of those pesky scrollbars.', 'start': 21780.075, 'duration': 4.663}, {'end': 21791.723, 'text': "now we're good to go, Alright.", 'start': 21784.738, 'duration': 6.985}, {'end': 21793.864, 'text': "so here's where I want to have some fun.", 'start': 21791.723, 'duration': 2.141}, {'end': 21799.226, 'text': 'we can, we can make a bunch of circles, and this is our first foray into D three data joins.', 'start': 21793.864, 'duration': 5.362}, {'end': 21806.128, 'text': 'And it looks something like this SVG dot select all.', 'start': 21802.207, 'duration': 3.921}, {'end': 21817.008, 'text': 'circle This selects, it makes D3 selection that contains all circles that exist within that SVG.', 'start': 21807.839, 'duration': 9.169}, {'end': 21819.171, 'text': 'And at this time, there are none.', 'start': 21817.829, 'duration': 1.342}], 'summary': 'Using d3 to create circles in svg for data visualization.', 'duration': 39.096, 'max_score': 21780.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw21780075.jpg'}, {'end': 22393.816, 'src': 'embed', 'start': 22367.816, 'weight': 4, 'content': [{'end': 22373.641, 'text': "So if it's calculated on the visualization side, your other visualization parts can't access that right?", 'start': 22367.816, 'duration': 5.825}, {'end': 22375.022, 'text': 'Like they would have to recompute it.', 'start': 22373.681, 'duration': 1.341}, {'end': 22382.047, 'text': 'But if you do it in the vis processing step, then at any step of the way, you can process all those cool values and work with them.', 'start': 22375.482, 'duration': 6.565}, {'end': 22385.209, 'text': "Exactly Yeah, that's exactly right.", 'start': 22383.348, 'duration': 1.861}, {'end': 22386.41, 'text': "You wouldn't have to recompute it.", 'start': 22385.229, 'duration': 1.181}, {'end': 22388.412, 'text': 'You could just compute it once and then access it.', 'start': 22386.47, 'duration': 1.942}, {'end': 22389.412, 'text': "So let's do that.", 'start': 22388.732, 'duration': 0.68}, {'end': 22393.816, 'text': 'The way we would do that is to use .map right here.', 'start': 22391.074, 'duration': 2.742}], 'summary': 'Processing data in visualization step avoids recomputation, enabling easy access and efficient computation.', 'duration': 26, 'max_score': 22367.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw22367816.jpg'}, {'end': 22764.266, 'src': 'embed', 'start': 22732.29, 'weight': 5, 'content': [{'end': 22733.171, 'text': 'But notice what happens.', 'start': 22732.29, 'duration': 0.881}, {'end': 22738.978, 'text': 'It actually works.', 'start': 22738.057, 'duration': 0.921}, {'end': 22744.185, 'text': "So now it's animating, which is cool, which is where I wanted to get to.", 'start': 22739.339, 'duration': 4.846}, {'end': 22746.868, 'text': 'Let me just tweak it so that it animates in a smoother way.', 'start': 22744.345, 'duration': 2.523}, {'end': 22749.351, 'text': "So now it's like every tenth of a second.", 'start': 22747.569, 'duration': 1.782}, {'end': 22758.601, 'text': 'and we can say t equals t plus 0.1 to make it move more slowly.', 'start': 22751.434, 'duration': 7.167}, {'end': 22764.266, 'text': "so now you can see really what it's what it's doing here.", 'start': 22758.601, 'duration': 5.665}], 'summary': 'Code successfully animates at 0.1-second intervals.', 'duration': 31.976, 'max_score': 22732.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw22732290.jpg'}, {'end': 22916.857, 'src': 'embed', 'start': 22888.011, 'weight': 7, 'content': [{'end': 22892.369, 'text': 'And this is where merge comes in.', 'start': 22888.011, 'duration': 4.358}, {'end': 22901.852, 'text': 'See, ideally we could just have this logic once applied to something,', 'start': 22893.869, 'duration': 7.983}, {'end': 22908.354, 'text': 'that that will be the enter selection the first time and it will be the update selection on subsequent times.', 'start': 22901.852, 'duration': 6.502}, {'end': 22910.975, 'text': "And here's how we get to that thing.", 'start': 22908.994, 'duration': 1.981}, {'end': 22916.857, 'text': 'Let me assign enter to be a variable.', 'start': 22913.336, 'duration': 3.521}], 'summary': 'Explaining the concept of merge and variable assignment.', 'duration': 28.846, 'max_score': 22888.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw22888011.jpg'}, {'end': 23103.182, 'src': 'embed', 'start': 23031.288, 'weight': 8, 'content': [{'end': 23036.831, 'text': "So let me just, I'll keep this as it is, commented out just for reference.", 'start': 23031.288, 'duration': 5.543}, {'end': 23046.578, 'text': 'And with the new API, you can say right here .join circle.', 'start': 23038.753, 'duration': 7.825}, {'end': 23052.432, 'text': 'And that actually gives you the merged enter and update selection.', 'start': 23048.188, 'duration': 4.244}, {'end': 23059.8, 'text': 'And on there is where we can set all of the attributes.', 'start': 23054.895, 'duration': 4.905}, {'end': 23065.927, 'text': 'So this is sort of a simpler way to do it.', 'start': 23063.424, 'duration': 2.503}, {'end': 23069.931, 'text': 'And it accomplishes the same thing.', 'start': 23068.549, 'duration': 1.382}, {'end': 23074.164, 'text': 'mean it would.', 'start': 23073.704, 'duration': 0.46}, {'end': 23080.567, 'text': 'it would actually be equivalent to defining r on the merged enter and update selection.', 'start': 23074.164, 'duration': 6.403}, {'end': 23083.888, 'text': "so it's assigning r unnecessarily.", 'start': 23080.567, 'duration': 3.321}, {'end': 23089.59, 'text': "but you know, maybe that's fine all right.", 'start': 23083.888, 'duration': 5.702}, {'end': 23096.092, 'text': 'so now we can start really messing around with this, making the animation go faster and faster.', 'start': 23089.59, 'duration': 6.502}, {'end': 23103.182, 'text': 'ideally it would be 16 milliseconds, which is at 60 frames a second.', 'start': 23096.092, 'duration': 7.09}], 'summary': 'New api allows simpler attribute setting, achieving same result with faster animation at 60 frames per second.', 'duration': 71.894, 'max_score': 23031.288, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw23031288.jpg'}, {'end': 23374.74, 'src': 'embed', 'start': 23331.738, 'weight': 13, 'content': [{'end': 23336.338, 'text': "But what I'm going to do here is I'm going to set it to a value that changes over time.", 'start': 23331.738, 'duration': 4.6}, {'end': 23341.567, 'text': "So I'll say 10.", 'start': 23336.779, 'duration': 4.788}, {'end': 23353.477, 'text': "I'll say 10 plus math.sign of time times 5.", 'start': 23341.567, 'duration': 11.91}, {'end': 23359.723, 'text': 'So now it should vary between 5 and 15.', 'start': 23353.477, 'duration': 6.246}, {'end': 23362.705, 'text': 'And notice the effect that it has on the animation.', 'start': 23359.723, 'duration': 2.982}, {'end': 23374.74, 'text': "Over time, It is sort of disconnecting from those circles, but it's leaving those circles there on the page.", 'start': 23366.528, 'duration': 8.212}], 'summary': 'The value varies between 5 and 15, affecting the animation.', 'duration': 43.002, 'max_score': 23331.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw23331738.jpg'}, {'end': 23447.985, 'src': 'embed', 'start': 23415.188, 'weight': 10, 'content': [{'end': 23425.895, 'text': 'To access the exit selection from the data join, we can say circles.exit.remove to remove all of those circles.', 'start': 23415.188, 'duration': 10.707}, {'end': 23434.6, 'text': 'So now you can see that the circles are added, and then as that number gets decreased, the circles are actually removed from the DOM.', 'start': 23426.775, 'duration': 7.825}, {'end': 23442.545, 'text': 'And this is also done sort of automatically for you when you use this .join method.', 'start': 23435.441, 'duration': 7.104}, {'end': 23447.985, 'text': 'So as it decreases, boom, see, those circles are removed.', 'start': 23444.341, 'duration': 3.644}], 'summary': 'Using circles.exit.remove in data join removes circles from the dom as their number decreases.', 'duration': 32.797, 'max_score': 23415.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw23415188.jpg'}], 'start': 19358.503, 'title': 'Array methods and d3 data manipulation', 'summary': 'Discusses array methods such as .foreach, .filter, .sort, and the concept of comparator function, and covers array sorting, manipulation, reduce method, d3 selections, spreading out circles with math functions, and d3 data visualization, with practical examples and insights into d3 utility for array manipulation.', 'chapters': [{'end': 19819.751, 'start': 19358.503, 'title': 'Array methods in d3 community', 'summary': 'Discusses the usage and benefits of array methods such as .foreach, .filter, .sort, and the concept of comparator function in javascript, highlighting their functionality and practical applications in data manipulation and rendering in svg.', 'duration': 461.248, 'highlights': ['The .sort method in JavaScript is discussed, emphasizing its mutative nature and the use of a comparator function to define the sort order. The .sort method is highlighted for its mutative behavior in sorting arrays and the use of a comparator function to define the sort order, providing practical insights into its application in data manipulation and rendering in SVG.', 'The .filter method is explained, showcasing its utility in filtering array elements based on specific conditions, such as checking for even numbers. The .filter method is explained for its utility in filtering array elements based on specific conditions, such as checking for even numbers, demonstrating its practical use in data manipulation.', 'The .forEach method is introduced as a functional shorthand for writing verbose for loops, offering a more concise way of iterating through array elements. The .forEach method is introduced as a functional shorthand for writing verbose for loops, offering a more concise way of iterating through array elements, thereby improving code readability and maintainability.']}, {'end': 20722.361, 'start': 19819.751, 'title': 'Understanding array sorting and manipulation', 'summary': 'Covers the understanding of array sorting and manipulation using the compare function, and the usage of dot map and reduce functions, with practical examples and insights into d3 utility for array manipulation.', 'duration': 902.61, 'highlights': ['The Compare function should return less than zero if the first element is less than the second element, and zero if they are equal, and greater than zero if the first element is greater than the second element, with practical implementation using numbers for sorting.', 'The usage of dot map for manipulating arrays, such as multiplying each element by two and constructing objects, and its practical application in parsing dates and cleaning up fields from CSV files.', 'Insights into the reduce function for building up objects and summing all the numbers in the array, with a demonstration of the accumulator and current value usage and the impact of passing zero as the initial value.', 'Practical insights into D3 utility for array manipulation, including the ascending and descending functions for sorting and simplifying complex array manipulation logic.']}, {'end': 22017.118, 'start': 20723.201, 'title': 'Understanding reduce and d3 selections', 'summary': 'Discusses the functionality of the reduce method, showcasing its default behavior, and then proceeds to illustrate the use of reduce in constructing an object from an array. additionally, it delves into d3 selections, demonstrating the creation of an svg element and appending circles to it using the d3 data join.', 'duration': 1293.917, 'highlights': ['The chapter discusses the functionality of the reduce method, showcasing its default behavior. It explains the default behavior of the reduce method, demonstrating how it iterates through the array and performs the addition based on the array elements.', 'It illustrates the use of reduce in constructing an object from an array. The transcript details the usage of the reduce method to transform an array into an object, explaining the process of using reduce with an empty object as the initial value to achieve this transformation.', 'The chapter delves into D3 selections, demonstrating the creation of an SVG element and appending circles to it using the D3 data join. It explains the process of creating an SVG element, setting its width and height, and then proceeds to demonstrate the use of D3 data join to append circles to the SVG based on a given data array.']}, {'end': 22386.41, 'start': 22017.598, 'title': 'Spreading out circles with math functions', 'summary': 'Discusses spreading out circles using math functions in the x and y directions, multiplying values to vary the spread, and the importance of decoupling data processing from visualization for flexibility and reusability.', 'duration': 368.812, 'highlights': ['Spreading out circles in the X direction by using math functions and multiplying values to vary the spread, resulting in 15 circles nicely spread out with a noticeable impact when multiplying by 100, and then seeing the circles spread across the screen.', 'Utilizing the sine function to spread out circles, adjusting the speed of the sine wave by multiplying the input and slowing it down, and discussing the importance of decoupling data processing from visualization for flexibility and reusability.', 'Highlighting the importance of decoupling data processing from visualization for flexibility and reusability, and the challenges of tightly coupled rendering logic with embedded data processing, making it tough to port things to other frameworks.', 'Discussing the necessity of separating concerns of data manipulation and charting, and the potential issues of tightly coupled rendering logic affecting the accessibility and reusability of processed values.']}, {'end': 22862.296, 'start': 22386.47, 'title': 'D3 data visualization', 'summary': 'Discusses using the .map method to compute and access data, incorporating time-based animation using request animation frame and set interval, and addressing the challenge of setting coordinates for circles using the enter and update selections in d3 data visualization.', 'duration': 475.826, 'highlights': ['Using .map method to compute and access data The .map method is used to define properties X and Y for the input data D, allowing for direct visualization of the constructed data elements.', 'Incorporating time-based animation using request animation frame and set interval Discussion on incorporating time-based animation using request animation frame and set interval, with the use of the time variable and sine wave calculation to achieve animation in the D3 data visualization.', 'Addressing the challenge of setting coordinates for circles using the enter and update selections in D3 data visualization The challenge of setting coordinates for circles is addressed by utilizing the enter and update selections, discussing the need to set coordinates for circles on both the enter and update selections and the option to duplicate the logic to achieve this.']}, {'end': 23447.985, 'start': 22863.297, 'title': 'Understanding d3 merge and join', 'summary': 'Explains the importance of avoiding duplicated logic in d3 and introduces the concepts of merge and join for merging enter and update selections, along with a comparison of their differences, and a demonstration of the exit selection in the general update pattern.', 'duration': 584.688, 'highlights': ['The chapter emphasizes the importance of avoiding duplicated logic in D3 to prevent the need for changes in multiple places. Duplicated logic in D3 should be avoided at all costs to prevent the need for changes in multiple places.', 'The concept of merge in D3 is introduced as a way to merge the enter and update selections, creating a new selection that resolves to the enter selection with all the new circles on the first run, and to the update selection on subsequent runs. The merge in D3 creates a new selection that resolves to the enter selection with all the new circles on the first run and to the update selection on subsequent runs.', 'The explanation of the join in D3 is provided as a shorthand for the entire merging pattern, which internally creates the enter selection and appends tags of a specific type, and returns the merged enter and update selection, along with removing elements in the exit selection. Join in D3 is a shorthand for the entire merging pattern, creating the enter selection, appending tags of a specific type, returning the merged enter and update selection, and removing elements in the exit selection.', 'A demonstration of the exit selection in the general update pattern is showcased, illustrating the automatic removal of circles as the number of data elements decreases. The demonstration showcases the automatic removal of circles as the number of data elements decreases in the general update pattern, emphasizing the role of the exit selection.']}], 'duration': 4089.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw19358503.jpg', 'highlights': ['The .sort method in JavaScript is discussed, emphasizing its mutative nature and the use of a comparator function to define the sort order.', 'The .filter method is explained, showcasing its utility in filtering array elements based on specific conditions, such as checking for even numbers.', 'The .forEach method is introduced as a functional shorthand for writing verbose for loops, offering a more concise way of iterating through array elements.', 'Practical insights into D3 utility for array manipulation, including the ascending and descending functions for sorting and simplifying complex array manipulation logic.', 'Insights into the reduce function for building up objects and summing all the numbers in the array, with a demonstration of the accumulator and current value usage and the impact of passing zero as the initial value.', 'The chapter delves into D3 selections, demonstrating the creation of an SVG element and appending circles to it using the D3 data join.', 'Spreading out circles in the X direction by using math functions and multiplying values to vary the spread, resulting in 15 circles nicely spread out with a noticeable impact when multiplying by 100, and then seeing the circles spread across the screen.', 'Utilizing the sine function to spread out circles, adjusting the speed of the sine wave by multiplying the input and slowing it down, and discussing the importance of decoupling data processing from visualization for flexibility and reusability.', 'Using .map method to compute and access data The .map method is used to define properties X and Y for the input data D, allowing for direct visualization of the constructed data elements.', 'Incorporating time-based animation using request animation frame and set interval Discussion on incorporating time-based animation using request animation frame and set interval, with the use of the time variable and sine wave calculation to achieve animation in the D3 data visualization.', 'The chapter emphasizes the importance of avoiding duplicated logic in D3 to prevent the need for changes in multiple places.', 'The concept of merge in D3 is introduced as a way to merge the enter and update selections, creating a new selection that resolves to the enter selection with all the new circles on the first run, and to the update selection on subsequent runs.', 'The explanation of the join in D3 is provided as a shorthand for the entire merging pattern, which internally creates the enter selection and appends tags of a specific type, returning the merged enter and update selection, and removing elements in the exit selection.', 'A demonstration of the exit selection in the general update pattern is showcased, illustrating the automatic removal of circles as the number of data elements decreases.']}, {'end': 26278.808, 'segs': [{'end': 23883.031, 'src': 'embed', 'start': 23854.645, 'weight': 0, 'content': [{'end': 23857.626, 'text': "Actually, why not? I don't think we've discussed modules yet at all.", 'start': 23854.645, 'duration': 2.981}, {'end': 23861.086, 'text': "Yeah, I'd like to see that.", 'start': 23859.786, 'duration': 1.3}, {'end': 23861.927, 'text': "That'd be really cool.", 'start': 23861.146, 'duration': 0.781}, {'end': 23863.287, 'text': "Yeah, let's do it.", 'start': 23862.687, 'duration': 0.6}, {'end': 23866.948, 'text': "So I'm going to make a new file.", 'start': 23865.667, 'duration': 1.281}, {'end': 23872.509, 'text': "EJ, you want to do it at the same time again? You want to do make data and I'll do visdata? Yeah, that sounds good.", 'start': 23867.508, 'duration': 5.001}, {'end': 23876.45, 'text': "So I'll make a new file called visdata.js.", 'start': 23873.409, 'duration': 3.041}, {'end': 23883.031, 'text': "And then I'm just going to grab that stuff inside that function.", 'start': 23879.61, 'duration': 3.421}], 'summary': 'Discussion about creating a new file for modules and assigning tasks.', 'duration': 28.386, 'max_score': 23854.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw23854645.jpg'}, {'end': 24400.605, 'src': 'embed', 'start': 24353.676, 'weight': 3, 'content': [{'end': 24354.256, 'text': "That's the plan.", 'start': 24353.676, 'duration': 0.58}, {'end': 24364.289, 'text': "Let me pull up next week's last week's exercises here.", 'start': 24361.007, 'duration': 3.282}, {'end': 24382.563, 'text': "Alright, here's last week's forum post.", 'start': 24377.199, 'duration': 5.364}, {'end': 24384.464, 'text': "Let's see what we've got.", 'start': 24383.503, 'duration': 0.961}, {'end': 24385.785, 'text': 'This is so cool.', 'start': 24384.984, 'duration': 0.801}, {'end': 24386.645, 'text': 'Double harmonic.', 'start': 24385.845, 'duration': 0.8}, {'end': 24387.166, 'text': 'Look at this.', 'start': 24386.786, 'duration': 0.38}, {'end': 24400.605, 'text': 'It is a double pendulum inspired by Sisyphus table? Not sure what that is, but sounds cool.', 'start': 24390.839, 'duration': 9.766}], 'summary': "Reviewing last week's exercises and forum post to discuss a double harmonic, inspired by a sisyphus table.", 'duration': 46.929, 'max_score': 24353.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw24353676.jpg'}, {'end': 24495.142, 'src': 'embed', 'start': 24447.623, 'weight': 1, 'content': [{'end': 24448.343, 'text': "That's pretty wild.", 'start': 24447.623, 'duration': 0.72}, {'end': 24458.034, 'text': 'Wow, very cool.', 'start': 24457.254, 'duration': 0.78}, {'end': 24460.316, 'text': 'Very cool.', 'start': 24459.756, 'duration': 0.56}, {'end': 24462.958, 'text': 'Yeah, wgloss.', 'start': 24462.217, 'duration': 0.741}, {'end': 24466.3, 'text': 'Nice work, wgloss.', 'start': 24464.819, 'duration': 1.481}, {'end': 24475.167, 'text': "Let's see what else have we got?", 'start': 24473.946, 'duration': 1.221}, {'end': 24484.255, 'text': 'Oh, there was a question actually like oh, I just cannot get this running locally, which is like okay, yes,', 'start': 24477.33, 'duration': 6.925}, {'end': 24486.236, 'text': "now it's time I have to talk about how to do that.", 'start': 24484.255, 'duration': 1.981}, {'end': 24490.159, 'text': "So we'll address all of this stuff today for sure.", 'start': 24486.376, 'duration': 3.783}, {'end': 24495.142, 'text': "Oh, some new stuff I haven't even seen yet.", 'start': 24493.601, 'duration': 1.541}], 'summary': 'Discussion on addressing technical issues and exploring new material.', 'duration': 47.519, 'max_score': 24447.623, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw24447623.jpg'}, {'end': 24684.212, 'src': 'embed', 'start': 24646.838, 'weight': 4, 'content': [{'end': 24664.587, 'text': 'But my first pass was just to try and think about it separately and then use the join method to handle all the syncing up all the DOM elements with all the data.', 'start': 24646.838, 'duration': 17.749}, {'end': 24674.985, 'text': 'But that line generator is really awesome because it just generates that complicated D string Right.', 'start': 24667.309, 'duration': 7.676}, {'end': 24684.212, 'text': "You know, what's happening here is it's creating a path for each and every element of the array.", 'start': 24677.747, 'duration': 6.465}], 'summary': 'Using the join method for syncing dom elements and line generator for creating paths for array elements.', 'duration': 37.374, 'max_score': 24646.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw24646838.jpg'}, {'end': 24993.947, 'src': 'embed', 'start': 24909.341, 'weight': 2, 'content': [{'end': 24918.503, 'text': 'And this is the most straightforward, you know, maybe simplest way to include JavaScript in an HTML page.', 'start': 24909.341, 'duration': 9.162}, {'end': 24924.945, 'text': 'You use a script tag and then inside of that script tag you can put arbitrary JavaScript.', 'start': 24918.903, 'duration': 6.042}, {'end': 24927.986, 'text': 'But, as you see,', 'start': 24926.345, 'duration': 1.641}, {'end': 24940.955, 'text': "when we write a lot of code it ends up getting very large and there may be more stuff in index.html and then pretty soon you're at like 100 lines,", 'start': 24927.986, 'duration': 12.969}, {'end': 24941.496, 'text': '200 lines, 500 lines.', 'start': 24940.955, 'duration': 0.541}, {'end': 24946.198, 'text': "In my various work, I've seen HTML files that are 1,000 lines or 2,000 lines of code, which is just..", 'start': 24941.516, 'duration': 4.682}, {'end': 24958.948, 'text': "it's unwieldy.", 'start': 24958.228, 'duration': 0.72}, {'end': 24965.21, 'text': 'So there becomes a need to split the files up.', 'start': 24959.909, 'duration': 5.301}, {'end': 24968.151, 'text': "So here's one way to split the files up.", 'start': 24966.051, 'duration': 2.1}, {'end': 24971.972, 'text': 'You can take the JavaScript, create a new file.', 'start': 24968.791, 'duration': 3.181}, {'end': 24982.556, 'text': "Let's, I don't know, I'll call it script.js just as a silly example name.", 'start': 24973.033, 'duration': 9.523}, {'end': 24993.947, 'text': 'And then we can remove the stuff in that script tag there.', 'start': 24987.543, 'duration': 6.404}], 'summary': 'Including javascript in html using script tags can lead to unwieldy large code files, with some reaching 1000 or 2000 lines, necessitating the need to split the files up.', 'duration': 84.606, 'max_score': 24909.341, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw24909341.jpg'}], 'start': 23449.066, 'title': 'Javascript and d3 techniques', 'summary': 'Covers d3 data joins, method chaining, venn diagram computation, vanilla javascript for data processing, es6 modules, javascript inclusion in html, es6 module bundling, and using d3 library via cdn.', 'chapters': [{'end': 23817.076, 'start': 23449.066, 'title': 'Understanding d3 data joins', 'summary': 'Explores d3 data joins, method chaining, and the association of data elements to dom elements, providing insights on the venn diagram computation and the use of vanilla javascript for data processing and rendering logic.', 'duration': 368.01, 'highlights': ['D3 associates the data elements to the DOM elements and computes the Venn diagram internally by inspecting and comparing the data and the DOM elements. D3 associates data elements to DOM elements and internally computes the Venn diagram by inspecting and comparing data and DOM elements.', 'The concept of method chaining is discussed, drawing parallels to jQuery and emphasizing its role in separating data processing and display logic. The discussion includes the concept of method chaining, drawing parallels to jQuery, and emphasizing its role in separating data processing and display logic.', 'The chapter also mentions the use of vanilla JavaScript for producing data and accessing properties in the rendering logic, highlighting the potential for varying radius and abstracting functions for clean, readable code. The use of vanilla JavaScript for producing data and accessing properties in the rendering logic is highlighted, indicating the potential for varying radius and abstracting functions for clean, readable code.']}, {'end': 24751.32, 'start': 23819.316, 'title': 'Javascript modules and building tools', 'summary': 'Discusses the implementation of javascript modules, particularly es6 modules, and the use of d3 to create visualizations with detailed examples and explanations. it also covers the process of including javascript in html, reviewing exercise submissions, and exploring tools like rollup, webpack, and github for code management and hosting.', 'duration': 932.004, 'highlights': ['The process of implementing JavaScript modules, particularly ES6 modules, and the use of D3 to create visualizations. The discussion includes creating new files, exporting named modules, importing modules, and using selection.call in D3 for scalable codebases.', 'Reviewing exercise submissions and exploring tools like Rollup, Webpack, and GitHub for code management and hosting. The review includes examples of exercise submissions, such as double pendulum, transitions, and connecting circles using the path element in D3. The chapter also plans to cover the use of Rollup, Webpack, and GitHub for code management and hosting.', 'The significance of JavaScript modules, particularly ES6 modules, and the process of including JavaScript in HTML. The chapter emphasizes the importance of JavaScript modules and discusses various ways to include JavaScript in HTML, providing a comprehensive understanding of JavaScript module implementation.']}, {'end': 25120.394, 'start': 24751.64, 'title': 'Javascript inclusion in html', 'summary': 'Discusses the inclusion of javascript in html, starting with the straightforward method of using a script tag, then highlighting the need to split files and the issues that may arise with managing multiple script files on the page.', 'duration': 368.754, 'highlights': ['The chapter discusses the inclusion of JavaScript in HTML The chapter provides insights into including JavaScript in HTML using the script tag and the src attribute, as well as the challenges and need for splitting files.', 'The need to split the files up for managing large codebases The transcript emphasizes the need to split JavaScript files to manage unwieldy code, using the example of creating a new file called script.js and including it into the HTML page.', 'Challenges of managing multiple script files on the page The chapter highlights the challenge of manually keeping track of dependencies between multiple script files and the need for topological sorting to ensure correct ordering.']}, {'end': 25735.041, 'start': 25121.255, 'title': 'Es6 modules and bundling', 'summary': "Explains how es6 modules work, including the use of import and export statements, the creation of bundle.js using rollup, and the distinction between named exports and default exports, resulting in the cumulative output of 'hello, a planet earth'.", 'duration': 613.786, 'highlights': ['ES6 modules allow the use of import and export statements, enabling the creation of bundle.js by Rollup, which combines multiple modules together.', 'Bundle.js is automatically generated from index.js and includes everything that index.js imports, as well as the things imported by index.js.', 'The distinction between named exports and default exports is explained, showcasing the ability to export multiple named exports or only one default export, with examples demonstrating the usage of both.', "The cumulative output of the module is demonstrated as 'hello, a planet Earth', showcasing the practical application of ES6 modules and bundling using Rollup."]}, {'end': 26278.808, 'start': 25735.041, 'title': 'Using d3 library via content delivery network', 'summary': "Discusses the process of loading the d3 library from a content delivery network (cdn) like unpackage, which allows one to access the latest version of d3 (6.6.2) via a minified build, leveraging browser globals and es6 import syntax in vizhub's rollup configuration while emphasizing the importance of the order of script tag placement.", 'duration': 543.767, 'highlights': ['The process of loading the D3 library from a content delivery network (CDN) like Unpackage The chapter emphasizes the usage of Unpackage, a content delivery network, to load the D3 library onto the page, allowing access to the latest version (6.6.2) through a minified build.', "Leveraging browser globals and ES6 import syntax in VizHub's rollup configuration VizHub's rollup configuration enables the usage of both browser globals and ES6 import syntax for packages, facilitating the import of named exports from D3, such as 'select', while resolving package names to browser globals.", 'Emphasizing the importance of the order of script tag placement The chapter underscores the significance of the order of script tag placement, highlighting that the script tag for bundle.js assumes the presence of a browser global called D3, and if D3 is included after bundle.js, it will not work.']}], 'duration': 2829.742, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw23449066.jpg', 'highlights': ['D3 associates data elements to DOM elements and internally computes the Venn diagram by inspecting and comparing data and DOM elements.', 'The concept of method chaining is discussed, drawing parallels to jQuery and emphasizing its role in separating data processing and display logic.', 'The process of implementing JavaScript modules, particularly ES6 modules, and the use of D3 to create visualizations.', 'The chapter discusses the inclusion of JavaScript in HTML using the script tag and the src attribute, as well as the challenges and need for splitting files.', 'ES6 modules allow the use of import and export statements, enabling the creation of bundle.js by Rollup, which combines multiple modules together.', 'The process of loading the D3 library from a content delivery network (CDN) like Unpackage.', 'The chapter emphasizes the usage of Unpackage, a content delivery network, to load the D3 library onto the page, allowing access to the latest version (6.6.2) through a minified build.']}, {'end': 28881.428, 'segs': [{'end': 26348.615, 'src': 'embed', 'start': 26317.64, 'weight': 4, 'content': [{'end': 26323.746, 'text': 'Yeah, internally, rollup, I mean if you have this dependency graph of modules,', 'start': 26317.64, 'duration': 6.106}, {'end': 26333.562, 'text': 'Rollup knows internally that the stuff in thing must come before the stuff in something, because something imports from thing.', 'start': 26325.194, 'duration': 8.368}, {'end': 26341.308, 'text': 'And also it knows that the stuff in something must come before the stuff in index.js inside bundle.js.', 'start': 26334.142, 'duration': 7.166}, {'end': 26348.615, 'text': "So that's why it has done this correct ordering using the topological sort algorithm internally.", 'start': 26341.689, 'duration': 6.926}], 'summary': 'Rollup uses topological sort algorithm to correctly order dependencies internally.', 'duration': 30.975, 'max_score': 26317.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw26317640.jpg'}, {'end': 26485.428, 'src': 'embed', 'start': 26449.463, 'weight': 3, 'content': [{'end': 26464.772, 'text': 'And yarn is arguably more efficient, faster, better, but it also pulls the packages out of the NPM package manager database system cloud thing.', 'start': 26449.463, 'duration': 15.309}, {'end': 26468.274, 'text': 'So in a sense, you know, NPM and YARN are not that different.', 'start': 26465.252, 'duration': 3.022}, {'end': 26469.976, 'text': "They're pretty much equivalent tools.", 'start': 26468.715, 'duration': 1.261}, {'end': 26475.58, 'text': 'And Rollup is a module bundler.', 'start': 26472.217, 'duration': 3.363}, {'end': 26483.286, 'text': 'And Rollup has peers in this ecosystem like Webpack, Parcel, Snowpack recently.', 'start': 26476.561, 'duration': 6.725}, {'end': 26485.428, 'text': 'But Rollup is pretty nice.', 'start': 26484.427, 'duration': 1.001}], 'summary': 'Yarn and npm are equivalent tools. rollup is a nice module bundler.', 'duration': 35.965, 'max_score': 26449.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw26449463.jpg'}, {'end': 26802.953, 'src': 'embed', 'start': 26772.843, 'weight': 0, 'content': [{'end': 26777.007, 'text': 'Is bundle.js used there in index.js? Yes.', 'start': 26772.843, 'duration': 4.164}, {'end': 26779.048, 'text': "It's there now because I added it.", 'start': 26777.787, 'duration': 1.261}, {'end': 26783.172, 'text': "If it's not there, vishub does some magic and it inserts that exact thing.", 'start': 26779.409, 'duration': 3.763}, {'end': 26785.414, 'text': "So that's what's happening there.", 'start': 26783.992, 'duration': 1.422}, {'end': 26794.249, 'text': "And then Yeah, you can give the default export of a module any name when you're importing it.", 'start': 26787.655, 'duration': 6.594}, {'end': 26794.809, 'text': "That's true.", 'start': 26794.289, 'duration': 0.52}, {'end': 26795.289, 'text': "That's true.", 'start': 26794.889, 'duration': 0.4}, {'end': 26796.25, 'text': "That's why it's confusing.", 'start': 26795.329, 'duration': 0.921}, {'end': 26802.953, 'text': "How is index.js included since I don't see it in index.html? Oh, yeah.", 'start': 26797.63, 'duration': 5.323}], 'summary': 'Bundle.js included in index.js, with vishub inserting if not present. default export can have any name when importing. index.js inclusion not seen in index.html.', 'duration': 30.11, 'max_score': 26772.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw26772843.jpg'}, {'end': 26968.842, 'src': 'embed', 'start': 26936.772, 'weight': 1, 'content': [{'end': 26939.754, 'text': "I mean, I'm very comfortable with the command line and everything.", 'start': 26936.772, 'duration': 2.982}, {'end': 26943.736, 'text': 'But you may want to use GUI, you may be in Windows, you may be in Mac.', 'start': 26940.254, 'duration': 3.482}, {'end': 26953.751, 'text': "So the place where we're going is fraught with peril, because everybody has a different setup, a different system,", 'start': 26944.336, 'duration': 9.415}, {'end': 26956.033, 'text': 'different IDE text editor that you use.', 'start': 26953.751, 'duration': 2.282}, {'end': 26960.816, 'text': 'VS Code is most popular, I think, nowadays, but I like to use Vim.', 'start': 26956.854, 'duration': 3.962}, {'end': 26962.097, 'text': "Doesn't matter.", 'start': 26961.537, 'duration': 0.56}, {'end': 26968.842, 'text': 'Once we have this zip file, we can hit extract.', 'start': 26964.539, 'duration': 4.303}], 'summary': 'Users have varied setups and preferences, including different operating systems and text editors. despite differences, they can extract zip files using gui or command line.', 'duration': 32.07, 'max_score': 26936.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw26936772.jpg'}, {'end': 27558.573, 'src': 'embed', 'start': 27518.771, 'weight': 2, 'content': [{'end': 27522.314, 'text': 'So now if we if we run that build script, again, it still works.', 'start': 27518.771, 'duration': 3.543}, {'end': 27524.675, 'text': 'It generates bundle.js.', 'start': 27523.354, 'duration': 1.321}, {'end': 27528.558, 'text': 'And there it is bundle.js.', 'start': 27527.357, 'duration': 1.201}, {'end': 27545.445, 'text': 'How would you run this locally if you wanted to actually develop? Well, you would need to use an HTTP server to serve the file locally.', 'start': 27532.958, 'duration': 12.487}, {'end': 27556.011, 'text': 'You could maybe get away with not doing that by just double-clicking on index.html.', 'start': 27549.848, 'duration': 6.163}, {'end': 27558.573, 'text': 'Yeah, in this case it works.', 'start': 27557.392, 'duration': 1.181}], 'summary': 'The build script generates bundle.js and can be run locally with an http server or by double-clicking on index.html.', 'duration': 39.802, 'max_score': 27518.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw27518771.jpg'}], 'start': 26280.029, 'title': 'Understanding tools and development workflow', 'summary': 'Covers understanding dependency graphs in rollup, differences between npm and yarn, project setup with vite and npm, local development environment setup, and rollup starter app features.', 'chapters': [{'end': 26341.308, 'start': 26280.029, 'title': 'Understanding dependency graphs in rollup', 'summary': 'Discusses the hierarchical nature of dependency graphs in rollup, highlighting the distinction between tree and graph structures, and the internal knowledge of rollup regarding module dependencies and their order.', 'duration': 61.279, 'highlights': ['Rollup internally knows the order of modules in the dependency graph, ensuring that modules are included in the correct order, which impacts the final bundle.js.', 'The data structure in Rollup is not hierarchical; it is a directed acyclic graph, with Rollup understanding the dependencies between modules and their order within the bundle.js.', "The correct ordering of modules, such as 'thing' before 'something', is crucial for the functionality of the final bundle.js."]}, {'end': 26827.006, 'start': 26341.689, 'title': 'Understanding npm, yarn, rollup, and module bundlers', 'summary': 'Discusses the differences between npm and yarn as package managers, the role of rollup as a module bundler, and the advantages of using named exports over default exports in javascript modules.', 'duration': 485.317, 'highlights': ['The role of NPM and Yarn as package managers and the similarities between them. NPM and Yarn are both package managers that allow publishing and retrieving modules, with Yarn being considered more efficient and faster.', 'Explanation of the difference between package managers and module bundlers. A package manager is a repository of packages, while a module bundler is a tool that generates a bundle from locally installed packages.', 'Advantages of using named exports over default exports in JavaScript modules. Using named exports can avoid confusion caused by mismatched names when using default exports and imports, leading to clearer code and easier navigation.']}, {'end': 27308.807, 'start': 26828.487, 'title': 'Setting up a project with vite and npm', 'summary': 'Discusses the intention of tools like vite, webpack, rollup, snowpack, and parcel to simplify code authoring and setting up projects, demonstrating the process of setting up a project locally using vizhub export feature, exploring package.json and the dependencies setup, and explaining the concept of transitive dependencies and npm install process.', 'duration': 480.32, 'highlights': ['The intention of Vite, Webpack, Rollup, Snowpack, Parcel, and similar tools is to simplify code authoring and project setup, abstracting away complexities of generating bundles and including them in HTML (e.g., VizHub export feature).', 'The process of setting up a project locally involves using the VizHub export feature to obtain a zip file containing various files, creating a directory, and then extracting the zip file contents into the directory (e.g., creating a directory named example and extracting the files into it).', 'Package.json defines project dependencies and their versions using semantic versioning (semver), allowing the npm install process to install the required dependencies, resulting in the creation of a node_modules directory containing direct and transitive dependencies.', 'The npm install process uses the package.json file to determine the necessary dependencies to install, resulting in the creation of a node_modules directory containing the required packages and their transitive dependencies (e.g., npm install command installing dependencies specified in package.json).', 'Transitive dependencies refer to the dependencies of project dependencies, leading to the inclusion of all transitive dependencies in the node_modules directory, demonstrating the concept of dependencies of dependencies and their cascading inclusion during the npm install process.']}, {'end': 27893.401, 'start': 27308.807, 'title': 'Setting up local development environment', 'summary': 'Discusses setting up a local development environment, including using npm scripts to build bundle.js locally, running an http server for local hosting, and addressing issues like caching and automatic refresh.', 'duration': 584.594, 'highlights': ['Using npm scripts to build bundle.js locally The transcript explains how npm scripts can be used to build bundle.js locally, invoking rollup to create bundle.js from index.js.', 'Running an HTTP server for local hosting The speaker demonstrates using http-server, an npm package, to create a local server for hosting the web page, and provides details on accessing the server via a specific URL and port number.', 'Addressing caching issues in local development The chapter offers insights into caching issues in local development, including the browser cache and a recommendation to disable caching using the Chrome DevTools Network tab.', 'Automatic refresh feature in viz hub The speaker contrasts the local setup with viz hub, highlighting the automatic refresh feature in viz hub that instantly generates bundle.js and reruns the program upon making changes.']}, {'end': 28881.428, 'start': 27894.542, 'title': 'Rollup starter app and development workflow', 'summary': 'Discusses using rollup starter app as a project template, showcasing its features such as serving, automatic bundle rebuilding, and adding dependencies, while highlighting the trade-offs of including dependencies in the bundle and the lack of automatic page refreshing.', 'duration': 986.886, 'highlights': ['Rollup Starter App has additional scripts such as start, build, watch, and dev, facilitating serving, automatic bundle rebuilding, and development workflow. It has start for serving, build for building, watch for automatic bundle rebuilding, and dev for development.', "The process of adding dependencies like D3 involves updating the package.json using the command 'npm install --save d3', which installs the dependency and updates the package.json. Running 'npm install --save d3' adds D3 as a dependency in the package.json and installs it in the node_modules directory.", 'Including dependencies inside bundle.js leads to a larger file size, requiring minification to reduce the bundle size. Dependencies being included inside bundle.js results in a larger file size, such as 76 kilobytes, necessitating minification to reduce the bundle size.', 'Rollup Starter App does not automatically refresh the page upon code changes, prompting the need to manually refresh the page. Changes to the code prompt automatic bundle generation but not page refresh, necessitating manual page refreshing.']}], 'duration': 2601.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw26280029.jpg', 'highlights': ['Rollup internally knows the order of modules in the dependency graph, ensuring correct inclusion in bundle.js.', 'Vite, Webpack, Rollup, Snowpack, Parcel aim to simplify code authoring and project setup.', 'Using named exports over default exports in JavaScript modules can lead to clearer code and easier navigation.', 'The npm install process installs required dependencies, resulting in the creation of a node_modules directory.', 'Rollup Starter App has additional scripts for serving, automatic bundle rebuilding, and development workflow.']}, {'end': 39333.135, 'segs': [{'end': 29773.563, 'src': 'embed', 'start': 29660.371, 'weight': 1, 'content': [{'end': 29666.876, 'text': 'git add makes sure that all the changes you made are sort of staged to be added to a commit.', 'start': 29660.371, 'duration': 6.505}, {'end': 29669.538, 'text': 'And then git commit dash m.', 'start': 29667.997, 'duration': 1.541}, {'end': 29686.438, 'text': 'add links to readme and then finally, git push.', 'start': 29673.954, 'duration': 12.484}, {'end': 29710.105, 'text': 'git push will push up the changes that you made into the repository in GitHub, So back in GitHub.', 'start': 29686.438, 'duration': 23.667}, {'end': 29713.897, 'text': 'if we refresh the page, we should see this new stuff.', 'start': 29710.105, 'duration': 3.792}, {'end': 29723.459, 'text': 'The language of the README file, by the way, is Markdown.', 'start': 29720.478, 'duration': 2.981}, {'end': 29727.241, 'text': 'It renders to HTML and looks like this.', 'start': 29724.26, 'duration': 2.981}, {'end': 29728.642, 'text': 'So now you see these are links.', 'start': 29727.301, 'duration': 1.341}, {'end': 29736.306, 'text': 'But in the original text, you know, this big heading is just a hash.', 'start': 29729.642, 'duration': 6.664}, {'end': 29741.128, 'text': 'And you can make the bulleted list with these asterisks.', 'start': 29737.146, 'duration': 3.982}, {'end': 29768.832, 'text': "All right, now that we've got this far, I'm going to start by pulling in those node scripts.", 'start': 29764.181, 'duration': 4.651}, {'end': 29773.563, 'text': "And then after that's done, we'll pull in the front-end code that makes the visualization.", 'start': 29769.072, 'duration': 4.491}], 'summary': 'Using git, add, commit, and push changes to github, refresh to see new content, readme file in markdown with html rendering.', 'duration': 113.192, 'max_score': 29660.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw29660371.jpg'}, {'end': 30234.298, 'src': 'embed', 'start': 30189.938, 'weight': 4, 'content': [{'end': 30193.262, 'text': "Okay, the main thing that's missing at this point is the data itself.", 'start': 30189.938, 'duration': 3.324}, {'end': 30198.907, 'text': 'The data is currently hosted in a gist, and the vis pulls it down from that gist.', 'start': 30193.822, 'duration': 5.085}, {'end': 30207.917, 'text': "But as we're unifying things, we'd like to make the visualization code pull the data from this repository somewhere.", 'start': 30199.568, 'duration': 8.349}, {'end': 30234.298, 'text': 'scratch that whole segment.', 'start': 30233.217, 'duration': 1.081}], 'summary': 'Data needs to be pulled from repository for visualization code.', 'duration': 44.36, 'max_score': 30189.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw30189938.jpg'}, {'end': 30722.107, 'src': 'embed', 'start': 30671.661, 'weight': 7, 'content': [{'end': 30672.582, 'text': 'rather than import.', 'start': 30671.661, 'duration': 0.921}, {'end': 30687.513, 'text': 'If we say require dot slash clone, that should pull in the stuff from this clone file over here.', 'start': 30679.407, 'duration': 8.106}, {'end': 30696.339, 'text': "I'll call it clone when we import it.", 'start': 30687.533, 'duration': 8.806}, {'end': 30701.043, 'text': 'But the thing is, this is currently a script.', 'start': 30698.541, 'duration': 2.502}, {'end': 30716.686, 'text': "So, instead of just running a script, I'm going to define a function called clone,", 'start': 30705.923, 'duration': 10.763}, {'end': 30722.107, 'text': 'which is a function that just goes through each of the dependencies and clones them.', 'start': 30716.686, 'duration': 5.421}], 'summary': "Using 'require' to pull in content from a file, defining a function called 'clone' to clone dependencies.", 'duration': 50.446, 'max_score': 30671.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw30671661.jpg'}, {'end': 31765.743, 'src': 'embed', 'start': 31695.477, 'weight': 10, 'content': [{'end': 31696.398, 'text': "Let's see if that works.", 'start': 31695.477, 'duration': 0.921}, {'end': 31713.586, 'text': "It seems to have worked, but I don't really like how we don't know what it's doing.", 'start': 31708.184, 'duration': 5.402}, {'end': 31723.379, 'text': "So I'm going to add a little bit of console.log Cloning dot dot dot.", 'start': 31713.606, 'duration': 9.773}, {'end': 31731.182, 'text': 'Knifing dot dot dot.', 'start': 31728.941, 'duration': 2.241}, {'end': 31742.086, 'text': 'Converting to JSON dot dot dot.', 'start': 31736.844, 'duration': 5.242}, {'end': 31747.767, 'text': "That's a little more user-friendly.", 'start': 31745.347, 'duration': 2.42}, {'end': 31749.328, 'text': "I sort of know what's happening.", 'start': 31747.787, 'duration': 1.541}, {'end': 31760.682, 'text': 'And lastly, we need to combine the output file.', 'start': 31752.921, 'duration': 7.761}, {'end': 31765.743, 'text': 'Dot, dot, dot.', 'start': 31764.943, 'duration': 0.8}], 'summary': 'Added console logs for user-friendly output and combined output file.', 'duration': 70.266, 'max_score': 31695.477, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw31695477.jpg'}, {'end': 32501.817, 'src': 'embed', 'start': 32449.023, 'weight': 8, 'content': [{'end': 32453.407, 'text': "And I might as well move that up to where it's imported.", 'start': 32449.023, 'duration': 4.384}, {'end': 32474.76, 'text': "Okay, so let's organize this code here.", 'start': 32472.358, 'duration': 2.402}, {'end': 32478.562, 'text': "We've got parseDate and layer, which are statically defined.", 'start': 32474.8, 'duration': 3.762}, {'end': 32480.603, 'text': "So I'll pull those out.", 'start': 32479.282, 'duration': 1.321}, {'end': 32484.366, 'text': 'Transform data equals data.', 'start': 32482.545, 'duration': 1.821}, {'end': 32489.069, 'text': "Well, we don't need that because we're already inside of a function that has data there visible.", 'start': 32484.586, 'duration': 4.483}, {'end': 32501.817, 'text': 'All this stuff should run just fine.', 'start': 32498.915, 'duration': 2.902}], 'summary': 'Code organization: static variables pulled out, unnecessary code removed', 'duration': 52.794, 'max_score': 32449.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw32449023.jpg'}, {'end': 32830.119, 'src': 'embed', 'start': 32685.353, 'weight': 6, 'content': [{'end': 32706.767, 'text': "And the file name, I think I'll just call it aggregated data dot JSON.", 'start': 32685.353, 'duration': 21.414}, {'end': 32729.929, 'text': 'Now if I run everything, we have a new file called aggregated data dot JSON.', 'start': 32713.033, 'duration': 16.896}, {'end': 32737.48, 'text': "It contains a bunch of zeros, but I think that's OK.", 'start': 32734.514, 'duration': 2.966}, {'end': 32821.788, 'text': "Amen Each of these numbers corresponds to a week, but you wouldn't know that based on this data.", 'start': 32790.589, 'duration': 31.199}, {'end': 32830.119, 'text': 'In our code, the weeks are available here as all weeks.', 'start': 32827.555, 'duration': 2.564}], 'summary': "Aggregated data file 'aggregated_data.json' created, containing zeros for each week.", 'duration': 144.766, 'max_score': 32685.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw32685353.jpg'}, {'end': 33596.706, 'src': 'embed', 'start': 33520.35, 'weight': 9, 'content': [{'end': 33524.513, 'text': 'We have aggregated data dot JSON visible, which is only 30 kilobytes.', 'start': 33520.35, 'duration': 4.163}, {'end': 33527.474, 'text': 'So I feel good about adding all this stuff.', 'start': 33525.313, 'duration': 2.161}, {'end': 33533.118, 'text': "And then I'll make a commit.", 'start': 33527.495, 'duration': 5.623}, {'end': 33537.801, 'text': 'Add aggregated data.', 'start': 33536.5, 'duration': 1.301}, {'end': 33564.872, 'text': "All right, now that we've scratched that.", 'start': 33563.232, 'duration': 1.64}, {'end': 33581.478, 'text': 'All right.', 'start': 33581.078, 'duration': 0.4}, {'end': 33585.059, 'text': 'Scratch that.', 'start': 33584.579, 'duration': 0.48}, {'end': 33596.706, 'text': "Now that we've got the data processing scripts sorted out, let's deal with the front-end code.", 'start': 33590.544, 'duration': 6.162}], 'summary': 'Aggregated 30kb json data added, focusing on front-end code next.', 'duration': 76.356, 'max_score': 33520.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw33520350.jpg'}, {'end': 36263.56, 'src': 'embed', 'start': 36048.762, 'weight': 0, 'content': [{'end': 36074.132, 'text': "I think what used to be called grouped data is now called something else, but no, that's actually not the case.", 'start': 36048.762, 'duration': 25.37}, {'end': 36078.393, 'text': 'what we have is layer data.', 'start': 36074.132, 'duration': 4.261}, {'end': 36089.478, 'text': 'yeah, I remember, this stuff is actually in our data processing script in the aggregate step.', 'start': 36078.393, 'duration': 11.085}, {'end': 36094.54, 'text': "yeah, so what we're doing is we're saving layer data to the file,", 'start': 36089.478, 'duration': 5.062}, {'end': 36112.341, 'text': 'so we can just get layer data out of the file by saying data.repositories at layer like that.', 'start': 36094.54, 'duration': 17.801}, {'end': 36123.706, 'text': "OK, let's see if that worked.", 'start': 36122.486, 'duration': 1.22}, {'end': 36127.028, 'text': 'All weeks is not defined.', 'start': 36125.927, 'duration': 1.101}, {'end': 36134.621, 'text': 'Yeah, I think we changed that to be called dates.', 'start': 36131.178, 'duration': 3.443}, {'end': 36143.948, 'text': 'T is not an iterable.', 'start': 36142.887, 'duration': 1.061}, {'end': 36178.917, 'text': 'Hmm Thank you.', 'start': 36144.529, 'duration': 34.388}, {'end': 36234.626, 'text': "Okay, it says T is not an iterable, and if we follow the code, it's when it tries to compute extent of data.", 'start': 36226.897, 'duration': 7.729}, {'end': 36238.69, 'text': 'Apparently data is not an iterable.', 'start': 36235.747, 'duration': 2.943}, {'end': 36244.077, 'text': "So let's see, we just need to connect the dots.", 'start': 36241.834, 'duration': 2.243}, {'end': 36263.56, 'text': 'Data, I believe, was the original data.', 'start': 36259.537, 'duration': 4.023}], 'summary': "Processing script saves layer data, but encounters issues with 't' and 'data'.", 'duration': 214.798, 'max_score': 36048.762, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw36048762.jpg'}, {'end': 39229.523, 'src': 'embed', 'start': 39203.489, 'weight': 5, 'content': [{'end': 39214.916, 'text': 'So when we have a data value and we want to project it onto the screen, We give this scale a value from the domain,', 'start': 39203.489, 'duration': 11.427}, {'end': 39218.998, 'text': 'and what the scale does is it gives us as output a value in the range.', 'start': 39214.916, 'duration': 4.082}, {'end': 39229.523, 'text': 'For example, if we were to have the number 5 in our data, we could say, okay, Mr. ScaleLinear, my data value is 5.', 'start': 39219.918, 'duration': 9.605}], 'summary': 'Using scalelinear to project data onto screen for visualization.', 'duration': 26.034, 'max_score': 39203.489, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw39203489.jpg'}], 'start': 28881.768, 'title': 'Exploring webpack, github setup, and data processing with d3', 'summary': 'Covers options of rollup, webpack, snowpack, and vite for local development, setting up a github repository, exporting vizhub project to github, data processing, and creating d3 visualizations. it also highlights the benefits of snowpack and vite, github pages hosting, and using async/await for promise handling.', 'chapters': [{'end': 28972.072, 'start': 28881.768, 'title': 'Choosing between rollup, webpack, snowpack, and vite', 'summary': 'Discusses the options of rollup, webpack, snowpack, and vite for local development, with a suggestion to start with rollup and the mention of the potential benefits of snowpack and vite.', 'duration': 90.304, 'highlights': ['The options of Rollup, Webpack, Snowpack, and Vite were discussed for local development, with a suggestion to start with Rollup.', 'Snowpack and Vite were mentioned as new options that claim to be better than existing tools.', 'The speaker suggested Rollup as their go-to tool for local development.']}, {'end': 30282.555, 'start': 28972.412, 'title': 'Setting up github repository and using webpack', 'summary': 'Discusses setting up a github repository, using webpack to bootstrap a project, and exporting vizhub code to github, along with the process of making commits, and pushing changes to the repository, preparing for visualizations using d3.', 'duration': 1310.143, 'highlights': ['The chapter discusses setting up a GitHub repository and using webpack to bootstrap a project. The speaker plans to resume the streams on the 24th to walk through setting up a GitHub repository and using webpack to bootstrap a project.', 'The chapter covers the process of exporting VizHub code to a GitHub repository and making commits, and pushing changes to the repository. The speaker explains the process of exporting VizHub code to a GitHub repository, adding links to the README file, making the first commit, and pushing changes to the repository.', 'The chapter outlines the process of preparing for visualizations using D3. The speaker discusses the process of preparing for visualizations using D3, including pulling in node scripts and front-end code for the visualization.']}, {'end': 32945.528, 'start': 30287.952, 'title': 'Exporting and hosting a vizhub project on github', 'summary': 'Details the process of exporting a vizhub project to a github repository, enabling hosting with github pages, and modifying node scripts for data processing.', 'duration': 2657.576, 'highlights': ['Process of exporting a VizHub project to a GitHub repository and enabling hosting with GitHub pages The process involves turning on hosting for the main branch, modifying the path, refreshing the site, and preparing the code base for coherent hosting. The site is published and ready to be accessed at a specific URL.', 'Modifying node scripts for data processing The focus is on improving the node scripts, including cloning repositories, converting files to JSON, and combining output files into a single file. The aim is to streamline the process and create a more efficient script for data processing.', 'Porting browser-based code into Node for data processing The process involves loading and processing data from VizHub, importing D3 dependencies, creating a package.json, and organizing the code to generate aggregated data output in a JSON file, optimizing the data processing script for efficiency.']}, {'end': 35103.669, 'start': 32948.69, 'title': 'Data processing and front-end setup', 'summary': 'Details the process of data processing and setting up the front-end code for git history stream graph, including format date, reducing data size, updating package versions, configuring rollup, moving files to public directory, and deploying to github pages.', 'duration': 2154.979, 'highlights': ['The aggregated data size is reduced to 31 kilobytes from 426 kilobytes. The aggregated data size is reduced to 31 kilobytes from 426 kilobytes, optimizing the data storage and potentially improving loading times.', 'The front-end code is moved to the root of the repository and Rollup Starter App is incorporated for proper setup. The front-end code is moved to the root of the repository and Rollup Starter App is incorporated for proper setup, indicating a systematic approach to organizing the project structure.', 'The decision to use libraries from a CDN is made to avoid bloating the git history and facilitate GitHub pages deployment. The decision to use libraries from a CDN is made to avoid bloating the git history and facilitate GitHub pages deployment, showcasing a strategic choice to optimize project deployment and maintenance.', 'The public directory is created to house index.html, CSS, and data files for client loading. The public directory is created to house index.html, CSS, and data files for client loading, ensuring a clear and organized structure for front-end assets.', 'The rollup build successfully generates bundle.js in the public directory after resolving dependencies and global variables. The rollup build successfully generates bundle.js in the public directory after resolving dependencies and global variables, demonstrating the successful setup and configuration of the build process.']}, {'end': 38045.288, 'start': 35107.431, 'title': 'Migrating and updating data processing script', 'summary': 'Describes the process of migrating public documentation to github pages, updating data processing script, and building a vanilla d3 scatterplot from scratch, with key points being the transition to slash docs url, modifying data processing steps, and creating a forkable template for a scatterplot.', 'duration': 2937.857, 'highlights': ['The chapter describes the process of migrating public documentation to GitHub pages, updating data processing script, and building a vanilla D3 scatterplot from scratch, with key points being the transition to slash docs URL, modifying data processing steps, and creating a forkable template for a scatterplot.', 'The front-end code needs modification to change the data URL to pull data from dot slash aggregated data dot json and adjust the transform data function to expect the new format, containing dates and repositories.', 'The chapter includes debugging steps such as modifying the code to fix issues with date parsing and data processing, resolving errors related to missing commits on D3, and adjusting the data processing script to ensure complete data generation.', 'The goal of the session is to create a forkable template for a scatterplot, implementing modern D3 conventions, and decoupling rendering from data processing to cater to future framework swaps, with a focus on creating a basic and vanilla implementation.', 'The session involves loading D3 from a CDN, using the Iris dataset for demonstration purposes, and creating a simple HTML template with JavaScript space to develop the scatterplot, prioritizing ease of data swapping and demonstrating vanilla implementation without ES6 modules.']}, {'end': 39333.135, 'start': 38046.509, 'title': 'Github and d3: fetching and processing csv data', 'summary': 'Discusses how to fetch a csv file from github, process the data using d3, and use async/await for promises. key points include fetching data from github, processing csv data using d3, and using async/await for promise handling.', 'duration': 1286.626, 'highlights': ['Fetching CSV File from GitHub GitHub hosts data for free, allowing it to be pulled down from any program, and the CSV file contains 150 elements with properties.', 'Processing CSV Data using D3 The d3.csv function makes a network request for a URL, returning a promise that resolves to an array of objects, which can be further processed for data manipulation and visualization.', 'Using async/await for Promises The async/await approach is used instead of the .then syntax for promises, providing a more elegant and modern method for handling asynchronous operations.']}], 'duration': 10451.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw28881768.jpg', 'highlights': ['Snowpack and Vite were mentioned as new options that claim to be better than existing tools.', 'The speaker suggested Rollup as their go-to tool for local development.', 'The chapter covers the process of exporting VizHub code to a GitHub repository and making commits, and pushing changes to the repository.', 'The process involves turning on hosting for the main branch, modifying the path, refreshing the site, and preparing the code base for coherent hosting.', 'The aggregated data size is reduced to 31 kilobytes from 426 kilobytes, optimizing the data storage and potentially improving loading times.', 'The decision to use libraries from a CDN is made to avoid bloating the git history and facilitate GitHub pages deployment.', 'The public directory is created to house index.html, CSS, and data files for client loading.', 'The rollup build successfully generates bundle.js in the public directory after resolving dependencies and global variables.', 'The chapter describes the process of migrating public documentation to GitHub pages, updating data processing script, and building a vanilla D3 scatterplot from scratch.', 'The front-end code needs modification to change the data URL to pull data from dot slash aggregated data dot json and adjust the transform data function to expect the new format, containing dates and repositories.', 'The chapter includes debugging steps such as modifying the code to fix issues with date parsing and data processing, resolving errors related to missing commits on D3, and adjusting the data processing script to ensure complete data generation.', 'The async/await approach is used instead of the .then syntax for promises, providing a more elegant and modern method for handling asynchronous operations.']}, {'end': 43880.677, 'segs': [{'end': 39530.317, 'src': 'embed', 'start': 39472.667, 'weight': 1, 'content': [{'end': 39475.588, 'text': 'And this is where I like to define an accessor.', 'start': 39472.667, 'duration': 2.921}, {'end': 39483.735, 'text': 'that I call, you know, I like to call it x value, y value, color value, size value, whatever.', 'start': 39477.711, 'duration': 6.024}, {'end': 39486.857, 'text': "It's a naming convention that I like to use.", 'start': 39483.835, 'duration': 3.022}, {'end': 39495.323, 'text': "And it's a function that takes as input one row and it gives you back some value from the data that we should use.", 'start': 39487.198, 'duration': 8.125}, {'end': 39499.706, 'text': 'So here are our various options.', 'start': 39497.024, 'duration': 2.682}, {'end': 39504.43, 'text': "I don't think it really matters at this point which one because I just want to get something to show up.", 'start': 39500.707, 'duration': 3.723}, {'end': 39506.231, 'text': "So I'll pick pedal length.", 'start': 39504.49, 'duration': 1.741}, {'end': 39512.25, 'text': 'this is going to be our X value, and the same for Y.', 'start': 39507.768, 'duration': 4.482}, {'end': 39520.253, 'text': "Let's try sepal length for Y.", 'start': 39512.25, 'duration': 8.003}, {'end': 39523.814, 'text': "So we're going to build a scatterplot where you know,", 'start': 39520.253, 'duration': 3.561}, {'end': 39530.317, 'text': 'petal length determines the X position of the circles and sepal length determines the Y position of the circles.', 'start': 39523.814, 'duration': 6.503}], 'summary': 'Defining accessor function to display scatterplot with petal and sepal length.', 'duration': 57.65, 'max_score': 39472.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw39472667.jpg'}, {'end': 40941.871, 'src': 'embed', 'start': 40904.08, 'weight': 0, 'content': [{'end': 40909.964, 'text': "And we're not seeing anything because it's sort of off to the side of the screen.", 'start': 40904.08, 'duration': 5.884}, {'end': 40916.348, 'text': 'What we need to do is move this group element to the right a little bit.', 'start': 40911.385, 'duration': 4.963}, {'end': 40921.74, 'text': 'Actually, we need to move it to the right by margin.left.', 'start': 40918.418, 'duration': 3.322}, {'end': 40933.066, 'text': 'We can do that by saying .attr, and we can set the transform to be translate.', 'start': 40922.42, 'duration': 10.646}, {'end': 40941.871, 'text': 'And this is an ES6 string template literal.', 'start': 40939.19, 'duration': 2.681}], 'summary': 'Adjust group element to the right using es6 string template literal.', 'duration': 37.791, 'max_score': 40904.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw40904080.jpg'}, {'end': 41044.373, 'src': 'embed', 'start': 40994.848, 'weight': 4, 'content': [{'end': 40998.492, 'text': "Or let's do the same for the x-axis now.", 'start': 40994.848, 'duration': 3.644}, {'end': 41020.682, 'text': "I'm just going to copy this code and modify it to be for the x-axis which I would like to put at the bottom,", 'start': 41008.078, 'duration': 12.604}, {'end': 41026.203, 'text': 'so we can call axis bottom and pass an x like this', 'start': 41020.682, 'duration': 5.521}, {'end': 41031.324, 'text': 'But the transform is not quite right anymore.', 'start': 41027.723, 'duration': 3.601}, {'end': 41033.985, 'text': "See, we've got all these numbers at the top.", 'start': 41031.825, 'duration': 2.16}, {'end': 41036.046, 'text': 'We want these to be at the bottom.', 'start': 41034.425, 'duration': 1.621}, {'end': 41044.373, 'text': 'So what we need to do is translate by zero in the x direction.', 'start': 41037.589, 'duration': 6.784}], 'summary': 'Modifying code for x-axis placement at the bottom, requiring translation by zero in the x direction.', 'duration': 49.525, 'max_score': 40994.848, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw40994848.jpg'}], 'start': 39333.155, 'title': 'D3 data visualization', 'summary': 'Covers real-time discussions on creating scatterplots, d3 data scaling and rendering, svg and scales in d3, adding axes and margin conventions, tweaking and polishing data visualization template, and understanding d3 selections, emphasizing the use of linear scales, margin conventions, and d3 selection methods for creating reusable data visualization templates.', 'chapters': [{'end': 39470.726, 'start': 39333.155, 'title': 'Real-time discussion on creating scatterplots', 'summary': 'Discusses real-time discussions on creating scatterplots, covering topics such as d3 loading, csv parsing, svg element construction, and linear scales, emphasizing the purpose and application of linear scales in converting values from a domain to a range in scatterplots.', 'duration': 137.571, 'highlights': ['The purpose of linear scales is to convert values from a domain to a range, with domain representing the input data space and range representing the screen space.', 'The chapter covers the process of loading D3, fetching and parsing a CSV, constructing an SVG element, and creating a linear scale for the scatterplot.', 'Real-time discussions on creating scatterplots, with emphasis on the application of linear scales in positioning circles in the X direction.', 'Encouraging real-time interactions and questions during the discussion, promoting a collaborative learning environment.']}, {'end': 40210.758, 'start': 39472.667, 'title': 'D3 data scaling and rendering', 'summary': 'Discusses defining accessors for data, creating linear scales for x and y values, and the use of floating point pixel values in svg for high dpi displays.', 'duration': 738.091, 'highlights': ['Defining accessors for data The speaker defines an accessor function to retrieve values from the dataset, using it to extract petal and sepal lengths for x and y values in a scatterplot.', 'Creating linear scales for x and y values The process of defining the domain and range for x and y scales using d3.scaleLinear and setting the minimum and maximum values for the column in the data.', 'Using floating point pixel values in SVG for high DPI displays The explanation of how SVG accepts floating point pixel coordinates, which can be beneficial for high DPI displays and anti-aliasing effects.']}, {'end': 40660.548, 'start': 40212.339, 'title': 'Svg and scales in d3', 'summary': 'Explains the use of svg in high dpi displays, the acceptance of floating points as values for pixels in svg, and the types of scales including linear, power, log, time, radial, ordinal, band, and point scales in d3 visualization, with a focus on the use of linear scales for mapping numbers to the screen.', 'duration': 448.209, 'highlights': ['SVG accepts floating points as values for pixels, allowing sub-pixel precision when printed or viewed on a high-res display. The use of high DPI displays allows SVG to be one physical pixel, providing sub-pixel precision when printed at 300 dpi or viewed on a high-res display.', 'Different types of continuous scales in D3 include linear, power, log, time, and radial scales, each suitable for specific types of input data. D3 offers various continuous scales, such as linear, power, log, time, and radial scales, each designed to handle specific types of input data, including dates and numbers.', "Ordinal scales in D3 are used for mapping discrete input values to discrete output values, suitable for handling strings in the data. D3's ordinal scales, including band and point scales, are used to map discrete input values, such as strings, to discrete output values, enabling the representation of data like species in a scatter plot."]}, {'end': 41588.78, 'start': 40669.395, 'title': 'Adding axes and margin conventions', 'summary': 'Demonstrates how to implement margin conventions and add x and y axes to a scatterplot using d3, including the process of defining margins, adjusting scales, appending group elements for axes, and customizing axis appearance and behavior.', 'duration': 919.385, 'highlights': ['The chapter demonstrates how to implement margin conventions for a scatterplot using D3, including defining margins and adjusting scales to create space for axes. It explains the process of defining a margin object with top, right, bottom, and left properties, and adjusting the x and y scales to incorporate the margins, allowing space for axes.', 'It illustrates the process of adding x and y axes to the scatterplot using D3, including appending group elements for the axes and adjusting their position based on the margin. The chapter covers the steps to append group elements for the x and y axes, construct new axes using axisLeft and axisBottom, and adjust the position of the axes using margin.left, margin.bottom, and height properties.', 'The chapter showcases the customization of axis appearance and behavior, such as increasing the size of tick marks using CSS. It explains how to customize the appearance of the axes by using CSS to increase the font size of the tick marks and demonstrates scoping changes to specific elements by leveraging the structure of D3 axes in the DOM.']}, {'end': 42088.288, 'start': 41589.22, 'title': 'Tweaking and polishing data visualization template', 'summary': 'Discusses tweaking the font size, margins, and other parameters to create a reusable vanilla html and javascript data visualization template, allowing for easy forking and modification, along with a detailed explanation of the .call function in d3.', 'duration': 499.068, 'highlights': ['The chapter discusses tweaking the font size, margins, and other parameters to create a reusable vanilla HTML and JavaScript data visualization template. The speaker explains the process of tweaking various parameters such as font size, margins, x and y values, width, height, and radius to create a customizable and reusable data visualization template.', 'Detailed explanation of the .call function in D3. The speaker provides a detailed explanation of the .call function in D3, demonstrating its usage and comparing it with an alternative method, showcasing its convenience and the ability to chain multiple actions.']}, {'end': 43880.677, 'start': 42089.208, 'title': 'Understanding d3 selections', 'summary': 'Discusses the various ways to invoke d3 axis and the usage of arrow functions in javascript, along with reviewing and providing feedback on student submissions, and ends with an exercise on creating reusable charts.', 'duration': 1791.469, 'highlights': ['The chapter delves into the different ways to invoke D3 axis, demonstrating the usage of .call and passing group elements as arguments, along with inspecting the resulting DOM elements to showcase their equivalence. The chapter extensively explores the invocation of D3 axis, showcasing the usage of .call and passing group elements as arguments, and emphasizes the equivalence of the resulting DOM elements.', 'The discussion provides insights into the usage of arrow functions in JavaScript, explaining the implicit return feature with expressions and objects and the need for explicit returns in function bodies. The chapter elucidates the usage of arrow functions in JavaScript, highlighting the implicit return feature with expressions and the necessity for explicit returns in function bodies.', 'The chapter offers a comprehensive review and feedback on student submissions, highlighting the importance of decoupling rendering logic and providing suggestions for improvements in code structure and data visualization techniques. The chapter thoroughly reviews and provides feedback on student submissions, emphasizing the significance of decoupling rendering logic and offering suggestions for code structure and data visualization techniques.', 'The chapter concludes with an exercise on creating reusable charts and encourages students to explore ES6 modules and adopt the reusable charts pattern, fostering an interactive and collaborative learning environment. The chapter ends with an exercise on creating reusable charts, promoting the exploration of ES6 modules and the adoption of reusable charts pattern to enhance interactivity and collaboration in the learning process.']}], 'duration': 4547.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw39333155.jpg', 'highlights': ['Real-time discussions on creating scatterplots, with emphasis on the application of linear scales in positioning circles in the X direction.', 'The chapter covers the process of loading D3, fetching and parsing a CSV, constructing an SVG element, and creating a linear scale for the scatterplot.', 'The chapter demonstrates how to implement margin conventions for a scatterplot using D3, including defining margins and adjusting scales to create space for axes.', 'The chapter discusses tweaking the font size, margins, and other parameters to create a reusable vanilla HTML and JavaScript data visualization template.', 'The chapter delves into the different ways to invoke D3 axis, demonstrating the usage of .call and passing group elements as arguments, along with inspecting the resulting DOM elements to showcase their equivalence.']}, {'end': 46628.746, 'segs': [{'end': 43959.063, 'src': 'embed', 'start': 43919.224, 'weight': 0, 'content': [{'end': 43921.086, 'text': 'Oh, maybe the axis does it automatically.', 'start': 43919.224, 'duration': 1.862}, {'end': 43936.327, 'text': 'The first thing I noticed was in the tooltip, 70,000 kg ideally would have a comma after the 70.', 'start': 43926.261, 'duration': 10.066}, {'end': 43946.774, 'text': "And we can add it pretty easily by importing format from D3 and then making something called, I'll call it comma format.", 'start': 43936.327, 'duration': 10.447}, {'end': 43952.842, 'text': 'And we can just call format with a comma.', 'start': 43950.461, 'duration': 2.381}, {'end': 43959.063, 'text': 'And format accepts this very specific string that you can do all sorts of things with.', 'start': 43953.702, 'duration': 5.361}], 'summary': 'D3 format can add commas to numbers, like 70,000 kg, easily.', 'duration': 39.839, 'max_score': 43919.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw43919224.jpg'}, {'end': 44821.874, 'src': 'embed', 'start': 44781.812, 'weight': 2, 'content': [{'end': 44784.173, 'text': "but there's a lot of variability within that small range.", 'start': 44781.812, 'duration': 2.361}, {'end': 44789.876, 'text': 'But radius is not good for that sort of thing.', 'start': 44786.674, 'duration': 3.202}, {'end': 44797.14, 'text': "you know, because these values, I mean, look, they vary between, like, I don't know two and four or something.", 'start': 44789.876, 'duration': 7.264}, {'end': 44800.681, 'text': "And so it's not really that great of a variation.", 'start': 44798, 'duration': 2.681}, {'end': 44808.165, 'text': "So it doesn't really, it doesn't really pop out when you use radius, but it's worth a try for sure.", 'start': 44800.781, 'duration': 7.384}, {'end': 44821.874, 'text': 'All right, cool, cool.', 'start': 44820.692, 'duration': 1.182}], 'summary': 'Radius values vary between 2 and 4, making it not effective for highlighting variation.', 'duration': 40.062, 'max_score': 44781.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw44781812.jpg'}, {'end': 46283.609, 'src': 'embed', 'start': 46243.046, 'weight': 1, 'content': [{'end': 46251.213, 'text': 'You know, pass in the selection to the chart, which is equivalent to saying selection.call my chart.', 'start': 46243.046, 'duration': 8.167}, {'end': 46253.575, 'text': 'And we got into this last time with the axes.', 'start': 46251.633, 'duration': 1.942}, {'end': 46267.026, 'text': 'And so the way that I would love to see it is svg.call scatterplot width and height like this.', 'start': 46254.896, 'duration': 12.13}, {'end': 46274.142, 'text': 'So this is the overall pattern.', 'start': 46271.96, 'duration': 2.182}, {'end': 46277.565, 'text': "I'm just going to keep going until it works.", 'start': 46275.763, 'duration': 1.802}, {'end': 46283.609, 'text': 'Another point of contention with this pattern is how to deal with the data.', 'start': 46279.826, 'duration': 3.783}], 'summary': 'Integrate selection.call my chart for better data handling.', 'duration': 40.563, 'max_score': 46243.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw46243046.jpg'}], 'start': 43882.239, 'title': 'D3 visualization techniques', 'summary': 'Discusses adding a number formatter in d3 to enhance visualization and user experience, visualizing data with radius scales and potential issues with linear scales, building a reusable d3 scatter plot for creating a library of reusable chart components, implementing chainable getter setter functions in javascript, and the implementation of a reusable charts pattern in javascript.', 'chapters': [{'end': 43997.873, 'start': 43882.239, 'title': 'Adding number formatter in d3', 'summary': 'Discusses the addition of a number formatter in d3 to add a comma as a separator for the tooltip, resulting in the display of 70,000 kg with a comma, enhancing the visualization and user experience.', 'duration': 115.634, 'highlights': ['The addition of a comma as a separator for the tooltip in D3 enhances the visualization and user experience, as seen with the display of 70,000 kg.', 'Importing format from D3 and creating a comma format function allows for the addition of a comma separator to the y-value in the label generation code, resulting in the display of 70,000 with the added comma.', 'The suggestion to use number formatters for 70,000 kg demonstrates the enhancement of the visualization through the addition of a comma as a separator.']}, {'end': 44821.874, 'start': 44001.495, 'title': 'Visualizing data with radius scales', 'summary': 'Discusses visualizing data using radius scales, including the use of square root scales to represent values accurately, potential issues with linear scales, and the importance of accurately representing data values in the area of a circle.', 'duration': 820.379, 'highlights': ['Using square root scales for radius representation Square root scales are recommended for representing radius values accurately, ensuring that the area of the circle corresponds exactly with the values from the data.', 'Issues with linear scales for radius visualization Linear scales may lead to misleading representations as the area of the circle does not correspond to the data values, potentially causing confusion and misinterpretation of the data.', 'Importance of accurately representing data values in circle area Emphasizes the significance of accurately representing data values in the area of a circle to avoid misleading interpretations, advocating for the use of square root scales to ensure precision.']}, {'end': 45586.971, 'start': 44822.535, 'title': 'Building reusable d3 scatter plot', 'summary': 'Discusses building a reusable d3 scatter plot based on the tried and true pattern from mike bostock in 2012, aiming to create a library of reusable chart components to be used as a basis for future episodes and different visualization types, with a focus on strictly decoupling specific and generic aspects of the visualization.', 'duration': 764.436, 'highlights': ['The chapter discusses building a reusable D3 scatter plot based on the tried and true pattern from Mike Bostock in 2012. The chapter emphasizes the use of a pattern from Mike Bostock in 2012 to build a reusable D3 scatter plot, highlighting the reliance on a well-established approach.', 'Aiming to create a library of reusable chart components to be used as a basis for future episodes and different visualization types. The focus is on creating a library of reusable chart components as a foundation for future episodes and various visualization types, indicating a strategic approach to building a versatile set of components.', 'Strictly decoupling specific and generic aspects of the visualization. The chapter emphasizes the importance of strictly decoupling specific and generic aspects of the visualization, indicating a deliberate effort to separate the specific data set and visualization from the reusable logic for different visualization types.']}, {'end': 46076.973, 'start': 45588.191, 'title': 'Implementing chainable getter setter functions', 'summary': 'Discusses the implementation of chainable getter setter functions in javascript, referencing d3 axis as a concise and robust pattern. it covers the use of comma expressions, defensive programming with the unary plus operator, and the limitations of using arrow functions for accessing arguments in javascript.', 'duration': 488.782, 'highlights': ['The chapter discusses the implementation of chainable getter setter functions, referencing D3 axis as a concise and robust pattern. The speaker refers to D3 axis as a reference for implementing chainable getter setter functions, highlighting its concise and robust pattern.', 'The use of comma expressions to implicitly return the second value for enabling method chaining is explained. The speaker explains the use of comma expressions to implicitly return the second value, enabling method chaining in the implementation of getter setter functions.', 'Defensive programming with the unary plus operator is mentioned to ensure the correct type of input is handled. Defensive programming with the unary plus operator is discussed to ensure the correct type of input, making the API more robust and accommodating potential misuse.', 'Limitations of using arrow functions for accessing arguments in JavaScript are explained, as arguments is not defined within arrow functions. The limitations of using arrow functions for accessing arguments in JavaScript are highlighted, as arguments is not defined within arrow functions, necessitating the use of the long-form function syntax.']}, {'end': 46628.746, 'start': 46078.073, 'title': 'Reusable charts pattern in javascript', 'summary': 'Discusses the implementation of a reusable charts pattern in javascript, focusing on the use of keyword functions, setting height and width, and configuring x value, y value, margin, and radius, while addressing the handling of data and the behavior of javascript in evaluating absence of length.', 'duration': 550.673, 'highlights': ['The chapter emphasizes the use of keyword functions for defining arguments, setting height, and configuring x value, y value, margin, and radius, which are all configurable in the implementation of the reusable charts pattern.', 'The implementation addresses the handling of data as just another thing that can be set, with the use of local variables and accessors for data, and the discussion of truthy and falsy values in JavaScript when evaluating absence of length.']}], 'duration': 2746.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw43882239.jpg', 'highlights': ['The addition of a comma as a separator for the tooltip in D3 enhances the visualization and user experience, as seen with the display of 70,000 kg.', 'Using square root scales for radius representation ensures that the area of the circle corresponds exactly with the values from the data.', 'The chapter discusses building a reusable D3 scatter plot based on the tried and true pattern from Mike Bostock in 2012.', 'The chapter discusses the implementation of chainable getter setter functions, referencing D3 axis as a concise and robust pattern.', 'The chapter emphasizes the use of keyword functions for defining arguments, setting height, and configuring x value, y value, margin, and radius, which are all configurable in the implementation of the reusable charts pattern.']}, {'end': 49782.999, 'segs': [{'end': 46972.233, 'src': 'embed', 'start': 46939.117, 'weight': 2, 'content': [{'end': 46939.757, 'text': 'That works too.', 'start': 46939.117, 'duration': 0.64}, {'end': 46945.999, 'text': "Yeah, to me that's a mind blowing thing, because, await,", 'start': 46943.358, 'duration': 2.641}, {'end': 46952.962, 'text': "it's like this asynchronous control flow and it has to like wait until that's done before it invokes this whole thing.", 'start': 46945.999, 'duration': 6.963}, {'end': 46957.024, 'text': "But that's the magic of async await right there.", 'start': 46953.202, 'duration': 3.822}, {'end': 46958.928, 'text': 'And I kind of prefer it like this.', 'start': 46957.645, 'duration': 1.283}, {'end': 46960.291, 'text': "It's more uniform.", 'start': 46959.128, 'duration': 1.163}, {'end': 46963.097, 'text': 'All the configuration happens right here.', 'start': 46960.591, 'duration': 2.506}, {'end': 46972.233, 'text': 'Awesome, awesome.', 'start': 46970.732, 'duration': 1.501}], 'summary': 'Async await ensures uniform configuration and controls asynchronous flow.', 'duration': 33.116, 'max_score': 46939.117, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw46939117.jpg'}, {'end': 47262.934, 'src': 'embed', 'start': 47231.453, 'weight': 1, 'content': [{'end': 47242.861, 'text': 'So it would be something like, you know, create an ordinal scale and then set the range to be D3 symbol circle, D3 symbol cross, D3 symbol diamond.', 'start': 47231.453, 'duration': 11.408}, {'end': 47252.767, 'text': 'And that scale, you can pass in a value from the species column, and it will give you back out one of these, one of these symbol types.', 'start': 47243.582, 'duration': 9.185}, {'end': 47262.934, 'text': 'And then in the rendering logic of the scanner plot, instead of rendering circles, these would be paths.', 'start': 47253.408, 'duration': 9.526}], 'summary': 'Create an ordinal scale with d3 symbols for species column values.', 'duration': 31.481, 'max_score': 47231.453, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw47231453.jpg'}, {'end': 49228.341, 'src': 'embed', 'start': 49182.15, 'weight': 0, 'content': [{'end': 49187.893, 'text': 'to have a little more control over the dates and the formatting there.', 'start': 49182.15, 'duration': 5.743}, {'end': 49191.075, 'text': "So we've got a scale time here.", 'start': 49188.593, 'duration': 2.482}, {'end': 49212.976, 'text': "And one thing you can do is control the number of ticks by saying .ticks and you pass in like five or something that gives you Oh, it's not loading.", 'start': 49195.897, 'duration': 17.079}, {'end': 49222.459, 'text': 'What happened? Oh, sorry.', 'start': 49213.937, 'duration': 8.522}, {'end': 49223.4, 'text': 'Not on the scale.', 'start': 49222.599, 'duration': 0.801}, {'end': 49224.3, 'text': 'Not on the scale.', 'start': 49223.66, 'duration': 0.64}, {'end': 49225.1, 'text': 'On the axis.', 'start': 49224.4, 'duration': 0.7}, {'end': 49228.341, 'text': "Yeah, that's something that trips me up.", 'start': 49227.141, 'duration': 1.2}], 'summary': 'Discussion about controlling number of ticks and formatting on a time scale axis.', 'duration': 46.191, 'max_score': 49182.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw49182150.jpg'}], 'start': 46630.927, 'title': 'D3 scatterplot and symbol creation', 'summary': 'Entails debugging and refactoring scatterplot code, creating scatterplots with different symbols in d3, importing d3 symbols, and using d3symbol to create scatter plots. it also covers method chaining in javascript for creating reusable scatterplot components and d3 time formatting and axis control.', 'chapters': [{'end': 47107.707, 'start': 46630.927, 'title': 'Debugging and refactoring scatterplot code', 'summary': 'Entails debugging and refactoring scatterplot code, where the speaker debugs errors and refactors the code for a more concise and uniform structure, highlighting the magic of async await and the separation of specific from generic in the scatterplot implementation.', 'duration': 476.78, 'highlights': ['The speaker debugs errors and refactors the code for a more concise and uniform structure, demonstrating the magic of async await and the separation of specific from generic in the scatterplot implementation.', 'The speaker replaces instances of SVG with selection to create a more versatile function, allowing it to take input as SVG or a group element.', 'The speaker resolves unexpected token errors and missing imports, demonstrating the debugging process in the code.', 'The scatterplot implementation is separated into a reusable pattern, where all the configuration happens outside of the reusable component, allowing easy tweaking and updating of the dataset without changing the scatterplot.js file.']}, {'end': 47423.727, 'start': 47108.928, 'title': 'D3 scatterplot with symbols', 'summary': 'Discusses how to create a scatterplot with different symbols in d3 by using an ordinal scale that maps species values to specific symbol types, ultimately rendering paths instead of circles for different species.', 'duration': 314.799, 'highlights': ['Creating an instance of D3 symbol and setting up an ordinal scale that maps species values to symbols, such as symbol circle, symbol cross, and symbol diamond, allows for rendering paths instead of circles for different species.', 'Implementing the rendering logic by changing the type of the symbol and invoking the symbol allows for the creation of a scatterplot with different shapes in D3.', 'Importing symbols from D3 and configuring a new accessor for symbol value, which is based on the species data, enables the rendering of different symbols in the scatterplot.']}, {'end': 47992.259, 'start': 47423.727, 'title': 'D3 symbol scale and generator', 'summary': 'Demonstrates the process of importing d3 symbols, creating an ordinal scale with range and domain, and utilizing a symbol generator to transform data values into specific symbols for visualization.', 'duration': 568.532, 'highlights': ['Creating an ordinal scale with range and domain An ordinal scale is created with a range of symbols and automatically populated domain, utilizing data mapping to extract species values.', 'Utilizing the symbol generator to transform data values into specific symbols The symbol generator is used to apply the symbol type to each mark, ensuring the correct symbol is obtained by passing the species value through the symbol scale.', 'Issues with setting the type and invoking the symbol generator Challenges arise in setting and invoking the symbol generator type correctly, including the need to pass values through the symbol scale for proper symbol generation.']}, {'end': 48734.362, 'start': 47993.859, 'title': 'D3symbol scatter plot', 'summary': 'Discusses using d3symbol to create scatter plots, demonstrating the usage of symbol generator, setting size, and replacing radius with size. it also showcases the benefits of reusable chart patterns, with examples of submissions from previous episodes.', 'duration': 740.503, 'highlights': ['The chapter discusses using D3Symbol to create scatter plots It showcases the process of using D3Symbol to generate different types of shapes for scatter plots.', 'Demonstrating the usage of symbol generator, setting size, and replacing radius with size It explains the steps to set the type and invoke the symbol generator to generate path strings, setting the size of symbols, and replacing radius with size for configuring the size of symbols.', 'Showcases the benefits of reusable chart patterns It highlights the advantages of having reusable chart patterns for various visualization types, promoting efficient development and refactoring efforts.', 'Examples of submissions from previous episodes It reviews and appreciates submissions from previous episodes, showcasing different visualizations and their modifications.']}, {'end': 49061.337, 'start': 48739.364, 'title': 'Data visualization: method chaining and svg', 'summary': 'Discussed method chaining in javascript for creating reusable scatterplot components, with participants expressing clarity and interest in the topic. additionally, a new participant shared their experience using vizhub for healthcare visualizations, finding the reusable scatterplot framework helpful, though struggling with date scale manipulation.', 'duration': 321.973, 'highlights': ['Participants expressed clarity and interest in method chaining for reusable scatterplot components in JavaScript. Participants found the method chaining concept clear and eye-opening, particularly in creating reusable scatterplot components in JavaScript.', 'New participant shared their experience using VizHub for healthcare visualizations and found the reusable scatterplot framework helpful. A new participant found the reusable scatterplot framework useful for healthcare visualizations, though they faced challenges in manipulating the date scale.', 'Participant struggled with manipulating the date scale for healthcare visualizations using VizHub. The participant found manipulating the date scale for healthcare visualizations challenging, particularly in adjusting months and years.']}, {'end': 49782.999, 'start': 49061.337, 'title': 'D3 time formatting and axis control', 'summary': 'Covers a discussion on d3 time formatting and axis control, with a focus on adjusting date formatting and manipulating axis ticks, including a practical example of using d3 time format and axis tick format to control the date formatting and number of ticks.', 'duration': 721.662, 'highlights': ['Practical example of using D3 time format and axis tick format The chapter provides a practical example of using D3 time format and axis tick format to control the date formatting and number of ticks.', 'Discussion on adjusting date formatting and manipulating axis ticks The chapter includes a discussion on adjusting date formatting and manipulating axis ticks, providing insights into the process of controlling the date formatting and number of ticks.', 'Engagement and participation in the session The session emphasizes engagement and participation, with positive feedback and encouragement for active involvement in learning and asking questions.']}], 'duration': 3152.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw46630927.jpg', 'highlights': ['The speaker debugs errors and refactors the code for a more concise and uniform structure, demonstrating the magic of async await and the separation of specific from generic in the scatterplot implementation.', 'Creating an instance of D3 symbol and setting up an ordinal scale that maps species values to symbols, such as symbol circle, symbol cross, and symbol diamond, allows for rendering paths instead of circles for different species.', 'Creating an ordinal scale with range and domain An ordinal scale is created with a range of symbols and automatically populated domain, utilizing data mapping to extract species values.', 'The chapter discusses using D3Symbol to create scatter plots It showcases the process of using D3Symbol to generate different types of shapes for scatter plots.', 'Participants expressed clarity and interest in method chaining for reusable scatterplot components in JavaScript. Participants found the method chaining concept clear and eye-opening, particularly in creating reusable scatterplot components in JavaScript.', 'Practical example of using D3 time format and axis tick format The chapter provides a practical example of using D3 time format and axis tick format to control the date formatting and number of ticks.']}, {'end': 52407.138, 'segs': [{'end': 49810.514, 'src': 'embed', 'start': 49783.239, 'weight': 4, 'content': [{'end': 49793.885, 'text': "So happy to be here and, um, haven't been able to make the last few, but, um, Whenever there's time and whenever I can, I want to participate.", 'start': 49783.239, 'duration': 10.646}, {'end': 49794.786, 'text': 'So thanks again.', 'start': 49794.125, 'duration': 0.661}, {'end': 49796.747, 'text': 'Nice This is amazing.', 'start': 49795.426, 'duration': 1.321}, {'end': 49797.787, 'text': 'Wow Welcome.', 'start': 49796.987, 'duration': 0.8}, {'end': 49799.328, 'text': 'Well, this is a full house.', 'start': 49798.267, 'duration': 1.061}, {'end': 49800.369, 'text': "We've got so many people.", 'start': 49799.368, 'duration': 1.001}, {'end': 49802.17, 'text': 'So let me just dig into this.', 'start': 49800.449, 'duration': 1.721}, {'end': 49810.514, 'text': 'What I wanted to do today was to make our chart that we made last time dynamic.', 'start': 49803.33, 'duration': 7.184}], 'summary': 'Participant expresses happiness to join, aims to make chart dynamic', 'duration': 27.275, 'max_score': 49783.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw49783239.jpg'}, {'end': 51470.652, 'src': 'embed', 'start': 51427.031, 'weight': 3, 'content': [{'end': 51433.015, 'text': 'This is the complete version of the reusable chart.', 'start': 51427.031, 'duration': 5.984}, {'end': 51441.439, 'text': "Now you can use this, swap out things in real time, and it'll work correctly.", 'start': 51434.876, 'duration': 6.563}, {'end': 51446.882, 'text': 'Any questions? Great.', 'start': 51442.9, 'duration': 3.982}, {'end': 51448.163, 'text': "I think it's great.", 'start': 51446.942, 'duration': 1.221}, {'end': 51462.726, 'text': "So, if I understand correctly, with the null array that you create, it's like a, a, a unique id for the, for the group,", 'start': 51448.843, 'duration': 13.883}, {'end': 51470.652, 'text': 'and that way it recognizes as the same thing when it updates.', 'start': 51462.726, 'duration': 7.926}], 'summary': 'Reusable chart allows real-time swapping of elements and updates using unique ids.', 'duration': 43.621, 'max_score': 51427.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw51427031.jpg'}, {'end': 51542.439, 'src': 'embed', 'start': 51509.116, 'weight': 2, 'content': [{'end': 51518.043, 'text': 'And so in terms of the concept of unique ID, to disambiguate between them, the class is really what plays that role.', 'start': 51509.116, 'duration': 8.927}, {'end': 51524.127, 'text': "The data, that array of null, is just to signify that there's one thing that we want.", 'start': 51518.583, 'duration': 5.544}, {'end': 51528.41, 'text': "Not two, not zero, but there's just one thing.", 'start': 51525.528, 'duration': 2.882}, {'end': 51533.093, 'text': "That's the significance of that array.", 'start': 51528.69, 'duration': 4.403}, {'end': 51534.694, 'text': 'Right, right, thank you.', 'start': 51533.893, 'duration': 0.801}, {'end': 51542.439, 'text': "And just to deconstruct why there's no y-axis here, when this code runs..", 'start': 51535.915, 'duration': 6.524}], 'summary': 'The class acts as a unique id to disambiguate, with an array signifying one thing.', 'duration': 33.323, 'max_score': 51509.116, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw51509116.jpg'}, {'end': 51805.085, 'src': 'embed', 'start': 51783.137, 'weight': 0, 'content': [{'end': 51792.14, 'text': 'We just add .transition and it creates this thing called a D3 transition that kind of looks and feels like a D3 selection.', 'start': 51783.137, 'duration': 9.003}, {'end': 51798.802, 'text': 'So when you call .transition, it creates a new thing which is an instance of a transition and returns it.', 'start': 51792.86, 'duration': 5.942}, {'end': 51805.085, 'text': "And so these .attrs, they're being invoked on the transition, not the original selection.", 'start': 51799.403, 'duration': 5.682}], 'summary': 'Adding .transition creates d3 transition, different from original selection.', 'duration': 21.948, 'max_score': 51783.137, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw51783137.jpg'}, {'end': 52037.117, 'src': 'embed', 'start': 52009.611, 'weight': 1, 'content': [{'end': 52015.877, 'text': "I want to have like some nuanced animated transitions where here's what I want to have happen.", 'start': 52009.611, 'duration': 6.266}, {'end': 52024.064, 'text': 'The circles should appear in their correct locations, but they should grow from nothing to something.', 'start': 52015.977, 'duration': 8.087}, {'end': 52027.727, 'text': 'So I would like to animate the radius of it.', 'start': 52024.624, 'duration': 3.103}, {'end': 52037.117, 'text': 'Right. I think that that feels to me like the proper way to start off a scatter plot that has animations is, to you know,', 'start': 52029.454, 'duration': 7.663}], 'summary': 'Request for nuanced animated transitions for scatter plot circles with growing radius.', 'duration': 27.506, 'max_score': 52009.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw52009611.jpg'}], 'start': 49783.239, 'title': 'D3 rendering and transitions', 'summary': "Discusses dynamic chart creation, idempotent rendering, and d3's join api usage. it further explores implementing animated transitions in d3 scatter plots and the general update pattern with animated transitions, providing a comprehensive understanding of rendering and transitions in d3.", 'chapters': [{'end': 50516.148, 'start': 49783.239, 'title': 'Dynamic chart and idempotent rendering', 'summary': "Discusses making a dynamic chart by cycling through x and y columns, implementing idempotent rendering to ensure the result remains the same regardless of the state, and addressing issues with anti-aliasing and multiple copies of axes being added, providing insights into using javascript's setinterval and the general update pattern of d3.", 'duration': 732.909, 'highlights': ["The chapter discusses making a dynamic chart by cycling through x and y columns The speaker explains the idea of making the chart dynamic by cycling through x and y columns, demonstrating the concept of changing the code to alter the function that accesses the data for x, and proposes using JavaScript's setInterval to achieve this.", 'Implementing idempotent rendering to ensure the result remains the same regardless of the state The concept of idempotent rendering is introduced, emphasizing the need for the scatterplot to maintain the same result when the function is invoked multiple times, and the speaker proposes using the general update pattern of D3 for handling the enter, update, and exit of DOM nodes.', 'Addressing issues with anti-aliasing and multiple copies of axes being added The speaker identifies issues with anti-aliasing and multiple copies of axes being added, highlighting the problem arising from the parent group for the axis being appended repeatedly and stresses the importance of using the general update pattern of D3 to resolve such issues.']}, {'end': 51214.364, 'start': 50517.369, 'title': 'D3 idempotent rendering', 'summary': 'Illustrates the concept of idempotent rendering in d3, demonstrating how to implement it in rendering dynamic scatterplots and addressing issues with non-idempotent rendering of axes.', 'duration': 696.995, 'highlights': ['The chapter demonstrates the concept of idempotent rendering in D3, implementing it to create a dynamic scatterplot. The instructor shows how to use the modulo operator to cycle through columns and achieve idempotent rendering in a dynamic scatterplot.', 'The explanation includes a comparison between idempotent and non-idempotent rendering, emphasizing the use of the .join API for idempotent rendering. The instructor compares idempotent and non-idempotent rendering, showing how the .join API ensures idempotent rendering and addresses issues with non-idempotent rendering using the deprecated merge function.', 'The chapter also addresses issues with non-idempotent rendering of axes and demonstrates the use of classes to disambiguate between elements. The instructor explains the non-idempotent rendering of axes and demonstrates the use of classes to disambiguate between elements, ensuring idempotent rendering in D3.']}, {'end': 51619.722, 'start': 51215.205, 'title': 'D3 join api and rendering patterns', 'summary': "Explains the usage of d3's join api for rendering elements and highlights the importance of using class selectors over id for differentiation, ensuring proper rendering and avoiding clobbering of elements.", 'duration': 404.517, 'highlights': ['The join API of D3 handles enter, update, and exit and creates a single group element if the selection already exists, ensuring idempotent rendering and proper functionality. The join API of D3 handles enter, update, and exit and creates a single group element if the selection already exists, ensuring idempotent rendering and proper functionality.', 'The class attribute serves as a unique identifier to differentiate between groups, while the data array of null signifies the requirement for a single element. The class attribute serves as a unique identifier to differentiate between groups, while the data array of null signifies the requirement for a single element.', 'Using class selectors over id prevents clobbering of elements and ensures proper rendering, as demonstrated by the example of clobbering the y-axis when id is not used. Using class selectors over id prevents clobbering of elements and ensures proper rendering, as demonstrated by the example of clobbering the y-axis when id is not used.']}, {'end': 52061.815, 'start': 51619.722, 'title': 'Implementing animated transitions in d3', 'summary': "Discusses implementing animated transitions in d3 scatter plots, exploring simple and proper ways to invoke d3 transitions, and focusing on animating the circles' appearance and axes using d3 transitions.", 'duration': 442.093, 'highlights': ['The chapter discusses implementing animated transitions in D3 scatter plots, exploring simple and proper ways to invoke D3 transitions.', 'The circles should appear in their correct locations, but they should grow from nothing to something, emphasizing the animation of the radius of the circles.', "Exploration of invoking D3 transitions by simply using '.transition' and creating a new transition object for synchronized animations.", 'The default behavior of circles flying in from the upper left corner is considered nonsensical, prompting the need for nuanced animated transitions where the circles grow from nothing to something.', 'Focusing on animating the appearance of circles and potentially the axes using D3 transitions, while grounding in documentation and examples for D3 transitions.']}, {'end': 52407.138, 'start': 52061.815, 'title': 'D3 general update pattern with animated transitions', 'summary': 'Discusses the d3 general update pattern with animated transitions, providing insight into the usage of observable for d3 documentation and the process of referencing examples for coding. the general update pattern with animated transitions is demonstrated through controlled animations and the use of .join function with three different functions for enter, update, and exit.', 'duration': 345.323, 'highlights': ['The general update pattern with animated transitions is demonstrated through controlled animations where entering elements are green, exiting elements become red, and updating elements are black, showcasing the use of .join function with three functions for enter, update, and exit.', 'Observable is becoming interconnected with the D3 documentation, providing access to extensive resources and examples for learning and referencing D3 functionalities, with the option to use Observable when the D3 documentation lacks complete examples.', 'The process of referencing examples from Observable for learning and implementing D3 functionalities in vanilla JavaScript is discussed, highlighting the use of Observable as a supplementary resource when the D3 documentation does not contain complete examples.', 'The speaker emphasizes the importance of using the D3 documentation as a primary resource and resorting to Observable only when necessary, demonstrating a preference for learning from the documentation and utilizing Observable for specific cases where the D3 documentation lacks complete examples.']}], 'duration': 2623.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw49783239.jpg', 'highlights': ['The chapter discusses making a dynamic chart by cycling through x and y columns, demonstrating the concept of changing the code to alter the function that accesses the data for x.', 'Implementing idempotent rendering to ensure the scatterplot maintains the same result when the function is invoked multiple times, using the general update pattern of D3 for handling the enter, update, and exit of DOM nodes.', 'The join API of D3 handles enter, update, and exit and creates a single group element if the selection already exists, ensuring idempotent rendering and proper functionality.', 'The chapter discusses implementing animated transitions in D3 scatter plots, exploring simple and proper ways to invoke D3 transitions, emphasizing the animation of the radius of the circles.', 'The general update pattern with animated transitions is demonstrated through controlled animations where entering elements are green, exiting elements become red, and updating elements are black, showcasing the use of .join function with three functions for enter, update, and exit.']}, {'end': 54918.271, 'segs': [{'end': 53427.342, 'src': 'embed', 'start': 53397.577, 'weight': 4, 'content': [{'end': 53404.502, 'text': "And from this function, we can't tell what the name is of the column, so we're going to have to add one additional thing to get it to work.", 'start': 53397.577, 'duration': 6.925}, {'end': 53407.183, 'text': "So that's why I think it's a good exercise.", 'start': 53404.642, 'duration': 2.541}, {'end': 53420.296, 'text': 'Karan, I was just curious about the arguments that are passed to join.', 'start': 53414.871, 'duration': 5.425}, {'end': 53427.022, 'text': 'And I noticed that there are a couple of lines that are duplicated, namely the CX and CY.', 'start': 53421.217, 'duration': 5.805}, {'end': 53427.342, 'text': 'Oh, yeah.', 'start': 53427.062, 'duration': 0.28}], 'summary': 'Discussion about identifying duplicated lines and adding additional function to resolve it.', 'duration': 29.765, 'max_score': 53397.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw53397577.jpg'}, {'end': 53708.879, 'src': 'embed', 'start': 53679.13, 'weight': 0, 'content': [{'end': 53682.272, 'text': 'This is how you can reduce the duplicated logic.', 'start': 53679.13, 'duration': 3.142}, {'end': 53693.146, 'text': 'across these two places, and i think this is the best way to do it, because this, this logic, needs to be executed in both of these places.', 'start': 53683.999, 'duration': 9.147}, {'end': 53694.107, 'text': 'it needs to be.', 'start': 53693.146, 'duration': 0.961}, {'end': 53703.174, 'text': 'the circles need to be positioned before the radius transition happens, and they also need to be positioned every time things update.', 'start': 53694.107, 'duration': 9.067}, {'end': 53708.879, 'text': "and so, yeah, refactoring it into a common function that's invoked in these two places, i think, is a good move.", 'start': 53703.174, 'duration': 5.705}], 'summary': 'Refactor logic into a common function for better execution in two places.', 'duration': 29.749, 'max_score': 53679.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw53679130.jpg'}, {'end': 54428.239, 'src': 'embed', 'start': 54397.121, 'weight': 1, 'content': [{'end': 54402.302, 'text': 'like a bar chart, a line chart, an area chart, a pie chart.', 'start': 54397.121, 'duration': 5.181}, {'end': 54413.014, 'text': "From scratch with just enter and not this general update pattern stuff so those are some of the things that i'm going to be doing in the future.", 'start': 54405.652, 'duration': 7.362}, {'end': 54418.556, 'text': 'Any any preferences for which direction to take it.', 'start': 54415.215, 'duration': 3.341}, {'end': 54428.239, 'text': "I would say, I would say, menus are really good idea if you're designing this for a user having them have.", 'start': 54420.757, 'duration': 7.482}], 'summary': 'Plans to create various types of charts and incorporate user-friendly menus.', 'duration': 31.118, 'max_score': 54397.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw54397121.jpg'}], 'start': 52409.011, 'title': 'D3.js data selection and transition', 'summary': 'Emphasizes the structure of functions for enter, update, and exit selections, demonstrating the process of appending, initializing, and manipulating attributes for a transition effect, including a delay function for a staggering effect. it also explains how to use d3 transitions to create eye-popping effects, with specific settings like delay and milliseconds, and highlights the differences between requestanimationframe and setinterval for animations.', 'chapters': [{'end': 53055.479, 'start': 52409.011, 'title': 'D3.js data selection and transition', 'summary': 'Emphasizes the structure of functions for enter, update, and exit selections, demonstrating the process of appending, initializing, and manipulating attributes for a transition effect, including a delay function for a staggering effect.', 'duration': 646.468, 'highlights': ['The chapter explains the process of appending a circle to the enter selection and initializing its position, followed by setting the position for the update selection, resulting in the circles changing as expected. The process of appending a circle to the enter selection and initializing its position, followed by setting the position for the update selection, resulting in the circles changing as expected.', 'The chapter demonstrates the adoption of transitions by transitioning the circles from zero radius to their final form, utilizing dot call to create a transition derived from the enter selection and implementing the transition to achieve the desired animation effect. The adoption of transitions by transitioning the circles from zero radius to their final form, utilizing dot call to create a transition derived from the enter selection and implementing the transition to achieve the desired animation effect.', 'The chapter introduces a delay function for a staggering effect in the transition, where not all the dots move at the same time, showcasing the use of dot delay to create a staggered animation effect. The introduction of a delay function for a staggering effect in the transition, showcasing the use of dot delay to create a staggered animation effect.']}, {'end': 53730.047, 'start': 53055.479, 'title': 'D3 transitions and animation', 'summary': 'Explains how to use d3 transitions to create eye-popping effects, with specific settings like delay and milliseconds, while also addressing the issue of duplicated logic in positioning circles, and emphasizes the added value of such animations in client work.', 'duration': 674.568, 'highlights': ['Using D3 transitions to create eye-popping effects The speaker demonstrates using D3 transitions to achieve a beautiful eye-popping effect by adjusting settings like delay and milliseconds.', 'Value of animations in client work The speaker emphasizes the positive impact of adding animations to client work, stating that it can enhance the overall quality and impress clients.', 'Addressing duplicated logic in positioning circles The chapter discusses the issue of duplicated logic in positioning circles and demonstrates how to reduce it by creating an external function that can be invoked in multiple places.']}, {'end': 53946.88, 'start': 53730.107, 'title': 'Requestanimationframe vs setinterval', 'summary': 'Explains the differences between requestanimationframe and setinterval, highlighting that requestanimationframe synchronizes with the display and is beneficial for animations, while setinterval may result in visual glitches.', 'duration': 216.773, 'highlights': ['RequestAnimationFrame synchronizes with the display, ensuring smooth animations, while setInterval may result in slight visual glitches.', 'RequestAnimationFrame invokes the callback as soon as the next render cycle happens, depending on the system setup and monitor refresh rate.', 'Using setInterval for animation may lead to the function being called inconsistently between animation frames, potentially causing undetectable visual glitches.']}, {'end': 54251.798, 'start': 53946.88, 'title': 'Js coding style & refactoring', 'summary': 'Discusses the usage of setinterval and requestanimationframe for longer time scales and animation, respectively. it also emphasizes the importance of naming functions to reflect their actions and suggests refactoring to improve code readability and organization.', 'duration': 304.918, 'highlights': ['The chapter discusses the usage of setInterval and requestAnimationFrame for longer time scales and animation, respectively.', 'It emphasizes the importance of naming functions to reflect their actions and suggests refactoring to improve code readability and organization.', 'Refactoring code by naming functions to reflect their actions serves as documentation and enhances code readability and clarity.', 'The importance of structuring code like a book to enhance understanding and readability is emphasized.']}, {'end': 54918.271, 'start': 54251.838, 'title': 'Charts with menus episode 11', 'summary': 'Discusses the trade-offs between verbosity and conciseness in data visualization, plans to work on force layout and future visualization techniques, and introduces the idea of adding menus for interactive selection.', 'duration': 666.433, 'highlights': ['The trade-offs between verbosity and conciseness in data visualization are discussed, highlighting the challenges in deciding how clear and concise to be (quantifiable data: N/A).', 'Plans to work on force layout and future visualization techniques, such as bar charts, line charts, area charts, and pie charts, are mentioned, presenting the intention to go deeper into visualization techniques (quantifiable data: N/A).', 'The idea of adding menus for interactive selection is introduced, emphasizing the power of user choice in determining displayed content (quantifiable data: N/A).']}], 'duration': 2509.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw52409011.jpg', 'highlights': ['The chapter emphasizes the structure of functions for enter, update, and exit selections, demonstrating the process of appending, initializing, and manipulating attributes for a transition effect, including a delay function for a staggering effect.', 'Using D3 transitions to create eye-popping effects by adjusting settings like delay and milliseconds.', 'RequestAnimationFrame synchronizes with the display, ensuring smooth animations, while setInterval may result in slight visual glitches.', 'The chapter discusses the usage of setInterval and requestAnimationFrame for longer time scales and animation, emphasizing the importance of naming functions to reflect their actions and suggesting refactoring to improve code readability and organization.', 'The trade-offs between verbosity and conciseness in data visualization are discussed, highlighting the challenges in deciding how clear and concise to be.']}, {'end': 57824.171, 'segs': [{'end': 55439.573, 'src': 'embed', 'start': 55402.771, 'weight': 4, 'content': [{'end': 55407.475, 'text': 'And this actually does the exact same thing as all of this.', 'start': 55402.771, 'duration': 4.704}, {'end': 55414.621, 'text': "It's just a more concise way of doing it.", 'start': 55407.495, 'duration': 7.126}, {'end': 55425.241, 'text': 'Understood Yeah, excellent.', 'start': 55423.78, 'duration': 1.461}, {'end': 55430.125, 'text': "Excellent And I can see that like, I can see that you're, you're learning and trying new things.", 'start': 55425.361, 'duration': 4.764}, {'end': 55435.209, 'text': 'And this is this is a very good way of like this.', 'start': 55431.046, 'duration': 4.163}, {'end': 55437.191, 'text': "I can Yeah, it's great.", 'start': 55436.15, 'duration': 1.041}, {'end': 55439.573, 'text': 'I could see your learning process, which is amazing.', 'start': 55437.251, 'duration': 2.322}], 'summary': 'Learning process is great, concise way of doing things, excellent progress.', 'duration': 36.802, 'max_score': 55402.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw55402771.jpg'}, {'end': 55674.508, 'src': 'embed', 'start': 55641.574, 'weight': 2, 'content': [{'end': 55647.724, 'text': 'and the point of this data set is to show that statistical summaries lose a lot of information.', 'start': 55641.574, 'duration': 6.15}, {'end': 55654.951, 'text': 'And when you visualize the data, you can see these patterns and information that you cannot see with just the statistical summaries.', 'start': 55648.405, 'duration': 6.546}, {'end': 55657.833, 'text': 'Very nice.', 'start': 55657.433, 'duration': 0.4}, {'end': 55663.458, 'text': "And here's another one.", 'start': 55662.697, 'duration': 0.761}, {'end': 55665.561, 'text': 'with labels.', 'start': 55664.98, 'duration': 0.581}, {'end': 55667.782, 'text': 'This one blew my mind when I saw it.', 'start': 55666.141, 'duration': 1.641}, {'end': 55674.508, 'text': 'It actually does the animated general update pattern example within the label.', 'start': 55669.364, 'duration': 5.144}], 'summary': 'Visualizing data reveals patterns not captured by statistical summaries.', 'duration': 32.934, 'max_score': 55641.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw55641574.jpg'}, {'end': 55813.262, 'src': 'embed', 'start': 55775.577, 'weight': 0, 'content': [{'end': 55776.338, 'text': 'This is very nice.', 'start': 55775.577, 'duration': 0.761}, {'end': 55785.724, 'text': 'However, however, I do see some telltale signs that the labels are not adhering to the general update pattern.', 'start': 55777.739, 'duration': 7.985}, {'end': 55789.647, 'text': "See, if you could see around the edges, they're like very sharp and crisp.", 'start': 55785.744, 'duration': 3.903}, {'end': 55795.011, 'text': "That indicates to me that there's actually a bunch of labels on top of one another.", 'start': 55791.548, 'duration': 3.463}, {'end': 55802.655, 'text': "So let me just go in here and see what's happening with that and how we might fix it.", 'start': 55797.031, 'duration': 5.624}, {'end': 55813.262, 'text': 'So the y-axis label looks fine, actually.', 'start': 55806.338, 'duration': 6.924}], 'summary': 'Labels show overlapping, sharp edges. y-axis label is fine.', 'duration': 37.685, 'max_score': 55775.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw55775577.jpg'}, {'end': 56996.915, 'src': 'embed', 'start': 56940.798, 'weight': 1, 'content': [{'end': 56954.962, 'text': "I can say dot ATTR for, And I'll use something called ID, which is something that should be configurable.", 'start': 56940.798, 'duration': 14.164}, {'end': 56960.386, 'text': 'So let ID equals nothing to start.', 'start': 56957.424, 'duration': 2.962}, {'end': 56964.869, 'text': 'And we can set up an accessor for ID.', 'start': 56960.946, 'duration': 3.923}, {'end': 56970.773, 'text': 'Like this.', 'start': 56970.392, 'duration': 0.381}, {'end': 56989.888, 'text': 'Where is label? What do you mean, where is label? Where is this variable? This is just an element here, select all label.', 'start': 56972.734, 'duration': 17.154}, {'end': 56996.915, 'text': "Yeah, the idea is we're going to create this structure inside the DOM.", 'start': 56991.55, 'duration': 5.365}], 'summary': 'Configurable id is used to create a structure inside the dom.', 'duration': 56.117, 'max_score': 56940.798, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw56940798.jpg'}], 'start': 54918.531, 'title': 'Javascript techniques and vizhub class review', 'summary': 'Covers javascript type checking, ternary operator, and control flow techniques, along with a vizhub class review encompassing feedback on student submissions, dataset discussions, and the process of adding menus to an animated scatter plot.', 'chapters': [{'end': 55064.548, 'start': 54918.531, 'title': 'Javascript type checking technique', 'summary': 'Discusses a javascript type checking technique using the typeof operator to identify the type of data, specifically focusing on filtering numeric columns in a dataset and receiving appreciation for the work.', 'duration': 146.017, 'highlights': ['The typeof operator in JavaScript is used to determine the data type of a variable or expression, and it returns a string indicating the type.', 'The technique involves using typeof to identify whether a value is a number or not, allowing for filtering numeric columns in a dataset.', 'The discussion receives positive feedback, with participants expressing admiration for the approach and its effectiveness.']}, {'end': 55402.271, 'start': 55064.949, 'title': 'Using ternary operator and control flow in javascript', 'summary': 'Discusses using the ternary operator for conditional expressions, and explains the usage of continue in deeply nested control flow, while also demonstrating the for-in construct for filtering numeric columns in javascript arrays.', 'duration': 337.322, 'highlights': ['The ternary operator creates an expression with a return value, returning the first thing after the question mark if true, and the thing after the colon if false. The ternary operator in JavaScript creates an expression with a return value, allowing it to return different results based on a condition, providing a concise way to handle conditional expressions.', 'The use of continue inside the ternary operator is not recommended due to its side effect of pushing a new thing onto the array, making it confusing. The usage of continue inside the ternary operator is discouraged due to its side effect of modifying the array, which can lead to confusion and is not recommended as a best practice in JavaScript programming.', 'The for-in construct in JavaScript can be used to filter numeric columns within arrays by utilizing the keys of the object and the array method filter. The for-in construct in JavaScript can be employed to filter numeric columns within arrays by utilizing the keys of the object and applying the array method filter, providing a method for creating a new array with elements that pass a certain test specified by a function.']}, {'end': 56219.343, 'start': 55402.771, 'title': 'Vizhub class review', 'summary': 'Covers a vizhub class review with feedback on student submissions, including discussions on dataset, labels, and animation, while also mentioning the need for linting in vizhub, all within a half-hour timeframe.', 'duration': 816.572, 'highlights': ['The chapter covers a VizHub class review with feedback on student submissions, including discussions on dataset, labels, and animation, while also mentioning the need for linting in VizHub, all within a half-hour timeframe.', 'The Datasaurus dataset is discussed, highlighting its ability to reveal patterns and information that statistical summaries cannot, emphasizing the importance of visualization.', 'Feedback is provided on student submissions, including praise for attention to detail and suggestions for improvement, demonstrating a supportive learning environment.', 'Discussion about the limitations of VizHub, including the absence of linting and audio configuration issues, demonstrates areas for potential improvement and technical challenges faced during the class.', 'The importance of taking breaks and managing multiple chat platforms is mentioned, highlighting the need for self-care and efficient communication practices during online classes.']}, {'end': 57053.829, 'start': 56232.472, 'title': 'Adding menus to animated scatter plot', 'summary': 'Explains the process of adding menus to an animated scatter plot driven by user choice, utilizing html select tags and creating a menu component using reusable chart patterns and css positioning, culminating in the development of two menus for x and y axes.', 'duration': 821.357, 'highlights': ['The chapter explains the process of adding menus to an animated scatter plot driven by user choice The focus of the chapter is on enhancing the functionality of the animated scatter plot by allowing users to select the columns they want to visualize, providing a user-driven experience.', 'Utilizing HTML select tags and creating a menu component using reusable chart patterns The chapter delves into using HTML select tags to create a basic built-in menu and applies the reusable chart pattern to develop a menu component, enabling the selection of columns for visualization.', 'CSS positioning and development of two menus for X and Y axes The chapter covers the implementation of CSS positioning to place the menus on top of the SVG, ensuring their visibility, and further develops two menus for X and Y axes to enable independent column selection for both X and Y coordinates.']}, {'end': 57824.171, 'start': 57056.03, 'title': 'Configuring menu and accessor for data visualization', 'summary': 'Outlines the process of configuring ids, setting up accessors, and populating options for menus in a data visualization code, while discussing the importance of unique ids and the attributes like name and id for html elements.', 'duration': 768.141, 'highlights': ['Setting up the accessor called id and configuring IDs for x and y menus, ensuring uniqueness and different values, is crucial for the functioning of the code. The process of setting up the accessor called id and configuring IDs for x and y menus is crucial as it ensures uniqueness and different values are assigned, which is essential for the functioning of the code.', 'Understanding the role of attributes like name and ID for HTML elements, particularly in the context of the select tag, and experimenting to ascertain their impact on the focus and functionality of the menu. The discussion revolves around understanding the role of attributes like name and ID for HTML elements, specifically in the context of the select tag, and conducting experiments to determine their impact on the focus and functionality of the menu.', 'Defining and populating options for the menu, emphasizing the importance of setting up the options array, creating a value attribute and text attribute for each option, and the use of accessors to define and pass options to the menu. The process involves defining and populating options for the menu, highlighting the importance of setting up the options array, creating a value attribute and text attribute for each option, and utilizing accessors to define and pass options to the menu.']}], 'duration': 2905.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw54918531.jpg', 'highlights': ['The chapter covers a VizHub class review with feedback on student submissions, including discussions on dataset, labels, and animation, while also mentioning the need for linting in VizHub, all within a half-hour timeframe.', 'The technique involves using typeof to identify whether a value is a number or not, allowing for filtering numeric columns in a dataset.', 'The chapter explains the process of adding menus to an animated scatter plot driven by user choice The focus of the chapter is on enhancing the functionality of the animated scatter plot by allowing users to select the columns they want to visualize, providing a user-driven experience.', 'The ternary operator creates an expression with a return value, returning the first thing after the question mark if true, and the thing after the colon if false. The ternary operator in JavaScript creates an expression with a return value, allowing it to return different results based on a condition, providing a concise way to handle conditional expressions.', 'The Datasaurus dataset is discussed, highlighting its ability to reveal patterns and information that statistical summaries cannot, emphasizing the importance of visualization.']}, {'end': 60179.027, 'segs': [{'end': 58357.06, 'src': 'embed', 'start': 58312.022, 'weight': 0, 'content': [{'end': 58319.304, 'text': "So now let's just say console.log in index.js to be sure this is where we are.", 'start': 58312.022, 'duration': 7.282}, {'end': 58329.004, 'text': "Now, let's see, did it work? If I click on this thing, it worked.", 'start': 58321.744, 'duration': 7.26}, {'end': 58335.145, 'text': 'Boom So I clicked on it.', 'start': 58331.044, 'duration': 4.101}, {'end': 58342.007, 'text': 'The event sort of got forwarded through this component to the outer index.html.', 'start': 58335.686, 'duration': 6.321}, {'end': 58348.509, 'text': 'And now in index.html, we get notified when we change this.', 'start': 58343.008, 'duration': 5.501}, {'end': 58357.06, 'text': 'So this is the pattern that you can use to introduce events to your components.', 'start': 58350.666, 'duration': 6.394}], 'summary': 'Demonstrating event forwarding from component to index.html.', 'duration': 45.038, 'max_score': 58312.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw58312022.jpg'}, {'end': 58570.381, 'src': 'embed', 'start': 58536.666, 'weight': 4, 'content': [{'end': 58542.228, 'text': 'It goes to the history of JavaScript and object-oriented programming.', 'start': 58536.666, 'duration': 5.562}, {'end': 58553.432, 'text': "There's a bunch of patterns throughout history of JavaScript where people try to make it object-oriented and use the keyword this extensively.", 'start': 58543.589, 'duration': 9.843}, {'end': 58558.351, 'text': "But I think, to me, that's sort of a thing of the past.", 'start': 58555.188, 'duration': 3.163}, {'end': 58560.913, 'text': "There's no need to use this at all.", 'start': 58558.391, 'duration': 2.522}, {'end': 58570.381, 'text': "And it's essentially another way of passing another thing into this callback in addition to the value.", 'start': 58563.795, 'duration': 6.586}], 'summary': "Javascript's history includes attempts at object-oriented programming with 'this', now seen as unnecessary.", 'duration': 33.715, 'max_score': 58536.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw58536666.jpg'}, {'end': 59118.313, 'src': 'embed', 'start': 59070.663, 'weight': 2, 'content': [{'end': 59075.947, 'text': 'And to complete this, we can do the same for y.', 'start': 59070.663, 'duration': 5.284}, {'end': 59079.19, 'text': 'But instead of saying x value, we set the y value.', 'start': 59075.947, 'duration': 3.243}, {'end': 59083.634, 'text': 'And this is it.', 'start': 59083.133, 'duration': 0.501}, {'end': 59084.715, 'text': "It's done.", 'start': 59084.395, 'duration': 0.32}, {'end': 59095.721, 'text': 'We can set X and we can set Y.', 'start': 59089.659, 'duration': 6.062}, {'end': 59097.842, 'text': 'So now we can explore the data.', 'start': 59095.721, 'duration': 2.121}, {'end': 59107.305, 'text': 'And one beautiful thing about the select elements is you can actually use the arrow keys to quickly navigate between the different options.', 'start': 59098.762, 'duration': 8.543}, {'end': 59111.706, 'text': 'So any questions?', 'start': 59110.966, 'duration': 0.74}, {'end': 59118.313, 'text': 'Does the event change on the select element?', 'start': 59114.687, 'duration': 3.626}], 'summary': 'Setting x and y values allows data exploration with select elements.', 'duration': 47.65, 'max_score': 59070.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw59070663.jpg'}, {'end': 60153.805, 'src': 'embed', 'start': 60117.586, 'weight': 5, 'content': [{'end': 60123.287, 'text': "So it's different from regular objects in a number of ways.", 'start': 60117.586, 'duration': 5.701}, {'end': 60126.868, 'text': "But essentially it's the same, and it has some nice methods on it.", 'start': 60124.427, 'duration': 2.441}, {'end': 60133.768, 'text': 'Hi, Felipe is here.', 'start': 60132.887, 'duration': 0.881}, {'end': 60134.769, 'text': 'Welcome Felipe.', 'start': 60133.828, 'duration': 0.941}, {'end': 60148.36, 'text': 'But yeah, map, you can create a new thing, you can set keys and values for that thing.', 'start': 60143.016, 'duration': 5.344}, {'end': 60153.805, 'text': 'And then you can check does it have a certain key, all of this stuff is available on maps.', 'start': 60149.541, 'duration': 4.264}], 'summary': 'Maps are different from regular objects, with methods for creating, setting keys and values, and checking for keys.', 'duration': 36.219, 'max_score': 60117.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw60117586.jpg'}], 'start': 57824.211, 'title': 'Implementing event listeners and scales with d3', 'summary': "Discusses implementing event listeners with d3, introducing events to components using d3 dispatch, understanding javascript 'this', adding interaction to reusable components, and implementing scales and visualizations for distributing values across x, emphasizing scale point for discrete values and stratification variable for scatter plots.", 'chapters': [{'end': 58050.487, 'start': 57824.211, 'title': 'Implementing event listeners with d3', 'summary': 'Discusses implementing event listeners with d3, exploring the use of d3 brush and d3 dispatch to handle events and emit events externally.', 'duration': 226.276, 'highlights': ['The chapter discusses the implementation of event listeners using D3 Brush and D3 Dispatch, providing insights into the pattern for handling events and emitting events externally.', 'The speaker mentions the use of D3 Brush and studying the source code of D3 itself to understand how to handle events, indicating a practical approach to learning and implementing event listeners.', 'The implementation of D3 Brush uses D3 Dispatch for events, demonstrating the interconnectedness of D3 packages and the utilization of external packages for handling events.']}, {'end': 58457.665, 'start': 58051.347, 'title': 'Introducing events with d3', 'summary': 'Discusses how to introduce events to components using d3 dispatch, explaining the process of adding and emitting event listeners, extracting values, and forwarding events to external listeners.', 'duration': 406.318, 'highlights': ['The chapter explains how to add an event listener to a menu using D3 dispatch, enabling the addition of event listeners and emitting events from the menu every time it changes.', 'It demonstrates the process of extracting the value of the clicked item using event.target.value and forwarding the event through D3 dispatch to notify external event listeners.', 'The author introduces the concept of D3 dispatch, emphasizing the instantiation of dispatch and its usage for emitting change events with the value of the clicked column.']}, {'end': 58811.506, 'start': 58458.365, 'title': "Understanding javascript 'this'", 'summary': "Discusses the usage of the keyword 'this' in javascript, exploring its historical context and the modern approach to event handling, emphasizing the minimal utility of 'this' and advocating for a more explicit approach. it also delves into the use of d3 dispatch for defining custom events and decoupling the dom from the component.", 'duration': 353.141, 'highlights': ["The historical context of using 'this' in JavaScript for object-oriented programming The chapter explores historical attempts to make JavaScript object-oriented and extensively use the 'this' keyword.", "The minimal utility of using 'this' and advocating for a more explicit approach in event handling It emphasizes the minimal usefulness of the 'this' keyword and advocates for a more explicit approach in event handling, highlighting the confusion and lack of clear purpose associated with using 'this'.", 'The use of D3 dispatch for defining custom events and decoupling the DOM from the component It explains the usage of D3 dispatch for defining custom events and decoupling the DOM from the component, providing an example of how it facilitates adding event listeners and firing events internally within a component.']}, {'end': 59341.647, 'start': 58813.688, 'title': 'Adding interaction to reusable components', 'summary': 'Explains a pattern for adding events to reusable components using d3 dispatch, allowing for interaction with components like scatter plots, and challenges the reader to handle non-numeric data visualization.', 'duration': 527.959, 'highlights': ['Explaining the pattern for adding events to reusable components using d3 dispatch The speaker outlines a pattern for introducing events into reusable components using d3 dispatch, providing a generalized pattern for adding interaction to components.', "Challenging the reader to handle non-numeric data visualization The speaker challenges the reader to set up X and Y scales conditionally based on the type of attribute selected, aiming to visualize non-numeric data like 'species' using a point scale instead of a linear scale.", "Addressing a bug in the initialization of default selections in the menu The speaker acknowledges a bug where the default selections in the menu are incorrect and proceeds to fix it by initializing both X and Y values to 'petal width' to ensure accuracy upon loading."]}, {'end': 59782.82, 'start': 59341.667, 'title': 'Implementing scales and visualizations', 'summary': 'Covers the implementation of scale point for distributing values across x, the need to use point scale only for discrete values, and options for implementing a stratification variable for scatter plots.', 'duration': 441.153, 'highlights': ['The chapter covers the implementation of scale point for distributing values across x. The speaker explains the usage of scale point to distribute three values across x, and demonstrates how to set x to species using scale point.', 'The need to use point scale only for discrete values is emphasized. The speaker explains that point scale should only be used for discrete values, such as three species, and not for quantities, highlighting the importance of using scale point appropriately.', 'Options for implementing a stratification variable for scatter plots are discussed. The speaker proposes using a ternary operator based on X type to determine whether to use scale point or scale linear, and suggests the implementation of a third menu for stratification variable, offering options for visualizing subgroups in scatter plots.']}, {'end': 60179.027, 'start': 59783.82, 'title': 'Episode 11: data structure and metadata', 'summary': 'Covers the forum submissions, with emphasis on a discussion about adding event listeners and metadata. the discussion also highlights the distinction between javascript map and map function, and the benefits of using a data structure for metadata.', 'duration': 395.207, 'highlights': ['The discussion about adding event listeners and the correct approach to do so. The correct approach to adding event listeners is highlighted, emphasizing the importance of adding the event on the select element instead of the inner option elements.', 'The importance of using a data structure for metadata, associating the value, label, and type for each of the columns. The benefits of using a data structure for metadata are explained, allowing for the association of value, label, and type for each column, and distinguishing categorical data such as species.', 'Explanation of the distinction between JavaScript map and map function, with a focus on their uses and differences. The distinction between JavaScript map as a data structure and map function as a method on arrays is clarified, with an emphasis on the functionality and differences between the two.']}], 'duration': 2354.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw57824211.jpg', 'highlights': ['The chapter discusses the implementation of event listeners using D3 Brush and D3 Dispatch, providing insights into the pattern for handling events and emitting events externally.', 'The chapter explains how to add an event listener to a menu using D3 dispatch, enabling the addition of event listeners and emitting events from the menu every time it changes.', "The historical context of using 'this' in JavaScript for object-oriented programming The chapter explores historical attempts to make JavaScript object-oriented and extensively use the 'this' keyword.", 'Explaining the pattern for adding events to reusable components using d3 dispatch The speaker outlines a pattern for introducing events into reusable components using d3 dispatch, providing a generalized pattern for adding interaction to components.', 'The chapter covers the implementation of scale point for distributing values across x. The speaker explains the usage of scale point to distribute three values across x, and demonstrates how to set x to species using scale point.', 'The discussion about adding event listeners and the correct approach to do so. The correct approach to adding event listeners is highlighted, emphasizing the importance of adding the event on the select element instead of the inner option elements.']}, {'end': 61936.206, 'segs': [{'end': 60350.256, 'src': 'embed', 'start': 60312.273, 'weight': 1, 'content': [{'end': 60321.92, 'text': "it's not all the way down to the bottom and then also added an option to use a square root scale.", 'start': 60312.273, 'duration': 9.647}, {'end': 60324.66, 'text': 'This is amazing.', 'start': 60323.88, 'duration': 0.78}, {'end': 60326.561, 'text': 'Or a power scale.', 'start': 60325.52, 'duration': 1.041}, {'end': 60336.223, 'text': 'What is this? So yeah, different types of scales in use here.', 'start': 60327.061, 'duration': 9.162}, {'end': 60337.043, 'text': "It's brilliant.", 'start': 60336.523, 'duration': 0.52}, {'end': 60344.904, 'text': 'So if we want to see what the scale does, we can say, okay, petal width linear, and then petal width square.', 'start': 60338.103, 'duration': 6.801}, {'end': 60350.256, 'text': "You can see it's a square root relationship.", 'start': 60346.525, 'duration': 3.731}], 'summary': 'The tool offers multiple scale options such as linear and square root, showing a square root relationship.', 'duration': 37.983, 'max_score': 60312.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw60312273.jpg'}, {'end': 60656.127, 'src': 'embed', 'start': 60615.652, 'weight': 2, 'content': [{'end': 60619.315, 'text': 'But yeah, when you need more complex layout, you need different tools.', 'start': 60615.652, 'duration': 3.663}, {'end': 60621.476, 'text': 'CSS Grid is an amazing tool to use.', 'start': 60619.595, 'duration': 1.881}, {'end': 60631.444, 'text': "Nice That's awesome.", 'start': 60628.442, 'duration': 3.002}, {'end': 60635.836, 'text': 'And I see that the colors change as well.', 'start': 60633.735, 'duration': 2.101}, {'end': 60639.758, 'text': "Now they're all blue, but if you go to one of these, it's red.", 'start': 60636.076, 'duration': 3.682}, {'end': 60643.44, 'text': 'Nice, nice.', 'start': 60642.52, 'duration': 0.92}, {'end': 60647.743, 'text': 'Yeah, this is awesome.', 'start': 60646.702, 'duration': 1.041}, {'end': 60656.127, 'text': "So yeah, let's just take a look at how it was done.", 'start': 60653.186, 'duration': 2.941}], 'summary': 'Discussion on the use of css grid for complex layouts and color changes.', 'duration': 40.475, 'max_score': 60615.652, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw60615652.jpg'}, {'end': 60783.61, 'src': 'embed', 'start': 60718.396, 'weight': 3, 'content': [{'end': 60721.22, 'text': 'And I like how you split it out into functions with .call.', 'start': 60718.396, 'duration': 2.824}, {'end': 60722.562, 'text': "That's a nice approach.", 'start': 60721.741, 'duration': 0.821}, {'end': 60724.685, 'text': 'Very nice.', 'start': 60724.244, 'duration': 0.441}, {'end': 60740.004, 'text': 'Yeah, yeah, it is kind of crazy.', 'start': 60729.03, 'duration': 10.974}, {'end': 60742.686, 'text': "yeah, that's the crazy thing about javascript.", 'start': 60740.004, 'duration': 2.682}, {'end': 60744.527, 'text': 'um, and one of the reasons why i love it,', 'start': 60742.686, 'duration': 1.841}, {'end': 60752.471, 'text': "because it's it's got elements of functional programming and it's got elements of object-oriented programming.", 'start': 60744.527, 'duration': 7.944}, {'end': 60757.054, 'text': 'and you can make sure you just showed that map yep, lower and uppercase.', 'start': 60752.471, 'duration': 4.583}, {'end': 60758.274, 'text': "i'm like what.", 'start': 60757.054, 'duration': 1.22}, {'end': 60761.076, 'text': "so yep, it's.", 'start': 60758.274, 'duration': 2.802}, {'end': 60762.597, 'text': "it's a great playground to be in.", 'start': 60761.076, 'duration': 1.521}, {'end': 60766.339, 'text': "there's tons of tools in the toolbox, so to speak.", 'start': 60762.597, 'duration': 3.742}, {'end': 60771.484, 'text': "Yeah, it's getting complicated.", 'start': 60769.843, 'duration': 1.641}, {'end': 60772.724, 'text': 'Yeah, it is.', 'start': 60771.984, 'duration': 0.74}, {'end': 60773.785, 'text': 'It is.', 'start': 60772.744, 'duration': 1.041}, {'end': 60774.545, 'text': "It's a journey.", 'start': 60773.925, 'duration': 0.62}, {'end': 60777.347, 'text': "It's a journey of learning new things, using them.", 'start': 60775.046, 'duration': 2.301}, {'end': 60783.61, 'text': "And it's functional and object oriented programming is kind of confusing, really.", 'start': 60778.808, 'duration': 4.802}], 'summary': 'Javascript offers a mix of functional and object-oriented programming, with versatility and complexity.', 'duration': 65.214, 'max_score': 60718.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw60718396.jpg'}, {'end': 60905.279, 'src': 'embed', 'start': 60871.521, 'weight': 8, 'content': [{'end': 60878.607, 'text': 'This kind of animation makes perfect sense because when the circle moves, its identity remains unchanged.', 'start': 60871.521, 'duration': 7.086}, {'end': 60880.109, 'text': "It's the same flower that it was.", 'start': 60878.768, 'duration': 1.341}, {'end': 60885.511, 'text': "However, when this animation happens, It's actually kind of misleading,", 'start': 60880.329, 'duration': 5.182}, {'end': 60891.353, 'text': "because the flower is a different flower that's represented by the same circle as it moves across the screen.", 'start': 60885.511, 'duration': 5.842}, {'end': 60905.279, 'text': "You know what I mean? Well, I think it's just a matter of, you know, noticing that that's an issue and we can go in and fix it.", 'start': 60891.393, 'duration': 13.886}], 'summary': 'Animation represents different flowers as same circle, misleading. needs fixing.', 'duration': 33.758, 'max_score': 60871.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw60871521.jpg'}, {'end': 61848.188, 'src': 'embed', 'start': 61802.798, 'weight': 0, 'content': [{'end': 61812.9, 'text': "well, if it's, if it's adding the transition there, we don't need to add the transition here as well, and we don't even need this call.", 'start': 61802.798, 'duration': 10.102}, {'end': 61815.629, 'text': "so Here's what we can do.", 'start': 61812.9, 'duration': 2.729}, {'end': 61817.63, 'text': 'Just exit dot call shrink radius.', 'start': 61816.069, 'duration': 1.561}, {'end': 61819.25, 'text': 'Easy peasy.', 'start': 61818.71, 'duration': 0.54}, {'end': 61820.65, 'text': "Let's see if that works.", 'start': 61819.95, 'duration': 0.7}, {'end': 61830.993, 'text': "Oh, I think we're not making the radius.", 'start': 61828.413, 'duration': 2.58}, {'end': 61837.675, 'text': "We're not growing the radius on update.", 'start': 61833.074, 'duration': 4.601}, {'end': 61848.188, 'text': 'And shrink radius really should remove the elements as well.', 'start': 61842.842, 'duration': 5.346}], 'summary': 'Proposal to remove redundant transition and adjust radius growth on update.', 'duration': 45.39, 'max_score': 61802.798, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw61802798.jpg'}], 'start': 60179.967, 'title': 'Data visualization and javascript programming', 'summary': 'Covers interactive data visualization with different scales and interactive scatter plots, javascript functional and object-oriented programming, and visualization design issue resolution emphasizing transitions and elegant solutions.', 'chapters': [{'end': 60712.912, 'start': 60179.967, 'title': 'Interactive data visualization', 'summary': 'Discusses the use of different types of scales in data visualization, including linear, point, square root, and power scales, and also explores the implementation of filtering and styling in interactive scatter plots.', 'duration': 532.945, 'highlights': ['The chapter discusses the use of different types of scales in data visualization, including linear, point, square root, and power scales. It explains the use of linear, point, square root, and power scales in visualizing data, demonstrating the implementation and benefits of each scale.', 'The implementation of filtering and styling in interactive scatter plots is explored. It details the process of filtering data using the dot filter method on arrays and the application of styling through CSS Grid, showcasing the interactive features of the scatter plots.', 'The discussion includes the use of different tools such as CSS Grid for complex layout needs in data visualization. It highlights the use of CSS Grid as an effective tool for more complex layout needs in data visualization, emphasizing its benefits in handling intricate design requirements.']}, {'end': 61223.673, 'start': 60718.396, 'title': 'Javascript functional and object-oriented programming', 'summary': 'Discusses the duality of functional and object-oriented programming in javascript, highlighting the challenges and benefits of using both paradigms, as well as demonstrating the use of .call for splitting functions and the implementation of unique identifiers in d3 data visualization.', 'duration': 505.277, 'highlights': ['Duality of Functional and Object-Oriented Programming The discussion on the duality of functional and object-oriented programming in JavaScript, emphasizing the challenges and benefits of both paradigms, provides insights into the complexity and versatility of the language.', 'Demonstration of .call for Splitting Functions The demonstration of using .call for splitting functions showcases a practical approach in JavaScript, indicating a strong understanding of functional programming concepts and their application.', 'Implementation of Unique Identifiers in D3 Data Visualization The explanation and implementation of unique identifiers in D3 data visualization using a function to define the identity of iris flowers, along with the consideration of using index as an ID, demonstrate a deep understanding of data visualization techniques and data manipulation in JavaScript.']}, {'end': 61936.206, 'start': 61227.581, 'title': 'Visualization design issue resolution', 'summary': 'Discusses resolving a visualization design issue, including identifying the problem, debugging, and proposing an ultimate best solution, emphasizing the importance of transitions and the elegance of using the same transition for entering and exiting animations.', 'duration': 708.625, 'highlights': ['The importance of transitions and the elegance of using the same transition for entering and exiting animations, which runs at the exact same time.', 'Debugging process involving identifying misbehaving elements, identifying the source of issues, and using console.log to track and resolve the problem.', 'Proposing the ultimate best solution involving making the exit mirrors the enter in terms of animation to maintain consistency.', 'Addressing the complexity of triggering animations at different times and the use of delay to control the order of exiting and entering animations.', 'Implementing and fine-tuning shrink radius to remove elements and ensure smooth transitions in the visualization design.']}], 'duration': 1756.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw60179967.jpg', 'highlights': ['The chapter covers the use of different types of scales in data visualization, including linear, point, square root, and power scales.', 'It explores the implementation of filtering and styling in interactive scatter plots, showcasing the interactive features of the scatter plots.', 'The discussion includes the use of CSS Grid as an effective tool for more complex layout needs in data visualization.', 'The discussion on the duality of functional and object-oriented programming in JavaScript provides insights into the complexity and versatility of the language.', 'The demonstration of using .call for splitting functions showcases a practical approach in JavaScript.', 'The explanation and implementation of unique identifiers in D3 data visualization demonstrate a deep understanding of data visualization techniques and data manipulation in JavaScript.', 'The chapter emphasizes the importance of transitions and the elegance of using the same transition for entering and exiting animations.', 'It addresses the complexity of triggering animations at different times and the use of delay to control the order of exiting and entering animations.', 'The implementation and fine-tuning of shrink radius to remove elements ensure smooth transitions in the visualization design.']}, {'end': 64100.873, 'segs': [{'end': 62511.015, 'src': 'embed', 'start': 62463.263, 'weight': 5, 'content': [{'end': 62474.412, 'text': 'I think the most sensible approach would be to introduce another property on these objects called type.', 'start': 62463.263, 'duration': 11.149}, {'end': 62485.721, 'text': "And the type of the species column, I would say, using Tamara Munzner's terminology, is categorical.", 'start': 62477.655, 'duration': 8.066}, {'end': 62495.284, 'text': 'And the type for all the others is quantitative.', 'start': 62491.146, 'duration': 4.138}, {'end': 62506.071, 'text': "So just for completeness sake, I'm going to fill all those out, run prettier.", 'start': 62500.027, 'duration': 6.044}, {'end': 62509.113, 'text': 'Yeah, unfortunately it gets to be long.', 'start': 62506.091, 'duration': 3.022}, {'end': 62511.015, 'text': "I think that's okay.", 'start': 62510.254, 'duration': 0.761}], 'summary': "Introduce 'type' property, categorical for species, quantitative for others.", 'duration': 47.752, 'max_score': 62463.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw62463263.jpg'}, {'end': 62692.545, 'src': 'embed', 'start': 62617.24, 'weight': 2, 'content': [{'end': 62617.96, 'text': 'what i tried?', 'start': 62617.24, 'duration': 0.72}, {'end': 62634.769, 'text': "i? first i rewrote the get data, i put outside in a module and and then i tried to get the json that's inside your, your github, together with the.", 'start': 62617.96, 'duration': 16.809}, {'end': 62638.792, 'text': 'the data There is in the site where I got the data.', 'start': 62634.769, 'duration': 4.023}, {'end': 62645.896, 'text': 'there is a JSON there that has all these options already the type and everything.', 'start': 62638.792, 'duration': 7.104}, {'end': 62650.678, 'text': 'Really? Yeah.', 'start': 62648.457, 'duration': 2.221}, {'end': 62652.459, 'text': 'The gist in here.', 'start': 62650.718, 'duration': 1.741}, {'end': 62661.763, 'text': "Yes I tried to use the JSON, but I'm not able to get the data out of the scope.", 'start': 62653.499, 'duration': 8.264}, {'end': 62670.207, 'text': 'When I try to put this in an array or in a dictionary, I lose the data.', 'start': 62663.181, 'duration': 7.026}, {'end': 62672.669, 'text': 'Inside the loop, I have the data.', 'start': 62670.547, 'duration': 2.122}, {'end': 62676.772, 'text': 'When I get outside of the loop, the data vanish.', 'start': 62673.53, 'duration': 3.242}, {'end': 62689.743, 'text': "How could we use this so we don't have to hard code the type string or the type number from this? Right.", 'start': 62678.814, 'duration': 10.929}, {'end': 62690.703, 'text': "It's so funny.", 'start': 62689.843, 'duration': 0.86}, {'end': 62692.545, 'text': 'I actually forgot that I put this here.', 'start': 62690.783, 'duration': 1.762}], 'summary': 'Struggling to extract json data from github, facing scope issue and seeking a solution for avoiding hard coding.', 'duration': 75.305, 'max_score': 62617.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw62617240.jpg'}, {'end': 63091.522, 'src': 'embed', 'start': 63063.674, 'weight': 0, 'content': [{'end': 63072.491, 'text': 'However, the dot find method on arrays will check, you know, the way it works.', 'start': 63063.674, 'duration': 8.817}, {'end': 63075.313, 'text': '.find, the way it works is it checks each and every one.', 'start': 63072.891, 'duration': 2.422}, {'end': 63077.954, 'text': "It says, okay, let's take a look at this one.", 'start': 63075.773, 'duration': 2.181}, {'end': 63080.856, 'text': 'And it passes that object into this thing.', 'start': 63078.555, 'duration': 2.301}, {'end': 63083.117, 'text': 'And then this function runs.', 'start': 63081.836, 'duration': 1.281}, {'end': 63084.498, 'text': 'It returns true or false.', 'start': 63083.397, 'duration': 1.101}, {'end': 63088.56, 'text': 'So it says, is d.value equal to column? It checks the first one.', 'start': 63084.958, 'duration': 3.602}, {'end': 63091.522, 'text': 'It says, okay, d.value is battle width.', 'start': 63088.58, 'duration': 2.942}], 'summary': "The .find method checks each object in an array and returns true or false based on a condition, such as d.value equaling 'column'.", 'duration': 27.848, 'max_score': 63063.674, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw63063674.jpg'}, {'end': 63223.469, 'src': 'embed', 'start': 63186.587, 'weight': 1, 'content': [{'end': 63192.888, 'text': "Yes. So if it's not present in this current table, lookup example.", 'start': 63186.587, 'duration': 6.301}, {'end': 63201.39, 'text': 'but say we had multiple columns with the same name, so species was appearing twice.', 'start': 63192.888, 'duration': 8.502}, {'end': 63215.033, 'text': "so would find, return both those objects or will it just return the first occurrence of the selected column or the column that we're trying to find?", 'start': 63201.39, 'duration': 13.643}, {'end': 63216.965, 'text': "That's correct.", 'start': 63216.365, 'duration': 0.6}, {'end': 63218.626, 'text': 'It would just return the first one.', 'start': 63217.306, 'duration': 1.32}, {'end': 63221.508, 'text': 'Okay Okay.', 'start': 63220.868, 'duration': 0.64}, {'end': 63223.469, 'text': "Yep That's what find does.", 'start': 63221.908, 'duration': 1.561}], 'summary': 'The find operation returns the first occurrence of the selected column in a table with multiple columns of the same name.', 'duration': 36.882, 'max_score': 63186.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw63186587.jpg'}], 'start': 61936.206, 'title': 'Troubleshooting d3 exit transition and enhancing data visualization', 'summary': "Discusses troubleshooting d3 exit transitions, handling species using scalepoint, enhancing data visualization with a 'type' property, implementing a gettype function for a column, and utilizing a map data structure for column to type lookup in javascript.", 'chapters': [{'end': 62007.54, 'start': 61936.206, 'title': 'Troubleshooting d3 exit transition', 'summary': 'Discusses troubleshooting issues with d3 exit transitions, emphasizing the need to cancel the exit transition when rendering data to prevent the removal of dom elements, which is a tricky aspect of working with d3.', 'duration': 71.334, 'highlights': ['The need to cancel the exit transition when rendering data to prevent the removal of DOM elements is emphasized, which could be a little tricky to figure out.', 'The chapter highlights the challenging aspects of working with D3, particularly in troubleshooting the exit transition issue.']}, {'end': 62461.97, 'start': 62016.48, 'title': 'Handling species with scalepoint', 'summary': 'Delves into handling species using scalepoint to handle categorical attributes, specifically focusing on the iris dataset, and the challenges associated with mapping categorical data to the visual space, ultimately aiming to spread unique values across the space for effective visualization.', 'duration': 445.49, 'highlights': ['The chapter discusses the use of ScalePoint for handling categorical attributes, specifically in the context of the iris dataset, and the challenges associated with mapping categorical data to the visual space. The chapter focuses on using ScalePoint to handle categorical attributes, particularly in the context of the iris dataset. It highlights the challenges of mapping categorical data to the visual space for effective visualization.', 'The challenges associated with mapping categorical data to the visual space are explained, emphasizing the need to spread unique values across the space for effective visualization. The chapter explains the challenges of mapping categorical data to the visual space and the importance of spreading unique values across the space for effective visualization.', 'The chapter explores the process of manually adding metadata about the columns, specifically focusing on the types of attributes in the data, such as quantitative and categorical. The chapter delves into manually adding metadata about the columns, particularly focusing on the types of attributes in the data, including quantitative and categorical attributes.']}, {'end': 62778.224, 'start': 62463.263, 'title': 'Enhancing data visualization with type property', 'summary': "Discusses adding a 'type' property to objects, using getter setter functions to identify column types, and considering using d3.json to fetch metadata for columns, potentially simplifying future data visualization processes.", 'duration': 314.961, 'highlights': ["Adding 'type' property to objects Introducing a 'type' property on objects to distinguish between categorical and quantitative types, enhancing data clarity and accessibility.", "Using getter setter functions to identify column types Considering the addition of a 'x type' accessor function to determine the type of the column, providing clarity on the column's data type for scaling purposes.", 'Considering using d3.json to fetch metadata for columns Discussing the potential use of d3.json to fetch metadata for columns, enabling the possibility of simplifying future data visualization processes by utilizing standardized metadata.']}, {'end': 63353.693, 'start': 62778.784, 'title': 'Implementing gettype function for column', 'summary': "Discusses implementing a gettype function for a column, which involves understanding the function's purpose, using the find method to match values in an array of objects, and the potential efficiency of using a lookup table over iteration. the function successfully returns the type of the column for various inputs.", 'duration': 574.909, 'highlights': ["The function getType is designed to return the type of a given column, such as 'species' returning 'categorical'.", 'The find method is utilized to match values in an array of objects, enabling access to the type of the matched object.', 'The speaker considers the efficiency of the find method, noting its O(n) complexity and discussing the potential use of a lookup table using the map data structure.', "The implementation of the function successfully returns the type of the column for different inputs, such as 'x' returning 'quantitative' and 'species' returning 'categorical'."]}, {'end': 63611.809, 'start': 63355.359, 'title': 'Implementing map data structure for column to type lookup', 'summary': 'Discusses implementing a map data structure in javascript to create a lookup table from column to type, solving the problem of importing json data and efficiently accessing values.', 'duration': 256.45, 'highlights': ['Using a map data structure in JavaScript to create a lookup table from column to type, solving the problem of importing JSON data and efficiently accessing values. The speaker explains how to create a map data structure in JavaScript without importing any libraries, and highlights the benefits of using a map, such as efficient value retrieval.', "Demonstrating the use of 'map.set' to store key-value pairs in the map data structure and solve the problem of creating an external array for data storage. The speaker explains the usage of 'map.set' to store key-value pairs efficiently, solving the problem of creating an external array for data storage and retrieval.", "Discussing the importance of using a dictionary or map for key-value mappings and the inefficiency of using other methods like 'dot.find' or array traversal. The speaker emphasizes the importance of using a dictionary or map for efficient key-value mappings and highlights the inefficiency of using other methods like 'dot.find' or array traversal.", "Illustrating the use of 'console.log' to comprehend and visualize the created map data structure for column to type lookup. The speaker demonstrates the use of 'console.log' to comprehend and visualize the created map data structure, providing insight into the contents and structure of the map."]}, {'end': 64100.873, 'start': 63612.069, 'title': 'Javascript map constructor', 'summary': "Explores the usage of the javascript map constructor and its alternative syntax, showcasing how to utilize it in today's javascript world, with an emphasis on using console.log and consulting mdn for guidance.", 'duration': 488.804, 'highlights': ['The chapter explores the usage of the JavaScript map constructor and its alternative syntax. Demonstrates the use of the map constructor and its alternative syntax for creating maps in JavaScript.', 'Emphasizes the importance of using console.log and consulting MDN for guidance. Encourages the use of console.log to understand intermediate stages and consulting MDN for documentation on JavaScript data structures.']}], 'duration': 2164.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw61936206.jpg', 'highlights': ['The need to cancel the exit transition when rendering data to prevent the removal of DOM elements is emphasized, which could be a little tricky to figure out.', 'The chapter discusses the use of ScalePoint for handling categorical attributes, specifically in the context of the iris dataset, and the challenges associated with mapping categorical data to the visual space.', "Adding 'type' property to objects Introducing a 'type' property on objects to distinguish between categorical and quantitative types, enhancing data clarity and accessibility.", "The function getType is designed to return the type of a given column, such as 'species' returning 'categorical'.", 'Using a map data structure in JavaScript to create a lookup table from column to type, solving the problem of importing JSON data and efficiently accessing values.', 'The chapter explores the usage of the JavaScript map constructor and its alternative syntax.']}, {'end': 66581.242, 'segs': [{'end': 64742.292, 'src': 'embed', 'start': 64707.064, 'weight': 3, 'content': [{'end': 64711.387, 'text': "So it's going to return like versicolor, versicolor, versicolor, setosa, setosa, setosa.", 'start': 64707.064, 'duration': 4.323}, {'end': 64720.971, 'text': 'But then when you pass that array into .domain, the scale will internally figure out that there are duplicates, and it will deduplicate it.', 'start': 64712.027, 'duration': 8.944}, {'end': 64727.915, 'text': 'So the domain will only end up having three entries, the unique values of the species column.', 'start': 64721.152, 'duration': 6.763}, {'end': 64742.292, 'text': 'And then dot range actually should be the same because we want it to span across the same space in pixels.', 'start': 64730.123, 'duration': 12.169}], 'summary': 'Using .domain will deduplicate and result in three unique entries in the range.', 'duration': 35.228, 'max_score': 64707.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw64707064.jpg'}, {'end': 65767.319, 'src': 'embed', 'start': 65731.384, 'weight': 0, 'content': [{'end': 65734.766, 'text': 'Right But, yeah, this is very nice.', 'start': 65731.384, 'duration': 3.382}, {'end': 65739.288, 'text': "And I have to say, it's really nice how these animate or how your labels animate.", 'start': 65735.005, 'duration': 4.283}, {'end': 65741.089, 'text': 'Really nice work.', 'start': 65740.509, 'duration': 0.58}, {'end': 65745.183, 'text': 'All right.', 'start': 65744.864, 'duration': 0.319}, {'end': 65749.007, 'text': "Well, I think that's all for today.", 'start': 65746.185, 'duration': 2.822}, {'end': 65752.549, 'text': 'Thank you so much.', 'start': 65751.829, 'duration': 0.72}, {'end': 65754.751, 'text': 'Yeah, my pleasure.', 'start': 65753.67, 'duration': 1.081}, {'end': 65756.312, 'text': 'Thank you all.', 'start': 65755.891, 'duration': 0.421}, {'end': 65756.992, 'text': 'Thank you very much.', 'start': 65756.331, 'duration': 0.661}, {'end': 65758.253, 'text': 'Thank you.', 'start': 65757.833, 'duration': 0.42}, {'end': 65759.994, 'text': 'Yeah, thank you very much.', 'start': 65759.094, 'duration': 0.9}, {'end': 65765.558, 'text': "And yeah, like I said, it's I changed it to every other week.", 'start': 65762.176, 'duration': 3.382}, {'end': 65767.319, 'text': 'So just mark your calendars.', 'start': 65765.758, 'duration': 1.561}], 'summary': 'Positive feedback on animation and scheduling change to bi-weekly meetings.', 'duration': 35.935, 'max_score': 65731.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw65731384.jpg'}, {'end': 65946.789, 'src': 'embed', 'start': 65883.509, 'weight': 1, 'content': [{'end': 65892.111, 'text': 'So fork this, modify the README.md file to write up like bullet points of like, this is cool.', 'start': 65883.509, 'duration': 8.602}, {'end': 65895.736, 'text': 'This other thing is cool.', 'start': 65894.615, 'duration': 1.121}, {'end': 65903.443, 'text': 'You know, interesting insights that you find about the data, not about the viz or the coding.', 'start': 65897.878, 'duration': 5.565}, {'end': 65907.447, 'text': 'But I want you to like actually explore some data.', 'start': 65904.323, 'duration': 3.124}, {'end': 65912.21, 'text': 'And yeah, share your results in the forum.', 'start': 65909.628, 'duration': 2.582}, {'end': 65915.293, 'text': "I've made an entry for today.", 'start': 65912.471, 'duration': 2.822}, {'end': 65919.017, 'text': 'Episode 12.', 'start': 65917.695, 'duration': 1.322}, {'end': 65919.337, 'text': 'Here it is.', 'start': 65919.017, 'duration': 0.32}, {'end': 65938.602, 'text': "VizHub has been my passion project since 2018 and I've rewritten it twice and I'm embarking on rewriting it again because I went in the other day to try to redeploy and,", 'start': 65921.251, 'duration': 17.351}, {'end': 65944.666, 'text': "like upgrade the dependencies, and it's like It was just so heavy feeling.", 'start': 65938.602, 'duration': 6.064}, {'end': 65946.789, 'text': "you know a code base that I've been working on for two years.", 'start': 65944.666, 'duration': 2.123}], 'summary': 'Vizhub is a passion project since 2018, rewritten twice, and being rewritten again due to heavy feeling of code base worked on for two years.', 'duration': 63.28, 'max_score': 65883.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw65883509.jpg'}, {'end': 66407.1, 'src': 'embed', 'start': 66376.087, 'weight': 4, 'content': [{'end': 66383.25, 'text': 'like in the editor of this hub, there should be a visual editor with colors and numbers and strings, and as you change those,', 'start': 66376.087, 'duration': 7.163}, {'end': 66386.009, 'text': 'it should update instantly.', 'start': 66383.25, 'duration': 2.759}, {'end': 66395.133, 'text': "so yeah, i just wanted to share some, some context for why i'm why i'm ending this the series right now.", 'start': 66386.009, 'duration': 9.124}, {'end': 66399.075, 'text': "so yeah, that's it.", 'start': 66395.133, 'duration': 3.942}, {'end': 66402.835, 'text': "have you been in contact with him on how he's done that?", 'start': 66399.075, 'duration': 3.76}, {'end': 66404.638, 'text': 'no, Okay.', 'start': 66402.835, 'duration': 1.803}, {'end': 66407.1, 'text': "I mean, he's, he's a towering figure.", 'start': 66404.937, 'duration': 2.163}], 'summary': 'The visual editor in the hub should update instantly with colors, numbers, and strings. the speaker is ending a series and has not been in contact with a towering figure.', 'duration': 31.013, 'max_score': 66376.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw66376087.jpg'}, {'end': 66465.354, 'src': 'embed', 'start': 66434.231, 'weight': 2, 'content': [{'end': 66435.392, 'text': 'Or even try, I guess.', 'start': 66434.231, 'duration': 1.161}, {'end': 66442.258, 'text': 'And yeah, someone asked how to support VizHub.', 'start': 66439.595, 'duration': 2.663}, {'end': 66451.481, 'text': 'Yeah, the best way to support it right now is just to sign up for the, the paid plan, which is four dollars a month.', 'start': 66443.179, 'duration': 8.302}, {'end': 66452.062, 'text': "there's current.", 'start': 66451.481, 'duration': 0.581}, {'end': 66456.326, 'text': "there are currently not that many customers and it's not making money.", 'start': 66452.062, 'duration': 4.264}, {'end': 66458.648, 'text': "it's not even paying for the servers.", 'start': 66456.326, 'duration': 2.322}, {'end': 66465.354, 'text': "but um and this is another direction i'm going to take it i want to add more features that people would be willing to pay for.", 'start': 66458.648, 'duration': 6.706}], 'summary': "To support vizhub, sign up for the $4/month paid plan as there are currently not many customers and it's not making money.", 'duration': 31.123, 'max_score': 66434.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw66434231.jpg'}], 'start': 64101.093, 'title': 'Vizhub and data visualization', 'summary': "Discusses changes in meetup frequency, d3axis transition and scale implementation, small multiples dot plots, visualizing data with small multiples, vizhub passion project, and future plans for vizhub's development, aiming to make it profitable and suitable for teaching web technology.", 'chapters': [{'end': 64282.668, 'start': 64101.093, 'title': 'Bi-weekly meetup changes', 'summary': 'Discusses the change in frequency of the meetup to bi-weekly, citing difficulty in keeping up with weekly sessions and highlighting the implications of having multiple entries with the same keys in a map object.', 'duration': 181.575, 'highlights': ['The meetup frequency has been changed to every other week, as it was found to be difficult to manage weekly sessions.', 'Explanation of the behavior when having multiple entries with the same keys in a map object, where the last occurrence overwrites the previous ones.', 'Insight into the semantics of .set method for maps, highlighting its behavior with multiple entries having the same key.']}, {'end': 64991.641, 'start': 64284.409, 'title': 'D3axis transition and scale implementation', 'summary': 'Discusses the implementation of d3axis transition and scale, including the behavior of point scale, the use of categorical and linear scales, and the architecture for implementing dot plots to show the distribution across categories.', 'duration': 707.232, 'highlights': ['The D3Axis handles the transition brilliantly, animating numbers with a linear scale and providing a nice fade animation with a different type of scale. The D3Axis animates numbers with a linear scale and provides a fade animation with a different type of scale, demonstrating its brilliant implementation.', 'The behavior of a point scale is discussed, showing how it takes the unique values and spreads them across the screen space. The point scale behavior is explained, illustrating how it takes unique values and spreads them across the screen space.', 'The use of categorical and linear scales is explained, including the implementation of a scale point for categorical data and scale linear for non-categorical data. The explanation covers the use of categorical and linear scales, with the implementation of scale point for categorical data and scale linear for non-categorical data.', "The architecture for implementing dot plots to show distribution across categories is discussed, providing a bird's eye view of the approach. The architecture for implementing dot plots to display distribution across categories is outlined, offering a high-level view of the approach."]}, {'end': 65182.679, 'start': 64992.201, 'title': 'Visualization design and small multiples dot plots', 'summary': 'Discusses the implementation of small multiples dot plots for visualizing data, including the process of binning and the use of d3 histogram, as well as an alternative visualization design involving setting fill opacity to 0.2 in the css for subdividing circles by species.', 'duration': 190.478, 'highlights': ['Implementation of small multiples dot plots for visualizing data The chapter explains the approach of using small multiples dot plots to visualize data for each species, involving the iteration and invocation of reusable dot plot instances.', 'Process of binning and use of D3 Histogram for data processing The process of binning unique values and counting occurrences using D3 Histogram is discussed as a data processing step before visualizing the data as a dot plot.', 'Alternative visualization design involving setting fill opacity to 0.2 in the CSS for subdividing circles by species An alternative visualization design is suggested, involving setting the fill opacity to 0.2 in the CSS to subdivide circles by species, providing a simple yet effective visualization option.']}, {'end': 65731.364, 'start': 65183.42, 'title': 'Visualizing data with small multiples', 'summary': 'Discusses the concept of small multiples for visualizing data, exploring different options like box plots, histograms, and violin plots, and demonstrates optimization techniques in code, as well as the challenges of styling html select elements.', 'duration': 547.944, 'highlights': ['The chapter discusses the concept of small multiples for visualizing data, exploring different options like box plots, histograms, and violin plots. The speaker explains the concept of small multiples for visualizing data and mentions various options such as box plots, histograms, and violin plots.', 'The chapter demonstrates optimization techniques in code, showing how to simplify and clean up duplicated logic. The speaker demonstrates how to optimize code by simplifying and cleaning up duplicated logic, using parentheses to factor out duplicated logic and applying it to the returned scale.', 'The chapter addresses the challenges of styling HTML select elements, suggesting the use of third-party libraries for better customization. The speaker discusses the difficulty of styling HTML select elements and recommends seeking out third-party libraries for better customization and styling options.']}, {'end': 66144.607, 'start': 65731.384, 'title': 'Vizhub passion project and global reach', 'summary': 'Discusses the vizhub passion project, including the assignment to find a compelling dataset, the upcoming iteration of vizhub, and its global reach, with mentions of its audience from various countries.', 'duration': 413.223, 'highlights': ['The speaker encourages participants to find a compelling public dataset and explore it using a scatterplot with menus, providing guidance on how to obtain and visualize the data. (Importance: 5)', 'The speaker expresses their passion for VizHub, emphasizing its development and the upcoming iteration, with a focus on features like hot reloading and interactive visuals. (Importance: 4)', "The speaker appreciates the global reach of VizHub, indicating a diverse audience from various countries including developing nations, highlighting the platform's success in reaching a wider audience. (Importance: 3)"]}, {'end': 66581.242, 'start': 66144.626, 'title': 'Developing vizhub and future plans', 'summary': "Discusses the development of vizhub, an immediate code and picture synchronization tool inspired by brett victor's work, and the plans to improve vizhub's performance and add new features, with the goal of making it profitable and suitable for teaching web technology.", 'duration': 436.616, 'highlights': ["VizHub's immediate code and picture synchronization feature was inspired by Brett Victor's work, which allows the picture to change immediately as the code is modified. The immediate code and picture synchronization feature of VizHub was inspired by Brett Victor's work, enabling real-time changes in the picture as modifications are made to the code.", "The plan to improve VizHub's performance aims to reduce the time taken for code updates to execute to milliseconds without rerunning the entire HTML. The goal is to enhance VizHub's performance so that code updates execute within milliseconds without the need to rerun the entire HTML.", 'Future plans for VizHub include adding features such as pay-for-storage, pay-for-collaborator seats, pay-for-white-label embedding, and custom domains for Vizes, with the intention of making VizHub profitable. Future plans for VizHub involve introducing features like pay-for-storage, pay-for-collaborator seats, pay-for-white-label embedding, and custom domains for Vizes, aiming to make the platform profitable.', 'The aim is to make VizHub the best tool for professors and teachers to use for teaching web technology, and a beta program is being considered for testing the new version of VizHub. Efforts are directed towards making VizHub the top choice for professors and teachers to teach web technology, with the possibility of a beta program to test the new version of VizHub.']}], 'duration': 2480.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw64101093.jpg', 'highlights': ['The meetup frequency has been changed to every other week, as it was found to be difficult to manage weekly sessions.', "The plan to improve VizHub's performance aims to reduce the time taken for code updates to execute to milliseconds without rerunning the entire HTML.", "The immediate code and picture synchronization feature of VizHub was inspired by Brett Victor's work, enabling real-time changes in the picture as modifications are made to the code.", 'The chapter discusses the concept of small multiples for visualizing data, exploring different options like box plots, histograms, and violin plots.', 'The speaker encourages participants to find a compelling public dataset and explore it using a scatterplot with menus, providing guidance on how to obtain and visualize the data.', 'Future plans for VizHub involve introducing features like pay-for-storage, pay-for-collaborator seats, pay-for-white-label embedding, and custom domains for Vizes, aiming to make the platform profitable.']}, {'end': 70351.82, 'segs': [{'end': 67095.034, 'src': 'embed', 'start': 67050.327, 'weight': 0, 'content': [{'end': 67056.868, 'text': 'If we just comment that out, it renders without the axis, which is fine.', 'start': 67050.327, 'duration': 6.541}, {'end': 67066.157, 'text': 'Although I kind of like, I kind of want to keep the visual elements of the axis.', 'start': 67060.276, 'duration': 5.881}, {'end': 67082.403, 'text': "So I'm just thinking, how could we do this? We could do some other rendering logic where we render these tick marks ourselves.", 'start': 67071.46, 'duration': 10.943}, {'end': 67089.785, 'text': 'Or we may be able to configure D3 axis with a set number of points.', 'start': 67084.263, 'duration': 5.522}, {'end': 67095.034, 'text': 'I believe we can do that.', 'start': 67094.013, 'duration': 1.021}], 'summary': 'Discussing options for rendering axis, considering custom rendering or configuring d3 axis with a set number of points.', 'duration': 44.707, 'max_score': 67050.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw67050327.jpg'}, {'end': 68378.024, 'src': 'embed', 'start': 68345.585, 'weight': 2, 'content': [{'end': 68346.205, 'text': "Oh yeah, that's cool.", 'start': 68345.585, 'duration': 0.62}, {'end': 68348.526, 'text': 'Indirectly Yes, yes.', 'start': 68346.225, 'duration': 2.301}, {'end': 68356.589, 'text': "Indeed in the read me section I said that it's really a map, but I like, I don't.", 'start': 68349.146, 'duration': 7.443}, {'end': 68363.432, 'text': "I haven't learned yet how to make it, but but because I use latitude and longitude, it really it's.", 'start': 68356.589, 'duration': 6.843}, {'end': 68366.814, 'text': 'it resembles the the geographical points.', 'start': 68363.432, 'duration': 3.382}, {'end': 68371.476, 'text': 'Yep Totally.', 'start': 68368.375, 'duration': 3.101}, {'end': 68378.024, 'text': 'Yeah, I can talk a little bit about how to actually make it a map.', 'start': 68374.181, 'duration': 3.843}], 'summary': 'The speaker discusses using latitude and longitude to make a geographical map.', 'duration': 32.439, 'max_score': 68345.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw68345585.jpg'}, {'end': 68541.658, 'src': 'embed', 'start': 68504.473, 'weight': 3, 'content': [{'end': 68506.134, 'text': 'That should be date continent.', 'start': 68504.473, 'duration': 1.661}, {'end': 68509.22, 'text': 'Now you can see it more clearly.', 'start': 68507.819, 'duration': 1.401}, {'end': 68511.4, 'text': 'See? Yes, definitely.', 'start': 68509.34, 'duration': 2.06}, {'end': 68520.704, 'text': "Red And it's impressive how it gets almost completely black.", 'start': 68512.301, 'duration': 8.403}, {'end': 68523.845, 'text': "It's a heritive x-ray.", 'start': 68522.584, 'duration': 1.261}, {'end': 68535.772, 'text': 'Is there a way you could also filter on the counts and then switch up the color? Once it hits a threshold so that it pops.', 'start': 68523.865, 'duration': 11.907}, {'end': 68537.634, 'text': 'So you could have a red.', 'start': 68536.432, 'duration': 1.202}, {'end': 68541.658, 'text': "Yeah, that's a great idea to do that.", 'start': 68537.654, 'duration': 4.004}], 'summary': 'Reviewing imaging data to enhance visualization and highlighting features based on counts and color thresholds.', 'duration': 37.185, 'max_score': 68504.473, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw68504473.jpg'}, {'end': 70351.42, 'src': 'heatmap', 'start': 69653.087, 'weight': 1, 'content': [{'end': 69655.369, 'text': 'Thank you.', 'start': 69653.087, 'duration': 2.282}, {'end': 69659.213, 'text': "And if you use const here, that's also not going to work.", 'start': 69655.389, 'duration': 3.824}, {'end': 69664.531, 'text': "That's also not going to work because..", 'start': 69662.81, 'duration': 1.721}, {'end': 69672.136, 'text': "Oh, well, you need to assign a const when it's declared.", 'start': 69664.531, 'duration': 7.605}, {'end': 69676.059, 'text': "But here's another approach that could work.", 'start': 69673.977, 'duration': 2.082}, {'end': 69681.903, 'text': "If you don't define any variables, you could just return them.", 'start': 69676.259, 'duration': 5.644}, {'end': 69685.725, 'text': 'Like this.', 'start': 69685.305, 'duration': 0.42}, {'end': 69688.327, 'text': 'Actually, this simplifies the code quite a bit.', 'start': 69686.005, 'duration': 2.322}, {'end': 69695.413, 'text': "then we don't need the breaks, because when we return, it's implicitly breaking out of the whole function.", 'start': 69690.049, 'duration': 5.364}, {'end': 69710.923, 'text': 'However, we need to pull out the setting of the range to be outside this function, which is, again, duplicated logic down here.', 'start': 69700.176, 'duration': 10.747}, {'end': 69712.504, 'text': "We'd have to do it twice.", 'start': 69711.664, 'duration': 0.84}, {'end': 69714.906, 'text': "So that's sort of a dead end.", 'start': 69713.525, 'duration': 1.381}, {'end': 69716.407, 'text': 'I would rather not do it like that.', 'start': 69715.226, 'duration': 1.181}, {'end': 69732.034, 'text': "So let's see.", 'start': 69731.574, 'duration': 0.46}, {'end': 69736.115, 'text': 'Is it still working? There seems to be some problem.', 'start': 69732.074, 'duration': 4.041}, {'end': 69739.275, 'text': 'Oh, I set the range.', 'start': 69737.855, 'duration': 1.42}, {'end': 69741.876, 'text': 'What happened? Sorry.', 'start': 69739.375, 'duration': 2.501}, {'end': 69755.059, 'text': 'Somehow it got messed up.', 'start': 69754.139, 'duration': 0.92}, {'end': 69770.609, 'text': "That's odd.", 'start': 69770.168, 'duration': 0.441}, {'end': 69772.271, 'text': 'It was working a second ago.', 'start': 69771.21, 'duration': 1.061}, {'end': 69779.421, 'text': 'Is it because we missed the breaks again? No.', 'start': 69776.637, 'duration': 2.784}, {'end': 69781.685, 'text': 'The breaks are there.', 'start': 69780.984, 'duration': 0.701}, {'end': 69792.083, 'text': 'Is it because like the range takes this width thing? Like, but for Y scale, you would need like margin bottom.', 'start': 69783.416, 'duration': 8.667}, {'end': 69795.146, 'text': "Yeah, that's it.", 'start': 69793.425, 'duration': 1.721}, {'end': 69796.427, 'text': 'Oh, good catch.', 'start': 69795.526, 'duration': 0.901}, {'end': 69798.249, 'text': 'Good catch.', 'start': 69797.568, 'duration': 0.681}, {'end': 69804.194, 'text': 'So in that case, maybe we do want to use the return.', 'start': 69799.41, 'duration': 4.784}, {'end': 69809.59, 'text': 'approach and then set the range separately.', 'start': 69806.849, 'duration': 2.741}, {'end': 69810.391, 'text': "that's what it is.", 'start': 69809.59, 'duration': 0.801}, {'end': 69812.231, 'text': "that's exactly what it is.", 'start': 69810.391, 'duration': 1.84}, {'end': 69817.834, 'text': 'so the range for the y scale is going to be well.', 'start': 69812.231, 'duration': 5.603}, {'end': 69823.837, 'text': 'let me just see what it was in the one that i forked it from.', 'start': 69817.834, 'duration': 6.003}, {'end': 69828.759, 'text': "i i accidentally assumed that the range would be the same across each, but it's not.", 'start': 69823.837, 'duration': 4.922}, {'end': 69836.891, 'text': "That's the right range.", 'start': 69835.99, 'duration': 0.901}, {'end': 69838.694, 'text': "Yeah, that's right.", 'start': 69837.993, 'duration': 0.701}, {'end': 69845.423, 'text': 'And then now we can just use return.', 'start': 69839.675, 'duration': 5.748}, {'end': 69851.672, 'text': 'But let me keep this around as a reference.', 'start': 69850.009, 'duration': 1.663}, {'end': 69865.829, 'text': 'So this is option 3.', 'start': 69862.708, 'duration': 3.121}, {'end': 69873.851, 'text': 'This is option 2.', 'start': 69865.829, 'duration': 8.022}, {'end': 69884.094, 'text': "And I was just thinking to myself, if we're going to use a return, we may as well just use if statements, which might be even more clear to read.", 'start': 69873.851, 'duration': 10.243}, {'end': 69899.049, 'text': 'If type equals categorical, then return this kind of a scale.', 'start': 69884.834, 'duration': 14.215}, {'end': 69904.894, 'text': "And since we return it, we don't need to use else.", 'start': 69901.991, 'duration': 2.903}, {'end': 69909.197, 'text': 'We could just have another if.', 'start': 69905.334, 'duration': 3.863}, {'end': 69915.923, 'text': "So if it's time, then we can return this one.", 'start': 69912.82, 'duration': 3.103}, {'end': 69926.84, 'text': "And then If it's nothing else, then we can fall through to the default of the linear scale.", 'start': 69919.506, 'duration': 7.334}, {'end': 69939.637, 'text': 'So this also works as an alternate way of doing it.', 'start': 69932.487, 'duration': 7.15}, {'end': 69953.123, 'text': "So yeah, it's up to you.", 'start': 69952.102, 'duration': 1.021}, {'end': 69954.323, 'text': "It's a stylistic choice.", 'start': 69953.303, 'duration': 1.02}, {'end': 69959.767, 'text': "I personally kind of like this just because it's only a couple lines.", 'start': 69956.125, 'duration': 3.642}, {'end': 69962.248, 'text': 'One, two, three, four, five, six.', 'start': 69960.828, 'duration': 1.42}, {'end': 69966.691, 'text': 'However, it could be cryptic for others to read if you hand it off to somebody else.', 'start': 69962.949, 'duration': 3.742}, {'end': 69969.433, 'text': 'So maybe this is the best choice.', 'start': 69967.492, 'duration': 1.941}, {'end': 69971.895, 'text': 'Or maybe this is good.', 'start': 69971.034, 'duration': 0.861}, {'end': 69972.235, 'text': "I don't know.", 'start': 69971.955, 'duration': 0.28}, {'end': 69975.357, 'text': "It's a very subjective choice.", 'start': 69973.976, 'duration': 1.381}, {'end': 69982.393, 'text': 'Yeah But yeah, this has been fun.', 'start': 69975.377, 'duration': 7.016}, {'end': 69983.298, 'text': 'Really nice work.', 'start': 69982.674, 'duration': 0.624}, {'end': 69998.346, 'text': 'And I like how all of these I mean this visualization, as well as the one that Costa worked on it highlights social inequality issues,', 'start': 69989.181, 'duration': 9.165}, {'end': 70005.17, 'text': 'which I think is a very important topic area to address with data visualization in particular,', 'start': 69998.346, 'duration': 6.824}, {'end': 70009.173, 'text': 'because it really makes clear things that are in the data.', 'start': 70005.17, 'duration': 4.003}, {'end': 70012.835, 'text': "They're clear in the data if you look at the data in the right way.", 'start': 70009.713, 'duration': 3.122}, {'end': 70018.937, 'text': 'And so, yeah, I think this is a valid point.', 'start': 70017.256, 'duration': 1.681}, {'end': 70022.12, 'text': 'Like. why are there so many World Heritage Sites in Europe??', 'start': 70018.977, 'duration': 3.143}, {'end': 70025.042, 'text': 'Is Europe really the like center of civilization?', 'start': 70022.34, 'duration': 2.702}, {'end': 70029.947, 'text': 'Or is it just, you know, is UNESCO neglecting?', 'start': 70025.123, 'duration': 4.824}, {'end': 70034.17, 'text': "you know other countries out of some kind of I don't know racist underpinnings?", 'start': 70029.947, 'duration': 4.223}, {'end': 70035.551, 'text': 'I have no idea.', 'start': 70034.771, 'duration': 0.78}, {'end': 70036.932, 'text': 'I have no idea about it.', 'start': 70035.571, 'duration': 1.361}, {'end': 70039.935, 'text': 'But just to start investigating these angles is great.', 'start': 70037.933, 'duration': 2.002}, {'end': 70047.837, 'text': "Yeah It's really interesting seeing how removing colors have brought this much clearer.", 'start': 70039.995, 'duration': 7.842}, {'end': 70054.038, 'text': 'Right, because color itself has a brightness value to it.', 'start': 70049.037, 'duration': 5.001}, {'end': 70056.839, 'text': "There's hue, saturation, and luminance in colors.", 'start': 70054.318, 'duration': 2.521}, {'end': 70063.58, 'text': 'And luminance means how much between white and black it is.', 'start': 70056.939, 'duration': 6.641}, {'end': 70069.041, 'text': 'But if you have hue, it confounds the brightness.', 'start': 70063.74, 'duration': 5.301}, {'end': 70076.442, 'text': "mean, yes, and i think it's full circle that this is get it right in black and white right,", 'start': 70070.476, 'duration': 5.966}, {'end': 70083.51, 'text': 'and we and we turn the the visualizations into black and white exactly, finally, exactly.', 'start': 70076.442, 'duration': 7.068}, {'end': 70093.55, 'text': "yep, yeah, i'm happy it ended up in black and white, turns out black and white is clear, it's more clear, And it's the same with 3D, by the way.", 'start': 70083.51, 'duration': 10.04}, {'end': 70101.439, 'text': "If you see 3D pie charts, 3D scatter plots, it's the same kind of thing as adding color, where you just make it more flashy,", 'start': 70093.57, 'duration': 7.869}, {'end': 70104.342, 'text': "but it doesn't really add any value most of the time.", 'start': 70101.439, 'duration': 2.903}, {'end': 70111.24, 'text': 'So yeah, as a next step for this, I would suggest trying to do the binning and the smoothing.', 'start': 70106.539, 'duration': 4.701}, {'end': 70121.523, 'text': 'And I wanted to show you all this thing that I built fairly recently that does exactly that.', 'start': 70112.141, 'duration': 9.382}, {'end': 70126.625, 'text': "It's a stream graph of D3 contributions over time.", 'start': 70122.024, 'duration': 4.601}, {'end': 70142.011, 'text': 'And what I did is I took commit data from GitHub on all the various D3 packages, and I binned them by, I think, week, and then I applied smoothing.', 'start': 70127.885, 'duration': 14.126}, {'end': 70147.533, 'text': 'And I wanted to show you the effect of changing the smoothing parameter.', 'start': 70142.571, 'duration': 4.962}, {'end': 70153.636, 'text': "See, if there's no smoothing, it looks something like this.", 'start': 70148.194, 'duration': 5.442}, {'end': 70160.222, 'text': 'this is just the raw aggregated values per week.', 'start': 70156.519, 'duration': 3.703}, {'end': 70168.669, 'text': 'And I think if you were to aggregate the data that you have per year, you would get something kind of similar to this.', 'start': 70161.203, 'duration': 7.466}, {'end': 70172.693, 'text': 'But with, you know, with a different layout.', 'start': 70171.052, 'duration': 1.641}, {'end': 70184.988, 'text': 'And you can apply smoothing though, to get a more broad picture of generally when things increased or decreased.', 'start': 70174.975, 'duration': 10.013}, {'end': 70187.749, 'text': "It's a smoothed out view of it.", 'start': 70185.328, 'duration': 2.421}, {'end': 70192.85, 'text': 'And for this particular analysis, the smoothed out view was much more useful than the detailed view.', 'start': 70187.969, 'duration': 4.881}, {'end': 70200.971, 'text': 'You can see clearly, okay, D3 was developed monolithically from 2011 to 2014, and then it was split into a bunch of packages.', 'start': 70192.89, 'duration': 8.081}, {'end': 70204.112, 'text': 'And then some new packages were created after that.', 'start': 70201.472, 'duration': 2.64}, {'end': 70212.354, 'text': "The other thing is that it gave you an opportunity to annotate what she just couldn't.", 'start': 70206.353, 'duration': 6.001}, {'end': 70217.018, 'text': 'Exactly Exactly.', 'start': 70214.076, 'duration': 2.942}, {'end': 70220.801, 'text': "There's no room for the labels in the version that's not smoothed.", 'start': 70217.058, 'duration': 3.743}, {'end': 70222.543, 'text': 'Exactly Yeah.', 'start': 70221.682, 'duration': 0.861}, {'end': 70227.227, 'text': "Yeah And even if you hovered over, you wouldn't get the insight.", 'start': 70223.424, 'duration': 3.803}, {'end': 70232.752, 'text': "Yeah It's tricky to hover over each and every one to try to figure out what it is.", 'start': 70228.148, 'duration': 4.604}, {'end': 70238.392, 'text': 'Yeah So I forgot what it was originally.', 'start': 70234.714, 'duration': 3.678}, {'end': 70239.833, 'text': '15 maybe.', 'start': 70239.533, 'duration': 0.3}, {'end': 70243.613, 'text': "That's cool.", 'start': 70243.113, 'duration': 0.5}, {'end': 70246.014, 'text': 'So yeah, this one was a lot of fun to make.', 'start': 70244.294, 'duration': 1.72}, {'end': 70250.315, 'text': 'I had hoped to continue this series and get to making something like this.', 'start': 70246.654, 'duration': 3.661}, {'end': 70253.636, 'text': 'But, you know, in the future.', 'start': 70251.275, 'duration': 2.361}, {'end': 70256.556, 'text': "I'll do it in the future.", 'start': 70255.756, 'duration': 0.8}, {'end': 70261.737, 'text': "All right, well, I think I'm going to wrap up.", 'start': 70258.237, 'duration': 3.5}, {'end': 70270.85, 'text': 'But.. Let me see.', 'start': 70263.478, 'duration': 7.372}, {'end': 70276.154, 'text': "Yeah, I'm going to wrap up.", 'start': 70275.253, 'duration': 0.901}, {'end': 70285.841, 'text': 'Thank you all for joining me for this ongoing saga of Get It Right in Black and White with VizHub as our tool.', 'start': 70276.434, 'duration': 9.407}, {'end': 70292.866, 'text': "And yeah, I'll see you in the future sometime.", 'start': 70286.962, 'duration': 5.904}, {'end': 70304.158, 'text': 'And yeah, feel free to reach out to me if you want to get involved with upcoming versions of VizHub, maybe be a beta tester.', 'start': 70294.674, 'duration': 9.484}, {'end': 70313.702, 'text': "And let me know if you have any feedback on VizHub in general or the way I'm doing the courses, ways that things could be improved,", 'start': 70305.339, 'duration': 8.363}, {'end': 70319.144, 'text': "what you've gotten out of it, things that have been frustrating.", 'start': 70313.702, 'duration': 5.442}, {'end': 70321.485, 'text': 'I want to hear it all.', 'start': 70319.164, 'duration': 2.321}, {'end': 70324.661, 'text': 'All right.', 'start': 70324.341, 'duration': 0.32}, {'end': 70325.742, 'text': 'So thank you all.', 'start': 70324.941, 'duration': 0.801}, {'end': 70328.784, 'text': 'Fantastic Any final thoughts? Thank you so much, Curran.', 'start': 70325.762, 'duration': 3.022}, {'end': 70329.285, 'text': 'My pleasure.', 'start': 70328.804, 'duration': 0.481}, {'end': 70331.766, 'text': 'Thank you, Curran.', 'start': 70331.206, 'duration': 0.56}, {'end': 70334.308, 'text': 'Thank you, Curran.', 'start': 70333.788, 'duration': 0.52}, {'end': 70335.329, 'text': "I'll be in touch.", 'start': 70334.668, 'duration': 0.661}, {'end': 70336.249, 'text': 'All right.', 'start': 70335.909, 'duration': 0.34}, {'end': 70342.734, 'text': "Great And if you want to support me in the meantime, sign up for this measly $4 a month and it'll go a long way.", 'start': 70336.289, 'duration': 6.445}, {'end': 70345.316, 'text': 'Yep Done.', 'start': 70344.555, 'duration': 0.761}, {'end': 70346.176, 'text': 'All right.', 'start': 70345.816, 'duration': 0.36}, {'end': 70346.917, 'text': 'Thanks, everyone.', 'start': 70346.236, 'duration': 0.681}, {'end': 70348.958, 'text': 'Thank you, Curran.', 'start': 70348.138, 'duration': 0.82}, {'end': 70349.759, 'text': 'Take care.', 'start': 70349.258, 'duration': 0.501}, {'end': 70351.42, 'text': 'Bye-bye Bye.', 'start': 70349.779, 'duration': 1.641}], 'summary': 'Discussion on code optimization and data visualization techniques, with insights into social inequality issues highlighted through visualizations.', 'duration': 698.333, 'max_score': 69653.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw69653087.jpg'}], 'start': 66581.581, 'title': 'Data analysis and visualization techniques', 'summary': 'Reviews last assignment data analysis, discusses income inequality in the us, visualizes data with scatter plots, and explores visualization techniques for heritage elements and unesco sites, emphasizing social inequality issues.', 'chapters': [{'end': 66781.804, 'start': 66581.581, 'title': 'Reviewing last assignment and data analysis', 'summary': 'Reviews the last assignment, where kostov analyzed a new dataset from the tidy tuesday project using d3 to visualize median household income disparities in the us, highlighting significant differences between racial communities.', 'duration': 200.223, 'highlights': ['Kostov analyzed a new dataset from the tidy Tuesday project using D3 to visualize median household income disparities in the US, highlighting significant differences between racial communities.', 'The dataset revealed a significant difference in median household income between white, black, and Hispanic communities, showcasing prevalent income inequality.', 'The group discussed potential improvements in visualizing the data, emphasizing the importance of accurately representing the data for ease of interpretation.']}, {'end': 67443.404, 'start': 66781.804, 'title': 'Income inequality analysis', 'summary': 'Discusses the profound income inequality in the us, with white people earning around $160,000 annually compared to black people earning less than $40,000, and the lack of improvement in this disparity over time, prompting the exploration of potential visualizations and data analysis techniques.', 'duration': 661.6, 'highlights': ['The median annual earnings for white people in the US are approximately $160,000, while black people earn less than $40,000 annually, reflecting a significant income disparity.', 'The income gap between white and black individuals in the US has not shown improvement over time and seems to have widened, with white earnings increasing compared to other ethnic minorities, indicating a persistent and worsening inequality.', 'Exploration of potential visualizations and data analysis techniques is suggested, including analyzing income disparity in different countries and breaking it down by gender, highlighting the importance of using appropriate visualizations to effectively communicate data insights.']}, {'end': 68139.746, 'start': 67445.107, 'title': 'Visualizing data with scatter plots and labels', 'summary': 'Discusses techniques for visualizing data with scatter plots, including adding jitter to avoid overlapping points and using force layout to prevent point overlap, while also addressing the issue of displaying categorical labels on the axes.', 'duration': 694.639, 'highlights': ['The discussion covers the challenge of displaying categorical labels on the axes of a scatter plot, with the example of mapping numerical values to actual strings representing species, emphasizing the need for preprocessing the data to replace numbers with corresponding strings.', "The technique of adding jitter to scatter plot points is explored, with a detailed explanation of how to implement jitter to introduce random variation, and the comparison of jitter's effect on point distribution, including the possibility of overlap, with the alternative use of D3 force layout to ensure no overlap.", 'The conversation delves into the implementation of jitter, discussing the use of random numbers to introduce variation in a specific direction, as well as the suggestion of using sine and cosine to achieve jitter in a circular distribution, highlighting the technical considerations and alternative approaches to jitter implementation.']}, {'end': 68651.303, 'start': 68140.727, 'title': 'Visualizing heritage elements distribution', 'summary': 'Discusses the challenges of visualizing the distribution of heritage elements, particularly in europe, and proposes using force-directed layouts and binning by year to accurately represent the density and temporal trends, aiming to reveal the disproportionate presence of heritage sites in europe compared to other parts of the world.', 'duration': 510.576, 'highlights': ['The suggestion to use force-directed layout and collision constraint without jitter to visualize the dense area of heritage sites in Europe, providing a clearer representation of the quantity and density of points. Suggestion to use force-directed layout and collision constraint; Provides clearer representation of the quantity and density of points.', 'The insight that before the 90s, there was a disproportionate amount of cultural and natural heritage sites in Europe, with less presence in Latin America, Africa, and other parts of the world, which was not adequately represented in the visualizations. Disproportionate presence of heritage sites in Europe before the 90s; Less presence in Latin America, Africa, and other parts of the world; Inadequate representation in visualizations.', 'The discussion on adjusting opacity, radius, and colors to highlight the disproportionate density of heritage sites in Europe, emphasizing the need for clearer visualization to convey the message effectively. Adjusting opacity, radius, and colors to highlight disproportionate density; Emphasizes the need for clearer visualization.', "The suggestion to leverage D3 histogram to bin the data by year and apply smoothing to create an aggregated view, and the proposal to use color thresholds to emphasize the message, particularly focusing on Europe's higher count of heritage sites. Leveraging D3 histogram to bin the data by year and apply smoothing; Proposal to use color thresholds to emphasize Europe's higher count of heritage sites."]}, {'end': 70351.82, 'start': 68652.605, 'title': 'Unesco heritage sites analysis', 'summary': 'Discusses the disparity in highlighting cultural heritage sites across continents, emphasizing the need to consider population data and address social inequality issues with data visualization.', 'duration': 1699.215, 'highlights': ['The disparity in highlighting cultural heritage sites across continents is discussed, with emphasis on the need to consider population data. Asia, with a larger population than Europe, has significantly fewer UNESCO heritage sites, highlighting the disproportionate reality.', 'The analysis raises questions about the success of Africa in the 60s compared to later years and the increase in heritage sites in the 1980s. Questions are raised about why Africa performed better in the 60s, and there was a notable increase in heritage sites in the 1980s, indicating potential shifts in cultural preservation.', 'The process of creating a generic scatterplot that handles quantitative, categorical, and time data is discussed, including considerations for code aesthetics and efficiency. The process of developing a scatterplot capable of handling diverse data types is explored, with a focus on decision-making, aesthetics, and code optimization.', 'The benefits of utilizing black and white visualizations and the importance of removing confounding elements like color and 3D effects are highlighted. The clarity of black and white visualizations is emphasized, along with the detrimental impact of confounding elements like color and 3D effects on data interpretation.', 'The importance of smoothing data for enhanced visualization, particularly in stream graphs, is demonstrated with a focus on the impact on insights and annotations. The significance of data smoothing in stream graphs is showcased, illustrating its role in providing a broader view and enabling effective annotations for insights.']}], 'duration': 3770.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/xkBheRZTkaw/pics/xkBheRZTkaw66581581.jpg', 'highlights': ['Kostov analyzed a new dataset from the tidy Tuesday project using D3 to visualize median household income disparities in the US, highlighting significant differences between racial communities.', 'The median annual earnings for white people in the US are approximately $160,000, while black people earn less than $40,000 annually, reflecting a significant income disparity.', 'The suggestion to use force-directed layout and collision constraint without jitter to visualize the dense area of heritage sites in Europe, providing a clearer representation of the quantity and density of points.', 'The disparity in highlighting cultural heritage sites across continents is discussed, with emphasis on the need to consider population data. Asia, with a larger population than Europe, has significantly fewer UNESCO heritage sites, highlighting the disproportionate reality.']}], 'highlights': ['A year-long live data visualization series with 5,000 unique vizhub users covers html, css, svg basics, javascript, d3, array methods, github setup, and d3 visualization techniques, including transitions and troubleshooting, aiming to enhance and monetize vizhub for web technology education.', 'The 2020 version of the course, DataVis 2020, is oriented around pure D3 and will run for about a year, every single Saturday, with special guests and a small group of friends participating in live discussions.', 'HTML is an open standard maintained by W3C and was invented in 1993 by Tim Berners-Lee, with the current standard being HTML5.', 'CSS is a style sheet language embedded within HTML, allowing for the styling of elements on a web page by setting properties such as color, font, and size.', 'SVG is an API within the HTML standard, allowing for the creation of scalable vector graphics, which is useful for creating interactive and animated web graphics.', 'VizHub has an active community with approximately 5,000 unique users over its history, and it is used daily for creating and modifying content.', 'The decision to use the VizHub forum for asynchronous communication is driven by the transient nature of D3 Slack and the lack of history preservation with the free plan of Slack.', 'D3 simplifies DOM manipulation and reduces code verbosity.', 'The .sort method in JavaScript is discussed, emphasizing its mutative nature and the use of a comparator function to define the sort order.', 'The .filter method is explained, showcasing its utility in filtering array elements based on specific conditions, such as checking for even numbers.', 'The .forEach method is introduced as a functional shorthand for writing verbose for loops, offering a more concise way of iterating through array elements.', 'The concept of creating objects using functions and closures is explained.', 'The process of creating SVG elements using the DOM API is covered.', 'The .map method is used to define properties X and Y for the input data D, allowing for direct visualization of the constructed data elements.', 'The .join API of D3 handles enter, update, and exit and creates a single group element if the selection already exists, ensuring idempotent rendering and proper functionality.', 'The chapter discusses the use of different types of scales in data visualization, including linear, point, square root, and power scales.', "The plan to improve VizHub's performance aims to reduce the time taken for code updates to execute to milliseconds without rerunning the entire HTML.", 'Kostov analyzed a new dataset from the tidy Tuesday project using D3 to visualize median household income disparities in the US, highlighting significant differences between racial communities.']}