29 - Add Axes to a Visualization - Data Visualization with D3 - freeCodeCamp Tutorial

We can use some D3 methods to create axes from a set of data and a scale. This returns a set of SVG shapes, on which we can apply a transform attribute, to translate it to the correct position.

Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/add-axes-to-a-visualization Concepts: d3.axisBottom(scale) Constructs a new bottom-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 and padding of 3. In this orientation, ticks are drawn below the horizontal domain path. https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axisBottom

d3.axisLeft(scale) Constructs a new left-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 and padding of 3. In this orientation, ticks are drawn to the left of the vertical domain path. https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axisLeft

selection.call(function[, arguments…]) Invokes the specified function exactly once, passing in this selection along with any optional arguments. Returns this selection. This is equivalent to invoking the function by hand but facilitates method chaining. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_call

transform The transform attribute defines a list of transform definitions that are applied to an element and the element's children. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform -————————————————————————————————————- 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 tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience.

Thanks for Watching ... https://www.youtube.com/watch?v=ol56gm7mBSE