O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Vizualizace dat a D3.js [EUROPEN 2014]

3.093 visualizações

Publicada em

Přednáška na konferenci EUROPEN 2014 (http://www.europen.cz/node/43)

Publicada em: Tecnologia

Vizualizace dat a D3.js [EUROPEN 2014]

  1. 1. D3.js Karel Minařík
  2. 2. D3.js http://karmi.cz
  3. 3. Mapa — prvotní vizualizace D3.js
  4. 4. D3.js Mapa neolitické vesnice, Çatalhöyük, Turecko Grafická reprezentace trojrozměrného prostoru (pevnina, vodní plochy, lesy, obydlené oblasti, …) ! Ploché, barevně omezené médium ! Lepší porozumění svému okolí ! Prostředek komunikace s ostatními ! Praktická pomůcka pro orientaci v krajině
  5. 5. D3.js Mapa neolitické vesnice, Çatalhöyük, Turecko … more likely a painting of a leopard skin instead of a volcano, and a decorative geometric design instead of a map —Stephanie Meece, A bird’s eye view - of a leopard’s spots.
  6. 6. Vizualizace jako “mapa” informace William Playfair (1821)
  7. 7. Vizualizace jako “mapa” informace William Playfair (1821) Tři veličiny v jednom plánu (cena mouky, týdenní mzda, vládnoucí panovník) ! Explicitní teze, “nikdy nebyla mouka tak levná v porovnání s odměnou za práci”
  8. 8. Vizualizace jako “mapa” informace 40 5 William Playfair (1821) Tři veličiny v jednom plánu (cena mouky, týdenní mzda, vládnoucí panovník) ! Explicitní teze, “nikdy nebyla mouka tak levná v porovnání s odměnou za práci” 80 30
  9. 9. Vizualizace jako “mapa” informace Howard Wainer (2004)
  10. 10. Vizualizace jako “mapa” informace Howard Wainer (2004)
  11. 11. Vizuální evidence http://en.wikipedia.org/wiki/Anscombe's_quartet
  12. 12. Vizuální evidence Průměr x: 9 Rozptyl x: 11 Průměr y: 7.50 Rozptyl y: 4.12 ! Korelace x a y: 0.816 Lineární regrese: y = 3.00 + 0.500x http://en.wikipedia.org/wiki/Anscombe's_quartet
  13. 13. Vizuální evidence
  14. 14. Vizuální evidence http://en.wikipedia.org/wiki/Anscombe's_quartet
  15. 15. STAMEN, Visualizing a day of financial transactions on NASDAQ http://content.stamen.com/visualizing_a_day_of_financial_transactions_on_nasdaq_part_2 https://www.youtube.com/watch?v=qToGZNA4NTQ&t=18m11s D3.js
  16. 16. Vizualizace dat nejsou “grafy” D3.js
  17. 17. D3.js D3.js není knihovna grafů
  18. 18. D3.js Co je D3.js? ! Domain-specific language (DSL) pro vytváření interaktivních vizualizací
  19. 19. D3.js Co je D3.js? ! Domain-specific language (DSL) pro vytváření interaktivních vizualizací var data = [4, 8, 16, 18] var bar = chart.selectAll("div").data(data) bar.enter() .append(“div") .style("width", function(d,i) { return d * 10 + 'px' })
  20. 20. D3.js Data Join ! Výchozí princip D3.js var data = [4, 8, 16, 18] var bar = chart.selectAll("div").data(data) bar.enter() .append(“div") .style("width", function(d,i) { return d * 10 + 'px' })
  21. 21. Data Join [4, 8, 16, 18] 18 12 6 0
  22. 22. DEMO
  23. 23. D3.JS APLIKACE Paths To Whitehouse http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html
  24. 24. D3.JS APLIKACE One Race, Every Medalist Ever http://www.nytimes.com/interactive/2012/08/05/sports/olympics/the-100-meter-dash-one-race-every-medalist-ever.html
  25. 25. D3.JS APLIKACE Rozhodněte prezidentské volby http://ephemera.karmi.cz/post/41370777074/decide-the-election-interactive-visualization
  26. 26. D3.js Data nejsou informace
  27. 27. Life expectancy is a statistical average of the number of years a human is expected to live; this will vary according to region and era. In the Bronze and Iron Age life expectancy was 26; the 2010 world average was 67.2 ! — http://en.wikipedia.org/wiki/Life_expectancy
  28. 28. D3.JS WALKTHROUGH Střední délka života Life Expectancy
  29. 29. D3.JS WALKTHROUGH Střední délka života Life Expectancy http://bl.ocks.org/karmi/raw/714f575b3c4e94274e90 https://gist.github.com/karmi/714f575b3c4e94274e90#file-index-html
  30. 30. D3.JS WALKTHROUGH Střední délka života Life Expectancy http://bl.ocks.org/karmi/raw/2361485 https://gist.github.com/karmi/2361485#file-index-html
  31. 31. D3.JS WALKTHROUGH Střední délka života Life Expectancy http://bl.ocks.org/karmi/raw/2366285 https://gist.github.com/karmi/2366285#file-index-html
  32. 32. D3.JS WALKTHROUGH Střední délka života Life Expectancy http://bl.ocks.org/karmi/raw/2339918 https://gist.github.com/karmi/2339918#file-index-html
  33. 33. Děkuji! d

×