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

1. D3.js
Karel Minařík

2. D3.js
http://karmi.cz

3. Mapa — prvotní vizualizace
D3.js

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. 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. Vizualizace jako “mapa” informace
William Playfair (1821)

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. 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. Vizualizace jako “mapa” informace
Howard Wainer (2004)

10. Vizualizace jako “mapa” informace
Howard Wainer (2004)

11. Vizuální evidence
http://en.wikipedia.org/wiki/Anscombe's_quartet

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. Vizuální evidence

14. Vizuální evidence
http://en.wikipedia.org/wiki/Anscombe's_quartet

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. Vizualizace dat nejsou “grafy”
D3.js

19. D3.js
D3.js není knihovna grafů

20. D3.js
Co je D3.js?
!
Domain-specific language (DSL)
pro vytváření interaktivních vizualizací

21. 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' })

22. 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' })

23. Data Join
[4, 8, 16, 18]
18
12
6
0

24. DEMO

25. D3.JS APLIKACE
Paths To Whitehouse
http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html

26. 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

27. D3.JS APLIKACE
Rozhodněte prezidentské volby
http://ephemera.karmi.cz/post/41370777074/decide-the-election-interactive-visualization

28. D3.js
Data nejsou informace

30. 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

31. D3.JS WALKTHROUGH
Střední délka života Life Expectancy

32. 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

33. 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

34. 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

35. 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

36. Děkuji!
d