viewof chart = { const margin = { top: 50, right: 130, bottom: 40, left: 130 }, width = 700, // Mantiene el ancho para pantallas grandes height = 400; // URLs de las imágenes const imgKamalaUrl = await FileAttachment("Kamala.png").url(); const imgBidenUrl = await FileAttachment("Biden2.png").url(); const imgTrumpUrl = await FileAttachment("Trump.png").url(); // URLs de los gráficos del iframe para 2020 y 2024 const iframe2024Url = "https://datawrapper.dwcdn.net/gTzls/3/"; const iframe2020Url = "https://datawrapper.dwcdn.net/JF7zg/9/"; // DATOS DE 2024 PARA CAMBIAR let data2024 = [ { candidato: "Kamala Harris", votos: "71.239.698", porcentaje_barra: 42.00, porcentaje_texto: "48,0", color: "#0000ff", numero: 226 }, // CAMBIAR { candidato: "Pendientes", votos: "-", porcentaje_barra: 0, porcentaje_texto: 0, color: "#d8d8d8", numero: 0 }, // CAMBIAR // BARRA DEL MEDIO { candidato: "Donald J. Trump", votos: "74.834.220", porcentaje_barra: 58.00, porcentaje_texto: "50,4", color: "#ff0000", numero: 312} // CAMBIAR ]; // DATOS DE 2020 let data2020 = [ { candidato: "Joe Biden", votos: "81.284.666", porcentaje_barra: 56.87, porcentaje_texto: 51.31, color: "#0000ff", numero: 306 }, { candidato: "Pendientes", votos: 0, porcentaje_barra: 0.00, porcentaje_texto: 0, color: "#d8d8d8", numero: 0 }, { candidato: "Donald J. Trump", votos: "74.224.319", porcentaje_barra: 43.12, porcentaje_texto: 46.85, color: "#ff0000", numero: 232 } ]; let currentData = data2024; // Ajustamos el ancho y altura del SVG para que sea responsivo const svg = d3.create("svg") .attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height}`) .attr("preserveAspectRatio", "xMidYMid meet") .style("width", "100%") // Ancho completo en dispositivos móviles .style("height", "auto"); // Ajuste automático de altura function drawChart(data) { svg.selectAll("*").remove(); const totalPorcentaje = data[0].porcentaje_barra + data[1].porcentaje_barra + data[2].porcentaje_barra; const x = d3.scaleLinear() .domain([0, totalPorcentaje]) .range([0, width]); // Kamala Harris o Biden svg.append("rect") .attr("x", margin.left) .attr("y", height / 2 - 10) .attr("width", x(data[0].porcentaje_barra)) .attr("height", 20) .attr("fill", data[0].color); // Pendientes en el centro svg.append("rect") .attr("x", x(data[0].porcentaje_barra) + margin.left) .attr("y", height / 2 - 10) .attr("width", x(data[1].porcentaje_barra)) .attr("height", 20) .attr("fill", data[1].color); if (currentData === data2024) { svg.append("rect") .attr("x", x(data[0].porcentaje_barra) + margin.left) .attr("y", height / 2 - 10) .attr("width", x(data[1].porcentaje_barra)) .attr("height", 20) .attr("fill", data[1].color); svg.append("text") .attr("x", x(data[0].porcentaje_barra) + margin.left + x(data[1].porcentaje_barra) / 2) .attr("y", height / 2 - 20) .attr("text-anchor", "middle") .attr("font-family", "Helvetica") .attr("font-size", 22) .attr("fill", "#d8d8d8") .attr("class", "candidato-pendientes") .text(""); svg.append("text") .attr("x", x(data[0].porcentaje_barra) + margin.left + x(data[1].porcentaje_barra) / 2) .attr("y", height / 2 - 40) .attr("text-anchor", "middle") .attr("font-family", "Helvetica") .attr("font-weight", "bold") .attr("font-size", 34) .attr("fill", "#d8d8d8") .attr("class", "numero-pendientes") .text(); } svg.append("rect") .attr("x", x(data[0].porcentaje_barra + data[1].porcentaje_barra) + margin.left) .attr("y", height / 2 - 10) .attr("width", x(data[2].porcentaje_barra)) .attr("height", 20) .attr("fill", data[2].color); // LÍNEA MAYORÍA svg.append("line") .attr("x1", width / 2 + margin.left) .attr("x2", width / 2 + margin.left) .attr("y1", height / 2 - 15) .attr("y2", height / 2 + 15) .attr("stroke", "black") .attr("stroke-width", 2); // ETIQUETA MAYORÍA svg.append("text") .attr("x", width / 2 + margin.left) .attr("y", height / 2 + 35) .attr("text-anchor", "middle") .attr("font-family", "Helvetica") .attr("fill", "black") .attr("font-size", "12px") .text("270"); // IMÁGENES DE LOS CANDIDATOS if (currentData === data2024) { svg.append("image") .attr("xlink:href", imgKamalaUrl) .attr("x", margin.left - 130) .attr("y", height / 2 - 60) .attr("width", 100) .attr("height", 100); svg.append("image") .attr("xlink:href", imgTrumpUrl) .attr("x", width + margin.left + 30) .attr("y", height / 2 - 60) .attr("width", 100) .attr("height", 100); } else if (currentData === data2020) { svg.append("image") .attr("xlink:href", imgBidenUrl) .attr("x", margin.left - 130) .attr("y", height / 2 - 60) .attr("width", 100) .attr("height", 100); svg.append("image") .attr("xlink:href", imgTrumpUrl) .attr("x", width + margin.left + 30) .attr("y", height / 2 - 60) .attr("width", 100) .attr("height", 100); } // NOMBRES Y NÚMEROS DE CANDIDATOS CON ESTILO svg.append("text") .attr("x", margin.left) .attr("y", height / 2 - 15) .attr("text-anchor", "start") .attr("class", "candidato-biden") .text(data[0].candidato); svg.append("text") .attr("x", width + margin.left) .attr("y", height / 2 - 15) .attr("text-anchor", "end") .attr("class", "candidato-trump") .text(data[2].candidato); svg.append("text") .attr("x", margin.left) .attr("y", height / 2 - 35) .attr("text-anchor", "start") .attr("class", "numero-biden") .text(data[0].numero); svg.append("text") .attr("x", width + margin.left) .attr("y", height / 2 - 35) .attr("text-anchor", "end") .attr("class", "numero-trump") .text(data[2].numero); svg.append("text") .attr("x", margin.left) .attr("y", height / 2 + 35) .attr("text-anchor", "start") .attr("class", "votos-biden") .text(`${data[0].votos.toLocaleString()} votos (${data[0].porcentaje_texto}%)`); svg.append("text") .attr("x", width + margin.left) .attr("y", height / 2 + 35) .attr("text-anchor", "end") .attr("class", "votos-trump") .text(`${data[2].votos.toLocaleString()} votos (${data[2].porcentaje_texto}%)`); } drawChart(currentData); // Referencia al iframe para el gráfico con height dinámico const iframe = html``; const style = html` `; const button = html``; button.onclick = () => { if (currentData === data2024) { currentData = data2020; button.textContent = "Resultados 2024"; iframe.src = iframe2020Url; } else { currentData = data2024; button.textContent = "Resultados 2020"; iframe.src = iframe2024Url; } drawChart(currentData); }; const centeredContainer = html` ${style}

${button}

${svg.node()}

${iframe}

`; return html`${centeredContainer}`; }