SlideShare ist ein Scribd-Unternehmen logo
1 von 36
Downloaden Sie, um offline zu lesen
D3.js 
Karel Minařík
D3.js 
http://karmi.cz
Mapa — prvotní vizualizace 
D3.js
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)
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 
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
Vizualizace jako “mapa” informace 
Howard Wainer (2004)
Vizualizace jako “mapa” informace 
Howard Wainer (2004)
Vizuální evidence 
http://en.wikipedia.org/wiki/Anscombe's_quartet
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
Vizuální evidence
Vizuální evidence 
http://en.wikipedia.org/wiki/Anscombe's_quartet
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
Vizualizace dat nejsou “grafy” 
D3.js
Vizualizace dat a D3.js [EUROPEN 2014]
Vizualizace dat a D3.js [EUROPEN 2014]
D3.js 
D3.js není knihovna grafů
D3.js 
Co je D3.js? 
! 
Domain-specific language (DSL) 
pro vytváření interaktivních vizualizací
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' })
Data Join 
[4, 8, 16, 18] 
18 
12 
6 
0
DEMO
D3.JS APLIKACE 
Paths To Whitehouse 
http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html
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
D3.JS APLIKACE 
Rozhodněte prezidentské volby 
http://ephemera.karmi.cz/post/41370777074/decide-the-election-interactive-visualization
D3.js 
Data nejsou informace
Vizualizace dat a D3.js [EUROPEN 2014]
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
D3.JS WALKTHROUGH 
Střední délka života Life Expectancy
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
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
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
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
Děkuji! 
d

Weitere ähnliche Inhalte

Mehr von Karel Minarik

Realtime Analytics With Elasticsearch [New Media Inspiration 2013]
Realtime Analytics With Elasticsearch [New Media Inspiration 2013]Realtime Analytics With Elasticsearch [New Media Inspiration 2013]
Realtime Analytics With Elasticsearch [New Media Inspiration 2013]Karel Minarik
 
Elasticsearch And Ruby [RuPy2012]
Elasticsearch And Ruby [RuPy2012]Elasticsearch And Ruby [RuPy2012]
Elasticsearch And Ruby [RuPy2012]Karel Minarik
 
Shell's Kitchen: Infrastructure As Code (Webexpo 2012)
Shell's Kitchen: Infrastructure As Code (Webexpo 2012)Shell's Kitchen: Infrastructure As Code (Webexpo 2012)
Shell's Kitchen: Infrastructure As Code (Webexpo 2012)Karel Minarik
 
Elastic Search: Beyond Ordinary Fulltext Search (Webexpo 2011 Prague)
Elastic Search: Beyond Ordinary Fulltext Search (Webexpo 2011 Prague)Elastic Search: Beyond Ordinary Fulltext Search (Webexpo 2011 Prague)
Elastic Search: Beyond Ordinary Fulltext Search (Webexpo 2011 Prague)Karel Minarik
 
Your Data, Your Search, ElasticSearch (EURUKO 2011)
Your Data, Your Search, ElasticSearch (EURUKO 2011)Your Data, Your Search, ElasticSearch (EURUKO 2011)
Your Data, Your Search, ElasticSearch (EURUKO 2011)Karel Minarik
 
CouchDB – A Database for the Web
CouchDB – A Database for the WebCouchDB – A Database for the Web
CouchDB – A Database for the WebKarel Minarik
 
Spoiling The Youth With Ruby (Euruko 2010)
Spoiling The Youth With Ruby (Euruko 2010)Spoiling The Youth With Ruby (Euruko 2010)
Spoiling The Youth With Ruby (Euruko 2010)Karel Minarik
 
Verzovani kodu s Gitem (Karel Minarik)
Verzovani kodu s Gitem (Karel Minarik)Verzovani kodu s Gitem (Karel Minarik)
Verzovani kodu s Gitem (Karel Minarik)Karel Minarik
 
Představení Ruby on Rails [Junior Internet]
Představení Ruby on Rails [Junior Internet]Představení Ruby on Rails [Junior Internet]
Představení Ruby on Rails [Junior Internet]Karel Minarik
 
Efektivni vyvoj webovych aplikaci v Ruby on Rails (Webexpo)
Efektivni vyvoj webovych aplikaci v Ruby on Rails (Webexpo)Efektivni vyvoj webovych aplikaci v Ruby on Rails (Webexpo)
Efektivni vyvoj webovych aplikaci v Ruby on Rails (Webexpo)Karel Minarik
 
Úvod do Ruby on Rails
Úvod do Ruby on RailsÚvod do Ruby on Rails
Úvod do Ruby on RailsKarel Minarik
 
Úvod do programování 7
Úvod do programování 7Úvod do programování 7
Úvod do programování 7Karel Minarik
 
Úvod do programování 6
Úvod do programování 6Úvod do programování 6
Úvod do programování 6Karel Minarik
 
Úvod do programování 5
Úvod do programování 5Úvod do programování 5
Úvod do programování 5Karel Minarik
 
Úvod do programování 4
Úvod do programování 4Úvod do programování 4
Úvod do programování 4Karel Minarik
 
Úvod do programování 3 (to be continued)
Úvod do programování 3 (to be continued)Úvod do programování 3 (to be continued)
Úvod do programování 3 (to be continued)Karel Minarik
 
Historie programovacích jazyků
Historie programovacích jazykůHistorie programovacích jazyků
Historie programovacích jazykůKarel Minarik
 
Úvod do programování aneb Do nitra stroje
Úvod do programování aneb Do nitra strojeÚvod do programování aneb Do nitra stroje
Úvod do programování aneb Do nitra strojeKarel Minarik
 

Mehr von Karel Minarik (18)

Realtime Analytics With Elasticsearch [New Media Inspiration 2013]
Realtime Analytics With Elasticsearch [New Media Inspiration 2013]Realtime Analytics With Elasticsearch [New Media Inspiration 2013]
Realtime Analytics With Elasticsearch [New Media Inspiration 2013]
 
Elasticsearch And Ruby [RuPy2012]
Elasticsearch And Ruby [RuPy2012]Elasticsearch And Ruby [RuPy2012]
Elasticsearch And Ruby [RuPy2012]
 
Shell's Kitchen: Infrastructure As Code (Webexpo 2012)
Shell's Kitchen: Infrastructure As Code (Webexpo 2012)Shell's Kitchen: Infrastructure As Code (Webexpo 2012)
Shell's Kitchen: Infrastructure As Code (Webexpo 2012)
 
Elastic Search: Beyond Ordinary Fulltext Search (Webexpo 2011 Prague)
Elastic Search: Beyond Ordinary Fulltext Search (Webexpo 2011 Prague)Elastic Search: Beyond Ordinary Fulltext Search (Webexpo 2011 Prague)
Elastic Search: Beyond Ordinary Fulltext Search (Webexpo 2011 Prague)
 
Your Data, Your Search, ElasticSearch (EURUKO 2011)
Your Data, Your Search, ElasticSearch (EURUKO 2011)Your Data, Your Search, ElasticSearch (EURUKO 2011)
Your Data, Your Search, ElasticSearch (EURUKO 2011)
 
CouchDB – A Database for the Web
CouchDB – A Database for the WebCouchDB – A Database for the Web
CouchDB – A Database for the Web
 
Spoiling The Youth With Ruby (Euruko 2010)
Spoiling The Youth With Ruby (Euruko 2010)Spoiling The Youth With Ruby (Euruko 2010)
Spoiling The Youth With Ruby (Euruko 2010)
 
Verzovani kodu s Gitem (Karel Minarik)
Verzovani kodu s Gitem (Karel Minarik)Verzovani kodu s Gitem (Karel Minarik)
Verzovani kodu s Gitem (Karel Minarik)
 
Představení Ruby on Rails [Junior Internet]
Představení Ruby on Rails [Junior Internet]Představení Ruby on Rails [Junior Internet]
Představení Ruby on Rails [Junior Internet]
 
Efektivni vyvoj webovych aplikaci v Ruby on Rails (Webexpo)
Efektivni vyvoj webovych aplikaci v Ruby on Rails (Webexpo)Efektivni vyvoj webovych aplikaci v Ruby on Rails (Webexpo)
Efektivni vyvoj webovych aplikaci v Ruby on Rails (Webexpo)
 
Úvod do Ruby on Rails
Úvod do Ruby on RailsÚvod do Ruby on Rails
Úvod do Ruby on Rails
 
Úvod do programování 7
Úvod do programování 7Úvod do programování 7
Úvod do programování 7
 
Úvod do programování 6
Úvod do programování 6Úvod do programování 6
Úvod do programování 6
 
Úvod do programování 5
Úvod do programování 5Úvod do programování 5
Úvod do programování 5
 
Úvod do programování 4
Úvod do programování 4Úvod do programování 4
Úvod do programování 4
 
Úvod do programování 3 (to be continued)
Úvod do programování 3 (to be continued)Úvod do programování 3 (to be continued)
Úvod do programování 3 (to be continued)
 
Historie programovacích jazyků
Historie programovacích jazykůHistorie programovacích jazyků
Historie programovacích jazyků
 
Úvod do programování aneb Do nitra stroje
Úvod do programování aneb Do nitra strojeÚvod do programování aneb Do nitra stroje
Úvod do programování aneb Do nitra stroje
 

Vizualizace dat a D3.js [EUROPEN 2014]