chart = { const width = 760; const height = 600; const margin = {top: 80, right: 80, bottom: 110, left: 90}; const histSize = 55; const plotWidth = width - margin.left - margin.right; const plotHeight = height - margin.top - margin.bottom; const colorMap = { setosa: "#2E86AB", versicolor: "#E63946", virginica: "#06A77D" }; const labelMap = { Sepal_Length: "Largo del sépalo (cm)", Sepal_Width: "Ancho del sépalo (cm)", Petal_Length: "Largo del pétalo (cm)", Petal_Width: "Ancho del pétalo (cm)" }; const container = html`

`; const title = html`

Dataset Iris — Análisis comparativo entre especies

Las tres especies se muestran simultáneamente. Seleccioná una para resaltarla manteniendo el contexto.

`; const form = html``; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("background", "white") .style("border-radius", "8px") .style("border", "1px solid #e5e5e5"); // Grupos const histTopG = svg.append("g"); const histRightG = svg.append("g"); const gridG = svg.append("g"); const xAxisG = svg.append("g") .attr("transform", `translate(0,${margin.top + plotHeight})`); const yAxisG = svg.append("g") .attr("transform", `translate(${margin.left},0)`); const pointsG = svg.append("g"); const xLabel = svg.append("text") .attr("x", margin.left + plotWidth / 2) .attr("y", margin.top + plotHeight + 45) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "600") .attr("fill", "#333"); const yLabel = svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + plotHeight / 2)) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "600") .attr("fill", "#333"); // LEYENDA HORIZONTAL ABAJO (no compite con el histograma) const legendG = svg.append("g") .attr("transform", `translate(${margin.left}, ${height - 30})`); legendG.append("text") .attr("font-size", "11px") .attr("font-weight", "600") .attr("fill", "#555") .attr("y", 4) .text("ESPECIES:"); let legendOffset = 80; speciesList.forEach((sp) => { const g = legendG.append("g") .attr("class", `legend-${sp}`) .attr("transform", `translate(${legendOffset}, 0)`); g.append("circle") .attr("r", 6) .attr("fill", colorMap[sp]) .attr("stroke", "white") .attr("stroke-width", 1.5); g.append("text") .attr("x", 12) .attr("y", 4) .attr("font-size", "12px") .attr("fill", "#333") .style("text-transform", "capitalize") .text(sp); legendOffset += 110; }); const tooltip = html`

`; function update() { const highlighted = form.species.value; const xCol = form.xAxis.value; const yCol = form.yAxis.value; // Escalas globales const xExtent = d3.extent(datos, d => +d[xCol]); const yExtent = d3.extent(datos, d => +d[yCol]); const xPad = (xExtent[1] - xExtent[0]) * 0.05; const yPad = (yExtent[1] - yExtent[0]) * 0.05; const xScale = d3.scaleLinear() .domain([xExtent[0] - xPad, xExtent[1] + xPad]) .range([margin.left, margin.left + plotWidth]) .nice(); const yScale = d3.scaleLinear() .domain([yExtent[0] - yPad, yExtent[1] + yPad]) .range([margin.top + plotHeight, margin.top]) .nice(); // Grilla gridG.selectAll("*").remove(); xScale.ticks(8).forEach(t => { gridG.append("line") .attr("x1", xScale(t)).attr("x2", xScale(t)) .attr("y1", margin.top).attr("y2", margin.top + plotHeight) .attr("stroke", "#eee").attr("stroke-dasharray", "2,3"); }); yScale.ticks(8).forEach(t => { gridG.append("line") .attr("y1", yScale(t)).attr("y2", yScale(t)) .attr("x1", margin.left).attr("x2", margin.left + plotWidth) .attr("stroke", "#eee").attr("stroke-dasharray", "2,3"); }); // Ejes xAxisG.transition().duration(500) .call(d3.axisBottom(xScale).tickSize(0).tickPadding(8)) .call(g => g.select(".domain").attr("stroke", "#999")) .call(g => g.selectAll("text").attr("fill", "#666").attr("font-size", "11px")); yAxisG.transition().duration(500) .call(d3.axisLeft(yScale).tickSize(0).tickPadding(8)) .call(g => g.select(".domain").attr("stroke", "#999")) .call(g => g.selectAll("text").attr("fill", "#666").attr("font-size", "11px")); xLabel.text(labelMap[xCol]); yLabel.text(labelMap[yCol]); // HISTOGRAMAS MARGINALES const xBins = d3.bin().domain(xScale.domain()).thresholds(20); const yBins = d3.bin().domain(yScale.domain()).thresholds(20); histTopG.selectAll("*").remove(); histRightG.selectAll("*").remove(); // Calcular max global para escalar histogramas consistentemente let maxXcount = 0, maxYcount = 0; speciesList.forEach(sp => { const spData = datos.filter(d => d.Species === sp); const bx = xBins(spData.map(d => +d[xCol])); const by = yBins(spData.map(d => +d[yCol])); maxXcount = Math.max(maxXcount, d3.max(bx, b => b.length) || 0); maxYcount = Math.max(maxYcount, d3.max(by, b => b.length) || 0); }); const histTopScale = d3.scaleLinear().domain([0, maxXcount]).range([0, histSize - 5]); const histRightScale = d3.scaleLinear().domain([0, maxYcount]).range([0, histSize - 5]); speciesList.forEach(sp => { const spData = datos.filter(d => d.Species === sp); const isActive = highlighted === "all" || highlighted === sp; const opacity = isActive ? 0.6 : 0.12; // Histograma superior (X) — encima del scatter const binsX = xBins(spData.map(d => +d[xCol])); histTopG.selectAll(`rect.hx-${sp}`) .data(binsX) .enter() .append("rect") .attr("class", `hx-${sp}`) .attr("x", d => xScale(d.x0) + 1) .attr("y", d => margin.top - 5 - histTopScale(d.length)) .attr("width", d => Math.max(0, xScale(d.x1) - xScale(d.x0) - 1)) .attr("height", d => histTopScale(d.length)) .attr("fill", colorMap[sp]) .attr("opacity", opacity); // Histograma derecho (Y) — al costado del scatter const binsY = yBins(spData.map(d => +d[yCol])); histRightG.selectAll(`rect.hy-${sp}`) .data(binsY) .enter() .append("rect") .attr("class", `hy-${sp}`) .attr("x", margin.left + plotWidth + 5) .attr("y", d => yScale(d.x1)) .attr("width", d => histRightScale(d.length)) .attr("height", d => Math.max(0, yScale(d.x0) - yScale(d.x1) - 1)) .attr("fill", colorMap[sp]) .attr("opacity", opacity); }); // PUNTOS const allData = datos.map(d => ({...d, _x: +d[xCol], _y: +d[yCol]})); const circles = pointsG.selectAll("circle").data(allData); circles.exit().remove(); circles.enter() .append("circle") .attr("r", 0) .on("mouseover", function(event, d) { d3.select(this).transition().duration(150).attr("r", 9); tooltip.style.opacity = 1; tooltip.innerHTML = `

${d.Species}

${labelMap[xCol]}: ${d[xCol]}

${labelMap[yCol]}: ${d[yCol]}

`; }) .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(event, d) { const isActive = highlighted === "all" || highlighted === d.Species; d3.select(this).transition().duration(150).attr("r", isActive ? 5 : 3); tooltip.style.opacity = 0; }) .merge(circles) .transition().duration(600) .attr("cx", d => xScale(d._x)) .attr("cy", d => yScale(d._y)) .attr("fill", d => colorMap[d.Species]) .attr("stroke", "white") .attr("stroke-width", 1) .attr("r", d => (highlighted === "all" || highlighted === d.Species) ? 5 : 3) .attr("opacity", d => { if (highlighted === "all") return 0.75; return highlighted === d.Species ? 0.9 : 0.18; }); // Atenuar leyenda según selección speciesList.forEach(sp => { const isActive = highlighted === "all" || highlighted === sp; legendG.select(`.legend-${sp}`).style("opacity", isActive ? 1 : 0.3); }); } form.querySelectorAll("select").forEach(sel => { sel.addEventListener("input", update); }); update(); container.appendChild(title); container.appendChild(form); container.appendChild(svg.node()); container.appendChild(tooltip); return container; }