O documento discute a visualização de dados na web, mencionando gráficos que revelam informações, interagem com dados e omitem ou enganam. Apresenta exemplos históricos de gráficos e ferramentas atuais para criação de gráficos dinâmicos e interativos. Discorre sobre como gráficos podem transmitir confiança excessiva, omitir dados e usar escalas de forma enganosa.

1. VisualizaçãodedadoseaWeb
HelderdaRocha
São Paulo, 27 de agosto de 2018

2. VisualizaçãodedadoseaWeb
Gráficosquerevelaminformações
Gráficosqueinteragemcomdados
Gráficosqueomitem,iludemementem
Tecnologiasserviçoseferramentas

3. WilliamPlayfair
(1786)
• "Inventor" dos
gráficos de
linha, área,
barra, torta/
pizza

4. CharlesJosephMinard(1869)

5. JohnSnow(1854)
• Mapa mostra residências com
casos de cólera durante a
epidemia de 1854, em
Londres
•

6. JohnSnow(1854)
• Mapa mostra residências com
casos de cólera durante a
epidemia de 1854, em
Londres
• Setas mostram bombas
d'água.

7. JohnSnow(1854)
• Mapa mostra residências com
casos de cólera durante a
epidemia de 1854, em Londres
• Setas mostram bombas d'água.
• Mapa revela dado importante:
possível relação entre uma
bomba d'água e casos de cólera

8. Vacinação
contrao
sarampo
graphics.wsj.com/infectious-diseases-and-vaccines/
T. DeBold, D. Friedman. "Battling
InfectiousDiseasesinthe20th
Century:TheImpactofVaccines"
WSJ, Feb 11, 2015

9. VisualizaçãodedadoseaWeb
Gráficosquerevelaminformações
Gráficosqueinteragemcomdados
Gráficosqueomitem,iludemementem
Tecnologiasserviçoseferramentas

10. Informaçõesdinâmicas
www.bloomberg.com/graphics/2015-whats-warming-the-world/
E. Roston, B. Migliozi. "What'sReallyWarmingtheWorld?"Bloomberg, June 24, 2015
Veja app interativa

11. Informaçõesinterativas
www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html
M. Bostock, S. Carter, A. Tse."IsItBettertoRentorBuy?"NYTimes. May 22, 2014.
Veja app interativa

12. Informaçõesemtemporeal
www.flightradar24.com
+ contexto
+ detalhe

13. Informaçõesemtemporeal
maps.google.com
+ contexto
+ detalhe

14. BigData
Latitude e longitude de + de 100000 localidades com mais de 1000 habitantes revela mapa da presença humana.
Gráfico gerado comChart.js+ dados obtidos emgeonames.org

15. VisualizaçãodedadoseaWeb
Gráficosquerevelaminformações
Gráficosqueinteragemcomdados
Gráficosqueomitem,iludemementem
Tecnologiasserviçoseferramentas

16. Quandotransmitemconfiançaexcessiva
Gráficos não incentivam o questionamento de dados e metodologias.
Pessoas confiam mais em argumentos acompanhados de gráficos.
A. Tal, B. Wansink "Blindedwithscience:Trivialgraphsandformulas
increaseadpersuasivenessandbeliefinproductefficacy"
(Oct 15, 2014)

17. Quandoomitemdados
Fonte: AnnaFlagg"Notfittoprint:Whengooddesigngoes bad"
medium.com/aj-news/not-fit-to-print-when-good-design-goes-bad-cc52931a2ce0
Total cumulativo
de foguetes atirados contra
Israel a partir de Gaza
Total cumulativo
de mortes no conflito
ReportageminterativadeJ.Ashkenas,A.Tse,K.Yourish,31/07/2014,NYTimes
www.nytimes.com/interactive/2014/07/31/world/middleeast/in-gaza-a-pattern-of-conflict.html

18. Quandoomitemdados
Fonte: AnnaFlagg"Notfittoprint:Whengooddesigngoes bad"
medium.com/aj-news/not-fit-to-print-when-good-design-goes-bad-cc52931a2ce0
Total cumulativo
de foguetes atirados contra
Israel a partir de Gaza
Total cumulativo
de mortes no conflito
ReportageminterativadeJ.Ashkenas,A.Tse,K.Yourish,31/07/2014,NYTimes
www.nytimes.com/interactive/2014/07/31/world/middleeast/in-gaza-a-pattern-of-conflict.html
Gráfico corrigido

19. Quandoomitemdados
Fonte: FolhadeS.Paulo

20. Quandoomitemdados
Fonte: FolhadeS.Paulo
Mas o ano ainda não terminou (junho/2016)

21. Quandoomitemdados
Fonte: FolhadeS.Paulo
Correção (possível após o
final do ano ou projeção)

22. Quandoerramaescala:faltadecontexto
https://www.datapine.com/blog/misleading-data-visualization-examples/

23. Quandoerramaescala:faltadecontexto
https://www.datapine.com/blog/misleading-data-visualization-examples/
100
108
107
106
105
104
103
102
101
Contexto

24. 0
Quandoerramaescala:faltadecontexto
https://www.datapine.com/blog/misleading-data-visualization-examples/
100
80
60
40
20
Contexto
melhor

25. Quandoerramaescala:contextosirrelevantes
Fonte: K. Collins. "Themostmisleadingchartsof2015,fixed", Dec 23, 2015.
qz.com/580859/the-most-misleading-charts-of-2015-fixed/
A média
nunca é zero

26. Quandoerramaescala:contextosirrelevantes
Fonte: K. Collins. "Themostmisleadingchartsof2015,fixed", Dec 23, 2015.
qz.com/580859/the-most-misleading-charts-of-2015-fixed/
0

27. Quandomisturamescalasdiferentes

28. Quandomisturamescalasdiferentes

29. Quandomentem
descaradamente

30. Ilusãodeárea
Fonte: NYTimes

31. Ilusãodeárea
Fonte: NYTimes

32. Ilusãodeárea

33. Ilusãodeárea

34. Ilusãodecor

35. Ilusãodecor

36. Ilusãodecomprimento

37. Ilusãodecomprimento

38. Ilusãodecomprimento

39. Ilusãodeângulo
Fonte dos dados: ONU
População
mundial em
1980 e 2015

40. Ilusãodeângulo
Fonte dos dados: ONU
População
mundial em
1980 e 2015

41. VisualizaçãodedadoseaWeb
Gráficosquerevelaminformações
Gráficosqueinteragemcomdados
Gráficosqueomitem,iludemementem
Tecnologiasserviçoseferramentas

42. Tecnologiasabertas
GeoJSON JSON

43. Serviçospopularesquegeramgráficos
www.tableau.com infogram.com
docs.google.com plot.ly

44. FerramentasJavaScript(open-source)
chartjs.org p5js.org d3js.org

45. helder@argonavis.com.br
www.argonavis.com.br