O documento descreve as experiências do autor com ensino e aprendizagem em visualização de dados ao longo de sua carreira. Ele ministrou disciplinas sobre o tema em diferentes instituições utilizando projetos que envolviam a criação de gráficos e infográficos a partir de dados reais. Os alunos desenvolveram soluções criativas que promoveram discussões sobre fundamentos da visualização de dados.

1. experiências com ensino
e aprendizagem em
visualização de dados
mauro pinheiro
Dataviz.Rio
23.9.2019

2. graduação esdi 1990 · 1995
design de interação 1993 · 1998
mestrado puc-rio 1998 · 2000
design de interação 2000 · 2004
ensino 2004 · até o presente
doutorado puc-rio 2007 · 2011
breve trajetória

3. ❤
diagramas, fluxos, sistemas, design da informação
2001 · 2004
globo.com
arquitetura de informação + design de interfaces

4. ufes
esdi
2004
2019
•
·
·
·
·
·
·
·
·
·
•
·
•
·
·
•
2014
2016
projeto 1 · básico
projeto 5 · sinalização
ergonomia
multimídia 1
multimídia 2
computação pervasiva
computação gráfica 2
dataviz + processing
experimentação gráfica
projeto 2 · infodesign
projeto pv 1
projeto pv 2
projeto pv 3
projeto pv 4
cor e estruturas bi
meios e métodos de
representação
ambsystems (pós-grad)
2004 · até o momento
ensino

5. envolvimento crescente
(e não planejado) com dataviz
disciplinas como oportunidade
para experimentação

6. visualização de dados
esdi · 2015 · meios e métodos de representação do projeto
criar gráficos apresentando dados do seu histórico escolar
utilizando o programa Processing

14. visualização de dados
ufes · 2016 · tópicos especiais em design
criar gráficos apresentando dados da sua rotina diária,
utilizando o programa Processing

19. turmas sem conhecimento prévio do programa
Processing – demandaram muito tempo para o
domínio básico da ferramenta
exercícios de visualização de dados dentro de uma
disciplina com temática diversa – pouca espaço
para discussão dos fundamentos de dataviz
exercício ocorrido em turmas com familiaridade com
princípios do design gráfico compensaram
parcialmente o pouco tempo para discutir dataviz
o que aprendi...

20. visualização de narrativas cinematográficas
esdi · 2015 · meios e métodos de representação do projeto
criar um diagrama que apresente a narrativa de um filme
– uma representação visual que permita entender os
elementos da narrativa e como se relacionam: trama,
personagens, eventos ao longo da(s) história(s).
baseado no trabalho originalmente desenvolvido por Isabel
Meirelles com os alunos de Graphic Design na Northeastern
University, Boston.
1
10 7
2 3 4
11 9
5 6
8
14
17 12
13
16
15
18

21. PLATAOPLOMO
a vida de Pablo escobar
3 Bi
x
seu azulmeu azul 1993
A guerra contra Escobar acabou com sua
morte. Numa tentativa de fugir de uma acao
policial, Escobar foi morto a tiros pela
polícia nacional colombiana.
1975
comeca a se envolver com
tráfico de drogas.
19851989 Escobar é um dos mais ricos homens
do mundo. Forbes avalia sua fortuna
em dólares em:
1989
do tráfico de cocaína
do mundo estavam sob
o controle de Pablo.
80%
1989
Pablo foi possível mandante do
assassinato do candidato à
presidência Luis Carlos Galán.
1991
x x x xx xx x x xx x
nA
SCIMEN
TO
Escobar se rende sob a condição: de
construir sua própria prisão, e a
controlar. Essa construção luxuosa
ficou conhecida com La Catedral
O evento M-19:
Escobar invade a suprema corte e
mata metade dos juízes presentes

23. anos 40 anos 50 anos 60 anos 70 anos 80 anos 90
Jane
John
Bartender
Terrorista
1
10 7
2 3 4
11 9
5 6
8
14
17 12
13
16
15
18
Jane é deixada no orfanto pelo
Bartender
Jane conhece John
John abandona Jane
Jane dá a luz a uma menina chama-
da Jane e se descobre hermafrodita
Jane precisa passar por cirugias e
acaba se tornando John
John encontra com o “Barn-
tender”(agente temporal) conta
sua vida para ele, que acaba
oferecendo a chance de voltar no
tempo e se vingar do homem que
arruinou sua vida.
“Bartender” deixa John com Jane
e vai para o a cena do atentado
fracassado
“Bartender” ajuda John após a ex-
plosão e volta no tempo para rou-
bar a bebê Jane
“Bartender” leva John para a
Agência na década de 80
“Bartender” rouba a filha de
Jane e a leva para o orfana-
to na década de 40
Após deixar a bebê Jane no
orfanato, o “Bartender” volta
para a década de 60
Enquanto “Bartender” volta para
a década de 70 para a aposenta-
doria, John se torna agente tempo-
ral também.
Já como agente temporal,
John vai para década de 70,
tentar impedir atentado.
-
plosão e é ajudado pelo “Bartender “a
voltar para a agência.
John passa por outra grande cirurgia
e acaba se tornando o “Bartender”
Após se recuperar e já com a
aparência “Bartender”, John vai
para a década de 70 encontrar
com ele mesmo para convencê-lo a
voltar no tempo e se vingar.
“Bartender” encontra uma versão
dele mais velho que é o terrorista e
então o mata.
Devido a distúrbios mentais cau-
sados pelas viagens no tempo, o
“Bartender” acaba se tornando o
terrorista.
1
10
7
2
3
4
11
9
5
6
8
14
17
12
13
16
15
18
Um agente temporal encara sua última missão após anos de viagens
no tempo caçando criminosos e executando a lei. O desafio final
será finalmente capturar seu inimigo mais desafiador, o homem que
há muito o intriga e ludibria.

26. two way
love interest
one way
love interest
marriage
trajectory of
osborne’s CD
married
kills
dies
oscar nominated/winner
number of part.
in coen bros. movies
the CIA, so he begins a memoir. His wife wants
a divorce and expects her lover, Harry, a
philandering State Department marshal, to leave
his wife. A diskette falls out of a gym bag
there try to turn it into cash: Linda, who
wants money for elective surgery, and Chad,
an amiable goof. Information on the disc
leads them to Osbourne who rejects their
sales pitch; then they visit the Russian
they need more of Osbourne’s secrets. Mean-
while, Linda’s boss likes her, and Harry’s
wife leaves for a book tour. All roads lead
to Osbourne’s house.
osborne COX
CIA analyst,
balkan specialist
memoir writer
drinking problem
linda LITSKE
personal trainer
at hardbodies
wants six plastic
surgeries
ted
hardbodies
manager
ex-priest
katie COX
divorce
lawer’s
secretary
harry PFARRER
ex-private
security
building a
dildo machine
alan
go on a date
with linda
unnamed
character
PALMER
osborne’s
superior
CIA supervisor
palmer’s superior
PECK
“moron”
according
to osborne
OLSON
KAPOTKIN
russian embassy
manolo
hardbodies
janitor
sandy PFARRER
children’s
books writer
employee
investigates
harry on
sandy’s orders
chad FELDHEIMER/
MR. BLACK
personal trainer
at hardbodies
fond of headphones
CIA agent
7
5
3
1
married
kills
dies
oscar nominated/winner
number of part.
in coen bros. movies1
two way
love interest
one way
love interest
marriage
trajectory of
osborne’s CD

38. exercício com foco na análise, codificação/síntese da
estrutura narrativa – fundamentos tanto para design
gráfico quanto para design da informação + dataviz
a liberdade no uso dos meios e formatos favoreceu
uma maior diversidade de soluções
soluções interativas possibilitaram diferentes modos de
leitura – hierarquia visual x acionamento de camadas
o que aprendi...

39. infográficos « a carne é fraca »
esdi · 2015 · desenvolvimento de projeto de programação visual 4
série de infográficos que apresentam dados sobre
crueldade animal, impactos na saúde, no meio ambiente
decorrentes de hábitos alimentares baseados em uma
dieta carnista.
trabalho de conclusão de curso de Lucas Lima

40. Um carnista, ou seja, uma pessoa adepta de
uma dieta a base de alimentos de origem animal
precisa, em média, de 18 vezes mais terra para ser
alimentada, por ano, do que uma pessoa que não
consome nenhum produto derivado de animais.
Um Indivíduo adepto de uma dieta
a base de alimentos de origem
animal (carnes, laticínios e ovos)
necessita de, em média, 2 acres
para se alimentar.
18x
Unidade de Terra Vegano Vegetariano Carnista
Se toda a terra fértil do planeta
fosse dividida igualmente por
toda a população humana, cada
pessoa teria direito a uma porção
equivalente a 2/3 de um acre.
4/6 acre
Fonte ONU - Organização das Nações Unidas
3 acres (18/6)
Um vegetariano (não consome
carnes, mas consome laticínios e
ovos) necessita de, em média, 3/6
de um acre para se alimentar.
3/6 acre
Um indivíduo vegano (não
consome nenhum alimento de
origem animal) necessita de,
em média, 1/6 de um acre para
se alimentar.
1/6 acre
USO DA TERRA

41. No mesmo espaço de terra é possível
produzir, em média, 16 toneladas
de vegetais e legumes ou apenas
170 kilos de carne, ou seja, uma
quantidade 94 vezes maior.
Segundo a ONU, em países com um altíssimo consumo dealimentos
de origem animal como os Estados Unidos ou as classes sociais mais
abastadas do Brasil, por exemplo, a média de quantidade de terra
necessária para alimentar uma pessoa chega a ser maior que 3 acres
enquanto em países onde o vegetarianismo é predominante, por
exemplo, este número cai para, em média, 1/6 acre.
94x
Fonte ONU - Organização das Nações Unidas
1 acre
170 kg
carnes
16000 kg
vegetais e legumes
USO DA TERRA

42. Uma caloria de proteína animal
requer, em média, 11 vezes mais
combustíveis fósseis para ser produzida
do que uma caloria de proteína vegetal.
O setor de criação de animais também é um grande
consumidor de energia. Isso se deve ao fato de que tanto
a produção de ração para esses animais, como a sua
própria transformação em alimento faz uso de uma série de
processos que utilizam muita energia.
Para produzir ração para os animais, por exemplo, os
produtores precisam bombear água, arar, cultivar e
fertilizar os campos; depois colher e transportar esta
colheita. Depois disso, precisam transformar esse alimento,
geralmente grãos (trigo, soja, aveia, entre outros) em ração
e mais tarde transformar o próprio animal em alimento
humano, o que requer um consumo de energia maior.
Fonte ONU - Organização das Nações Unidas
caloria de
proteína vegetal
caloria de
proteína animal
GASTO ENERGÉTICO

43. Enquanto a ONU, recomenda o gasto diário de 110
litros de água por habitante, cada boi brasileiro
gasta, em média, 3.000l de água por dia, cada porco,
1.200l e cada frango 300l.
15xum boi brasileiro gasta,
em média, 15 vezes mais
água, diariamente, do que
um brasileiro.
Comparativo da média (aproximada) do gasto hídrico diário,
de um ser humano e dos três principais animais de criação no Brasil:
110l Gasto hídrico diário recomendado pela ONU
3.000l1.200l300l200l
Fonte ONU - Organização das Nações Unidas
GASTO HÍDRICO DIÁRIO

44. meu busão
no ponto buzzão vitória vixbus
visualizabus
ufes · 2013 · iniciação científica · projeto de graduação
desenvolvimento de um sistema de informação ambiente,
alternativo aos sistemas atuais que informam os horários
de chegada dos ônibus aos pontos

45. desenvolvimento
Geração de alternativas - Esferas de cores
desenvolvimento
Geração de alternativas - Simulação de chegada em escala
desenvolvimento
Geração de alternativas - Rolos giratórios de linha e tempo
desenvolvimento
Geração de alternativas - Rolos giratórios de linha e tempo
desenvolvimento
Escolha do partido projetual
geração de alternativas

47. visualizabus
trabalho de conclusão de curso de Marcos Accioly,
disponível na Amazon

48. instalações e produtos interativos
esdi · 2016 · desenvolvimento de projeto de programação visual 2
desenvolvimento de projetos de interação que
mediassem a conexão entre pessoas
alguns projetos resultaram em visualizações de dados
pouco usuais

49. conchinha
dois travesseiros conectados remotamente. o contato
com travesseiro acende uma luz e liga uma resistência
que “esquenta” o travesseiro remoto, sugerindo o calor
do contato com a pessoa amada
(veja no Vimeo)
proxêmica
instalação na qual projeção no teto passa de tons
azuis para tons vermelhos, e o som altera-se de acordo
com a proximidade entre as pessoas do ambiente
(veja no YouTube)
contato
instalação na qual o ritmo e quantidade de
partículas projetadas aumenta de acordo com a
intensidade da conversa no ambiente
(veja no YouTube)

50. alunos com base anterior em programação tiveram
mais facilidade em desenvolver soluções integrando
design de produto + design de interação
embora a proposta fosse de design de interação, os
resultados potencializaram discussões sobre
visualização de dados
os resultados alinham-se com meu interesse pessoal
em uma abordagem menos “exata” na visualização
de dados – sistemas de informação ambiente
o que aprendi...

51. visualização dados · qualidade do ar
esdi · 2016 · iniciação científica
essa pesquisa foi publicada nos anais do 13º Congresso Pesquisa e Desenvolvimento em Design (P&D Design)

53. veja o protótipo funcional

54. veja o protótipo funcional

55. visualização de trajetos
ufes · 2015 · trabalho do laboratório de projetos em design
( ) Centro de Ciências Exatas
( ) Centro Ciências Humanas e Naturais
( ) Centro Ciências Jurídicas e Econômicas
( ) Centro de Educação Física e Desportos
( ) Pró-Reitoria de Extensão
( ) Pró-Reitoria de Graduação
( ) Pró-Reitoria de Pesquisa e Pós-Graduação
( ) Núcleo de Educação Aberta e a Distância
( ) Biblioteca Central
( ) Restaurante Universitário
( ) Prefeitura Universitária
( ) Editora Universitária
( ) Reitoria
( ) Centro de Vivência
( ) Teatro Universitário
( ) Cine Metrópolis
( ) Planetário
( ) Banco do Brasil
( ) Santander
( ) Caixa Econômica Federal
identificar os trajetos mais recorrentes da comunidade que
frequenta a Ufes, para fundamentar projeto de sinalização

56. um trajeto marcado

57. 501 trajetos sobrepostos

58. com a diminuição da opacidade
os trajetos recorrentes persistem
essa pesquisa foi publicada na Infodesign, Revista Brasileira de Design da Informação

59. codificar dados da rotina diária – refeições ao longo da
semana – a partir das variáveis visuais de Jacques Bertin
selfie de dados
ufes · 2019 · projeto 2 · design da informação
baseado nos trabalhos de data-selfie de Julia Gianella,
Leandro Amorim e no projeto Dear Data, de Giorgia Lupi e
Stefanie Posavec

68. infográfico “como cuidar de plantas”
ufes · 2019
Fonte:http://www.uesb.br/flower/
Aluno:LucasVileti-Projeto2(2019/2)
7
6
5
4
321
1 cm
C
º
35
7654
3
2
1
C
º
18
C
º
25
30
15
1
desenvolver um infográfico explicando como cuidar das plantas
samambaia, crisântemo (em maço e em vaso), violeta e azaléia,
evitando ao máximo o uso de representações verbais gráficas.
as instruções com os cuidados de cada planta foram enviadas
previamente como texto aos alunos

69. Fonte:http://www.uesb.br/flower/
Aluno:LucasVileti-Projeto2(2019/2)
123
4
5
6
7
7
6
5
4
321
1 cm
C
º
35
7654
3
2
1
C
º
18
C
º
25
30
15
1
7
6
5
4
3
21
7
6
5
4
3
2 1

70. 1x / 30d 1x / 30d
18º C
mín
1x / 7d
2x / 7d
2x - 3x / 7d
samambaia
Nephrolepis
exaltata
1d - 2d
crisântemo
Chrysanthemum
1 cm
violeta
Viola
azaleia
Rhododendron
simsii
1x / 7d
+- 36º C
1x / 7d
2x - 3x / 7d
1x / 30d
como cuidar
de plantas
projeto 2
mariana thiersch souza

71. Samambaia
Violeta
Azaléia
Crisântemo
Cuidando de
Plantas
1 vez ao mês
1 vez ao mês
1 vez ao mês
>18o
25o
25o

73. 18 C
Violeta
Samambaia
Crisântemo
Azaleia

74. DS
T
Q
Q
S
S D
S
T
Q
Q
SS
Samambaia
Nephrolepis
Azaléia
Rhododendron
DS
T
Q
Q
S
S
Crisântemo
Chrysanthemum
*Trocar água a
cada 2 dias
DS
T
Q
Q
S
S D
S
T
Q
Q
SS
Violeta
Viola

75. 1-2 dias
1cm
18ºC
D S T Q Q S S
D S T Q Q S S
D S T Q Q S S
2-3x
D S T Q Q S S
1x
D S T Q Q S S
2x
D S T Q Q S S
1x
D S T Q Q S S
2-3x
D
S T Q
Q
S
S
D S T Q Q S S
1x
26ºC

76. COMO CUIDAR DE
PLANTAS
DIAS DA SEMANA
SAMAMBAIA AZALÉIA
CRISÂNTEMO
DIAS DA SEMANA
DIAS DA SEMANA
VIOLETA
DIAS DA SEMANA
DIAS DA SEMANA
18O
MILENA FERREIRA - PROJETO II - DESIGN UFES 2019/02

79. depois da experiência com selfie de dados, percebe-se
que os alunos já conseguem analisar o problema,
propor categorias, agrupamentos e articular
representações coerentes para tais categorias
embora as codificações em geral funcionem, aspectos
de design gráfico ainda carecem de maior refinamento
– comprometendo a solução final em alguma medida
uma nova rodada de ajustes certamente produziria
resultados melhores, mas demandaria mais tempo dentro
da disciplina – seria preferível passar a outro tópico ou
ajustar os detalhes? o processo de aprendizado já teria
ocorrido com a discussão dos resultados, mesmo que
ainda houvesse espaço para melhorias?
o que aprendi...

80. ensinar é aprender

81. algumas considerações...
o domínio limitado de ferramentas (software,
programação) pode ser um fator de frustração e dificultar
o processo. ainda assim, conhecer algumas ferramentas é
importante, especialmente no contexto atual.
o processo de ensino/aprendizagem só é possível com
alunos interessados. é fundamental buscar estratégias
para envolver os alunos.
trabalhar os fundamentos através de atividades de baixa
complexidade, que sejam resolvidas em poucas semanas,
ajuda a engajar os alunos ao mesmo tempo em que
promove uma “alfabetização” na temática

82. algumas considerações...
é fundamental ter outros espaços de aprendizado além da
sala de aula – iniciação científica, grupos de estudo,
oficinas “mão na massa”
o número de alunos alcançados em sala de aula é maior,
mas nem sempre é possível ter muita profundidade nos
trabalhos
outros espaços de aprendizagem, embora tenham uma
menor capacidade de público, possibilitam maior
envolvimento e aprofundamento dos alunos
desenvolver atividades que englobem simultaneamente
alunos da graduação e pós-graduação é sempre
interessante!

83. conhecer mais o processo anterior ao design
questão inicial
coleta de dados
limpeza / tratamento inicial
análise / manipulação
visualização
novas questões (e o ciclo começa novamente)
observar o mundo com olhar curioso, questionar...
raspagem de dados, técnicas de pesquisa em ciências sociais, jornalismo de dados
domínio de ferramentas como excel, tabula, Open Refine, R
princípios básicos de estatística
domínio de fundamentos do design gráfico, design da informação
domínio das ferramentas de produção

84. Processing – http://processing.org
P5.js – http://p5js.org
R Studio – http://www.rstudio.com/
Tableau – http://www.tableau.com/
...e que gostaria de estudar
Arduino – http://www.arduino.cc/
D3.js – http://d3js.org/
javascript, python, ... ... ...
ferramentas que tenho estudado...

85. bibliografia sugerida
Isabel Meirelles
Design for Information
Ben Fry
Visualizing Data
Jacques Bertin
Semiology of Graphics
Alberto Cairo
The Truthful Art

86. obrigado!
Dataviz.Rio
23.9.2019
mauro.pinheiro@ufes.br