D3 Dashboard

--- id: 5d8a4cfbe6b6180ed9a1c9f4 title: Part 23 challengeType: 0 dashedName: part-23 --- # --description-- The `range` function describes how to map the domain values for display on the graph. For example, a value of 5000 followers can't use 5000 as it y-coordinate on the SVG or it would be off the graph. You need to tell the range where the top and bottom of the graph is so the scale can give appropriate values for the y-coordinate. Chain the `range` function below the `domain` and pass it an array with `svgHeight - svgMargin` and `svgMargin` as the values. That will translate to `[430, 70]`. This is where the top and bottom of the graph are. So a data point of 5000 followers will map to a value of 430 to use as its y-coordinate and 0 followers will use 70 as its y-coordinate. Any value in between will scale linearly. Your graph will have a margin around it for things like axes and labels. The actual line data will display on the inside of this margin area, which is why you use those values. This will become more clear as you progress through the project. # --hints-- test-text ```js const range = yScale.range(); assert(range.length === 2 && range[0] === 430 && range[1] === 70); ``` # --seed-- ## --before-user-code-- ```html D3 Dashboard

``` ## --seed-contents-- ```html ``` # --solutions-- ```html ```