4. Visualizar

Softwares ou sites para visualização de dados, gráficos, imagens ou design. Ferramentas para criar gráficos legais e interativos sem precisar programar.

// data visualization, data viz, datavis, info viz, information visualization, infographics, design da informação, visualização de dados, visualização da informação, infográficos interativos, dashboards


Gráficos

Mapas

Tabelas

Cores

•••

Timelines

Fotos

Redes, fluxos e relações

Apresentação

Nuvem de palavras (tag clouds)

•••

Outras formas de visualização

Listas de ferramentas

Notas, Textos e Tutoriais

Gráficos


Ferramentas para criação de dashboards completos, gráficos interativos prontos para publicação ou gráficos estáticos para utilização em apresentações ou softwares vetoriais para refinamento (e.g. Figma ou Adobe Illustrator)

Datawrapper

  • Plataforma: Online
  • Licença: free
  • Criar gráficos pra internet
  • Embedável

http://datawrapper.de/

Flourish

Gerador de gráficos leves e interativos

  • Plataforma: Online
  • Licença: free, com (poucas) limitações
  • Muito bom!
  • Criação de gráficos e histórias (agrupe os gráficos numa sequência lógica)

@flouris_h

https://flourish.studio/

RAW Graphs

  • Plataforma: Online
  • Gera gráficos rápidos a partir de tabelas coladas no site.
  • Baseado no D3.js, mas não precisa saber programar nada para usar
  • Cria gráficos mais diferentes, que não são comuns de encontrar em outros softwares
  • Usa formato americano de números (precisa trocar as vírgulas por pontos antes de colar os dados)
  • Entrada: Copiar/Colar (CSV ou valores entre tabs)
  • Saída: Gráfico em SVG (arquivo para baixar ou código direto para embedar), PNG ou JSON
  • Visualizações complexas, com mais de duas variáveis (multivariate graphics)
  • Muito bom, fácil de usar, rápido aprender
  • Tipos de gráfico:
    • Bolhas (Bubble chart: circle packing, clustered force layout)
    • Fluxos (Alluvial Diagram, Cluster dendogram)
    • Dispersão (scatterplots)
    • Treemap

http://raw.densitydesign.org/

Google Sheets

  • Plataforma: Online
  • Criar planilha > inserir Gráfico
  • Tipos de gráfico:
    • Simples (Barras, pizzas, barras empilhadas)
    • Mapas de países
    • Treemap
  • Fácil de configurar
  • Publicação online e impressão pdf

http://drive.google.com

Tableau Public

  • Plataforma: Desktop (win/mac)
  • Licença: Grátis
  • Serve para:
    • Infográficos interativos e dashboards com gráficos, mapas, tabelas, filtros
    • Mapas interativos de pontos, bolhas (pontos de tamanho variável) ou áreas (mapas de polígonos, shapes map, filled maps, polygon map, cloropleth maps).
    • Tipos de gráfico: barras, linhas, bolhas, barras empilhadas, linhas empilhadas, pizza, barras de Gantt, tree-maps (bar, line, area, square, circle/bubble, pie and gantt bar charts)
  • Vantagens:
    • Rápido para trocar entre tipos diferentes de visualização
    • Bom para publicação e embed (depois de montado o dashboard, está pronto para publicar um interativo)
    • Ótimo pra investigar e visualizar dados a partir de grandes tabelas (uma mão na roda no jornalismo de dados)
    • Depois do Excel, é a melhor ferramenta para jornalistas de dados
    • O Tableau Public suporta o formato shapefile agora, tipo de arquivo usado para armazenar informações geográficas)
    • O Tableau Public suporta agora a conexão com tabelas do Google Docs. Isso mantém a visualização interativa conectada com a tabela. Se a tabela for atualizada, o gráfico puxa os dados novos sem que se tenha que abrir o Tableau para atualizar.
  • Desvantagens:
    • Lento para carregar depois de publicado
    • O Tableau publicado ainda tem muitos problemas de interface:
      • tudo é clicável, não está bem resolvido a relação scroll x seleção
      • oferece muitas opções ao usuário leitor, tende parecer mais complicado do que simples,
      • a visualização default tem linhas, tooltips e botões desnecessários; precisa personalizar bastante pra ficar mais fácil de ver e interagir
    • Aprendizado demorado
    • Na versão do Tableau Public (grátis), não há como salvar localmente
    • Na versão do Tableau Public (grátis), todos os dados são salvos no servidor deles e ficam públicos (um problema para dados sigilosos)
  • Entrada: tabelas (XLS, XLSX CSV), arquivos de texto (TXT, JSON), shapefiles (SHP) e PDF
  • Saída: Link para o gráfico interativo ou código de embed
  • Tutoriais sobre o Tableau:

    Como preparar os dados para o Tablau (normalizar tabelas)

    Como visualizar dados com Tableau

    Como fazer um tableau responsivo

    Como criar mapas de polígono no Tableau a partir de shapefiles (esse tutorial foi feito antes de o Tableau liberar a conexão direta com os arquivos shapefile. É um passo a passo de como transformar um arquivo .shp em uma tabela de excel que o tableau vai ler para gerar um mapa de polígono)

http://www.tableausoftware.com/public/

Plotly

  • Plataforma: Online
  • Licença: Grátis, com limitações
  • Criação de gráficos interativos, dashboards ou apresentações
  • Gera links ou embeds

https://plot.ly/

Svift

Gerador de gráficos simples e legais ("Your social chart tool")

  • Plataforma: Online
  • Licença: free/open source
  • "svift is an open source tool to turn your numbers into beautiful charts - in no time"

@SviftTool

http://www.svift.xyz/

Plot Parade

Gerador de gráficos estilizados, mais diferentes

  • Projeto de dataviz/arte da Krisztina Szűcs
  • geração de gráficos estilizados, mais diferentes
  • tem dados randômicos, para facilitar testes
  • Entrada: tabela (copiar e colar)
  • Saída: PNG

http://plotparade.com/


Elvis

Visualização de gastos públicos

  • Ferramenta de jornalismo contra a corrupção para fiscalizar governos e a relação com empresas
  • Visualização de redes
  • Gastos públicos visualizados em forma de diagrama de rede com governos, empresas e contratos

@tenders_exposed

https://defence.tenders.exposed/

Dataseed

https://getdataseed.com/

Many eyes (descontinuado)

Uma plataforma da IBM muito inovadora na época, antes dos anos 2010. Aqui tem uma palestra da brasileira Fernanda Viégas no Ted falando sobre visualização de dados usando o Many Eyes, ferramenta que ela ajudou a criar. A ferramenta foi descontinuada mas o vídeo vale a pena.
  • Plataforma: Online
  • Tipos de gráfico:
    • Treemaps
    • Conexões (network diagram)
    • Dispersão (Scatterplot)
    • Bolhas (Bubble chart)
    • Nuvem de tags (Word tag clouds)

http://www-958.ibm.com/software/data/cognos/manyeyes/

RAW Graphs

Leia acima sobre os gráficos do Raw

Tableau

Leia acima sobre os gráficos e dashboards interativos do Tableau

Plotly

Leia acima sobre os gráficos interativos do Plotly

Chartbuilder

  • Plataforma: Online
  • Licença: free
  • Criar gráficos pra internet
  • Entrada: tabela colada
  • Saída: código html ou imagem

http://quartz.github.io/Chartbuilder/

Gapminder

  • Plataforma: Desktop (mac/win)
  • Licença: free
  • Criar gráficos animados (motion charting)
  • comparar países
  • scatter plots, bubble chart

http://www.gapminder.org/

World Bank DataVisualizer

  • Plataforma: Online
  • Licença: free
  • Visualizar gráficos animados
  • scatterplots ao longo do tempo (mesma lógica do gapminder, mas online)
  • comparar países
  • já possui banco de dados sobre os países

http://devdata.worldbank.org/DataVisualizer/

Data Illustrator (descontinuado)

Gerador de gráficos com foco em design

  • Plataforma: Online
  • Software vetorial mais capacitado para trabalhar com dados (ao contrário do fraco e confuso Adobe Illustrator)
  • Permite manipulação mais precisa e criativa dos gráficos
  • Gráficos simples e complexos
  • Small multiples

@illustrate_data

http://www.data-illustrator.com/

Mapas


Leia mais aqui sobre programas, sites e tutoriais para criar mapas

Tabelas


Ferramentas online para criação de tabelas em html, JS e CSS

Mr. Data Converter (csv > html)

  • Plataforma: Online
  • Entrada: Copiar/Colar (de um CSV/TSV)
  • Saída: Código HTML da tabela
  • Opções de interpretação:
    • Delimitador (Comma/Tab)
    • Ponto decimal (Dot/Comma)
    • 1ª coluna de cabeçalho
  • Gera as tags thead e tbody

http://shancarter.github.io/mr-data-converter/

Html Tables Generator

  • Plataforma: Online
  • Entrada: CSV importado ou Copiar/Colar
  • Saída: Código html da tabela formatada
  • Opções de formatação: Cores, fontes, tamanhos, larguras, mesclar/dividir células, espaçamento interno (padding)
  • Desvantagens:
    • às vezes não interpreta certo o separador (confunde espaços/tabs)
    • não gera as tags thead e tbody

http://www.tablesgenerator.com/html_tables

Tableizer (tabela > html)

  • Plataforma: Online
  • Criar tabelas html
  • cola a tabela, sai código html

http://tableizer.journalistopia.com/

Gerador de dados para teste

  • Plataforma: Online
  • gerador de dados para testes
  • trata corretamente para cada formato
  • exporta os dados em: csv, xls, html, json, xml

http://www.generatedata.com/

DataTables

  • Plataforma: Online. Plugin Jquery
  • plugin javascript para formatar tabelas
  • funcionalidades: paginação, busca, ordenação, filtro

http://datatables.net/

Bootstrap - CSS pra Tabelas

  • Plataforma: Online. Framework
  • Esquema de modelos html/css prontos
  • bem completo

http://getbootstrap.com/css/#tables

Cores


ColorBrewer

Gerador de paletas de cores

  • sequenciais, divergentes ou qualitativas
  • de 3 a 12 tons
  • modo "colorblind safe"
  • Hexadecimal, RGB, CMYK
  • Exporta: CSS, Javascript, ASE (Adobe Swatch), paleta para Gimp e Inkscape

http://colorbrewer2.org/

Viz Palette

Ferramenta para auxiliar na geração de paletas para visualização de dados

  • usa o colorbrewer, o chroma.js e o colorgorical
  • permite simular deficiências para ver cores
  • gera hexadecimal, rgb ou hsl
  • projeto do Elijah Meeks & Susie Lu

http://projects.susielu.com/viz-palette

Chroma.js Color Scale Helper

Ferramenta pra auxiliar na geração de paletas sequenciais (mastering multi-hued, multi-stops color scales)

  • ideal para paletas sequenciais ou divergentes
  • gera códigos hexadecimal ou javascript, prontos para d3.js
  • projeto do Gregor Aisch

https://gka.github.io/palettes/#colors=lightyellow,orange,deeppink,darkred|steps=7|bez=1|coL=1

Pixel gradient Maker

Gerador de divertidos gradientes de cor pixelados

  • estilo pixel-art
  • gerador randômico de gradientes
  • construído com o glitch, ferramenta para construção de apps online

https://pixel-gradient-maker.glitch.me/

Colorpicker for data

Gerador de gradientes

  • Selecione duas cores e crie uma escala
  • Adicione quantos steps quiser
  • Seletor visual (Hue-Lightness, Chroma-Lightness, Hue-Chroma)
  • Saída: Hexadecimal
  • Preview aplicado no mapa

http://tristen.ca/hcl-picker/

I Want Hue

Gerador de paletas de cores

http://tools.medialab.sciences-po.fr/iwanthue/

Textos sobre o uso de cor em visualizações

(Reference on color in data visualizations)

Fotos


Editores online de fotos gratuitos:

Canva

O Canva é um programa de design super simples.

  • Serve para fazer montagens de fotos, criar layouts rápidos para mídias sociais ou web em geral
  • É possível fazer upload de fotos ou elementos gráficos, e também usar os modelos já existentes na biblioteca do Canva (existem elementos grátis e pagos)
  • Licença: grátis, com poucas limitações. As versões pagas dão acesso a mais pessoas na equipe e facilidades para criação de modelos e aplicações de padrões de marca (cores, tipografia, logo)
  • Fácil de usar
  • Possível compartilhar designs
  • Bom para escrever textos em cima de foto
  • Bom para fazer montagens de fotos (aquelas colagens com três ou quatro fotos formando uma)

https://www.canva.com

Pixlr

O Pixlr funciona como um photoshop online.

  • É possível usar as imagens em layers diferentes, alterar tamanhos, fazer ajustes simples ou edições mais complexas.
  • Fácil de usar
  • Não precisa de login

https://pixlr.com/editor/

Pixlr Express

  • Versão rápida do Pixlr
  • Bom para fazer montagens de fotos

https://pixlr.com/express/

Fotor

http://www.fotor.com/app.html#!module/design/tool/Design

Timelines


Timeline JS

Linhas do tempo interativas

  • Plataforma: Online (gera código javascript para publicação)
  • Linhas do tempo (timelines) interativas e responsivas
  • Suporta: descrição, links, fotos (crédito, legenda)
  • Datas parecem ficar em inglês (apesar de ter opção de alterar)
  • Exemplos: Em largura inteira Em 650px
  • Lê dados a partir de uma tabela:

Tutorial rápido do Timeline JS

  1. Pegue o modelo ("Usar este modelo")
  2. Edite a cópia da tabela que foi criada no seu Google Drive
  3. Torne a tabela pública (Arquivo > Publicar na web)
  4. Copie o link e clique em "Publicar"
  5. Jogue o link no gerador
  6. Copie o código de embed e insira no seu site

http://timeline.knightlab.com/

TimeMapper

Linhas do tempo interativas com mapas

  • Plataforma: Online (gera código javascript para publicação)
  • Linha do tempo (timelines) com mapas
  • Utiliza o TimelineJS
  • Baseado em Leaflet e OpenStreetMaps
  • Exemplos: Em largura inteira Em 650px
  • Lê dados a partir de uma tabela:

Tutorial rápido do TimeMapper

  1. Pegue o modelo,
  2. Faça uma cópia e edite no Google Docs
  3. Jogue o link no gerador
  4. Copie o código de embed e insira no seu site

http://timemapper.okfnlabs.org/

TimeFlow

  • Plataforma: Desktop, em Java (win/mac)
  • Serve pra: visualizar timelines e cronologias para investigação. É um software pra análise e documentação de séries longas de eventos.
  • Pensado para uso jornalístico.
  • Bom para visualizar durante o processo (não para publicar)

https://github.com/FlowingMedia/TimeFlow/wiki

Simile Timeline

  • Open source
  • Timeline interativa
  • Eventos clicáveis > aparece mouseover

http://www.simile-widgets.org/timeline/

MyHistro

  • Timelines com mapas
  • Usa Google Maps
  • Parece meio engessado
  • Boxes sobre o mapa + eventos clicáveis na linha do tempo

http://www.myhistro.com

Redes, fluxos e relações

networks, relationships, graphs, flows….

(node-link diagrams, NLD, network data and hierarchical data, hierarquias, grafos, estruturas em árvore, hierarchical visualization, tree structures)


Cytoscape

Software simples para visualização de redes ou gráficos de relações

  • Plataforma: Desktop (mac/win/linux)
  • Licença: free/open source
  • visualizar redes
  • simples, fácil de usar e tem muitas opções
  • ótimo pra quem tentou o Gephi e não conseguiu nada
  • Tutorial rápido de Cytoscape: https://youtu.be/4xTBOjVdHCE

http://cytoscape.org/

Gephi

Software complexo para visualização de redes

  • Plataforma: Desktop (mac/win)
  • Licença: free
  • visualizar redes
  • Completo e complexo
  • Difícil demais pra seres comuns conseguirem usar (eu, por exemplo, não consegui visualizar nada)

http://www.gephi.org

Comparação Gephi x Node XL

http://www.slideshare.net/joepeakin/gephi-vs-nodexl

Raw

  • Plataforma: Online
  • fluxos
  • circle pack diagrams
  • entrada: tabela, através de copiar e colar
  • saída: salva em svg, png, json

http://raw.densitydesign.org/

Elvis

Focada em visualização de redes de governos e empresas Leia acima sobre o Elvis

Node XL

  • Plataforma: Plugin para Excel (win)
  • Licença: free
  • visualizar redes (social network analysis)
  • Windows only

Tree Viz

Visualização de hierarquias, estruturas em árvore (hierarchical visualization, tree structures)

  • Plataforma: Desktop (mac/win)
  • roda em java, em um mini aplicativo simples e interativo
  • visualiza a estrutura de pastas no computador ou um arquivo xml
  • vários formatos de visualização de estruturas hierárquicas (tree structures): Hyperbolic Tree, Circular Treemap, Rectangular Treemap, Sunburst Tree, Icicle Tree, Sunray Tree, Iceray Tree
  • entrada: uma pasta escolhida no computador ou arquivo xml
  • saída: visualização interativa da rede. possível imprimir em pdf (o arquivo vetorial fica razoável)

http://www.randelshofer.ch/treeviz/index.html

Flocker

Realtime twitter monitor

  • Visualização de rede
  • Nuvem de tags
  • Usa Gephi e D3

http://flocker.outliers.es

VIS Visual investigative scenarios

  • Online (html5)
  • Free
  • Feita para jornalistas investigativos

http://vis.occrp.org

GED VIZ

  • Plataforma: Online
  • Licença: free
  • Visualize complex economic relations
  • Vários anos, vários países, vários indicadores
  • já possui os dados

http://viz.ged-project.de/

Overview

Ainda não testei

  • Conexões
  • Plot points
  • Documentos grandes

http://overview.ap.org/

Lista de ferramentas

Boa lista de ferramentas para visualização de dados em rede/hierárquicos

http://www.wikiviz.org/wiki/Tools#Tools_for_network_data_and_hierarchical_data

Apresentação


Editores de apresentacão de slides ou ferramentas para ajudar na publicação de imagens ou gráficos

Slides.com

Editor de slides baseado no reveal.js

  • Plataforma: Online
  • Licença: grátis, com limitações
  • Editor de slides ou storytelling
  • É um editor visual para o framework Reveal.JS
  • Fácil de usar e com vários recursos
  • Bom para criar layouts de texto com foto
  • Gera link ou código de embed

https://slides.com/

Spectacle editor

Editor de slides que suporta gráficos interativos

  • Plataforma: Desktop (win/mac)
  • Licença: open source / grátis
  • "Powerpoint online"
  • Editor de slides que suportam gráficos interativos em d3.js e do Plotly
  • Como funciona: “Make Your Next Presentation Pop”

https://plot.ly/powerpoint-online/

Closr.it

  • Plataforma: Online
  • Upload e embed
  • Zoom and pan images
  • Parece ser pago agora

http://www.closr.it/

Visualizing player

  • Plataforma: Online
  • Embed and display data visualizations
  • Zoom and pan

http://datavisualization.ch/tools/the-visualizing-player/

Nuvem de palavras


Devem ser usadas "com parcimônia". Um bom uso é mostrar frequência de palavras usadas em um texto ou discurso, por exemplo. O tamanho da palavra é proporcional ao número de ocorrências

Wordle

  • Plataforma: Online
  • tecnologia: Java
  • Word clouds

http://www.wordle.net/

Tagxedo

  • Plataforma: Online
  • Tem mais opções
  • Exporta em JPG, PNG, Html e imprime (pdf)
  • tecnologia: Silverlight
  • Word clouds with styles
  • Nuvem de palavras com formas personalizadas

http://www.tagxedo.com/

Word Counter

  • Plataforma: Desktop (mac)
  • Licença: free
  • Serve pra:
    • contar palavras e caracteres em um texto,
    • ver frequência das palavras,
    • fazer ranking de palavras mais frequentes
  • Também mostra estatísticas mais avançadas de texto (palavras curtas, sílabas, palavras monossilábicas, índices de leiturabilidade)

http://www.supermagnus.com/mac/Word_Counter/index.html

Outras formas de visualização


Tree maps do HD

Visualizar conteúdo do hd na forma de tree-maps (hard-disk tree maps)

Disk Inventory X

  • Plataforma: Desktop (mac)
  • Licença: free
  • visualização dos arquivos e pastas em forma de tree map
  • Muito útil pra gerenciar o computador (saber o quê está ocupando espaço e quanto)

http://www.derlien.com/

Daisy Disk

  • Plataforma: Desktop (mac)
  • Licença: $10
  • visualização dos arquivos em sunburst chart (multilevel pie chart ou ring chart)

http://www.daisydiskapp.com/

Visualizar sites em rede

Issue crawler

  • Plataforma: Online
  • Licença: requer login
  • analisa URLs e visualiza a relação entre eles
  • entrada: lista de URLs
  • saída: mapa de redes, mostrando a relação entre os sites

http://www.mappingcontroversies.net/Home/PlatformIssueCrawler

Plataformas mais antigas

JavaScript InfoVis Toolkit

  • visualizações interativas em javascript

http://philogb.github.io/jit/

Flare (Prefuse visualization toolkit)

  • visualizações interativas em flash e actionscript

http://flare.prefuse.org/

http://prefuse.org/

Outras coisas

Telecharger

  • Plataforma: Desktop (win)
  • serve pra: visualizar árvores genealógicas familiares
  • visualização em um tipo de sunburst chart diferente

http://genopresse.com/telecharger/

Visualização de tweets:

Visualização de notícias

Listas de ferramentas


Jornalismo investigativo

Investigative journalism

Visualização (data viz)

Notas, Textos e Tutoriais


Dados

Jornalismo de dados

(data journalism, ddj)

Introdução à Infografia e visualização de dados

(Infographics & Data Viz basics)

Gráficos:

Sobre Infográficos e não-infográficos

Data Extraction