12 - Create a Bar for Each Data Point in Set - Data Visualization with D3 - freeCodeCamp Tutorial

We're gonna create some SVG rectangles to create bars for each data item in an array, to form the foundations of a basic bar chart.

Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set Similar Challenge : https://youtu.be/D0zzAn8T_g0 Concepts: Rect The rect element is used to create a rectangle and variations of a rectangle shape. The width and height attributes define the height and the width of the rectangle. https://www.w3schools.com/graphics/svg_rect.asp

SVG Shapes: https://www.w3.org/TR/SVG2/shapes.html

SVG Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999. SVG images and their behaviors are defined in XML text files. https://www.w3schools.com/graphics/svg_intro.asp

selection.style(name[, value[, priority]]) If a value is specified, sets the style property with the specified name to the specified value on the selected elements and returns this selection. If the value is a constant, then all elements are given the same style property 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 style property. A null value will remove the style property. An optional priority may also be specified, either as null or the string important (without the exclamation point). If a value is not specified, returns the current value of the specified style property for the first (non-null) element in the selection. The current value is defined as the element’s inline value, if present, and otherwise its computed value. Accessing the current style value 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_style

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 ... https://www.youtube.com/watch?v=YEi2k7m1p-c