LBRY Block Explorer

LBRY Claims • 10-learn-about-svg-in-d3-data

ff4273a819dd0c1f57d470135d1be0ac81055884

Published By
Created On
25 Jun 2021 17:23:36 UTC
Transaction ID
Cost
Safe for Work
Free
Yes
10 - Learn About SVG in D3 - Data Visualization with D3 - freeCodeCamp Tutorial
We can use D3 to create SVG shapes on our page, to create visualizations of our data.

Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/learn-about-svg-in-d3
Concepts:
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 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
-————————————————————————————————————-

...
https://www.youtube.com/watch?v=WaKcg9ZeGZs
Author
Content Type
Unspecified
video/mp4
Language
English
Open in LBRY

More from the publisher

Controlling
VIDEO
06 -
Controlling
VIDEO
08 -
Controlling
VIDEO
19 -
Controlling
VIDEO
10 -
Controlling
VIDEO
USE I
Controlling
VIDEO
HOW C
Controlling
VIDEO
RESET
Controlling
VIDEO
15 -
Controlling
VIDEO
00 -