Esse tutorial foi desenvolvido por Anicely Santos, com edição de Adriano Belisario, em junho de 2022.

O ato de contar histórias não é algo novo na humanidade. Pense, por exemplo, nos povos originários, que passaram seus saberes para outras gerações oralmente. Desde então, sabemos que uma história não é composta apenas pelo assunto ou fatos principais abordados, mas também por outros elementos que guiam a narrativa, como imagens, cores ou formatos que complementam as informações, sensibilizando o público. Todos estes elementos “de ambientação” desempenham um papel naquilo que chamamos de storytelling.

Neste tutorial, antes de começar com a mão na massa, veremos algumas técnicas importantes para contar histórias com dados com sucesso, a partir do guia de dicas DataViz Cheatsheet. Ele foi publicado originalmente em inglês, no site PolicyViz, e nós fizemos uma tradução, inédita, para este tutorial.

Em seguida, aplicaremos algumas dessas técnicas explorando recursos do Flourish (em especial a função ‘Contar histórias’). Este texto é baseado no workshop ‘Storytelling com dados: estruturas, técnicas e mão na massa com Flourish’, que foi facilitado por Nazareno Andrade e Dandara Sousa na V Conferência de Jornalismo de Dados e Métodos Digitais (Coda.Br 2020).

A atividade no Coda construiu visualizações utilizando dados do Tribunal Superior Eleitoral (TSE) relacionados a candidatura às prefeituras em 2020. No final deste tutorial, iremos construir essa história sobre a participação de minorias nas eleições municipais.

Se você não conhece o Flourish ainda, vale a pena começar pelo tutorial “Crie mapas eleitorais (sem saber programar) no Flourish” para entender um pouco a produção de gráficos como funciona. Aqui, não faremos as visualizações do zero. Ao contrário, utilizaremos os gráficos já prontos nas visualizações ‘Candidaturas por gênero nas capitais’ e ‘Visão geral candidatos’.

Contando histórias com dados

Produzir visualizações que sejam confortáveis visualmente e prendam a atenção do leitor, exige algumas técnicas. É preciso entender o que se quer comunicar e para quem, para então escolher as melhores visualizações. A seguir apresentamos alguns princípios centrais para a visualização de dados, consolidados no DataViz Cheatsheet do PolicyViz.

Mão na massa

Agora que revisamos alguns princípios gerais de visualização de dados, vamos praticar.

Para começar, iremos copiar as visualizações de exemplos sobre os quais criaremos histórias a respeito. Assumindo que você já está logado no Flourish, copie a visualização ‘Candidaturas por gênero nas capitais’.

Ao clicar no link, você será redirecionado a visualização criada por Dandara Sousa. No lado superior direito, vai aparecer a opção Duplicate and edit.

Ao clicar, o Flourish perguntará se você tem certeza que quer duplicar a visualização na sua conta. Para confirmar, clique em Duplicate and edit.

Feito isso, a visualização abrirá já em sua conta do Flourish, dando a possibilidade de novas edições. Caso deseje fazer novas edições, o tutorial ‘Personalizando visualização de dados’ pode lhe ajudar.

Antes de seguir adiante, separe um tempo para explorar as visualizações e pensar na história que você quer criar com ela. Isso será muito importante para as próximas etapas.

Criando histórias a partir de visualizações

O Flourish além de criar visualizações, como essas que copiamos, também possibilita criar histórias. As histórias nada mais são do que apresentações animadas de uma ou mais visualizações. Esse recurso é facilmente encontrado na página inicial da plataforma.

Slide básico

Clicando em New story, uma nova tela se abre e aparecem duas opções: Choose visualisation e Basic slide. Vamos começar clicando em Basic slide.

O Flourish apresenta na tela seguinte, algumas opções a serem editadas. Olhando para as visualizações que copiamos, qual história queremos contar? É muito importante que a história tenha um bom título que desperte o interesse do leitor e ele já comece a refletir a partir daqui.

O título da história será “As minorias nas eleições das capitais”. Fique à vontade para colocar o título que desejar. À medida que for explorando os dados, é possível pensar em novas histórias.

Além do título, tem outros recursos abaixo como o subtitle, onde você pode detalhar um resumo sobre o assunto abordado. No menu abaixo, ao lado das opções dos títulos, há opções para realizar alterações de posicionamento, cor de fundo dos títulos, margens e altura da figura. Neste exemplo, deixei a imagem do lado direito, ao invés de centralizada.

Clicando duplo em cima de algum título aparece opções de formatação. Vou colocar o título em negrito.

Caso não deseje escrever o subtítulo ou o texto abaixo dele, basta passar o mouse em cima, vai aparecer um pequeno ícone (como dois ‘v’ para cima e para baixo), basta clicar nele para ocultar. Para voltar a exibir, é só passar o mouse no local onde ocultou e clicar novamente no ícone.

Iremos ocultar o Text, deixando apenas o Subtitle escrito “Onde estão as mulheres e pessoas negras candidatas à prefeitura no Brasil?”.

Agora, vamos incluir uma imagem que tenha a ver com o título. Clicando no ícone no meio da imagem, aparecerá opções para incluir tanto imagem como vídeo (Media Type), colocar o endereço web de onde a mídia está armazenada (Photo/ Movie URL), indicar o tamanho da imagem (Image size) e a parte da imagem que deseja exibir (image position).

No final, com as alterações que fizemos, deve ficar semelhante a imagem a seguir.

Trabalhando com visualizações

Partiremos agora para um novo slide. Dessa vez, trabalharemos a partir de uma visualização.

Para incluir um novo slide, clique no lado inferior esquerdo em New slide. Clicando nessa tela, aparecerá aquela mesma de antes para escolher entre incluir um slide ou uma visualização, escolha a opção Choose a visualisation.

Nessa etapa aparecerá todas as suas visualizações armazenadas no Flourish. Vamos começar utilizando a visualização de ‘Candidatura por gênero nas capitais’.

Acima da visualização temos Add a caption here. Aqui é onde você vai guiar a pessoa leitora sobre como ela deve ler a sua visualização, apontar o que é possível ou não explorar, enfim dar direcionamentos que possibilitem o entendimento da história da maneira que você deseja transmitir. Vou avisar ao leitor que quando ele passa o mouse em cima das barras, aparece a quantidade por gênero nas capitais.

Em cima da visualização, do lado direito, temos o ícone de um lápis. Esta opção serve para fazer anotações em partes da visualização para tornar ainda mais nítida a mensagem. Clique na opção e escolha um ponto do gráfico em que deseja evidenciar alguma informação importante. Observe que ao clicar no ícone uma mini janela se abre, e ao passar o ponteiro do mouse por cima da visualização, o ponteiro muda de forma. Escolha alguma área na visualização e clique para criar uma anotação. Neste momento, na mini janela que abrir com uma caixa de texto onde você deve escrever a anotação e mais alguns recursos.

Vou clicar na barra de Porto Velho e anotar que, embora seja um lugar onde possui muitas candidaturas, são poucas as candidaturas femininas. Às vezes pode parecer que a informação é muito óbvia só de olhar a visualização, mas lembre-se que as pessoas não então dentro da sua cabeça, quando mais clara for a mensagem, mas seguro será o entendimento da mesma.

Ainda na janela, existem alguns detalhes para a anotação como mudar o tipo de marcador e conector, e Market Label. A opção Marker Label permite enumerar as anotações, de maneira que o leitor entenda por onde começar e continuar a leitura. Essa opção é bem importante quando é necessário mais de uma anotação que só faz sentido se lidas em sequência. Na anotação feita em Porto Velho vou colocar o número 1 no Market Label. Vou colocar uma segunda anotação em Belém dizendo que “algumas capitais não possuem candidaturas femininas”, no Market Label vou anotar o número 2.

Observe que nos marcadores ficam os números que foram colocados no Market Label, facilitando a leitura numa sequência de anotações.

Para duplicar ou excluir uma anotação, basta clicar no lápis e em seguida na anotação. Na janela que se abre, aparecem os ícones pequenos logo em cima.

Vamos ver um outro exemplo utilizando uma nova visualização. Seguindo os passos anteriores, vamos incluir agora a visualização ‘Visão geral candidatos’. Diferente da visualização anterior, nessa é possível ver mais de um gráfico com os dados agrupados de acordo com os filtros do lado inferior direito.

As cores na visualização mudam, de acordo com os agrupamentos que são feitos.

No título dessa visualização, vou colocar “Onde estão as mulheres” e logo abaixo descrever para a pessoa leitora como utilizar a visualização.

Maravilha. Agora temos uma visualização simples que apresenta o contexto das minorias no cenários políticos locais. Para tornar sua história disponível, basta clicar no canto superior direito em Export & publish > Publish to share and embed.

Vai aparecer uma janela explicando sobre o que acontece ao publicar e com opção para ao publicar permitir que as pessoas copiem as visualizações e os dados. Se for o seu desejo, marque a opção e clique em Publish.

Pronto! O botão agora fica verde e, na janela, aparecem o link da publicação, um script HTML para incluir em um site e opções para despublicar o material, respectivamente.