Entradas

En Abacus Consulting nos gustan los mapas. Por eso, dejamos aquí algunas referencias sobre programas y recursos para trasladar una base de datos o un fichero a un entorno espacial, generalmente mapas digitalizados.

Kepler, análisis geoespacial

Kepler, análisis geoespacial

KEPLER
Kepler.gl es una poderosa herramienta de análisis geoespacial de código abierto para conjuntos de datos a gran escala.

Es una aplicación basada en web de alto rendimiento y agnóstica de datos para la exploración visual de conjuntos de datos de geolocalización a gran escala. Construido en la parte superior de deck.gl, kepler.gl puede representar millones de puntos que representan miles de viajes y realizar agregaciones espaciales sobre la marcha.

Kepler.gl usa el reductor ‘redux’ para almacenar y administrar las transiciones de estado. Este paquete consta de un reductor y los componentes de la interfaz de usuario para ‘renderizar’ y personalizar el mapa.

Ir a la introducción en github.

CartoDB, datos y mapas

CartoDB, datos y mapas

CARTODB
Geolocalización de grandes volúmenes de datos y combinación con visualizaciones. Integración con lenguajes de programación en D3js. Es una plataforma en plena expansión sobre google maps y está siendo incorporado por múltiples empresas para tomas de decisiones:
Quién lo utiliza: BBVA, Wall Street Journal, United Nations, Twitter, Mashable

MapBox, búsqueda de mapas, navegación y localización.

MapBox, búsqueda de mapas, navegación y localización.

MAPBOX
Proveedor de mapas online.
Mapbox es el creador, o un colaborador significativo, de algunas bibliotecas de mapeo de código abierto y aplicaciones, entre ellas la especificación MBTiles, la cartografía TileMill IDE, la biblioteca de Javascript de Leftlet, y el estilo de mapas y analizador sintáctico (parser) CartoCSS.

Quién lo utiliza: New York Times, NPR, ProPublica o el Washington Post, Foursquare, Evernote, Financial Times, The Weather Channel, Uber Tecnologies.

OpenStreetMap, mapas de código abierto.

OpenStreetMap, mapas de código abierto.

OPEN STREET MAP
OpenStreetMap (también conocido como OSM) es un proyecto colaborativo para crear mapas libres y editables. OpenStreetMap está creado por una gran comunidad de colaboradores que con sus contribuciones al mapa añaden y mantienen datos sobre caminos, senderos, cafeterías, estaciones de ferrocarril y muchas cosas más a lo largo de todo el mundo.

OpenStreetMap impulsa mediante geodatos a miles de sitios web, aplicaciones móviles y dispositivos de hardware.

Google Maps utiliza una API desarrollada con el lenguaje de programación Javascript.

Google Maps utiliza una API desarrollada con el lenguaje de programación Javascript.

GOOGLE MAPS
Herramienta para posicionar información, en formato GeoJSON O JSON, sobre capas en un mapa.
Usando la API de Javascript de Google Maps, se pueden insertar en un mapa marcadores, polilíneas, polígonos, etc.

ABACUS CONSULTING ha desarrollado una serie de gráficos complejos con la librería de javascript D3, gráficos vectoriales en SVG y el lenguaje de estilo CSS.

Algunos tipos de visualizaciones desarrollados por ABACUS CONSULTING.

Algunos tipos de visualizaciones desarrollados por ABACUS CONSULTING.

 

 

D3 es una excelente herramienta escrita por Mike Bostock para desplegar datos dentro de páginas web. Algunos ejemplos de gráficos realizados:

– Gráficos de línea
– Herramientas de matrices
– Gráficos de burbujas
– Histogramas
– Rankings de barras
– Mapas de posicionamiento
– Visualizaciones de araña
– Diagramas de procesos de decisión de compra
– Tablas dinámicas de datos

 

Ejemplo de una Visualización interactiva realizadas con D3

Ejemplo de una visualización realizada con D3.js

 

Algunas ventajas de la librería D3.js

Esta librería se basa en funciones predefinidas escritas en lenguaje javaScript que mejoran la selección de elementos, permiten crear y personalizar elementos SVG y añadir efectos como transiciones o tooltips. Tiene una gran capacidad para manipular grandes volúmenes de datos y vincularlos a dichos elementos para lograr crear gráficos de gran riqueza.

  • Flexibilidad: sólo la imaginación puede limitar lo que se puede hacer con la librería
  • Buena integración y facilidad de depuración
  • Librería modular
  • Manipulación del DOM dirigida por los datos
  • Permite un gran control sobre el resultado visual final
  • Crear elementos SVG (formas, líneas, axes)
  • Facilidad para crear escalas
  • Animaciones e interacciones de última generación
  • Transiciones y efectos visuales

D3.js es una herramienta ideal tanto para gráficos sencillos de barras o líneas, hasta complejos gráficos relacionales o  visualizaciones con mapas.

Durante el desarrollo de aplicaciones interactivas para Havas Media Group, Abacus Consulting  utilizó el ‘framework’ de AngularJS, una arquitectura de trabajo realizada con el lenguaje JavaScript.

 

El selector principal de datos atiende a las directivas en AngularJS.

El selector principal de datos atiende a las directivas en AngularJS.

 

AngularJS (comúnmente llamado Angular.js o AngularJS), es un ‘framework’ de JavaScript de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.

 

Diagrama orientativo sobre le funcionamiento de AngularJS.

Diagrama orientativo sobre le funcionamiento de AngularJS.

 

 

Sus principales ventajas:

  • 2-Way-data-binding (vinculación de datos en dos direcciones)AngularJS esta continuamente observando los cambios que suceden tanto en la Vista, así como en el Modelo y sincroniza datos entre estos.
  • Directivas: Las directivas permiten crear nuestros propios elementos HTML y manipular el DOM.
  • Vistas y Rutas: podemos agregar un solo elemento HTML (contenedor) dentro de un solo archivo HTML, y dentro de éste poder renderizar cada página que tenga que mostrarse, sin tener que recargar la URL.
  • Filtros: Los filtros apoyan a la vista a la hora de presentar los datos realizando transformaciones sobre ellos. Tiene un mecanismo para filtrar vistas basadas en variables de ámbito scope (por ejemplo, al buscar), sin la necesidad de escribir muchos códigos extra.
  • Soporta ‘routing’ y ‘deep linking’: El routing permite la interacción con la URL del navegador. Es muy importante para la experiencia del usuario, si se están construyendo aplicaciones de una sóla página.
  • Promesas (Promises): Tiene una implementación interna de especificación Promises/A+. Promises es una alternativa popular para callbacks cuando se está trabajando con las respuestas del servidor.
  • Animación: Dispone de un programa que incluye herramientas para crear animaciones fácilmente.
Principales características de AngularJS.

Principales características de AngularJS.