<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <!--Page Title-->
    <title>Práctica - Visualización de datos</title>

    <!--Meta Keywords and Description-->
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    
    <!--Favicon-->
    <link rel="shortcut icon" href="images/favicon.ico" title="Favicon"/>

    <!-- Main CSS Files -->
    <link rel="stylesheet" href="css/style.css">

    <!-- Namari Color CSS -->
    <link rel="stylesheet" href="css/namari-color.css">

    <!--Icon Fonts - Font Awesome Icons-->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- Animate CSS-->
    <link href="css/animate.css" rel="stylesheet" type="text/css">

    <link href=' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css' rel='stylesheet' type='text/css'>
   
    <!--Google Webfonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>

<!-- Preloader -->
<div id="preloader">
    <div id="status" class="la-ball-triangle-path">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<!--End of Preloader-->

<div class="page-border" data-wow-duration="0.7s" data-wow-delay="0.2s">
    <div class="top-border wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"></div>
    <div class="right-border wow fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;"></div>
    <div class="bottom-border wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;"></div>
    <div class="left-border wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;"></div>
</div>

<div id="wrapper">

    <header id="banner" class="scrollto clearfix" data-enllax-ratio=".5">
        <div id="header" class="nav-collapse">
            <div class="row clearfix">
                <div class="col-1">

                    <!--Logo-->
                    <div id="logo">

                        <!--Logo that is shown on the banner-->
                        <img src="images/logo.png" id="banner-logo" alt="Landing Page"/>
                        <!--End of Banner Logo-->

                        <!--The Logo that is shown on the sticky Navigation Bar-->
                        <img src="images/logo-2.png" id="navigation-logo" alt="Landing Page"/>
                        <!--End of Navigation Logo-->

                    </div>
                    <!--End of Logo-->

                    <aside>

                        <!--Social Icons in Header-->
                        <ul class="social-icons">
                            <li>
                                <li>
                                    <a target="_blank" title="kaggle" href="https://www.kaggle.com/">
                                        <i class="fab fa-kaggle fa-1x"></i><span>Behance</span>
                                    </a>
                                </li>

                                <a target="_blank" title="Facebook" href="https://www.facebook.com/">
                                    <i class="fab fa-facebook-square fa-1x"></i><span>Facebook</span>
                                </a>
                            </li>
                            <li>
                                <a target="_blank" title="Google+" href="http://google.com/">
                                    <i class="fab fa-google-plus fa-1x"></i><span>Google+</span>
                                </a>
                            </li>
                            <li>
                                <a target="_blank" title="X" href="http://www.x.com/">
                                    <i class="fa-brands fa-x-twitter fa-1x"></i><span>X</span>
                                </a>
                            </li>
                            <li>
                                <a target="_blank" title="Instagram" href="http://www.instagram.com/">
                                    <i class="fab fa-instagram fa-1x"></i><span>Instagram</span>
                                </a>
                            </li>
                            
                        </ul>
                        <!--End of Social Icons in Header-->

                    </aside>

                    <!--Main Navigation-->
                    <nav id="nav-main">
                        <ul>
                            <li>
                                <a href="#banner">Presentaci&oacute;n</a>
                            </li>
                            <li>
                                <a href="#about">Análisis</a>
                            </li>
                            <li>
                                <a href="#cartografía">Gráficas</a>
                            </li>
                            
                            <li>
                                <a href="#aprender">Aprender</a>
                            </li>
                            <li>
                                <a href="#mapa">Mapa Interactivo</a>
                            </li>
                            <li>
                                <a href="#recursos">Recursos</a>
                            </li>
            <!--               <li>
                                <a href="#testimonials">Testimonials</a>
                            </li>
                            <li>
                                <a href="#clients">Clients</a>
                            </li>
                            <li>
                                <a href="#pricing">Pricing</a>
                            </li>--> 
                        </ul>
                    </nav>
                    <!--End of Main Navigation-->

                    <div id="nav-trigger"><span></span></div>
                    <nav id="nav-mobile"></nav>

                </div>
            </div>
        </div><!--End of Header-->

        <!--Banner Content-->
        <div id="banner-content" class="row clearfix">

            <div class="col-38">

                <div class="section-heading">
                    <h1>DETECCIÓN DE ANOMALÍAS GLOBALES</h1>
                    <h2>En esta página analizaremos eventos que suceden en el mundo. Tomaremos cuenta de su gravedad; las emociones encontradas en los textos relacionados, 
                        y su geolocalización.<br/><br/>
                        
                        Conoceremos el número de menciones que tienen, las fuentes que los contaron, los artículos que los describieron. Finalmente, utilizaremos todo ello para comprenderlos a través de la Ciencia de Datos.
                    </h2>
                </div>

                <!--Call to Action-->
                <a href="https://www.gdeltproject.org/" class="button" target="_blank">VISITAR GDELT</a>
                <!--End Call to Action-->

            </div>

        </div><!--End of Row-->
    </header>

    <!--Main Content Area-->
    <main id="content">

        <!--Introduction-->
        <section id="about" class="introduction scrollto">

            <div class="row clearfix">

                <div class="col-3">
                    <div class="section-heading">
                        <h3>CIENCIA DE DATOS</h3>
                        <h2 class="section-title">Millones de Datos Puestos a Prueba</h2>
                        <p class="section-subtitle">Un total de <strong>5.919.314</strong> eventos asociados a <strong>15.528.668</strong> menciones procesados y analizados. 
                            Los ficheros CSV comprimidos ocuparon un total de <strong>24Gb</strong> de espacio, incluyendo los de grafos cuyos datos no se han incluído en 
                            este proyecto.</p>
                    </div>

                </div>

                <div class="col-2-3">

                    <!--Icon Block-->
                    <div class="col-2 icon-block icon-top wow fadeInUp" data-wow-delay="0.1s">
                        <!--Icon-->
                        <div class="icon">
                            
                            
                                <img src="images/iconos/polar-bear.png" alt="Ícono personalizado" style="width: 32px; height: 32px;">
                            
                        </div>
                        <!--Icon Block Description-->
                        <div class="icon-block-description">
                            <h4>Polars &amp; Parquet</h4>
                            <p>Se sustityó Pandas por <i>Polars</i> para la manipulación ultra-rápida de datos masivos comprimidos con <i>Parquet</i>.</p>
                        </div>
                    </div>
                    <!--End of Icon Block-->

                    <!--Icon Block-->
                    <div class="col-2 icon-block icon-top wow fadeInUp" data-wow-delay="0.3s">
                        <!--Icon-->
                        <div class="icon">
                            <img src="images/iconos/graphic-designer.png" alt="Ícono personalizado" style="width: 32px; height: 32px;">
                        </div>
                        <!--Icon Block Description-->
                        <div class="icon-block-description">
                            <h4>Equilibrio Entre Diseño &amp; Usabilidad </h4>
                            <p>La programación manual de todo, sin utilizar webs o programas especializados, ha requerido mucho tiempo de revisión.</p>
                        </div>
                    </div>
                    <!--End of Icon Block-->

                    <!--Icon Block-->
                    <div class="col-2 icon-block icon-top wow fadeInUp" data-wow-delay="0.5s">
                        <!--Icon-->
                        <div class="icon">
                            <img src="images/iconos/data-science.png" alt="Ícono personalizado" style="width: 32x; height: 32px;">
                        </div>
                        <!--Icon Block Description-->
                        <div class="icon-block-description">
                            <h4>Algoritmo K-Means</h4>
                            <p>Éste es el algoritmo de clústering eficiente por excelencia. Se probaron DBSCAN y HDSCAN buscando anomalías por
                                diferencias en densidad. La imagen de la derecha muestra los cuatro grupos obtenidos con K-Means.
                            </p>
                              
                        </div>
                    </div>
                    <!--End of Icon Block-->

                    <!--Icon Block-->
                    <div class="col-2 icon-block icon-top wow fadeInUp" data-wow-delay="0.5s">
                        <img src="images/k-means.png" 
                            width="75%" 
                            height="75%" 
                            style="box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5); margin-top:60px;"/>
                        <!--Icon-->
                      
                      <!--  <div class="icon">
                                <img src="images/iconos/data-science.png" alt="Ícono personalizado" style="width: 48px; height: 48px;">
                            </div>
                        
                        <div class="icon-block-description">
                            <h4>Parallax Effect</h4>
                            <p>Id porro tritani recusabo usu, eum intellegam consequuntur et. Fugit debet ea sit, an pro
                                nemore vivendum</p>
                        </div>-->
                    </div>
                    <!--End of Icon Block-->

                </div>

            </div>


        </section>
        <!--End of Introduction-->


        <!--Gallery-->
       <!-- Gallery -->
       <section id="cartografía" class="introduction scrollto" >

        <div class="row clearfix">

            <div class="col-3">
                <div class="section-heading">
                    <h3>Visualización</h3>
                    <h2 class="section-title">4 Grupos Cartografiados</h2>
                </div>

            </div>

            <div class="col-2-3" style="padding-top:80px;">
                <p class="icon-block-description">
                    Los datos indican que el tono con el que se recopilan los eventos tiende a ser negativo. Su escala va de muy negativo (-100) a muy positivo (100). Por otro lado, la escala de Golstein, 
                    que se puede consultar en <a href="https://www.jstor.org/stable/174480" target="_blank">https://www.jstor.org/stable/174480</a>,
                    indica prominencia de eventos difefentes según el clúster. La dispersión de los sucesos respecto del "núcleo" de sus grupos no 
                    es constante entre clústeres.
                </p>
            </div>

            

            </div>

       </section>
       
<aside id="gallery" class="row text-center clearfix" data-featherlight-gallery data-featherlight-filter="a" style="margin-top: -150px !important;">
    
    <div class="col-3">
        <a href="images/histogramas/distancia_centroide.png" data-featherlight="image"><img src="images/histogramas/distancia_centroide.png" alt="Landing Page"/></a>
    </div>
    <div class="col-3">
        <a href="images/histogramas/averageTone.png" data-featherlight="image"><img src="images/histogramas/averageTone.png" alt="Landing Page"/></a>
    </div>
    <div class="col-3">
        <a href="images/histogramas/goldsteinscale.png" data-featherlight="image"><img src="images/histogramas/goldsteinscale.png" alt="Landing Page"/></a>
    </div>
    <div class="col-3">
        <a href="images/histogramas/cantidad_menciones.png" data-featherlight="image"><img src="images/histogramas/cantidad_menciones.png" alt="Landing Page"/></a>
    </div>
    <div class="col-3">
        <a href="images/histogramas/meanmentiondolen.png" data-featherlight="image"><img src="images/histogramas/meanmentiondolen.png" alt="Landing Page"/></a>
    </div>
   
    <div class="col-3">
        <a href="images/histogramas/numarticles.png" data-featherlight="image"><img src="images/histogramas/numarticles.png" alt="Landing Page"/></a>
    </div>

</aside>
<!-- End of Gallery -->

        <!--End of Gallery-->
    <section id ="aprender" class="introduction scrollto" >

        <!--Content Section-->
        <div id="aprender" class="scrollto clearfix">

            <div class="row no-padding-bottom clearfix">


                <!--Content Left Side-->
                <div class="col-3">
                    <!--User Testimonial-->
                    <blockquote class="testimonial text-right bigtest">
                        <q>La enseñanza es el acto más noble que un ser humano puede realizar, porque es compartir el alma misma.</q>
                        <footer>— Anónimo</footer>
                    </blockquote>
                    <!-- End of Testimonial-->

                </div>
                <!--End Content Left Side-->

                <!--Content of the Right Side-->
                <div class="col-3">
                    <div class="section-heading">
                        <h3>PROYECCCIÓN</h3>
                        <h2 class="section-title">Reconstruyendo un Mundo de Experiencias</h2>
                        <p class="section-subtitle">Contemplar una fotografía es un evento inusual: es el único momento en el que ves a través de los ojos de otro ser humano.</p>
                    </div>
                    <p>Al seleccionar los eventos que se encuentran a una determinada distancia de su centroide, podemos identificar aquellos que pueden clasificarse como anomalías.
                        También es posible optar por analizar la distribución de uno o varios componentes, reducidos mediante técnicas como PCA (Análisis de Componentes Principales).
                    </p>
                    <p>
                        Si cogemos una subselección del dataset total que contenga estos datos, ¿cómo se distribuirán? Dado que los datos se agruparon, también, con coordenadas,
                        ¿encontraremos patrones que no sean geográficos en estos? En la siguiente sección podremos consultar un mapamundi y salir de dudas.
                    </p>
                    <!-- Just replace the Video ID "UYJ5IjBRlW8" with the ID of your video on YouTube (Found within the URL) -->
                    <!--<a href="#" data-videoid="UYJ5IjBRlW8" data-videosite="youtube" class="button video link-lightbox">
                        WATCH VIDEO <i class="fa fa-play" aria-hidden="true"></i>
                    </a>-->
                </div>
                <!--End Content Right Side-->

                <div class="col-3">
                    <img src="images/hombre_globo.png" alt="Científico crea mapa con datos"/>
                </div>

            </div>


        </div>
        <!--End of Content Section-->
  </section>    


    <aside id="mapa" class="scrollto text-center" data-enllax-ratio=".2">

        <div class="row clearfix">

            <div class="section-heading">
                <h3>REPRESENTACIÓN</h3>
                <h2 class="section-title">Mapa interactivo de eventos anómalos</h2>
            </div>
            
            <div class="col-12 iframe-container">
                <iframe 
                    src="index_mapas.html" 
                    width="1400px" 
                    height="500px" 
                    style="border: 1px solid black;">
                </iframe>
            </div>

            
           
        </div>

    </aside>

    

        <!--Mapa interactivo-->
        <aside id="recursos" class="scrollto text-center" data-enllax-ratio=".2">

            <div class="row clearfix">

                <div class="section-heading">
                    <h3>ARTEFACTOS</h3>
                    <h2 class="section-title">RECURSOS</h2>
                </div>

                <!--User Testimonial-->
                <blockquote class="col-2-3 testimonial classic">
                    <img src="images/user-images/user-1.jpg" alt="User"/>
                    
                    <p style="text-align:justify;">
                        Los iconos los he obtenido de Flaticon. La imagen de fondo del mapamundi, en el área de "presentación", lo he generado con ChatGPT, 
                        pidiéndole que represente una proyección de datos sobre un globo terráqueo donde se van a representar esos datos geolocalizados.
                        La imagen del científico integrando los datos en CSV en un globo terráqueo también se la he pedido a chatgpt con ese prompt, pidiéndole que fuera
                        dibujado en carboncillo y con fondo blanco. Luego, he editado las imágenes con Gimp. El logo lo he diseñado con Gimp.
                    </p>
                    <p><br/></p>
                    <h5>
                        <strong>Bibliografía y recursos en línea</strong>
                    </h5>

                        <footer>
							<div class="csl-bib-body" style="line-height: 1.35; font-size: 14px; text-align: left;">
                                <div class="csl-entry" style="margin-bottom: 1em;">GOLDSTEIN, Joshua S. A Conflict-Cooperation Scale for WEIS Events Data. En <i>The Journal of Conflict Resolution</i> [JSTOR]. 1992, vol. 36, n.<sup>o</sup>. 2, pp. 369-385. ISSN 00220027, 15528766.</div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&amp;rft.genre=article&amp;rft.atitle=A%20Conflict-Cooperation%20Scale%20for%20WEIS%20Events%20Data&amp;rft.jtitle=The%20Journal%20of%20Conflict%20Resolution&amp;rft.volume=36&amp;rft.issue=2&amp;rft.aufirst=Joshua%20S.&amp;rft.aulast=Goldstein&amp;rft.au=Joshua%20S.%20Goldstein&amp;rft.date=1992&amp;rft.pages=369-385&amp;rft.spage=369&amp;rft.epage=385&amp;rft.issn=00220027%2C%2015528766"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">OPENJSF.ORG, OpenJS Foundation-, jQuery</div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=blogPost&amp;rft.title=jQuery&amp;rft.description=jQuery%3A%20The%20Write%20Less%2C%20Do%20More%2C%20JavaScript%20Library&amp;rft.identifier=https%3A%2F%2Fjquery.com%2F&amp;rft.aufirst=OpenJS%20Foundation-&amp;rft.aulast=openjsf.org&amp;rft.au=OpenJS%20Foundation-%20openjsf.org&amp;rft.language=en-US"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">20.19. SimpleHTTPServer — Simple HTTP request handler — Python 2.7.18 documentation. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://docs.python.org/2/library/simplehttpserver.html?highlight=simplehttpserver">https://docs.python.org/2/library/simplehttpserver.html?highlight=simplehttpserver</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=20.19.%20SimpleHTTPServer%20%E2%80%94%20Simple%20HTTP%20request%20handler%20%E2%80%94%20Python%202.7.18%20documentation&amp;rft.identifier=https%3A%2F%2Fdocs.python.org%2F2%2Flibrary%2Fsimplehttpserver.html%3Fhighlight%3Dsimplehttpserver"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">AJAX - Aprende desarrollo web | MDN. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Network_requests">https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Network_requests</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=AJAX%20-%20Aprende%20desarrollo%20web%20%7C%20MDN&amp;rft.identifier=https%3A%2F%2Fdeveloper.mozilla.org%2Fes%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FNetwork_requests"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">Data: Querying, Analyzing and Downloading: The GDELT Project. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://www.gdeltproject.org/data.html#rawdatafiles">https://www.gdeltproject.org/data.html#rawdatafiles</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=Data%3A%20Querying%2C%20Analyzing%20and%20Downloading%3A%20The%20GDELT%20Project&amp;rft.identifier=https%3A%2F%2Fwww.gdeltproject.org%2Fdata.html%23rawdatafiles"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">GIMP - GNU Image Manipulation Program. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://www.gimp.org/">https://www.gimp.org/</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=GIMP%20-%20GNU%20Image%20Manipulation%20Program&amp;rft.identifier=https%3A%2F%2Fwww.gimp.org%2F"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">Introduction to k-Means Clustering with scikit-learn in Python | DataCamp. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://www.datacamp.com/tutorial/k-means-clustering-python">https://www.datacamp.com/tutorial/k-means-clustering-python</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=Introduction%20to%20k-Means%20Clustering%20with%20scikit-learn%20in%20Python%20%7C%20DataCamp&amp;rft.identifier=https%3A%2F%2Fwww.datacamp.com%2Ftutorial%2Fk-means-clustering-python"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">Maps in JavaScript. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://plotly.com/javascript/maps/">https://plotly.com/javascript/maps/</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=Maps%20in%20JavaScript&amp;rft.identifier=https%3A%2F%2Fplotly.com%2Fjavascript%2Fmaps%2F"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">parquet · PyPI. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://pypi.org/project/parquet/">https://pypi.org/project/parquet/</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=parquet%20%C2%B7%20PyPI&amp;rft.identifier=https%3A%2F%2Fpypi.org%2Fproject%2Fparquet%2F"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">Polars — DataFrames for the new era. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://pola.rs/">https://pola.rs/</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=Polars%20%E2%80%94%20DataFrames%20for%20the%20new%20era&amp;rft.identifier=https%3A%2F%2Fpola.rs%2F"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">python - filtering in folium based on two column values - Stack Overflow. En [cit. 06.01.2025]. Disponible en: <a target="_blank" href="https://stackoverflow.com/questions/78265179/filtering-in-folium-based-on-two-column-values">https://stackoverflow.com/questions/78265179/filtering-in-folium-based-on-two-column-values</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=python%20-%20filtering%20in%20folium%20based%20on%20two%20column%20values%20-%20Stack%20Overflow&amp;rft.identifier=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F78265179%2Ffiltering-in-folium-based-on-two-column-values"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">Rueda de colores, un generador de paletas de colores | Adobe Color. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://color.adobe.com/es/create/color-wheel">https://color.adobe.com/es/create/color-wheel</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=Rueda%20de%20colores%2C%20un%20generador%20de%20paletas%20de%20colores%20%7C%20Adobe%20Color&amp;rft.identifier=https%3A%2F%2Fcolor.adobe.com%2Fes%2Fcreate%2Fcolor-wheel"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">Scale &amp; Ship Faster with a Composable Web Architecture | Netlify. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://www.netlify.com/">https://www.netlify.com/</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=Scale%20%26%20Ship%20Faster%20with%20a%20Composable%20Web%20Architecture%20%7C%20Netlify&amp;rft.identifier=https%3A%2F%2Fwww.netlify.com%2F"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">Scattergeo traces in JavaScript. En [cit. 09.01.2025]. Disponible en: <a target="_blank" href="https://plotly.com/javascript/reference/scattergeo/">https://plotly.com/javascript/reference/scattergeo/</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=Scattergeo%20traces%20in%20JavaScript&amp;rft.identifier=https%3A%2F%2Fplotly.com%2Fjavascript%2Freference%2Fscattergeo%2F"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">Vector Icons and Stickers - PNG, SVG, EPS, PSD and CSS. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://www.flaticon.com/">https://www.flaticon.com/</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=Vector%20Icons%20and%20Stickers%20-%20PNG%2C%20SVG%2C%20EPS%2C%20PSD%20and%20CSS&amp;rft.identifier=https%3A%2F%2Fwww.flaticon.com%2F"></span>
                                <div class="csl-entry">Visual Studio Code - Code Editing. Redefined. En [cit. 10.01.2025]. Disponible en: <a target="_blank" href="https://code.visualstudio.com/">https://code.visualstudio.com/</a></div>
                                <span class="Z3988" title="url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rft.type=webpage&amp;rft.title=Visual%20Studio%20Code%20-%20Code%20Editing.%20Redefined&amp;rft.identifier=https%3A%2F%2Fcode.visualstudio.com%2F"></span>
                                <div class="csl-entry" style="margin-bottom: 1em;">Plantilla del sitio web. Disponible en: <a target="_blank" href="https://shapingrain.com/">shapingrain</a></div>
                               </div></body>
                    </footer>
                </blockquote>
                <!-- End of Testimonial-->

                <!--User Testimonial-->
                <blockquote class="col-5 testimonial classic">
                    <img src="images/user-images/user-2.jpg" alt="User" />
                    <footer style="text-align: right;">
                        Autor: <strong>Gonzalo Sánchez Pla</strong>.<br /> <br />
                        Visualización de datos. <br />
                        10 de enero de 2025.<br /><br />
                    </footer>
                    <h4 style="text-align: left; color: indigo;"><strong>Datos</strong></h4>
                    <div><span>Descargar CSV: &nbsp;</span> <button id="download-file" class="btn btn-primary" 
                        style="background-image: url('./images/iconos/downloadIcon.png'); width: 32px; height: 32px; background-size: cover; border: none; cursor: pointer;"></button>
                    </div>
                </blockquote>
                <!-- End of Testimonial-->

            </div>

        </aside>
        <!--End of Testimonials-->

       
       

        <!--Pricing Tables-->
        
        

    </main>
    <!--End Main Content Area-->


</div>

<!-- Include JavaScript resources -->
<script src="js/jquery.1.8.3.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/featherlight.min.js"></script>
<script src="js/featherlight.gallery.min.js"></script>
<script src="js/jquery.enllax.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.stickyNavbar.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/images-loaded.min.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/site.js"></script>

<script>
    document.getElementById('download-file').addEventListener('click', function () {
        // Ruta al archivo que deseas descargar
        const filePath = './datos/anomalías_top_por_país_día.csv.gz';

        // Crear un enlace temporal para descargar
        const link = document.createElement('a');
        link.href = filePath;
        link.download = 'GonzaloSanchezPla_VisualizacionDeDatos.csv.gz'; // Nombre que tendrá el archivo descargado
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // Eliminar el enlace del DOM
    });
</script>



<section style="text-align: center;">
    <div style="margin: 0 auto; display: inline-block;">
        <footer>Aviso Legal - Política de Privacidad</footer>
        <p>&nbsp;</p>
    </div>
</section>


</body>

<script type="javascript"></script>
</html>