27 - Use Dynamic Scales - Data Visualization with D3 - freeCodeCamp Tutorial

At 10:10, I meant to say set the HIGHEST value. We'll create two linear scales to dynamically scale the circles in a scatter plot. We need to create a scale to position our circle on the x axis, as well as another for the y axis, with our min and max values for the domain and SVG dimensions for the range. We'll alter our range to add some padding to ensure extreme values are visible within our SVG area.

Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/use-dynamic-scales Concepts: d3.min(iterable[, accessor]) Returns the minimum value in the given iterable using natural order. If the iterable contains no comparable values, returns undefined. An optional accessor function may be specified, which is equivalent to calling Array.from before computing the minimum value. Unlike the built-in Math.min, this method ignores undefined, null and NaN values; this is useful for ignoring missing data. In addition, elements are compared using natural order rather than numeric order. https://github.com/d3/d3-array#min

d3.max(iterable[, accessor]) Returns the maximum value in the given iterable using natural order. If the iterable contains no comparable values, returns undefined. An optional accessor function may be specified, which is equivalent to calling Array.from before computing the maximum value. Unlike the built-in Math.max, this method ignores undefined values; this is useful for ignoring missing data. In addition, elements are compared using natural order rather than numeric order. https://github.com/d3/d3-array#max

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