// Cargo los datos:
d3.csvParse(await FileAttachment("ejercicio_c@4.csv").text())
// Función para convertir filas a datos de tipo numérico
function convertir_fila(fila) {
// Convierto strings a tipo numérico:
fila.Sepal_Length =+ fila.Sepal_Length;
fila.Petal_Length =+ fila.Petal_Length;
fila.Sepal_Width =+ fila.Sepal_Width;
fila.Petal_Width =+ fila.Petal_Width;
return fila;
}
// Asigno el resultado del bloque a la variable datos_ejercicio_c
datos_ejercicio_a = {
const text = await FileAttachment("ejercicio_c@4.csv").text(); // Cargamos los datos en formato texto
return d3.csvParse(await FileAttachment("ejercicio_c@4.csv").text(), convertir_fila)
}
viewof campo_x = select({
title: "Campo en X",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Petal_Width"
})
viewof campo_y = select({
title: "Campo en Y",
options: ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"],
value: "Sepal_Length"
})
// Escala en x
x = d3.scaleLinear()
.domain([0, 10])
// .domain([0, d3.max(datos_ejercicio_a, d => d.Sepal_Length)])
.range([margin.left, width - margin.right])
// Escala en y
y = d3.scaleLinear()
.domain([0, 15])
// .domain([0, d3.max(datos_ejercicio_a, d => d.Petal_Length)])
.range([height - margin.bottom, margin.top])
{
// 1. Creación de un área de dibujo (height&width variables definidas debajo).
// Si lo consideran necesario, pueden modificar el tamaño del canvas.
// También es posible que necesiten más de una celda para resolverlo.
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height);
// Ejes (ahora X abajo, Y izquierda)
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
// Escala de colores para cada especie:
const colorScale = d3.scaleOrdinal()
.domain(["Setosa", "Versicolor", "Virginica"])
.range(["#ff006e", "#3a86ff", "#fb5607"]);
// Dibujo el scatter
svg.append("g")
.selectAll("circle")
.data(datos_ejercicio_a)
.enter()
.append("circle")
.attr("cx", d => x(d[campo_x]))
.attr("cy", d => y(d[campo_y]))
.attr("r",6)
.attr("fill", d => colorScale(d.Species));
// // Un cuadro de texto.
// svg.append("text")
// .attr("x", 110)
// .attr("y", 175)
// .text("Área de dibujo vacía");
// Título de eje x
svg.append("text")
.attr("x", width / 2) // Centrado horizontalmente
.attr("y", height - margin.bottom + 35) // Debajo del eje x
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("fill", "black")
.text(campo_x);
// Título de eje y
svg.append("text")
.attr("x", -height / 2) // Rotado -90°
.attr("y", margin.left - 35) // A la izquierda del eje y
.attr("transform", "rotate(-90)") // Texto rotado -90°Rotate text vertically
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("fill", "black")
.text(campo_y);
// n. Retornamos el canvas.
return svg.node();
}
import {select} from "@jashkenas/inputs"
height = 500;
width = 600
margin = ({top: 50, right: 30, bottom: 50, left: 60})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
