Files

89 lines
2.5 KiB
Markdown
Raw Permalink Normal View History

---
id: 587d7fab367417b2b2512bda
title: Crea una escala lineal con D3
challengeType: 6
forumTopicId: 301483
dashedName: create-a-linear-scale-with-d3
---
# --description--
La barra y los diagramas de dispersión dibujan los datos directamente en el lienzo SVG. Sin embargo, si la altura de una barra o uno de los puntos de dato fuesen mayores que los valores de ancho (width) o largo (height) del SVG, se irían fuera del área del SVG.
En D3, hay escalas para ayudar a trazar datos. `scales` son funciones que le dicen al programa cómo asignar un conjunto de puntos de datos en bruto, a los píxeles del lienzo SVG.
Por ejemplo, digamos que tienes un lienzo SVG de 100x500 y quieres trazar el Producto Bruto Interno(PBI) para una cantidad de países. El conjunto de números estaría en el rango de miles de millones o billones de dólares. Tú le provees a D3 un tipo de escala para decirle cómo colocar los grandes valores de PBI en esa área de tamaño 100x500.
Es muy poco probable que traces los datos en bruto tal como son. Antes de trazarlo, estableces la escala para todo tu conjunto de datos(data set), para que los valores de `x` e `y` vayan dentro del alto y ancho de tu lienzo.
D3 tiene varios tipos de escalas. Para una escala lineal (usualmente usada con datos cuantitativos), existe el método de D3 `scaleLinear()`:
2021-07-09 21:23:54 -07:00
```js
const scale = d3.scaleLinear()
```
Por defecto, una escala usa la relación de identidad. El valor de la entrada es el mismo que el valor de la salida. Un desafío aparte cubre como cambiar esto.
# --instructions--
Cambia la variable `scale` para crear una escala lineal. Luego, establece la variable `output` a la escala llamada, con un argumento de entrada (input) de `50`.
# --hints--
El texto en el `h2` debe ser `50`.
```js
assert($('h2').text() == '50');
```
Tu código debe utilizar el método `scaleLinear()`.
```js
assert(code.match(/\.scaleLinear/g));
```
La variable `output` debe llamar a `scale` con un argumento de `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>
```