// Por curiosidad le meti con Claude Opus 4.7 viewof grafico = { const width = 560; const height = 480; const margin = {top: 30, right: 30, bottom: 55, left: 65}; const cols = ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"]; const especies = ["todas", "setosa", "versicolor", "virginica"]; const paletas = { "Categórica": d3.schemeTableau10, "Viridis": ["#440154", "#3b528b", "#21918c", "#5ec962", "#fde725"], "Magma": ["#000004", "#51127c", "#b73779", "#fc8961", "#fcfdbf"], "Pastel": d3.schemePastel1, "Monocromo azul": ["#08306b", "#2171b5", "#6baed6", "#c6dbef", "#f7fbff"] }; const especie = Inputs.select(especies, {label: "Especie", value: "todas"}); const colX = Inputs.select(cols, {label: "Eje X", value: "Sepal_Length"}); const colY = Inputs.select(cols, {label: "Eje Y", value: "Sepal_Width"}); const paleta = Inputs.select(Object.keys(paletas), {label: "Paleta", value: "Categórica"}); const radio = Inputs.range([2, 12], {label: "Tamaño", step: 1, value: 5}); const opacidad = Inputs.range([0.1, 1], {label: "Opacidad", step: 0.05, value: 0.75}); const grilla = Inputs.toggle({label: "Grilla", value: true}); const fondoOscuro = Inputs.toggle({label: "Modo oscuro", value: false}); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("font", "11px sans-serif"); const fondo = svg.append("rect").attr("width", width).attr("height", height); const gGridX = svg.append("g").attr("class", "grid"); const gGridY = svg.append("g").attr("class", "grid"); const gAxisX = svg.append("g"); const gAxisY = svg.append("g"); const titulo = svg.append("text") .attr("x", width / 2) .attr("y", margin.top - 10) .attr("text-anchor", "middle") .style("font-size", "13px") .style("font-weight", "600"); const labelX = svg.append("text") .attr("x", width / 2) .attr("y", height - 12) .attr("text-anchor", "middle") .style("font-weight", "500"); const labelY = svg.append("text") .attr("transform", `rotate(-90)`) .attr("x", -height / 2) .attr("y", 18) .attr("text-anchor", "middle") .style("font-weight", "500"); const gPuntos = svg.append("g"); const gLeyenda = svg.append("g"); const tooltip = html`

`; function render() { const oscuro = fondoOscuro.value; const colorTexto = oscuro ? "#eee" : "#222"; const colorEjes = oscuro ? "#888" : "#444"; const colorGrilla = oscuro ? "#333" : "#e5e5e5"; fondo.attr("fill", oscuro ? "#1e1e1e" : "#fafafa"); svg.selectAll("text").attr("fill", colorTexto); const datos = especie.value === "todas" ? data : data.filter(d => d.Species === especie.value); const x = d3.scaleLinear() .domain(d3.extent(datos, d => d[colX.value])).nice() .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain(d3.extent(datos, d => d[colY.value])).nice() .range([height - margin.bottom, margin.top]); const especiesUnicas = Array.from(new Set(data.map(d => d.Species))); const rangoBase = paletas[paleta.value].slice(); if (paleta.value === "Categórica") { rangoBase[1] = "#59a14f"; } const color = d3.scaleOrdinal().domain(especiesUnicas).range(rangoBase); if (grilla.value) { gGridX.attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSize(-(height - margin.top - margin.bottom)).tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("line").attr("stroke", colorGrilla)); gGridY.attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSize(-(width - margin.left - margin.right)).tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("line").attr("stroke", colorGrilla)); } else { gGridX.selectAll("*").remove(); gGridY.selectAll("*").remove(); } gAxisX.attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) .call(g => g.selectAll("path, line").attr("stroke", colorEjes)) .call(g => g.selectAll("text").attr("fill", colorTexto)); gAxisY.attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.selectAll("path, line").attr("stroke", colorEjes)) .call(g => g.selectAll("text").attr("fill", colorTexto)); titulo.text(`${colY.value} vs ${colX.value} — ${especie.value}`); labelX.text(colX.value); labelY.text(colY.value); const sel = gPuntos.selectAll("circle").data(datos, (d, i) => i); sel.exit().transition().duration(300).attr("r", 0).remove(); sel.enter().append("circle") .attr("r", 0) .attr("stroke", oscuro ? "#1e1e1e" : "#fafafa") .attr("stroke-width", 0.8) .on("mouseover", function(_, d) { d3.select(this).attr("stroke", "#000").attr("stroke-width", 2); tooltip.innerHTML = `${d.Species}
${colX.value}: ${d[colX.value]}
${colY.value}: ${d[colY.value]}`; tooltip.style.opacity = 1; }) .on("mousemove", function(event) { const rect = container.getBoundingClientRect(); tooltip.style.left = (event.clientX - rect.left + 12) + "px"; tooltip.style.top = (event.clientY - rect.top + 12) + "px"; }) .on("mouseout", function() { d3.select(this).attr("stroke", oscuro ? "#1e1e1e" : "#fafafa").attr("stroke-width", 0.8); tooltip.style.opacity = 0; }) .merge(sel) .transition().duration(400) .attr("cx", d => x(d[colX.value])) .attr("cy", d => y(d[colY.value])) .attr("r", radio.value) .attr("fill", d => color(d.Species)) .attr("opacity", opacidad.value); gLeyenda.selectAll("*").remove(); if (especie.value === "todas") { const leyenda = gLeyenda.attr("transform", `translate(${width - margin.right - 110},${margin.top + 10})`); leyenda.append("rect") .attr("x", -8).attr("y", -8) .attr("width", 110).attr("height", especiesUnicas.length * 20 + 12) .attr("fill", oscuro ? "rgba(40,40,40,0.85)" : "rgba(255,255,255,0.85)") .attr("stroke", colorEjes).attr("stroke-width", 0.5).attr("rx", 4); especiesUnicas.forEach((sp, i) => { const g = leyenda.append("g").attr("transform", `translate(0,${i * 20})`); g.append("circle").attr("r", 5).attr("cx", 4).attr("cy", 4).attr("fill", color(sp)); g.append("text").attr("x", 16).attr("y", 8).text(sp).attr("fill", colorTexto); }); } } [especie, colX, colY, paleta, radio, opacidad, grilla, fondoOscuro].forEach(input => { input.addEventListener("input", render); }); render(); const panel = html`

${especie}${colX}${colY}${paleta}${radio}${opacidad}${grilla}${fondoOscuro}

`; const container = html`

${panel}${svg.node()}${tooltip}

`; container.value = { especie: especie.value, colX: colX.value, colY: colY.value, paleta: paleta.value, radio: radio.value, opacidad: opacidad.value }; return container; }