1 - Select and Add Document Elements - Data Visualization with D3 - freeCodeCamp Tutorial

We look at the d3 select, append and text methods to create html elements and modify their text. This is the first video in the data visualization with d3 series.

Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/add-document-elements-with-d3 Concepts:

d3.select() Selects the first element that matches the specified selector string. If no elements match the selector, returns an empty selection. If multiple elements match the selector, only the first matching element (in document order) will be selected. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_html

selection.append(type) If the specified type is a string, appends a new element of this type (tag name) as the last child of each selected element. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_append

selection.text([value]) If a value is specified, sets the text content to the specified value on all selected elements, replacing any existing child elements. If the value is a constant, then all elements are given the same text content; otherwise, if the value is a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The function’s return value is then used to set each element’s text content. A null value will clear the content. If a value is not specified, returns the text content for the first (non-null) element in the selection. This is generally useful only if you know the selection contains exactly one element. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_text -————————————————————————————————————- D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards.

freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience.

Thanks for Watching! ... https://www.youtube.com/watch?v=q6GWkbUWFBg