freeCodeCamp/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md

---
id: 587d7fac367417b2b2512bdb
title: Set a Domain and a Range on a Scale
challengeType: 6
forumTopicId: 301491
---

## Description
<section id='description'>
By default, scales use the identity relationship. This means the input value maps to the output value. However, scales can be much more flexible and interesting.
Say a dataset has values ranging from 50 to 480. This is the input information for a scale, also known as the <dfn>domain</dfn>.
You want to map those points along the <code>x</code> axis on the SVG canvas, between 10 units and 500 units. This is the output information, also known as the <dfn>range</dfn>.
The <code>domain()</code> and <code>range()</code> methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example:

```js
// Set a domain
// The domain covers the set of input values
scale.domain([50, 480]);
// Set a range
// The range covers the set of output values
scale.range([10, 500]);
scale(50) // Returns 10
scale(480) // Returns 500
scale(325) // Returns 323.37
scale(750) // Returns 807.67
d3.scaleLinear()
```

Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range.
</section>

## Instructions
<section id='instructions'>
Create a scale and set its domain to <code>[250, 500]</code> and range to <code>[10, 150]</code>.
<strong>Note</strong><br>You can chain the <code>domain()</code> and <code>range()</code> methods onto the <code>scale</code> variable.
</section>

## Tests
<section id='tests'>

```yml
tests:
  - text: Your code should use the <code>domain()</code> method.
    testString: assert(code.match(/\.domain/g));
  - text: The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.
    testString: assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
  - text: Your code should use the <code>range()</code> method.
    testString: assert(code.match(/\.range/g));
  - text: The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.
    testString: assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
  - text: The text in the <code>h2</code> should be -102.
    testString: assert($('h2').text() == '-102');

```

</section>

## Challenge Seed
<section id='challengeSeed'>

<div id='html-seed'>

```html
<body>
  <script>
    // Add your code below this line
    const scale = d3.scaleLinear();


    // Add your code above this line
    const output = scale(50);
    d3.select("body")
      .append("h2")
      .text(output);
  </script>
</body>
```

</div>


</section>

## Solution
<section id='solution'>

```html
<body>
  <script>
    const scale = d3.scaleLinear();
    scale.domain([250, 500])
    scale.range([10, 150])
    const output = scale(50);
    d3.select("body")
      .append("h2")
      .text(output);
  </script>
</body>

```

</section>
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`---`
			`id: 587d7fac367417b2b2512bdb`
			`title: Set a Domain and a Range on a Scale`
			`challengeType: 6`
fix(curriculum): Added forumTopicId to remaining 1200 challeng… (#36558) 2019-08-05 09:17:33 -07:00			`forumTopicId: 301491`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`---`

			`## Description`
			`<section id='description'>`
fix(curriculum): fix typography in "Set a Domain and a Range on a Scale" (#39259) * Change spaced hyphen to em dash * Update curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.english.md * Update curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.english.md Co-authored-by: Shaun Hamilton <51722130+Sky020@users.noreply.github.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Shaun Hamilton <51722130+Sky020@users.noreply.github.com> 2020-09-02 14:33:17 -04:00			`By default, scales use the identity relationship. This means the input value maps to the output value. However, scales can be much more flexible and interesting.`
			`Say a dataset has values ranging from 50 to 480. This is the input information for a scale, also known as the <dfn>domain</dfn>.`
Add <dfn> tags (#39260) 2020-07-16 14:35:03 -04:00			`You want to map those points along the <code>x</code> axis on the SVG canvas, between 10 units and 500 units. This is the output information, also known as the <dfn>range</dfn>.`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`The <code>domain()</code> and <code>range()</code> methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example:`
fix(curriculum): Convert blockquote elements to triple backtick syntax for Data Visualization (#35995) * fix: convert data visualization * fix: reverted to blockquote * fix: changed js to json Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: cleaned up code Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> 2019-05-14 05:04:05 -07:00
			```js
			`// Set a domain`
			`// The domain covers the set of input values`
			`scale.domain([50, 480]);`
			`// Set a range`
			`// The range covers the set of output values`
			`scale.range([10, 500]);`
			`scale(50) // Returns 10`
			`scale(480) // Returns 500`
			`scale(325) // Returns 323.37`
			`scale(750) // Returns 807.67`
			`d3.scaleLinear()`
			```

feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range.`
			`</section>`

			`## Instructions`
			`<section id='instructions'>`
			`Create a scale and set its domain to <code>[250, 500]</code> and range to <code>[10, 150]</code>.`
			`<strong>Note</strong><br>You can chain the <code>domain()</code> and <code>range()</code> methods onto the <code>scale</code> variable.`
			`</section>`

			`## Tests`
			`<section id='tests'>`

			```yml
chore(curriculum): Remove files in wrong format 2018-10-04 14:37:37 +01:00			`tests:`
			`- text: Your code should use the <code>domain()</code> method.`
fix(curriculum): Remove unnecessary assert message argument from English Data Visualization challenges (#36424) * fix: removed assert msg argument * fix: corrected test text 2019-07-11 01:53:41 -07:00			`testString: assert(code.match(/\.domain/g));`
fix(curriculum): quotes in tests (#18828) * fix(curriculum): tests quotes * fix(curriculum): fill seed-teardown * fix(curriculum): fix tests and remove unneeded seed-teardown 2018-10-20 21:02:47 +03:00			`- text: The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.`
fix(curriculum): Remove unnecessary assert message argument from English Data Visualization challenges (#36424) * fix: removed assert msg argument * fix: corrected test text 2019-07-11 01:53:41 -07:00			`testString: assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));`
chore(curriculum): Remove files in wrong format 2018-10-04 14:37:37 +01:00			`- text: Your code should use the <code>range()</code> method.`
fix(curriculum): Remove unnecessary assert message argument from English Data Visualization challenges (#36424) * fix: removed assert msg argument * fix: corrected test text 2019-07-11 01:53:41 -07:00			`testString: assert(code.match(/\.range/g));`
fix(curriculum): quotes in tests (#18828) * fix(curriculum): tests quotes * fix(curriculum): fill seed-teardown * fix(curriculum): fix tests and remove unneeded seed-teardown 2018-10-20 21:02:47 +03:00			`- text: The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.`
fix(curriculum): Remove unnecessary assert message argument from English Data Visualization challenges (#36424) * fix: removed assert msg argument * fix: corrected test text 2019-07-11 01:53:41 -07:00			`testString: assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));`
chore(curriculum): Remove files in wrong format 2018-10-04 14:37:37 +01:00			`- text: The text in the <code>h2</code> should be -102.`
fix(curriculum): Remove unnecessary assert message argument from English Data Visualization challenges (#36424) * fix: removed assert msg argument * fix: corrected test text 2019-07-11 01:53:41 -07:00			`testString: assert($('h2').text() == '-102');`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00
			```

			`</section>`

			`## Challenge Seed`
			`<section id='challengeSeed'>`

			`<div id='html-seed'>`

			```html
			`<body>`
			`<script>`
			`// Add your code below this line`
			`const scale = d3.scaleLinear();`
fix(challenge-md): Fix quotes that failed in the transform 2018-10-08 01:01:53 +01:00


feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`// Add your code above this line`
			`const output = scale(50);`
			`d3.select("body")`
			`.append("h2")`
			`.text(output);`
			`</script>`
			`</body>`
			```

			`</div>`



			`</section>`

			`## Solution`
			`<section id='solution'>`

Add solution d3challenges (#38222) * added solutions to data visualization with D3 * Update add-a-tooltip-to-a-d3-element.english.md * Update add-attributes-to-the-circle-elements.english.md * Update add-axes-to-a-visualization.english.md * Update add-document-elements-with-d3.english.md * Update add-inline-styling-to-elements.english.md * Update add-labels-to-scatter-plot-circles.english.md * Update change-styles-based-on-data.english.md * Update change-the-color-of-an-svg-element.english.md * Update change-the-presentation-of-a-bar-chart.english.md * Update create-a-bar-for-each-data-point-in-the-set.english.md * Update create-a-linear-scale-with-d3.english.md * Update create-a-scatterplot-with-svg-circles.english.md * Update display-shapes-with-svg.english.md * Update dynamically-change-the-height-of-each-bar.english.md * Update dynamically-set-the-coordinates-for-each-bar.english.md * Update invert-svg-elements.english.md * Update learn-about-svg-in-d3.english.md * Update select-a-group-of-elements-with-d3.english.md * Update set-a-domain-and-a-range-on-a-scale.english.md * Update style-d3-labels.english.md * Update work-with-dynamic-data-in-d3.english.md * Update use-a-pre-defined-scale-to-place-elements.english.md * Update use-dynamic-scales.english.md * Update use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.english.md * Update work-with-data-in-d3.english.md 2020-04-24 17:04:53 +05:30			```html
			`<body>`
			`<script>`
			`const scale = d3.scaleLinear();`
			`scale.domain([250, 500])`
			`scale.range([10, 150])`
			`const output = scale(50);`
			`d3.select("body")`
			`.append("h2")`
			`.text(output);`
			`</script>`
			`</body>`

feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			```
fix(curriculum): added extra line before </section> tag - Engl… (#36278) 2019-07-18 08:24:12 -07:00
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`</section>`