freeCodeCamp/curriculum/challenges/espanol/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md

---
id: 587d7fab367417b2b2512bda
title: Create a Linear Scale with D3
challengeType: 6
forumTopicId: 301483
dashedName: create-a-linear-scale-with-d3
---

# --description--

The bar and scatter plot charts both plotted data directly onto the SVG canvas. However, if the height of a bar or one of the data points were larger than the SVG height or width values, it would go outside the SVG area.

In D3, there are scales to help plot data. `scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas.

For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area.

It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your canvas width and height.

D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`:

```js
const scale = d3.scaleLinear()
```

By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this.

# --instructions--

Change the `scale` variable to create a linear scale. Then set the `output` variable to the scale called with an input argument of `50`.

# --hints--

The text in the `h2` should be `50`.

```js
assert($('h2').text() == '50');
```

Your code should use the `scaleLinear()` method.

```js
assert(code.match(/\.scaleLinear/g));
```

The `output` variable should call `scale` with an argument of `50`.

```js
assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
```

# --seed--

## --seed-contents--

```html
<body>
  <script>
    // Add your code below this line

    const scale = undefined; // Create the scale here
    const output = scale(); // Call scale with an argument here

    // Add your code above this line

    d3.select("body")
      .append("h2")
      .text(output);

  </script>
</body>
```

# --solutions--

```html
<body>
  <script>

    const scale = d3.scaleLinear();
    const output = scale(50); 

    d3.select("body")
      .append("h2")
      .text(output);

  </script>
</body>
```
chore(i8n,learn): processed translations 2021-02-06 04:42:36 +00:00			`---`
			`id: 587d7fab367417b2b2512bda`
			`title: Create a Linear Scale with D3`
			`challengeType: 6`
			`forumTopicId: 301483`
			`dashedName: create-a-linear-scale-with-d3`
			`---`

			`# --description--`

			`The bar and scatter plot charts both plotted data directly onto the SVG canvas. However, if the height of a bar or one of the data points were larger than the SVG height or width values, it would go outside the SVG area.`

chore: manual translations (#42811) 2021-07-09 21:23:54 -07:00			In D3, there are scales to help plot data. `scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas.
chore(i8n,learn): processed translations 2021-02-06 04:42:36 +00:00
			`For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area.`

			It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your canvas width and height.

			D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`:

chore: manual translations (#42811) 2021-07-09 21:23:54 -07:00			```js
			`const scale = d3.scaleLinear()`
			```
chore(i8n,learn): processed translations 2021-02-06 04:42:36 +00:00
			`By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this.`

			`# --instructions--`

chore: manual translations (#42811) 2021-07-09 21:23:54 -07:00			Change the `scale` variable to create a linear scale. Then set the `output` variable to the scale called with an input argument of `50`.
chore(i8n,learn): processed translations 2021-02-06 04:42:36 +00:00
			`# --hints--`

chore: manual translations (#42811) 2021-07-09 21:23:54 -07:00			The text in the `h2` should be `50`.
chore(i8n,learn): processed translations 2021-02-06 04:42:36 +00:00
			```js
			`assert($('h2').text() == '50');`
			```

			Your code should use the `scaleLinear()` method.

			```js
			`assert(code.match(/\.scaleLinear/g));`
			```

chore: manual translations (#42811) 2021-07-09 21:23:54 -07:00			The `output` variable should call `scale` with an argument of `50`.
chore(i8n,learn): processed translations 2021-02-06 04:42:36 +00:00
			```js
			`assert(output == 50 && code.match(/scale\(\s?50\s?\)/g));`
			```

			`# --seed--`

			`## --seed-contents--`

			```html
			`<body>`
			`<script>`
			`// Add your code below this line`

			`const scale = undefined; // Create the scale here`
			`const output = scale(); // Call scale with an argument here`

			`// Add your code above this line`

			`d3.select("body")`
			`.append("h2")`
			`.text(output);`

			`</script>`
			`</body>`
			```

			`# --solutions--`

			```html
			`<body>`
			`<script>`

			`const scale = d3.scaleLinear();`
			`const output = scale(50);`

			`d3.select("body")`
			`.append("h2")`
			`.text(output);`

			`</script>`
			`</body>`
			```