4.5 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fac367417b2b2512bdd | Utiliza escalas dinámicas | 6 | 301495 | use-dynamic-scales |
--description--
Los métodos min() y max() de D3 son útiles para ayudar a establecer la escala.
Dado un conjunto de datos complejo, una de las prioridades es establecer la escala para que la visualización encaje la anchura y altura del contenedor SVG. Deseas que todos los datos estén trazados dentro del lienzo SVG para que sea visible en la página web.
El siguiente ejemplo establece la escala del eje x para datos de un diagrama de dispersión. El método domain() envía información a la escala sobre los valores originales de los datos para el trazado. El método range() le proporciona información sobre el espacio actual en la página web para la visualización.
En el ejemplo, el dominio va de 0 al máximo en el conjunto. Utiliza el método max() con una función callback basada en los valores de x en los arreglos. El rango usa la anchura del lienzo SVG (w), pero incluye algo de padding (relleno), también. Esto pone espacio entre los puntos del diagrama de dispersión y el borde del lienzo SVG.
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const padding = 30;
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
El padding (relleno) podría ser confuso en un principio. Imagínate el eje x como una línea horizontal de 0 a 500 (el valor del ancho del lienzo SVG). Incluir el padding en el método range() obliga al trazado a empezar en 30 a lo largo de esa línea (en lugar de 0), y terminar en 470 (en lugar de 500).
--instructions--
Utiliza la variable yScale para crear una escala lineal para el eje y. El dominio debe comenzar en cero e ir hasta el máximo valor de y en el conjunto. El rango debe usar la altura de SVG (h) e incluir padding (relleno).
Nota: Recuerda mantener el trazado hacia arriba. Cuando estableces el rango para las coordenadas y, el valor más alto (altura menos el relleno) es el primer argumento, y el valor más bajo es el segundo argumento.
--hints--
El texto en el h2 debe ser 30.
assert(output == 30 && $('h2').text() == '30');
El domain() de yScale debe ser equivalente a [0, 411].
assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]));
El range() de yScale debe ser equivalente a [470, 30].
assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
--seed--
--seed-contents--
<body>
<script>
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
// Padding between the SVG canvas boundary and the plot
const padding = 30;
// Create an x and y scale
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
// Add your code below this line
const yScale = undefined;
// Add your code above this line
const output = yScale(411); // Returns 30
d3.select("body")
.append("h2")
.text(output)
</script>
</body>
--solutions--
<body>
<script>
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const padding = 30;
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[1])])
.range([h - padding, padding]);
const output = yScale(411);
d3.select("body")
.append("h2")
.text(output)
</script>
</body>