25:["$","title",null,{"children":"Elecciones Estados Unidos | Newtral Data | Observable"}] 49:T2778,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}`; }4a:T566,estilos = html`

NewtralData `4b:[{"id":"3dea24758a6eda84c5b1f5cc0056081afb9d3e5ffb8a75f1a5655f564cbd58c2b580bddbce5865820c2726acc9715ac50f49d881820b974d6f549ba78e8eca0f","href":"https://static.observableusercontent.com/files/3dea24758a6eda84c5b1f5cc0056081afb9d3e5ffb8a75f1a5655f564cbd58c2b580bddbce5865820c2726acc9715ac50f49d881820b974d6f549ba78e8eca0f","name":"newtral_logo.png","type":"image/png","lastModified":1729690059020.401,"size":1409},{"id":"b57af7db88653a0798ae246a82ede1baecee31efe383dad3571fb5e2c015d7159cdc083414303ca292f23f177c8c3db8dd27fc2642d015a479490fd9b8d7c5d0","href":"https://static.observableusercontent.com/files/b57af7db88653a0798ae246a82ede1baecee31efe383dad3571fb5e2c015d7159cdc083414303ca292f23f177c8c3db8dd27fc2642d015a479490fd9b8d7c5d0","name":"Kamala.png","type":"image/png","lastModified":1729695752023.92,"size":795201},{"id":"965b06ebd5cff26b77dbe9aaa53b2572fd25ffc82bbf0c3d4f1af0a5aa643869261c8adfc134e818bb919ab5adb4810505309cec89aa7cc4dcb3ee24163da4e4","href":"https://static.observableusercontent.com/files/965b06ebd5cff26b77dbe9aaa53b2572fd25ffc82bbf0c3d4f1af0a5aa643869261c8adfc134e818bb919ab5adb4810505309cec89aa7cc4dcb3ee24163da4e4","name":"Trump.png","type":"image/png","lastModified":1729695845954.977,"size":488236},{"id":"c92b91781c8d073e7d3cad47ef09e97792e68b9a47d1bc4b29747e4f42bf6f7248b2d4bb53be8467b98cdc4e7bea310eebe02738704f3945475f0c2a6bd1faa5","href":"https://static.observableusercontent.com/files/c92b91781c8d073e7d3cad47ef09e97792e68b9a47d1bc4b29747e4f42bf6f7248b2d4bb53be8467b98cdc4e7bea310eebe02738704f3945475f0c2a6bd1faa5","name":"Biden.png","type":"image/png","lastModified":1729695869790.197,"size":604738},{"id":"cc99535558d35f31c9f2cf4e2b2795b3d9ad7995073784c9e581e13e39e0a2317ae5f850474870d544bd7b927da2328eb2a3966129c72f4f89f3e8f363aeea3a","href":"https://static.observableusercontent.com/files/cc99535558d35f31c9f2cf4e2b2795b3d9ad7995073784c9e581e13e39e0a2317ae5f850474870d544bd7b927da2328eb2a3966129c72f4f89f3e8f363aeea3a","name":"Biden2.png","type":"image/png","lastModified":1729758801147.229,"size":741530}] 29:{"id":"2348abc5cd3f554f","slug":null,"title":"Elecciones Estados Unidos","thumbnail":"5de87729129db7ccf74d62baa6a35f5b9aeb758c15289879faaf8137a7bdb61b","access_level":"public","create_time":"$D2024-10-23T11:30:46.144Z","update_time":"$D2024-11-11T08:08:20.509Z","view_time":null,"first_public_time":"$D2024-10-23T11:34:15.375Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6721f19fe640557e","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":"starter_2024","bio":"Somos el equipo de datos de Newtral. Nos dedicamos a analizar y convertir datos en historias periodísticas, utilizando IA y programación.","following":false},"version":682,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcf36f2cf3d68944","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":null,"bio":"Somos el equipo de datos de Newtral. Nos dedicamos a analizar y convertir datos en historias periodísticas, utilizando IA y programación.","following":false}],"members":[{"type":"team","id":"6721f19fe640557e","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":"starter_2024","role":"editor"},{"type":"individual","id":"dcf36f2cf3d68944","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Elecciones Estados Unidos","cells":[{"id":310,"value":"titulo = html`\n

Elecciones Estados Unidos

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null