Visualizando dados com D3.js

Visualizando dados com D3.js

Palestra apresentada no JSday em Campina Grande.

Título: Visualizando dados com D3.js.

Data: 23/03/2016

Local: Teatro Facisa – Campina Grande/PB.

41521434a4df9b0202f9b925146453e7?s=128

Fernando Felix

March 23, 2016
Tweet

Transcript

  1. Fernando Felix do Nascimento Junior VISUALIZANDO DADOS COM D3.js

  2. RESUMO Visualização de dados Dados D3.js

  3. DADOS

  4. 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)
  5. 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.
  6. VISUALIZAÇÃO DE DADOS

  7. DEFINIÇÃO Gráficos 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
  8. 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ífico. Deve-se selecionar a visualização adequada para transmitir melhor a mensagem.
  9. valores discretos valores contínuos proporções correlações gráfos cartográfia

  10. 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
  11. D3.js

  12. 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.
  13. Exemplos d3js.org

  14. 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/crossfilter
  15. 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
  16. 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.
  17. projects.flowingdata.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.
  18. bl.ocks.org/mbostock/4060606 Choropleth Taxa de desemprego em 2008.

  19. Mini tutoriais github.com/fernandojunior/d3-example

  20. Hello World

  21. None
  22. None
  23. None
  24. None
  25. #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>
  26. Constantes string, number, boolean, ... Callbacks function () {} Válido:

    html, attr, style, ...
  27. None
  28. None
  29. Random Circles

  30. None
  31. None
  32. <main> <svg><circle/></svg> <svg><circle/></svg> ... <main> 123 123 ... Bind ...

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

    123 1 ... ...
  35. None
  36. None
  37. None
  38. None
  39. Top Grossing PC Games by Revenue, 2015 (mil $)

  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. Legend spacing Legends (total) size: x, y Legend size

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

  49. ... ... ...

  50. None
  51. None
  52. None
  53. None
  54. None
  55. Referências D3 tips and tricks (Free e-book) Data never sleeps

    2.0 An introduction to visualizing data (Joel Laumans)
  56. DÚVIDAS? linkedin.com/in/fernandofnjr github.com/fernandojunior fernandojr.ifcg@live.com fernandofelix@copin.ufcg.edu.br create by Fernando FElix do

    Nascimento Junior on Google Slides Licenced under MIT Licence facebook.com/fernandofnjr