Visualizando dados com D3.js

Fernando Felix do Nascimento Junior VISUALIZANDO DADOS COM D3.js

RESUMO Visualização de dados Dados D3.js

São criados a cada minuto sem sequer notarmos. A cada
status que compartilhamos, artigo que lemos ou foto que carregarmos, estamos criando um rastro digital que conta uma história. Domo.com (2014)

Descreve a avalanche enorme de atividade digitais pulsando através de
cabos e ondas de rádio bem como todas as coisas que nunca fomos capazes de medir antes.

VISUALIZAÇÃO DE DADOS

DEFINIÇÃO Gráﬁcos que exibem visualmente quantidades calculadas por meio do
uso combinado de pontos, linhas, sistema de coordenadas, números, símbolos, palavras, sombreamento e cor Edward Tufte

PROPÓSITO mais do que traduzir dados; deve contar uma história;
resumir e comunicar dados de maneira fácil; conjuntos maiores ou complicados sejam compreensíveis. Dados podem ser visualizados de diferentes maneiras, cada uma das quais pode fornecer um insight especíﬁco. Deve-se selecionar a visualização adequada para transmitir melhor a mensagem.

valores discretos valores contínuos proporções correlações gráfos cartográﬁa

IMPORTÂNCIA da visualização é possibilitar a percepção de coisas que
não seriam tão óbvias sem uma exposição visual. Quarteto de Anscombe (1973) m(x): 9 m(y): 7,50 var(x): 11 var(y): 4,12 cor(x, y): 0,816 y = 3,00 + 0,500x

Biblioteca para manipulação de DOM com base em dados. Ajuda
a trazer vida aos dados usando HTML, SVG e CSS. Foca em padrões web e combinando poderosos componentes de visualização.

Exemplos d3js.org

Airline on-time performance ~250 mil voos de 2011. Como a
hora do dia se relaciona com o atraso de chegada? O que aconteceu em 12 de janeiro? Como padrões de vôo diferem entre manhãs e noites? square.github.io/crossﬁlter

Sequences sunburst Visualização com dados que descrevem sequências de eventos.
Permite ver caminhos de navegação de um site. bl.ocks.org/kerryrodden/7090426

bost.ocks.org/mike/nations The Wealth & Health of Nations Variação dinâmica da
renda per-capita (x), a expectativa de vida (y) e da população (raio) de 180 nações ao longo dos últimos 209 anos.

projects.ﬂowingdata.com/tut/inter active_network_demo Similar Song Networks Músicas semelhantes de acordo com
last.fm. Os nós (músicas) são dimensionados com base na quantidade de plays e coloridos por artista.

bl.ocks.org/mbostock/4060606 Choropleth Taxa de desemprego em 2008.

Mini tutoriais github.com/fernandojunior/d3-example

Hello World

#hello-world .row body body main ul li selectAll(“ul li”) <div
id=”hello-world”><div> <div class=”row”/><div> <body></body> <body> <main/> </body> <ul> <li/> <li/> </ul> <ul> <li/> <li/> </ul>

Constantes string, number, boolean, ... Callbacks function () {} Válido:
html, attr, style, ...

Random Circles

<main> <svg><circle/></svg> <svg><circle/></svg> ... <main> 123 123 ... Bind ...

<main> <svg><circle/></svg> <svg><circle/></svg> ... <main> Data datum i 123 0
123 1 ... ...

Top Grossing PC Games by Revenue, 2015 (mil $)

Legend spacing Legends (total) size: x, y Legend size

y(i=2) y(i=1) y(i=0) x = 0

... ... ...

Referências D3 tips and tricks (Free e-book) Data never sleeps
2.0 An introduction to visualizing data (Joel Laumans)

DÚVIDAS? linkedin.com/in/fernandofnjr github.com/fernandojunior [email protected] [email protected] create by Fernando FElix do
Nascimento Junior on Google Slides Licenced under MIT Licence facebook.com/fernandofnjr

Visualizando dados com D3.js

Visualizando dados com D3.js

Fernando Felix

More Decks by Fernando Felix

Other Decks in Technology

Featured

Transcript

Fernando Felix do Nascimento Junior VISUALIZANDO DADOS COM D3.js

RESUMO Visualização de dados Dados D3.js

DADOS

São criados a cada minuto sem sequer notarmos. A cada

Descreve a avalanche enorme de atividade digitais pulsando através de

VISUALIZAÇÃO DE DADOS

DEFINIÇÃO Gráﬁcos que exibem visualmente quantidades calculadas por meio do

PROPÓSITO mais do que traduzir dados; deve contar uma história;

valores discretos valores contínuos proporções correlações gráfos cartográﬁa

IMPORTÂNCIA da visualização é possibilitar a percepção de coisas que

D3.js

Biblioteca para manipulação de DOM com base em dados. Ajuda

Exemplos d3js.org

Airline on-time performance ~250 mil voos de 2011. Como a

Sequences sunburst Visualização com dados que descrevem sequências de eventos.

bost.ocks.org/mike/nations The Wealth & Health of Nations Variação dinâmica da

projects.ﬂowingdata.com/tut/inter active_network_demo Similar Song Networks Músicas semelhantes de acordo com

bl.ocks.org/mbostock/4060606 Choropleth Taxa de desemprego em 2008.

Mini tutoriais github.com/fernandojunior/d3-example

Hello World

#hello-world .row body body main ul li selectAll(“ul li”) <div

Constantes string, number, boolean, ... Callbacks function () {} Válido:

Random Circles

<main> <svg><circle/></svg> <svg><circle/></svg> ... <main> 123 123 ... Bind ...

<main> <svg><circle/></svg> <svg><circle/></svg> ... <main> Data datum i 123 0

Top Grossing PC Games by Revenue, 2015 (mil $)

Legend spacing Legends (total) size: x, y Legend size

y(i=2) y(i=1) y(i=0) x = 0

... ... ...

Referências D3 tips and tricks (Free e-book) Data never sleeps

DÚVIDAS? linkedin.com/in/fernandofnjr github.com/fernandojunior [email protected] [email protected] create by Fernando FElix do