25:["$","title",null,{"children":"Prueba elecciones Estados Unidos | Miguel | Observable"}] 49:T1f37,viewof chart = { const margin = { top: 50, right: 130, bottom: 40, left: 130 }, width = 700, height = 140; // URLs de las imágenes const imgKamalaUrl = await FileAttachment("Kamala.png").url(); const imgBidenUrl = await FileAttachment("Biden.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 let data2024 = [ { candidato: "Kamala Harris", votos: 50000000, porcentaje: 50.00, color: "#0000ff", numero: 300 }, { candidato: "Donald J. Trump", votos: 50000000, porcentaje: 50.00, color: "#ff0000", numero: 238 } ]; // DATOS DE 2020 let data2020 = [ { candidato: "Joe Biden", votos: 81283501, porcentaje: 51.31, color: "#0000ff", numero: 306 }, { candidato: "Donald J. Trump", votos: 74223975, porcentaje: 46.85, color: "#ff0000", numero: 232 } ]; let currentData = data2024; // Ajustamos el ancho del SVG sumando los márgenes const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height); function drawChart(data) { svg.selectAll("*").remove(); const totalPorcentaje = data[0].porcentaje + data[1].porcentaje; const x = d3.scaleLinear() .domain([0, totalPorcentaje]) .range([0, width]); // BIDEN - HARRIS o KAMALA - TRUMP (dependiendo del año) svg.append("rect") .attr("x", margin.left) // Añadimos margen izquierdo .attr("y", height / 2 - 10) .attr("width", x(data[0].porcentaje)) .attr("height", 20) .attr("fill", data[0].color); // TRUMP svg.append("rect") .attr("x", x(data[0].porcentaje) + margin.left) // Añadimos margen izquierdo .attr("y", height / 2 - 10) .attr("width", x(data[1].porcentaje)) .attr("height", 20) .attr("fill", data[1].color); // LÍNEA MAYORÍA svg.append("line") .attr("x1", width / 2 + margin.left) // Ajustamos la línea central para considerar el margen .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) // Ajustamos la etiqueta de la mayoría .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) { // Kamala Harris svg.append("image") .attr("xlink:href", imgKamalaUrl) .attr("x", margin.left - 130) // Usamos el margen izquierdo para posicionar fuera de la barra .attr("y", height / 2 - 60) .attr("width", 100) .attr("height", 100); // Donald Trump svg.append("image") .attr("xlink:href", imgTrumpUrl) .attr("x", width + margin.left + 30) // Usamos el margen derecho para posicionar fuera de la barra .attr("y", height / 2 - 60) .attr("width", 100) .attr("height", 100); } else if (currentData === data2020) { // Joe Biden svg.append("image") .attr("xlink:href", imgBidenUrl) .attr("x", margin.left - 130) // Posicionamos la imagen de Biden .attr("y", height / 2 - 60) .attr("width", 100) .attr("height", 100); // Donald Trump en 2020 svg.append("image") .attr("xlink:href", imgTrumpUrl) .attr("x", width + margin.left + 30) // Imagen de Trump en el margen derecho .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") // Asignamos clase CSS .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") // Asignamos clase CSS .text(data[1].candidato); svg.append("text") .attr("x", margin.left) .attr("y", height / 2 - 35) .attr("text-anchor", "start") .attr("class", "numero-biden") // Asignamos clase CSS .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") // Asignamos clase CSS .text(data[1].numero); svg.append("text") .attr("x", margin.left) .attr("y", height / 2 + 35) .attr("text-anchor", "start") .attr("class", "votos-biden") // Asignamos clase CSS .text(`${data[0].votos.toLocaleString()} votos (${data[0].porcentaje}%)`); svg.append("text") .attr("x", width + margin.left) .attr("y", height / 2 + 35) .attr("text-anchor", "end") .attr("class", "votos-trump") // Asignamos clase CSS .text(`${data[1].votos.toLocaleString()} votos (${data[1].porcentaje}%)`); } drawChart(currentData); // Referencia al iframe para el gráfico del BLOQUE 2 const iframe = html``; // Estilo del botón y de los nombres/números const style = html` `; const button = html``; button.onclick = () => { if (currentData === data2024) { currentData = data2020; button.textContent = "Resultados 2024"; iframe.src = iframe2020Url; // Cambiamos el iframe al gráfico de 2020 } else { currentData = data2024; button.textContent = "Resultados 2020"; iframe.src = iframe2024Url; // Cambiamos el iframe al gráfico de 2024 } 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":1729704977138.027,"size":1409},{"id":"965b06ebd5cff26b77dbe9aaa53b2572fd25ffc82bbf0c3d4f1af0a5aa643869261c8adfc134e818bb919ab5adb4810505309cec89aa7cc4dcb3ee24163da4e4","href":"https://static.observableusercontent.com/files/965b06ebd5cff26b77dbe9aaa53b2572fd25ffc82bbf0c3d4f1af0a5aa643869261c8adfc134e818bb919ab5adb4810505309cec89aa7cc4dcb3ee24163da4e4","name":"Trump.png","type":"image/png","lastModified":1729704977585.83,"size":488236},{"id":"c92b91781c8d073e7d3cad47ef09e97792e68b9a47d1bc4b29747e4f42bf6f7248b2d4bb53be8467b98cdc4e7bea310eebe02738704f3945475f0c2a6bd1faa5","href":"https://static.observableusercontent.com/files/c92b91781c8d073e7d3cad47ef09e97792e68b9a47d1bc4b29747e4f42bf6f7248b2d4bb53be8467b98cdc4e7bea310eebe02738704f3945475f0c2a6bd1faa5","name":"Biden.png","type":"image/png","lastModified":1729704977712.855,"size":604738},{"id":"b57af7db88653a0798ae246a82ede1baecee31efe383dad3571fb5e2c015d7159cdc083414303ca292f23f177c8c3db8dd27fc2642d015a479490fd9b8d7c5d0","href":"https://static.observableusercontent.com/files/b57af7db88653a0798ae246a82ede1baecee31efe383dad3571fb5e2c015d7159cdc083414303ca292f23f177c8c3db8dd27fc2642d015a479490fd9b8d7c5d0","name":"Kamala.png","type":"image/png","lastModified":1729704977718.362,"size":795201}] 29:{"id":"cab59a6a826af488","slug":null,"title":"Prueba elecciones Estados Unidos","thumbnail":"0e728fb020938ab5d93de9d98ed580b1102158960d063e5a1f0a227f5244039d","access_level":"public","create_time":"$D2024-09-11T09:21:11.341Z","update_time":"$D2024-10-23T18:34:53.020Z","view_time":null,"first_public_time":"$D2024-09-11T10:40:31.482Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6978fd71330dd0cf","login":"miguel5","name":"Miguel","avatar_url":"https://avatars-next.observableusercontent.com/beab34935d62a73637bb2ec8fad16f597a96dcde3a96dacd2c539d4daff507d2","tier":"starter_2024","bio":"","following":false},"version":80,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"51759b36b29e346e","login":"miguel-ros","name":"Miguel Ros","avatar_url":"https://avatars-next.observableusercontent.com/178c87465d6f1a93517863ad6dd17bbd4bce068e8e5a6ac84acd7033669cd22c","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"6978fd71330dd0cf","login":"miguel5","name":"Miguel","avatar_url":"https://avatars-next.observableusercontent.com/beab34935d62a73637bb2ec8fad16f597a96dcde3a96dacd2c539d4daff507d2","tier":"starter_2024","role":"editor"},{"type":"individual","id":"51759b36b29e346e","login":"miguel-ros","name":"Miguel Ros","avatar_url":"https://avatars-next.observableusercontent.com/178c87465d6f1a93517863ad6dd17bbd4bce068e8e5a6ac84acd7033669cd22c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Prueba elecciones Estados Unidos","cells":[{"id":0,"value":"titulo = html`\n

Prueba elecciones Estados Unidos

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof prueba_slider = Inputs.range([0,100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"svg = {\n const contenedor = html`

`\n const svg1 = DOM.svg(600,400);\n const svg2 = DOM.svg(600,400);\n\n d3.select(svg1)\n .append(\"circle\")\n .attr(\"cx\", 300)\n .attr(\"cy\", 200)\n .attr(\"r\", 80)\n .attr(\"fill\", \"white\");\n\n d3.select(svg2)\n .append(\"circle\")\n .attr(\"cx\", 300)\n .attr(\"cy\", 200)\n .attr(\"r\", 100)\n .attr(\"fill\", \"black\");\n\n svg1.style.position = \"absolute\";\n svg1.style.top = \"0\";\n svg1.style.left = \"0\";\n\n svg2.style.position = \"absolute\";\n svg2.style.top = \"0\";\n svg2.style.left = \"0\";\n \n contenedor.appendChild(svg2);\n contenedor.appendChild(svg1);\n\n return contenedor;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"mermaidReady = {\n const script = document.createElement(\"script\");\n script.src = \"https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js\";\n document.head.appendChild(script);\n\n await new Promise(resolve => {\n script.onload = resolve;\n });\n\n return window.mermaid;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"chart = {\n const chartDiv = document.createElement(\"div\");\n chartDiv.className = \"mermaid\";\n chartDiv.innerHTML = `\n graph TD\n A[Inicio] --> B{¿Condición?}\n B -->|Sí| C[Hacer tarea]\n B -->|No| D[Esperar]\n C --> E[Fin]\n D --> E[Fin]\n `;\n\n mermaidReady.initialize({ startOnLoad: false });\n mermaidReady.init(undefined, chartDiv);\n \n return chartDiv;\n}","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