17 - Add Labels to D3 Elements - Data Visualization with D3 - freeCodeCamp Tutorial

Let's add some labels to our bars. We can use the SVG text element to render text on an SVG canvas. We can give this x and y attributes to position it correctly. Once again, we can use a function as the second argument in the attribute method. The d3 text method can be used for setting the content that goes inbetween tags.

Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/add-labels-to-d3-elements Concepts: Text The SVG text element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to text, like any other SVG graphics element. If text is included in SVG not inside of a text element, it is not rendered. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

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

selection.attr(name[, value]) If a value is specified, sets the attribute with the specified name to the specified value on the selected elements and returns this selection. If the value is a constant, all elements are given the same attribute value; 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 attribute. A null value will remove the specified attribute. If a value is not specified, returns the current value of the specified attribute for the first (non-null) element in the selection. This is generally useful only if you know that the selection contains exactly one element. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_attr -————————————————————————————————————- D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualization ... https://www.youtube.com/watch?v=3_eTqLXNaWo