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ě
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.
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”
Vizualizace jako “mapa” informace
William Playfair (1821)
5
40
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”
30
80
Vizuální evidence
http://en.wikipedia.org/wiki/Anscombe's_quartet
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
D3.js
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
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' })
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' })
Paths To WhitehouseD3.JS APLIKACE
http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html
One Race, Every Medalist EverD3.JS APLIKACE
http://www.nytimes.com/interactive/2012/08/05/sports/olympics/the-100-meter-dash-one-race-every-medalist-ever.html
Rozhodněte prezidentské volbyD3.JS APLIKACE
http://ephemera.karmi.cz/post/41370777074/decide-the-election-interactive-visualization
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
Střední délka života Life Expectancy
D3.JS WALKTHROUGH
http://bl.ocks.org/karmi/raw/714f575b3c4e94274e90 https://gist.github.com/karmi/714f575b3c4e94274e90#file-index-html
Střední délka života Life Expectancy
D3.JS WALKTHROUGH
http://bl.ocks.org/karmi/raw/2361485 https://gist.github.com/karmi/2361485#file-index-html
Střední délka života Life Expectancy
D3.JS WALKTHROUGH
http://bl.ocks.org/karmi/raw/2366285 https://gist.github.com/karmi/2366285#file-index-html
Střední délka života Life Expectancy
D3.JS WALKTHROUGH
http://bl.ocks.org/karmi/raw/2339918 https://gist.github.com/karmi/2339918#file-index-html