24 - Create a Linear Scale with D3 - Data Visualization with D3 - freeCodeCamp Tutorial

Linear Scales allow us to scale our SVG elements. This maintains the proportions of the graph and re-scales it when the dimensions of our areas, or our array values change. You specify a domain (range of inputs) and a range (range of outputs). The scale can then be called as a method to return a value mapped in correct range in a given domain.

Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3 Concepts: d3.scaleLinear([[domain, ]range]) Constructs a new continuous scale with the specified domain and range, the default interpolator and clamping disabled. If either domain or range are not specified, each defaults to [0, 1]. Linear scales are a good default choice for continuous quantitative data because they preserve proportional differences. Each range value y can be expressed as a function of the domain value x: y = mx + b. https://github.com/d3/d3-scale#linear-scales

continuous.domain([domain]) If domain is specified, sets the scale’s domain to the specified array of numbers. The array must contain two or more elements. If the elements in the given array are not numbers, they will be coerced to numbers. If domain is not specified, returns a copy of the scale’s current domain. https://github.com/d3/d3-scale#continuous_domain

continuous.range([range]) If range is specified, sets the scale’s range to the specified array of values. The array must contain two or more elements. Unlike the domain, elements in the given array need not be numbers; any value that is supported by the underlying interpolator will work, though note that numeric ranges are required for invert. If range is not specified, returns a copy of the scale’s current range. See continuous.interpolate for more examples. https://github.com/d3/d3-scale#continuous_range -————————————————————————————————————- 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 pr ... https://www.youtube.com/watch?v=fm-gsMmAwB4