Melhor maneira de exibir três dados em um gráfico para um site

7

Observe que a resposta mais antiga estava se referindo ao meu gráfico antes desta última edição. Foi uma ótima resposta, por favor, não a exclua devido à minha edição.

Quero exibir quanto estudo eu fiz e quantas páginas eu completei ao longo da semana, divididas por dia, e o fiz como mostrado abaixo: insira a descrição da imagem aqui

Já tive pessoas me dizendo que não conseguem entender os gráficos, mas não tenho idéia de como mais posso exibi-los.

Como posso exibi-las mais claramente?


fonte
Eu poderia exibi-los como um monte de gráficos de linhas independentes, mas após 12 semanas eles parecerão absurdamente confusos.
Nesse caso, você pode dividi-lo em grupos: All time, Month, Week. Aqui há um gráfico de representantes que permite aumentar o zoom. Também há outras maneiras, como clicar em um link na parte superior do gráfico para aprofundar o gráfico ... ou algo assim. Você pode procurar serviços que oferecem algum tipo de gráfico gráfico e talvez scripts / plugins de gráfico para ver o que eles oferecem. Por exemplo: nvd3
Joonas
11
Isso me parece bastante direto. Talvez seus amigos não consigam ler gráficos. :)
Lauren-Clear-Monica-Ipsum
@LaurenIpsum Eu considerei isso;).

Respostas:

2

Bem, dei uma facada nisso com o Illustrator e fiz manualmente, sem saber como automatizar esse processo. Eu apenas olhei as páginas por dia e por semana e cheguei a este gráfico:

páginas por dia por semana

Basicamente, um mini-gráfico mostrando o progresso de cada dia da semana sobreposto a uma barra, indicando o total de páginas da semana.

Comecei a visualizar as horas de maneira semelhante, usando um círculo completo por 1 hora e um semicírculo por meia hora de estudo.

Possivelmente, coloque as horas de estudo por dia acima da barra da página, mantendo o mesmo código de cores ou não. Você teria que brincar com isso e ver o que parecia melhor. Também há espaço para colocar pequenos números em cima de cada barra.

Voxwoman
fonte
3

Primeiro, diagnosticando os motivos pelos quais é confuso:

  • Suas diferentes mensagens estão competindo entre si. Primeiro, o espectador percebe que a Semana 1 foi muito mais produtiva que a Semana 2 - essa é a mensagem mais atraente. Então eles percebem que isso não é muito significativo, pois havia mais dias na semana 1 do que na semana 2.
  • Então eles olham para dias individuais e a ordem fica confusa. A maioria dos gráficos de dados "com o tempo" tem dias uniformemente espaçados e em ordem. Aqui, você precisa procurar várias cores na tecla antes de descobrir que os dias costumam ir de cima para baixo, e então é confuso que a semana 2 pareça diferente (sábado, domingo, sexta-feira? Por que as semanas começam em dias diferentes?)
  • Depois, há a grande quantidade de olhares entre a chave e o gráfico para verificar qualquer dia em particular.

Então, provavelmente, na solução ideal, será:

  • fácil e intuitivo para acompanhar o progresso ao longo do tempo,
  • fácil identificar os dias que são produtivos e os dias que são menos
  • É fácil ver em que semanas a maior parte do trabalho foi concluída, sem que isso seja distorcido demais por dias que ainda não aconteceram ou dias em que nenhum trabalho seria realizado por algum motivo.

Uma técnica realmente boa para casos com muitos mini-conjuntos de dados bastante simples é uma grade de pequenos gráficos, todos na mesma escala . Isso às vezes é chamado de "pequenos múltiplos". Cada um funciona de forma independente e você pode facilmente digitalizar o conjunto inteiro para ver padrões e tendências gerais.

Aqui está um exemplo rápido muito simples (precisa de um título) onde você pode ver rapidamente:

  • Eles aumentaram sua taxa de trabalho nas últimas duas semanas do projeto,
  • Começam bem na maioria das semanas e depois perdem o foco antes de trabalharem duro para recuperar o atraso na sexta-feira
  • Eles ficaram fora da maior parte da semana 4, mas trabalharam duro no fim de semana para se atualizarem

insira a descrição da imagem aqui

Eu preferiria áreas preenchidas a linhas para que você possa ter uma compreensão fácil e intuitiva do volume feito a cada semana.

As colunas também funcionam - um pouco mais clara e fácil de procurar dias específicos, mas tem um senso menos intuitivo de volume e direção e parece mais ocupado à primeira vista.

insira a descrição da imagem aqui

user56reinstatemonica8
fonte
Resposta muito boa, vou ver o que posso fazer com isso. Muito obrigado, tenho certeza de que perguntarei algo mais sobre isso.
Por curiosidade, de onde vieram seus dados de exemplo?
Eu acabei de inventar :) :) #
446185 UserInstall
Ah, muito bom, então :) :) #
Em que software? Excel?
2

Vou separar minha resposta em várias partes.

I. Tipo de leitor

Existem 3 tipos de pessoas que usam gráficos:

a) As pessoas que podem ler qualquer gráfico.

b) Os que dificilmente conseguem ler um gráfico.

c) Aqueles que procuram uma informação muito específica .

Eu não vou me importar com o primeiro tipo. Qualquer gráfico feio serve.

Para o tipo b, você precisa de muito esforço, gráficos interativos, vários gráficos mostrando diferentes abordagens (por dia, por semana, durante todo o tempo, por dia, por semana) movendo gráficos, desenhos animados ...

Mas a abordagem na maioria dos casos deve estar pensando que o usuário precisa ver dados muito específicos.

Suponho que você saiba que tipo de dados seu leitor está procurando .

No seu gráfico, o mais importante são as horas gerais de estudo em uma semana e como você se saiu nas diferentes semanas. Se é isso que você precisa, este tipo de gráfico está correto.

O restante dos dados não é importante no seu gráfico.

II A informação visual

Ok, então, como suponho que você tenha escolhido o tipo certo de gráfico e abordagem , e como este é o site de design gráfico, analisarei seu gráfico.

Análise da imagem

Dados exibidos

1) Ninguém no planeta lê as horas em termos de tantas casas decimais. "Estudei 4.1582 horas ... !!" Reduza os decimais para apenas 1.

Elimine todos os 0 que não fazem sentido, excluindo-os na sua tabela de excelência.

2) Se nos bares os dias sobem (segunda-feira no fundo e domingo no topo), o cérebro do leitor deve pular entre dimensões contraditórias ao ler na tabela de cores do dia: da esquerda para a direita estão na realidade de baixo para cima . Coloque sua tabela de cores do dia na mesma dimensão vertical das barras.

3) Não repita a mesma informação. Este título é igual ao título do gráfico.

4) Não repita semana, semana, semana, semana, semana ...

Estilo

3-4) Facilite a leitura dos títulos, use um tamanho de fonte melhor. O objetivo de um gráfico é ver todas as informações rapidamente.

5) A proporção geral e o espaçamento do gráfico (entre colunas) dão a sensação de haver muitos dados. Torne-o mais agradável.

6) Você pode dar alguns recursos visuais, como linhas minúsculas, que se conectam segunda a segunda, etc.

7) Torne o estilo visual geral mais agradável. As informações podem ser as mesmas, mas se forem apresentadas de uma maneira mais interessante, o observador tentará analisar as informações em profundidade.

Dicas adicionais:

Não consegui encontrar uma maneira de colocar o total de dados de horas na parte superior da coluna. Provavelmente é útil.

Não encontrei maneira de aumentar o tamanho dos quadrados de cores próximos aos dias. Isso seria mais fácil de ler.

Rafael
fonte
0

acho melhor exibir na barra horizontal empilhada como esta insira a descrição da imagem aqui editar com livegap Charts

Omar Sedki
fonte
Parece muito bom. Por curiosidade, você é um desenvolvedor (para livegap)?
sim, gráficos livegap ( charts.livegap.com ) & editor livegap ( editor.livegap.com ) é Meu aplicativo web
Omar Sedki
Muito interessante, obrigado, eu terei uma melhor olhada amanhã #