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

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

## Description
<section id='description'>
By default, scales use the identity relationship - the input value maps to the output value. But scales can be much more flexible and interesting.
Say a data set has values ranging from 50 to 480. This is the input information for a scale, and is also known as the domain.
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, which is also known as the range.
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), 'Your code should use the <code>domain()</code> method.');
  - 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]), 'The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.');
  - text: Your code should use the <code>range()</code> method.
    testString: assert(code.match(/\.range/g), 'Your code should use the <code>range()</code> method.');
  - 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]), 'The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.');
  - text: The text in the <code>h2</code> should be -102.
    testString: assert($('h2').text() == '-102', 'The text in the <code>h2</code> should be -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'>

```js
// solution required
```
</section>
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`---`
			`id: 587d7fac367417b2b2512bdb`
			`title: Set a Domain and a Range on a Scale`
			`challengeType: 6`
			`---`

			`## Description`
			`<section id='description'>`
			`By default, scales use the identity relationship - the input value maps to the output value. But scales can be much more flexible and interesting.`
			`Say a data set has values ranging from 50 to 480. This is the input information for a scale, and is also known as the domain.`
			`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, which is also known as the range.`
			`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 12:04:05 +00: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 22:01:58 +00: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 13:37:37 +00:00			`tests:`
			`- text: Your code should use the <code>domain()</code> method.`
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 18:02:47 +00:00			`testString: assert(code.match(/\.domain/g), 'Your code should use the <code>domain()</code> method.');`
			`- 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]), 'The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.');`
chore(curriculum): Remove files in wrong format 2018-10-04 13:37:37 +00:00			`- text: Your code should use the <code>range()</code> method.`
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 18:02:47 +00:00			`testString: assert(code.match(/\.range/g), 'Your code should use the <code>range()</code> method.');`
			`- 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]), 'The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.');`
chore(curriculum): Remove files in wrong format 2018-10-04 13:37:37 +00:00			`- text: The text in the <code>h2</code> should be -102.`
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 18:02:47 +00:00			`testString: assert($('h2').text() == '-102', 'The text in the <code>h2</code> should be -102.');`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00: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 00:01:53 +00:00


feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00: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'>`

			```js
			`// solution required`
			```
			`</section>`