Visualizacion de datos con d3.js
Estructura de la charla
- 1ª. Sobre visualizaciones en general
- 2ª. Primeros pasos con d3.js
Visualizaciones
"El objetivo principal de la visualización de datos es comunicar información clara y eficientemente a los usuarios por medio de gráficos informativos, tales como tablas y gráficas."
Fuente: wikipedia
Ejemplos
Sencillas
(Gráficas típicas)

Riqueza y salud de las naciones

Nutrientes

Pases entre jugadores del Real Madrid en la primera mitad del partido contra el Elche (23.09.2014)
La Biblia
Juegos

Proceso
- Data (opendata, scrapping, etc)
- Planificacion
- Transformación de datos
- Visualización (d3.js)
d3.js
Mike Bostock

http://bl.ocks.org/mbostock
Howto: Let's make a block
https://gist.github.com/peterlozano - http://bl.ocks.org/peterlozano
Conceptos básicos
Estandares
- Css Selectors
- SVG
Estandares
- CSS3 Selectors
- http://www.w3.org/TR/css3-selectors/
// Standard CSS Selectors
d3.select('.myclass');
d3.select('div.myclass');
d3.select('#myid');
// SVG
d3.select('circle');
d3.select('circle.myclass');
SVG
http://www.w3.org/TR/SVG/

SVG
http://www.w3.org/TR/SVG/

Data binding
Data binding (Update)
Data binding (Enter)
Data binding (Exit)
Creando SVG
.call()
.call()
Scales
Actualizando datos y gráfico
Ejemplo: Cycloid Optical Illusion
Transitions
Easing
Generators
![]() |
![]() |
![]() |
Generators
Layouts
Bundle ![]() |
Chord ![]() |
Force ![]() |
Histogram ![]() |
Pie ![]() |
Tree ![]() |
Layouts
Layouts
Cartografía
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Timers
Axis
Labels
Preguntas?
Gracias
Pedro Lozano
- Desarrollador Drupal
- Interesado en Opendata y Visualizaciones
- http://twitter.com/peterlozano
- http://github.com/peterlozano
- http://peterlozano.com