Este documento describe diferentes librerías y herramientas JavaScript para la visualización de datos geoespaciales, estadísticos y gráficos. Incluye librerías para mapas interactivos como Google Maps, CartoDB y MapBox, así como librerías para visualizar datos numéricos como Google Charts, Highcharts y Chart.js. También cubre herramientas para trabajar con datos espaciales como Fusion Tables y formatos como GeoJSON.

2. 1. JSON
2. Librerías y APIs
¿Qué vamos a aprender?
Mapas
•Google Maps
•CartoDB
•MapBox
Datos
•Google Charts y derivados
•Highcharts.js
•Otros (Morris, Chart.js)
Imágenes
•Pictográficas
•Chartist.js
•Librerías 3D
Animación
•Animate.css
3. Otras aplicaciones
• VIS
• ArcGIS
• Tools knight lab

3.  Para qué sirve
 Qué es JSON
 Sintaxis básica
JSON

4. ¿Qué es?
JSON
 JSON es el acrónimo de JavaScript Object Notation
 Es un lenguaje independiente con una sintaxis
basada en Javascript para
• Almacenamiento e intercambio de datos
 Se utiliza en aplicaciones AJAX
 Es una alternativa a XML más sencilla de usar
JSON
XML

5. ¿Por qué es importante?
JSON
 JSON resulta relevante por:
 Es la respuesta de datos que devuelven la mayoría de las APIs web
 Muchos portales de datos abiertos ofrecen la información en este formato
 Porque facilita la integración y visualización de información

6. Un ejemplo mediante una visualización
JSON - HighChart
Todos los países

7. Sintaxis
JSON
 El formato JSON es idéntico al que se utiliza en JS para crear
objetos
 Los datos son convertidos y tratados como objetos, por lo que:
• Se le aplican métodos, se crean variables, etc.
• Es más sencillo que XML ya que:
• Es más corto
• No requiere etiquetas de cierre
• Puede usar arrays de datos
• Puede ser “parseado” con una función JS estándar

8. Sintaxis
JSON
 Reglas
• Los datos se cargan en el par nombre/valor
• Los datos se separan con comas ,
• Los objetos se agrupan con llaves { }
• Los arrays de datos se agrupan con corchetes [ ]

9. Sintaxis
JSON
 Carga de datos con el objeto JSON http Request
• Habitualmente JSON carga los datos desde un servidor
web y muestra estos en una página web
 Pasos cargando desde un fichero:
• Se crea un array de objetos, y se crea una función que
muestra el contenido en el html
• Se guarda el array:
• en un fichero externo (txt, cvs…)
• En una BBDD (vg. MySQL) mediante PHP
• Mediante el método XMLHttpRequest se lee el fichero y
se escribe en la web para mostrar los datos

10. Visor
JSON
 Los visores JSON permiten cargar directamente en el
navegador un fichero JSON para visualizar su
contenido:
 Jsonviewer.stack.hu nos permite cargar un fichero o
ver un enlace desde la web
http://jsonviewer.stack.hu/

11.  Qué es una librería
 Qué es una API
 Para qué sirven
 Cuáles son interesantes
Librerías y
APIs

12. Resumiendo mucho
 Se trata de colecciones de funciones JS disponibles en un único
fichero compartido
Para qué nos sirven
 Ahorran tiempo de programación JS
 Permiten reutilizar el código (incluso la carga)
 Son ligeras (4-8 Kb)
¿Qué es una librería JS?

13.  Una API (Aplication Programation Interface) es una
especificación que permite comunicar
componentes de software
• Comprende el conjunto de funciones, procedimientos
y objetos que contiene una librería o biblioteca.
• Dichos elementos pueden ser invocados desde otros
componentes software para acceder a servicios y
realizar procesos.
• Es un método para mejorar la abstracción en
programación
¿Qué es una API?

14. Mapas
• Google Maps
• CartoDB
• MapBox
Animación
• Animate.css
• ScrollReveal
Aplicaciones
• Angular.js
• Modernizr
DOM
• JQuery
• Prototype
Imágenes
• Three.js
• Chartist.js
Pictográficas
Datos
• Chart.js
• Highcharts.ks
Tipos de librerías
Comparativa

15.  Google Maps
 CartoDB
Librerías para
mapas

16. Librerías para mapas interactivos
GeoJSON
 GeoJSON es un formato de
datos, basado en la sintásis
de JSON, que intercambia
datos con servicios y
tecnologías GIS (Sistemas
de Información Geográfica)
 Leaflet es una librería
especializada para la
creación de mapas
interactivos
http://leafletjs.com/examples.html

17. Google Maps API
Carga en el head

18. Pasos para crear un mapa
1. Se carga la API
2. Se crea una función para iniciar
el mapa
3. A través de una variable, se
crea un objeto para definir las
propiedades del mapa
Localización
Nivel de zoom
Tipo de mapa

19. Pasos para crear un mapa
4. Se crea el contenedor del mapa
5. Se crea el objeto mapa
6. Por último, se coloca un evento Listener para cargar el
mapa
Se pasan las
propiedades
del objeto
mapa

20. Google API Key
• Google API Key
• Si el número de llamadas que van a hacer nuestros
mapas es muy alto, debido al tráfico de la página, debe
utilizarse una Google API Key
• Para dar de alta el proyecto debes acceder, con tu
cuenta de Google, al Google Developers Console
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>

21. Tipos de mapas
• Tipos de mapas:
• Roadmap
• Satellite
• Hybrid
• Terrain

22. Overlays sobre mapas
• Los overlays son capas superpuestas al mapa.
• Pueden ser:
• Marcadores (marker)
• Líneas (polyline)
• Polígonos (polygon)
• Círculos y rectángulos (circle – rectangle)
• Ventanas de información (info windows)
• Capas customizadas (custom overlays)
1 marcador varios Animado + imagen

23. Aplicaciones útiles
0 Para localizar las coordenadas del lugar que
necesitas
 Google Maps utiliza GD (Grados decimales)
 Coordenadas-GPS
0 Datos cartográficos
 Bancos de ficheros de shapefiles: KML, vectoriales…
 Global Administrative Areas

24. Inicio
CartoDB
• CartoDB es una
aplicación para mapear
datos.
• Carga datos en
diferentes formatos
• Permite un alto nivel de
edición y
personalización
• Dispone de una API
abierta

25. Visualización
CartoDB• Pasos:
1. Darse de alta en
CartoDB
2. Descargar los datos de
FOGASA
3. Crear un nuevo
Dataset en CartoDB
importando el CSV
4. Descargar el fichero
kmz de España de
nivel 2
5. Abrir el dataset con los
datos de FOGASA y
unir con los de las
provincias de España
(provincia – name)
6. Realizar los ajustes en
el mapa
Vamos a crear
un mapa con
datos de
FOGASA

26. Preparación
CartoDB
• CartoDB ofrece, además del entorno gráfico para
crear visualizaciones, una librería denominada
CartoDB.js
• Esta librería nos permite interactuar con el servicio:
• Conectando con las visualizaciones que ya tenemos
• Creando nuevas visualizaciones
• Customizando la visualización
• Accediendo o consultando los datos desde el
navegador

27. Preparación
CartoDB

28. Preparación
CartoDB
http://cadenaser.com/especiales/seccion/espana/2014/sonidos-11m/
Un ejemplo elaborado

29. Preparación
Mapbox
https://www.mapbox.com

30. Preparación
Mapbox
Crear un mapa desde el editor

31. Librería Mapbox.js
Efectos
https://www.mapbox.com/mapbox.js/api/v2.2.4/
• Zooming
• Animación
• Vídeo Tooltips

32.  Google Chart
 Chart.js
 Highcharts
 morris.js
 …
Librerías para
datos (Dataviz)

33. Preparación
Google Charts
https://developers.google.com/chart/

34. ¿Cómo funciona?
Google Charts
Google
JSAPI API
Librería de
visualización
de Google
Librería del
Chart
concreto
Visualización

35. Charts – Pasos para crear una visualización
1. Cargando las librerías
 El primer paso es cargar en el <head> las librerías
de Google
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
</script>
El script hace una
llamada a la API de
Google para cargar
sus funcionalidades
Ahora le indica al
Google Loader
que cargue la
visualización
correspondiente
Corechart carga:
bar, column, line, area,
stepped area, bubble, pie,
donut, combo,
candlestick, histogram,
scatter

36. Charts – Pasos para crear una visualización
2. Preparando los datos
 La creación de Chart
requiere que los datos
sean incluidos mediante
una clase de JavaScript:
google.visualization.DataTa
ble
 La clase está definida en
la librería de
visualización de Google
 La tabla de datos
corresponde a una tabla
similar a esta

37. Se crea la tabla y el array de datos
Se crea la variable
Se definen las columnas
Se cargan datos en celdas
Charts – Pasos para crear una visualización
2. Preparando los datos

38. Se definen las
opciones del chart
Charts – Pasos para crear una visualización
3. Personalizando el Chart

39.  Para cada Chart podemos personalizar diferentes
elementos como:
 Título, Color, grosor de línea, relleno de fondo, etc.
 Incluir elementos: títulos de los ejes, etc.
 Las opciones se presentan como pares name.value
Las opciones pasan los valores al chart mediante el
método draw()
Cada chart posee los pares adecuados para la
customización de ese tipo de visualización
Charts – Pasos para crear una visualización
3. Personalizando el Chart

40. Pie hole Exploding Slide
Charts – Pasos para crear una visualización
3. Personalizando el Chart

41. Uso de HTML en Tooltips Charts dentro de Tooltips
Charts – Pasos para crear una visualización
3. Personalizando el Chart

42. Charts – Pasos para crear una visualización
4. Dibujando el Chart
Con los datos y las opciones, se instancia el chart
 Cada tipo de Chart posee su propia clase para
instanciar la figura correspondiente:
 PieChart usa la clase: google.visualization.PieChart
 BarChart usa la clase: google.visualization.BarChart

43. Por último, se dibuja el resultado final en el body
Charts – Pasos para crear una visualización
4. Dibujando el Chart
<body>
//Div that will hold the pie chart
<div id="chart_div" style="width:400; height:300"></div>
</body>

44. Charts
Tipología
https://developers.google.com/chart/interactive/docs/gallery

45. Preparación
Fusion Tables
• Ejemplos: https://sites.google.com/site/fusiontablestalks/stories
• Búsqueda de tablas públicas: http://research.google.com/tables

46. Creación de tablas fusionadas 1
Fusion Tables
Vamos a crear un mapa de de intensidad con límites
personalizados:
• Abre el mapa de los distritos de elección de congresistas de los
Estados Unidos, y haz una copia para poder editar
• Abre la hoja de cálculo de las estadísticas de calefacción de
hogares, y haz una copia
• Combina las dos tablas en una sola:
• En la tabla Household Heating statistics haz clic en File > Merge.
• Copia la URL del fichero Congressional boundaries table y pégala en el
cuadro "Or paste a web address here. Haz clic en Next.
• Especifica la columna que ambas tablas tienen en común. En este
caso:
• En la izquierda selecciona: "Two-digit District"
• En la derecha: "id”
• Haz clic para mezclar ambas tablas.

47. Creación de tablas fusionadas 2
Fusion Tables
Ahora vamos a personalizar el mapa:
• Selecciona la opción “Map of shape”
• Pulsa en Tools>Change map
• En Feature map>Change feature styles, selecciona la opción “Fill
color>Buckets”
• Selecciona la opción: “Divide into x buckets” y selecciona 4, por
ejemplo. Ajusta los elementos de color.
• Ajusta cualquier otro elemento.
• Publica tu tabla.

48. Preparación
Google Public Data Explorer
 DataSets públicos
 También es posible cargar set de datos propios en GPDE

49. Dataset Publishing Language
DSPL
 DSPL es un formato de datos y metadatos
diseñado para crear visualizaciones interactivas en
Google Public Data Explorer, a partir de datasets.
 Características:
• Usa datos existentes en ficheros XML o CSV.
• Mapeable
• Abierto
• Multi-lenguaje
• Tutorial

50. Tarea
GPDE
Vamos a utilizar nuestros propios datos:
1. Accede a los dataset de ejemplo en DSLP
2. Descarga un paquete ZIP de datos
3. Accede al administrador de Dataset de GPDE y
sube el zip
4. Carga los datos y crea una visualización a partir de
ellos.

51. Preparación
Cloud Highcharts
http://cloud.highcharts.com/

52. Tarea
Cloud Highcharts
http://cloud.highcharts.com/
0 Vamos a trabajar con Highcharts Cloud
1. Accede a http://cloud.highcharts.com/
2. Date de alta en el servicio web
3. Crea un nuevo gráfico
• Selecciona uno de la librería
• Prueba con los datos de ejemplo
4. Recupera una tabla de datos e impórtala vía csv o
mediante Google Spreadsheet
5. Comprueba las opciones de personalización
6. Expórtala y comprueba el resultado.

53. Preparación
Highcharts
http://www.highcharts.com/

54. Tarea
Highcharts
http://cloud.highcharts.com/
Vamos a trabajar ahora con la librería Highcharts
1. Accede a http://www.highcharts.com/demo/
2. Selecciona un gráfico y ábrelo en jsFiddle
3. Modifica los datos
4. Prueba a cargar los diferentes temas:
 <script
src="http://www.highcharts.com/js/themes/gray.js"></script>
 <script src="http://www.highcharts.com/js/themes/dark-
blue.js"></script>
 <script src="http://www.highcharts.com/js/themes/dark-green.js">
 </script><script
src="http://www.highcharts.com/js/themes/grid.js">
 </script><script
src="http://www.highcharts.com/js/themes/skies.js"></script>
 Podrías ajustar los temas editando los ficheros js

55. Tarea
Highcharts
Veamos ahora cómo crear un Highchart desde cero:
1. Carga la librería highcharts.js y alguna librería como
jQuery, MooTools o Prototype.
2. Añade un div en el body de la página
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:100%; height:400px;"></div>
…/…

56. Tarea
Highcharts…/…
3. Inicializa el chart añadiendo el script.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
Ejemplo simple
Ejemplo con
opciones

57. Tarea
Highcharts…/…
4. Añadiendo estilos.
• Podemos adaptar los estilos mediante Highcharts.setOptions
$(function() {
Highcharts.setOptions({
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
}
});
Ejemplo para
Modificar estilos

58. Tarea
Highcharts…/…
5. Añadiendo temas.
• Highchart tiene predefinidos unos temas que se
pueden cargar mediante un script.
• Deben estar subidos en nuestra web.
• Y podemos crear nuestros propios temas.
<script src="http://comunicaciondigital.esy.es/files/highchart/js/themes/dark-blue.js"></script>
Ejemplo para
probar los temas

59. Qué es
• Librería JS que permite
crear gráficos asociada
con jQuery y Raphael
Para qué se utiliza
• Creación de gráficos
estándar
Demos
• Line & Area Charts | Bar Chart |
Donuts Charts
Morris.js
http://morrisjs.github.io/morris.js/

60. Tarea
Morris.js
Vamos a practicar con Morris.js
1. Accede a http://morrisjs.github.io/morris.js/
2. Crea un fichero html
3. Enlaza los js y css
4. Crea el div para cargar el gráfico
5. Adjunta el script
6. Comprueba las opciones de parametrización
7. Prueba con el resto de gráficas

61. Tarea
Morris.js
Line
Área
Line con parámetros
Barras
Donuts

62. Librería
Chartist.JS
0 Chartist.JS es una
librería para crear Chart
0 Altamente customizable
0 Con gráficos
responsivos
0 Librería de ejemplos
• Avanced Smil
Animations
• Animating Donut
https://gionkunz.github.io/chartist-js/getting-started.html

63. Librería
AnyChart.JS
0 AnyChart.JS es una
completa librería para
el desarrollo de:
 Charts
 Stocks
 Maps
 Gantt
http://www.anychart.com/

64. Librería
AnyChart.JS
PlayGround

65. Qué es
• Librería JS para
manipular documentos
basados en datos.
Para qué se utiliza
• Visualizaciones
complejas
Ejemplos visualizaciones
• China manufacture
• Similar song Networks
D3.js
http://d3js.org/

66. Para qué sirve y qué hace
D3.js
 Permite obtener datos de cualquier elemento del
DOM y aplicarle transformaciones en el documento.
 Sobre un mismo conjunto de datos permite realizar
varias transformaciones. Por ejemplo, sobre un array
podemos:
• Crear una tabla
• Generar un gráfico interactivo en SVG
 Y de una manera muy flexible y rápida.

67. Para qué sirve y qué hace
D3.js
 Utiliza una sintaxis simplificada de JS para acceder a
los selectores del DOM: W3C Selectors API
JS
D3.js

68. Tarea
D3.js
Vamos a practicar con D3.js

69. Tarea
D3.js
Ejemplos interesantes

70. Qué es
• Librería JS que permite
crear seis tipos de
gráficos
Para qué se utiliza
• Creación de gráficos
vectoriales
Demos
• Ejemplos
Chart.js
http://www.chartjs.org/

71. Librería
Sigma.JS
0 Sigma.JS es una
librería para crear
dibujo gráfico
0 Especializado en
creación de gráficos de
redes
http://sigmajs.org/

72.  Pictográficas
 Three.js
 Chartis.js
Librerías para
Imágenes

73. Librerías pictográficas
Qué son
 Librerías pictográficas
• Las librerías pictográficas web son colecciones de iconos
que pueden cargarse vía web en nuestro proyecto
mediante un enlace.
• Las tres principales son:
• Font Awesome Icons
• Bootstrap Icons
• Google Icons

74. Librerías pictográficas
Font Awesome
 Font Awesome
• Es una colección libre de más de 600 iconos.
• Permite control CSS, sin manejo de JS

75. Qué es
• Librería JS que permite
crear gráficos
vectoriales (SVG)
basado en el uso de
canvas
Para qué se utiliza
• Creación de gráficos
vectoriales: mapas
Demos
• http://raphaeljs.com/
Raphael.js
http://raphaeljs.com/

76. Qué es
• Librería JS que codifica
gestos en interfaces
multitáctiles
Para qué se utiliza
• Mejora de UX para
tabletas, móviles…
Ejemplos visualizaciones
• Reshaping New York
Funcionamiento
• Event logger | Carousel
Hammer.js
http://eightmedia.github.io/hammer.js/

77.  Es una especificación que permite mostrar
gráficos 3D en navegadores web.
• Sin plugins (requiere que la plataforma soporte OpenGL 2.0 
Los navegadores más actuales)
• Es una API para Javascript
• Trabaja directamente con el GPU (Graficos
acelerados por harware), por lo que requiere librerías
para agilizar su implementación
• Tree.js es la más popular
0 Ver presentación
WebGL

78. WebGL
http://www.zolabo.com/projects/hdi/
WebGL Chrome Experiments

79. Tree.js
http://threejs.org/Ejemplos

80. Philo GL
http://www.senchalabs.org/philogl/demos.html

81.  Es una comunidad de desarrolladores 3D
 Ejemplos interesantes utilizables
Sketchfab
https://sketchfab.com

82. Immersive Journalism
http://www.immersivejournalism.com/

83. Por si fuera poco…
https://www.javascripting.com

84.  Animate.css
 ScrollReveal
Librerías para
animaciones

85. Animación con CSS
Animate.css
 Animate.css es una
sencilla colección de
estilos en CSS3 de
animación
 Vemos un ejemplo
 Y cambiamos el
modelo de animación
http://daneden.github.io/animate.css/

86.  ArcGIS: Storymap
 Tools Knightlab
Otras
aplicaciones

87. Visual Investigative Scenarios
VIS
0 VIS es una herramienta online, apoyada por
el International Press Institute, que permite crear
mapas visuales de investigación en los que se pueden
relacionan los diferentes sujetos, entidades, empresas,
etc.
0 Facilita una forma sencilla de ir organizando las
relaciones, con indicaciones de localización
geográfica, entre las entidades que se van incluyendo,
de forma que se va generando un mapa de relaciones
que permita descubrir cuestiones interesantes entre
ellas.
0 Demo
https://vis.occrp.org/

88. ArcGIS
Presentación
http://www.arcgis.com/home/index.html

89. ArcGIS
Story Maps
 Story Maps es una aplicación de ArcGIS que permite crear
potentes visualizaciones basadas en mapas narrativizados.
1. Piensa tu historia 2. Integra el contenido 3. Construye tu mapa
4. Configura tu relato 5. Ajústalo 6. Publica tu historia

90. ArcGIS
Story Maps
 Story Maps permite crear tres tipos de Storytelling Apps
Recorridos
secuenciales
• Crear un Mapa
Tour
• Ver ejemplos
Puntos de
interés
Comparar
dos mapas
Ayuda y Tutoriales

91. ArcGIS
Story Maps
 Story Maps permite crear tres tipos de Storytelling Apps
Recorridos
secuenciales
• Crear un Mapa
Tour
• Ver ejemplos
Puntos de
interés
Comparar
dos mapas

92. Tarea
ArcGIS
http://storymaps.arcgis.com/es/app-list/

93. Tools Knightlab
http://projects.knightlab.com/

94. Preparación
TimelineJS Knightlab

95. Parametrización
TimelineJS Knightlab
 Se pueden cambiar algunos elementos básicos. Su
modificación cambia los parámetros en el iframe.

96. Parametrización
TimelineJS Knightlab
 Pero, además, podemos ajustar cualquier parámetro de la
presentación de los elementos, directamente en la hoja de
cálculo, introduciendo código html y css
0 <div style="font-
family:'Trebuchet
MS'; font-size:48px;
font-weight: bold;
color:red">HTTP</di
v>

97. Tarea
Timeline
Vamos a crear una línea de tiempo y a
personalizarla:
1. Accede a TimelineJS
2. Crea tus datos en un Google Spreadsheet.
3. Impórtalos a TimelineJS.
4. Configura las opciones de presentación en
Timeline.
5. Configura las opciones de presentación mediante
código html y css en las celdas de Google
Spreadsheet.

98. PageOneX
http://pageonex.com/

99. Otros recursos

100. Rss mapper
http://www.rssmapper.com/

101. Localizar coordenadas
http://www.maps.pixelis.es/