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