diff --git a/guide/english/certifications/data-visualization/data-visualization-with-d3/use-dynamic-scales/index.md b/guide/english/certifications/data-visualization/data-visualization-with-d3/use-dynamic-scales/index.md index 20c2b5fd35..091652f0a9 100644 --- a/guide/english/certifications/data-visualization/data-visualization-with-d3/use-dynamic-scales/index.md +++ b/guide/english/certifications/data-visualization/data-visualization-with-d3/use-dynamic-scales/index.md @@ -3,8 +3,69 @@ title: Use Dynamic Scales --- ## Use Dynamic Scales -This is a stub. Help our community expand it. +### Hint 1 -This quick style guide will help ensure your pull request gets accepted. +Use the `.domain()` and `.range()` functions. - +### Hint 2 + +Use a callback function on the `.domain()` function. + +### Hint 3 + +Both the `.domain()` and `.range()` functions accept an array or two elements. + +### Hint 4 + +Subtract padding from height to get SVG height including padding. + +### Solution + +To solve the solution by including all the hints, set the `yScale` variable to: + +```js +const yScale = d3.scaleLinear() + .domain([0, d3.max(dataset, (d) => d[1])]) + .range([h - padding, padding]); +``` + +The full solution now looks like: + +```html + + + +```