4 - Work with Dynamic Data - Data Visualization with D3 - freeCodeCamp Tutorial

We're now going to set the heading text dynamically by providing a function into the text() method, instead of a string. This function can take in an item from the array and return some data from it to set as the text for each created element.

Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3 Concepts: 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. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_text

selection.data([data[, key]]) Binds the specified array of data with the selected elements, returning a new selection that represents the update selection: the elements successfully bound to data. Also defines the enter and exit selections on the returned selection, which can be used to add or remove elements to correspond to the new data. The specified data is an array of arbitrary values (e.g., numbers or objects), or a function that returns an array of values for each group. When data is assigned to an element, it is stored in the property data, thus making the data “sticky” and available on re-selection. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_data

selection.enter() Returns the enter selection: placeholder nodes for each datum that had no corresponding DOM element in the selection. (The enter selection is empty for selections not returned by selection.data.) The enter selection is typically used to create “missing” elements corresponding to new data. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_enter -————————————————————————————————————- 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 t ... https://www.youtube.com/watch?v=cp2tmuY5zaE