Saltar a contenido

Visualización y publicación con Kepler GL

alt text

Descripción

Kepler.gl es una aplicación desarrollada por Uber, en un principio para uso interno, para analizar y visualizar sus propios datos.

Esta basada en WebGL y pensada para la exploración visual de conjuntos de datos de geolocalizaciós a gran escala.

Kepler.gl está construido en la parte superior de Deck.gl, la libreria de visualización también desarrollada por Uber.

kepler.gl puede representar millones de puntos que representan miles de viajes y realizar agregaciones espaciales, bsadas por ejemplo en hexágonos.

También es possible desarrollar sobre Kepler.gl ya que existe una API basada en el framework de JavaScript React + Redux

Web

Aplicación

Página referéncia Kepler GL(React JS + Redux)

GitHUB

Tutoriales

Videos

alt text

Ejercicio de visualización con Kepler.gl

  • Queremos analizar los accidentes de coche en la ciudad de Barcelona en el año 2019

Para más detalle ver Videos 8 y 9

Preparación datos

  • Origen dataset CSV de Personas involucradas en accidentes gestionados por la Guardia Urbana en la ciudad de Barcelona de OpenData BCN

  • Este dataset contiene los accidentes, con coordenadas, de la ciudad de Barcelona en el año 2019.

  • Las fechas de los accidentes estan separadas por Año, Mes, Dias y Horas en diferentes campos.Cómo Keplerg trabaja muy bien con fechas tipo TIMESTAMP, hemos decidido añadir un nuevo campo, llamado timestamp, dónde hemos concatenado los campos de Año, Mes, Día y Hora

Con LibreOffice seria

=CONCATENATE(L2;"-";M2;"-";O2;"T";P2;":00")

Paso1 : Añadir datos el mapa

Añadimos csv

alt text

Paso2 : Añadimos estilo própio

alt text

Base map -->add Map Style --> Paste style url

  • Podemos añadir un estilo de https://openicgc.github.io/ (Apartado:"Estils àmbit mundial per Vector Tiles")
  • Podemos añadir estilo propio de Mapbox + nuestro AccessToken

Paso2 : Añadir capas

Para más detalle ver Video 9

  • Añadimos tres capas de tipo Punto,Hexbin, HeatMap

  • Ejemplo para Puntos -nombre capa "Accidentes"-

alt text

  • Ejemplo para HexBin -nombre capa "Agrupación"-

alt text

  • Ejemplo para HeatMap -nombre capa "Concentración"-

alt text

  • Dejamos solo visible capa "Agrupación" y utilizamos botón 3D para dar prespectiva al mapa

alt text

Paso3 : Añadir filtros

  • Permite filtrar los datos de todas las capa asociadas a un dataset

alt text

  • Por ejemplo por:

    Por dia de la semana --> Campo "Dia_semana" Por hora del dia --> Campo "Hora_dia" ** Por barra temporal --> Campo "timestamp"

Paso4 : Definir "tooltips"

alt text

Paso5 : Guardar y exporta a HTML

alt text

  • Seleccionaremos

    • Map Format --> HTML

    • Mapbox access token --> Pegaremos nuestro access token

    • Map Mode --> Allow users to edit the map

alt text

  • Guardaremos el archivo cómo accidentes.html dentro de nuestro proyecto geoweb

Podemos también guardar en formato JSON, cómo si fuera un archivo de proyecto que podremos volver a cargar como "dataset" en https://kepler.gl/demo. Aquí teneis el mapa creado accidentes.json

Paso 6 : Subir a GitHub

Subimos el ejemplo y editamos index.html a GitHub

    git pull
    git add .
    git commit -m "Mapa KeplerGl"
    git push origin main

Práctica

Comparar accidentes años 2018-2019

  • Tenemos también los accidentes del 2018 2018_accidents_tipus_gu_bcn_.csv
  • Podrias añadir este dataset a nuestro mapa y crear sus correspondientes capas para 2018
  • Después puedes activar la vista Dual y comparar años
  • Vuelve a exportar el mapa como "accidentes-comparador.html" y súbelo al GitHub

alt text

Una buena práctica final seria comparar con 2020 año de la pandemia