11 - Display Shapes with SVG - Data Visualization with D3 - freeCodeCamp Tutorial

We look at the shape elements we can create with SVG. Rectangles can be created with the rect tags and providing x and y coordinates to position it, and width and height values to adjust its size. It's important to note that the position values dictate where the top-left corner of the rectangle appears, not the center.

Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/display-shapes-with-svg 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 va ... https://www.youtube.com/watch?v=oBB97bBckjM