3.0 KiB
3.0 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fab367417b2b2512bda | Create a Linear Scale with D3 |
|
6 | Crea una escala lineal con D3 |
Description
Scales
son funciones que le indican al programa cómo asignar un conjunto de puntos de datos sin procesar en los píxeles del lienzo SVG. Por ejemplo, supongamos que tiene un lienzo SVG de tamaño 100x500 y desea trazar el Producto Interno Bruto (PIB) para varios países. El conjunto de números estaría en el rango de mil millones o trillón de dólares. Le proporciona a D3 un tipo de escala para decirle cómo colocar los valores de PIB grandes en esa área de tamaño 100x500. Es poco probable que grafiques los datos en bruto como están. Antes de trazarlo, establezca la escala para todo su conjunto de datos, de modo que los valores de x
e y
se ajusten a su ancho y altura de lienzo. D3 tiene varios tipos de escala. Para una escala lineal (generalmente utilizada con datos cuantitativos), existe el método D3 scaleLinear()
: 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 separado cubre cómo cambiar esto. Instructions
scale
para crear una escala lineal. A continuación, establezca la variable de output
en la escala llamada con un argumento de entrada de 50. Tests
tests:
- text: El texto en el <code>h2</code> debe ser 50.
testString: 'assert($("h2").text() == "50", "The text in the <code>h2</code> should be 50.");'
- text: Su código debe utilizar el método <code>scaleLinear()</code> .
testString: 'assert(code.match(/\.scaleLinear/g), "Your code should use the <code>scaleLinear()</code> method.");'
- text: La variable de <code>output</code> debe llamar <code>scale</code> con un argumento de 50.
testString: 'assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g), "The <code>output</code> variable should call <code>scale</code> with an argument of 50.");'
Challenge Seed
<body>
<script>
// Add your code below this line
const scale = undefined; // Create the scale here
const output = scale(); // Call the scale with an argument here
// Add your code above this line
d3.select("body")
.append("h2")
.text(output);
</script>
</body>
Solution
// solution required