Vizualizace dat a D3.js [EUROPEN 2104]

D3.js

Karel Minařík

D3.js

http://karmi.cz

D3.js

Mapa — prvotní vizualizace

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

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

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

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

Vizuální evidence

Vizuální evidence

http://en.wikipedia.org/wiki/Anscombe's_quartet

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

Vizualizace dat nejsou “grafy”

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]

0

6

12

18

DEMO

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

D3.js

Data nejsou informace

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

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

Děkuji!d