Introducción a la visualización de datos en la web con D3

Transcript

1. Visualización de datos en la web D3.js Juan Sebastián Vega Patiño
2. • Prefacio • Selecciones • Data joins • Transiciones • Escalas • Módulos • Demos
3. Prefacio
4. Web standards Transformaciones, no representaciones
5. Web standards Transformaciones, no representaciones
6. Introducción a D3 DOM Datos Las visualizaciones requieren mapeo de datos a elementos
7. Introducción a D3 DOM Datos Las visualizaciones requieren mapeo de datos a elementos
8. Introducción a D3 DOM Datos Las visualizaciones requieren mapeo de datos a elementos
9. Características de D3
10. Características de D3 • No es monolítica
11. Características de D3 • No es monolítica • Manipulación eficiente del DOM
12. Características de D3 • No es monolítica • Manipulación eficiente del DOM • Data driven
13. Características de D3 • No es monolítica • Manipulación eficiente del DOM • Data driven • No usa representaciones propias ⚖
14. Selecciones
15. Selectores CSS
16. Selectores CSS someTag <someTag> Selector Elemento
17. Selectores CSS someTag <someTag> .someClass <any class=“someClass”> Selector Elemento
18. Selectores CSS #someId <any id=“someId”> someTag <someTag> .someClass <any class=“someClass”> Selector Elemento
19. Selectores CSS #someId <any id=“someId”> someTag <someTag> .someClass <any class=“someClass”> [attr=someAttr] <any attr=“someAttr”> Selector Elemento
20. W3C DOM API • Tedioso • Enfoque imperativo ☹ • Estados temporales
21. W3C DOM API
22. Selecciones en D3 • Enfoque declarativo • Operan con la API de W3C (e.g. ‘#id’, ‘.class’) • Mutación, registro de eventos, ordenamiento
23. Selecciones D3
24. Data joins
25. 2 4 8 16 32 font-size
26. 2 4 8 16 32 Update font-size
29. Enter { } { } { } { } { }
30. Enter { } { } { } { } { } Update
31. Enter { } { } { } { } { } Update Enter
32. Data joins Enter
33. Exit { } { } { }
34. Exit { } { } { } Update
35. Exit { } { } { } Update Exit
36. Exit
37. Transiciones
38. Exit
39. Escalas
40. Datos DOM
41. Números Fechas Categorías Coordenadas Colores Radios Tamaños Datos DOM
42. Números Fechas Categorías Coordenadas Colores Radios Tamaños Datos DOM Dominio
43. Números Fechas Categorías Coordenadas Colores Radios Tamaños Datos DOM Dominio Rango
44. Números Fechas Categorías Coordenadas Colores Radios Tamaños Datos DOM Dominio Rango d3.scaleLinear d3.scaleSqrt d3.scaleTime
46. Módulos
47. d3-time d3-axis d3-collection d3-color d3-dsv d3-fetch d3-force d3-geo d3-hierarchy
48. Demos
49. d3js.org bl.ocks.org observablehq.com @DataToViz @sxywu @mbostock @NadiehBremer @sebasvega95
50. Gracias!! d3js.org bl.ocks.org observablehq.com @DataToViz @sxywu @mbostock @NadiehBremer @sebasvega95