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. Quieres que todos los datos trazados dentro de la SVG por lo que es 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 utiliza el ancho del SVG (w), pero también incluye algo de relleno (padding). Esto deja espacio entre los puntos del gráfico de dispersión y el borde del 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. Imagine el eje x como una línea horizontal de 0 a 500 (el valor de anchura del 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 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>