Dashboard interactivo para explorar elecciones

Análisis espacial

App interactiva

Ciencia de datos

Dashboard

Como prueba de concepto, esta aplicación permite explorar espacial y gráficamente votaciones electorales. ¡Prueba la app!

Published

November 22, 2017

A continuación muestro el concepto de implementación de un Dashboard donde visualizamos información espacial y gŕafica de forma interactiva. Este Dashboard es una shiny app.

Para demostrar el concepto de implementación de la app, usé los datos electorales de las elecciones de junio de 2017 del Estado de México. Estos los obtuve del IEEM. También obtuve la información de los distritos electorales que provee el INEGI. Esta es la última versión del conteo de votos que se emitió. La aplicación permite explorar de forma interactiva el voto en cada municipio.

¡Haz click en el municipio de tu elección y explora los votos!

</p> <div id="quarto-navigation-envelope" class="hidden"> <p><span class="hidden" data-render-id="quarto-int-sidebar-title">Desde la Ciencia y la Ecología Urbana</span> <span class="hidden" data-render-id="quarto-int-navbar-title">Desde la Ciencia y la Ecología Urbana</span> <span class="hidden" data-render-id="quarto-int-navbar:https://twitter.com/Pachecovv">https://twitter.com/Pachecovv</span> <span class="hidden" data-render-id="quarto-int-navbar:https://github.com/Rodpach/">https://github.com/Rodpach/</span> <span class="hidden" data-render-id="quarto-int-navbar:mailto:rodpachecom@gmail.com">mailto:rodpachecom@gmail.com</span> <span class="hidden" data-render-id="quarto-int-navbar:Home">Home</span> <span class="hidden" data-render-id="quarto-int-navbar:/index.html">/index.html</span> <span class="hidden" data-render-id="quarto-int-navbar:About">About</span> <span class="hidden" data-render-id="quarto-int-navbar:/about.html">/about.html</span> <span class="hidden" data-render-id="quarto-int-navbar:Proyectos">Proyectos</span> <span class="hidden" data-render-id="quarto-int-navbar:/proyectos.html">/proyectos.html</span> <span class="hidden" data-render-id="quarto-int-navbar:Comunicación científica">Comunicación científica</span> <span class="hidden" data-render-id="quarto-int-navbar:/divulgacion.html">/divulgacion.html</span> <span class="hidden" data-render-id="quarto-int-navbar:Publicaciones">Publicaciones</span> <span class="hidden" data-render-id="quarto-int-navbar:/publicaciones_cientificas.html">/publicaciones_cientificas.html</span> <span class="hidden" data-render-id="quarto-int-navbar:Contacto">Contacto</span> <span class="hidden" data-render-id="footer-center">Powered by <a href="https://quarto.org/">Quarto</a>. <br />Copyright 2024, Rodrigo Pacheco Muñoz.<br /><a href='/'>Home</a> | <a href='/about'>About</a> | <a href='/proyectos'>Proyectos</a> | <a href='/divulgacion'>Comunicación Científica</a> | <a href='/publicaciones_cientificas'>Publicaciones</a> | <a href="mailto:rodpachecom@gmail.com">Contacto</a></span></p> </div> <div id="quarto-meta-markdown" class="hidden"> <p><span class="hidden" data-render-id="quarto-metatitle">Desde la Ciencia y la Ecología Urbana - Dashboard interactivo para explorar elecciones</span> <span class="hidden" data-render-id="quarto-twittercardtitle">Desde la Ciencia y la Ecología Urbana - Dashboard interactivo para explorar elecciones</span> <span class="hidden" data-render-id="quarto-ogcardtitle">Desde la Ciencia y la Ecología Urbana - Dashboard interactivo para explorar elecciones</span> <span class="hidden" data-render-id="quarto-metasitename">Desde la Ciencia y la Ecología Urbana</span> <span class="hidden" data-render-id="quarto-twittercarddesc"><em>Como prueba de concepto, esta aplicación permite explorar espacial y gráficamente votaciones electorales. ¡Prueba la app!</em></span> <span class="hidden" data-render-id="quarto-ogcardddesc"><em>Como prueba de concepto, esta aplicación permite explorar espacial y gráficamente votaciones electorales. ¡Prueba la app!</em></span></p> </div> </section> </main>  <script id = "quarto-html-after-body" type="application/javascript"> window.document.addEventListener("DOMContentLoaded", function (event) { const toggleBodyColorMode = (bsSheetEl) => { const mode = bsSheetEl.getAttribute("data-mode"); const bodyEl = window.document.querySelector("body"); if (mode === "dark") { bodyEl.classList.add("quarto-dark"); bodyEl.classList.remove("quarto-light"); } else { bodyEl.classList.add("quarto-light"); bodyEl.classList.remove("quarto-dark"); } } const toggleBodyColorPrimary = () => { const bsSheetEl = window.document.querySelector("link#quarto-bootstrap"); if (bsSheetEl) { toggleBodyColorMode(bsSheetEl); } } toggleBodyColorPrimary(); const icon = ""; const anchorJS = new window.AnchorJS(); anchorJS.options = { placement: 'right', icon: icon }; anchorJS.add('.anchored'); const isCodeAnnotation = (el) => { for (const clz of el.classList) { if (clz.startsWith('code-annotation-')) { return true; } } return false; } const clipboard = new window.ClipboardJS('.code-copy-button', { text: function(trigger) { const codeEl = trigger.previousElementSibling.cloneNode(true); for (const childEl of codeEl.children) { if (isCodeAnnotation(childEl)) { childEl.remove(); } } return codeEl.innerText; } }); clipboard.on('success', function(e) { // button target const button = e.trigger; // don't keep focus button.blur(); // flash "checked" button.classList.add('code-copy-button-checked'); var currentTitle = button.getAttribute("title"); button.setAttribute("title", "Copied!"); let tooltip; if (window.bootstrap) { button.setAttribute("data-bs-toggle", "tooltip"); button.setAttribute("data-bs-placement", "left"); button.setAttribute("data-bs-title", "Copied!"); tooltip = new bootstrap.Tooltip(button, { trigger: "manual", customClass: "code-copy-button-tooltip", offset: [0, -8]}); tooltip.show(); } setTimeout(function() { if (tooltip) { tooltip.hide(); button.removeAttribute("data-bs-title"); button.removeAttribute("data-bs-toggle"); button.removeAttribute("data-bs-placement"); } button.setAttribute("title", currentTitle); button.classList.remove('code-copy-button-checked'); }, 1000); // clear code selection e.clearSelection(); }); function tippyHover(el, contentFn) { const config = { allowHTML: true, content: contentFn, maxWidth: 500, delay: 100, arrow: false, appendTo: function(el) { return el.parentElement; }, interactive: true, interactiveBorder: 10, theme: 'quarto', placement: 'bottom-start' }; window.tippy(el, config); } const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]'); for (var i=0; i<noterefs.length; i++) { const ref = noterefs[i]; tippyHover(ref, function() { // use id or data attribute instead here let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href'); try { href = new URL(href).hash; } catch {} const id = href.replace(/^#\/?/, ""); const note = window.document.getElementById(id); return note.innerHTML; }); } let selectedAnnoteEl; const selectorForAnnotation = ( cell, annotation) => { let cellAttr = 'data-code-cell="' + cell + '"'; let lineAttr = 'data-code-annotation="' + annotation + '"'; const selector = 'span[' + cellAttr + '][' + lineAttr + ']'; return selector; } const selectCodeLines = (annoteEl) => { const doc = window.document; const targetCell = annoteEl.getAttribute("data-target-cell"); const targetAnnotation = annoteEl.getAttribute("data-target-annotation"); const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation)); const lines = annoteSpan.getAttribute("data-code-lines").split(","); const lineIds = lines.map((line) => { return targetCell + "-" + line; }) let top = null; let height = null; let parent = null; if (lineIds.length > 0) { //compute the position of the single el (top and bottom and make a div) const el = window.document.getElementById(lineIds[0]); top = el.offsetTop; height = el.offsetHeight; parent = el.parentElement.parentElement; if (lineIds.length > 1) { const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]); const bottom = lastEl.offsetTop + lastEl.offsetHeight; height = bottom - top; } if (top !== null && height !== null && parent !== null) { // cook up a div (if necessary) and position it let div = window.document.getElementById("code-annotation-line-highlight"); if (div === null) { div = window.document.createElement("div"); div.setAttribute("id", "code-annotation-line-highlight"); div.style.position = 'absolute'; parent.appendChild(div); } div.style.top = top - 2 + "px"; div.style.height = height + 4 + "px"; let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter"); if (gutterDiv === null) { gutterDiv = window.document.createElement("div"); gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter"); gutterDiv.style.position = 'absolute'; const codeCell = window.document.getElementById(targetCell); const gutter = codeCell.querySelector('.code-annotation-gutter'); gutter.appendChild(gutterDiv); } gutterDiv.style.top = top - 2 + "px"; gutterDiv.style.height = height + 4 + "px"; } selectedAnnoteEl = annoteEl; } }; const unselectCodeLines = () => { const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"]; elementsIds.forEach((elId) => { const div = window.document.getElementById(elId); if (div) { div.remove(); } }); selectedAnnoteEl = undefined; }; // Attach click handler to the DT const annoteDls = window.document.querySelectorAll('dt[data-target-cell]'); for (const annoteDlNode of annoteDls) { annoteDlNode.addEventListener('click', (event) => { const clickedEl = event.target; if (clickedEl !== selectedAnnoteEl) { unselectCodeLines(); const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active'); if (activeEl) { activeEl.classList.remove('code-annotation-active'); } selectCodeLines(clickedEl); clickedEl.classList.add('code-annotation-active'); } else { // Unselect the line unselectCodeLines(); clickedEl.classList.remove('code-annotation-active'); } }); } const findCites = (el) => { const parentEl = el.parentElement; if (parentEl) { const cites = parentEl.dataset.cites; if (cites) { return { el, cites: cites.split(' ') }; } else { return findCites(el.parentElement) } } else { return undefined; } }; var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]'); for (var i=0; i<bibliorefs.length; i++) { const ref = bibliorefs[i]; const citeInfo = findCites(ref); if (citeInfo) { tippyHover(citeInfo.el, function() { var popup = window.document.createElement('div'); citeInfo.cites.forEach(function(cite) { var citeDiv = window.document.createElement('div'); citeDiv.classList.add('hanging-indent'); citeDiv.classList.add('csl-entry'); var biblioDiv = window.document.getElementById('ref-' + cite); if (biblioDiv) { citeDiv.innerHTML = biblioDiv.innerHTML; } popup.appendChild(citeDiv); }); return popup.innerHTML; }); } } }); </script> </div>  <footer class="footer"> <div class="nav-footer"> <div class="nav-footer-left">   </div> <div class="nav-footer-center"> <div class='footer-contents'>Powered by [Quarto](https://quarto.org/). <br />Copyright 2024, Rodrigo Pacheco Muñoz.<br />[Home](../../../../../index.html) | [About](../../../../../about.html) | [Proyectos](../../../../../proyectos.html) | [Comunicación Científica](../../../../../divulgacion.html) | [Publicaciones](../../../../../publicaciones_cientificas.html) | [Contacto](mailto:rodpachecom@gmail.com)</div> </div> <div class="nav-footer-right">   </div> </div> </footer> </body> </html>