Suplementos

Dicas de ferramentas

Podemos adicionar dicas de ferramentas a qualquer gráfico ou diagrama. Estas são particularmente úteis quando existem muitos pontos de dados (por exemplo, num gráfico de dispersão). Mesmo com conjuntos de dados mais pequenos, ajudam a desorganizar o gráfico, permitindo que os utilizadores se concentrem nos padrões gerais.

Também são úteis em gráficos complexos, em que diferentes partes do gráfico transmitem diferentes aspectos do conjunto de dados, o que pode não ser óbvio para os utilizadores que não estão familiarizados com este tipo de diagrama. Por exemplo, neste Diagrama de explosão solar, os utilizadores podem passar o rato sobre segmentos para verem o ponto de dados subjacente e o contexto desse ponto de dados. Neste caso, o diagrama Sunburst divide os tratamentos médicos por tipo, órgão afetado e situação do seguro do doente. Esta informação é apresentada na parte inferior do ecrã e muda à medida que o utilizador passa o rato sobre cada segmento.

Um dos grandes pontos fortes do D3 é o facto de oferecer muita flexibilidade. Uma dica de ferramenta pode incluir qualquer dado que esteja presente no conjunto de dados, texto contextual ou até mesmo valores de um conjunto de dados completamente diferente. Por exemplo, este Sankey mostra aos utilizadores que os nós representam o número total de refugiados, enquanto as linhas representam o número de refugiados que se deslocam entre cada origem (neste caso, um país) e destino (neste caso, um estado dos EUA). Este texto pode estar em qualquer língua, o que ajuda imenso na localização.

Quando são utilizados dois ou mais conjuntos de dados na visualização, as dicas de ferramentas podem mostrar comparações entre eles. Por exemplo, podem mostrar tanto o valor deste ano como o do ano passado, ou conjuntos de dados para diferentes regiões. Por outro lado, com um único conjunto de dados, podem ser utilizadas para apresentar intervalos de confiança, valores percentuais ou outras informações estatísticas relacionadas com os pontos de dados, ajudando os utilizadores a avaliar a fiabilidade dos dados.

Outra vantagem das dicas de ferramentas é o facto de serem divertidas! Melhoram a interatividade, permitindo que os utilizadores se envolvam com o gráfico, explorando os dados nos seus próprios termos.

Zooms

Os zooms permitem aos utilizadores fazer zoom em áreas específicas de um gráfico ou diagrama para examinar os pontos de dados e as tendências mais de perto. Isto é especialmente útil com grandes conjuntos de dados. Também é útil quando os utilizadores estão interessados em diferentes aspectos do conjunto de dados: por exemplo, alguns utilizadores podem querer concentrar-se num determinado período de tempo.

Os zooms também permitem aos utilizadores fazer comparações detalhadas entre diferentes partes do conjunto de dados. Podem explorar os dados de forma interactiva, fazendo zoom numa área e passando depois para uma área diferente. Isto ajuda-os a ver mais claramente as correlações, os valores atípicos e os padrões.

Outra vantagem dos zooms é o facto de permitirem que os utilizadores utilizem dispositivos mais pequenos, como os smartphones, para verem o conjunto completo de dados, sem deixarem de ver os pormenores de que necessitam. Os utilizadores de smartphones estão habituados a fazer zoom no ecrã utilizando o "gesto de pinça".

O zoom também ajuda a melhorar a acessibilidade para pessoas com deficiências visuais.

Escovas

O pincel funciona de forma semelhante ao zoom, na medida em que oferece aos utilizadores uma forma de interagir com parte do conjunto de dados. No entanto, em vez de aumentar parte do gráfico, esta área não muda de tamanho. A área escovada pode ser indicada de outra forma, por exemplo, através de uma mudança de cor.

Um pincel pode ser utilizado para filtrar os dados - por exemplo, os utilizadores podem passar o rato ao longo do eixo x de um gráfico de área. A área que foi pincelada pode então aparecer noutra parte do ecrã. Outra forma de utilizar um pincel é adicionar um gráfico separado que mostre os mesmos dados numa escala diferente. Nesta situação, o pincel funciona de forma semelhante ao zoom. No entanto, pode ser mais fácil de utilizar, porque o gráfico original não altera as suas dimensões.

Animações

As animações ajudam de várias formas. No caso de um simples gráfico de barras, por exemplo, as barras podem deslizar lentamente para cima em vez de aparecerem instantaneamente. Isto acrescenta muito pouco ao conteúdo informativo do gráfico, mas torna-o mais interessante para os utilizadores.

As animações desempenham um papel mais importante quando são utilizadas para transições. Por exemplo, este Diagrama de Sankey mostra dados de vários anos. À medida que o utilizador passa de um ano para outro, utilizando o cursor, os tamanhos relativos dos nós mudam. Eles movem-se, porque estão dispostos por ordem de tamanho. Sem a animação, a mudança seria chocante e seria difícil manter a "constância do objeto". Por exemplo, um utilizador pode estar interessado em saber como o fluxo (neste caso, de refugiados) provenientes de um determinado país muda de ano para ano. Se esse nó saltasse sem uma transição suave, seria difícil fazer isso.

Outro exemplo de uma transição é mostrado neste Gráfico de pizza. Quando se passa o mouse sobre um segmento, ele se move ligeiramente para fora. Ao usar uma transição suave, esse movimento parece natural e ajuda a manter a metáfora da torta. Sem ele, esta secção do gráfico de pizza saltaria de uma posição para outra. Por esta mesma razão, as animações funcionam particularmente bem quando se apresentam dados de séries temporais, tais como valores num marcador de acções. Mais uma vez, a vantagem é que é mais fácil para o olho acompanhar um determinado valor à medida que este muda.

Quando a animação é utilizada para fazer a transição entre conjuntos de dados e estas transições são controladas por uma interface de utilizador, como <TransLink>este cursor</TransLink>, o utilizador pode explorar os valores quase como um ecrã de vídeo.

Cores

Como os gráficos e tabelas do D3 são criados usando JavaScript, é possível definir as cores usando uma função. Isto significa que a cor pode ser utilizada de formas que não são possíveis noutras bibliotecas de visualização de dados.

A utilização mais óbvia da cor é para distinguir diferentes conjuntos de dados - por exemplo, este Gráfico de barras tem dados para vários conjuntos de dados semelhantes. Utilizando cores diferentes para cada conjunto de dados e explicando o significado dessas cores numa legenda, é possível combiná-las no mesmo gráfico.

A cor também pode ser utilizada para agrupar conjuntos de valores semelhantes. Por exemplo, este Diagrama de explosão solar mostra uma hierarquia de dados. Cada anel representa um nível diferente na hierarquia. Ao utilizar cores, podemos agrupar valores que pertencem ao mesmo nível e explicá-los numa legenda.

Outra vantagem do D3 é o facto de ser possível variar a saturação da cor, bem como a sua tonalidade. Por exemplo, neste diagrama Sunburst (o exemplo de cima) a saturação da cor em cada secção é variada, enquanto todas as secções no mesmo anel têm a mesma cor. Neste caso, a intensidade é simplesmente aleatória, de modo a distinguir mais claramente os sectores individuais (compare-se com o exemplo em que cada sector de um anel tem a mesma tonalidade e a mesma saturação). No entanto, a saturação também pode estar relacionada com o ponto de dados subjacente. Neste caso, é preferível que as secções não estejam dispostas por ordem de tamanho, caso contrário, os sectores mais pequenos serão demasiado difíceis de distinguir.

Outro exemplo em que a cor foi utilizada para tornar o diagrama mais claro é este Diagrama de Sankey. Nos dois primeiros exemplos, uma cor é usada para representar os nós de origem e outra cor representa os nós de destino. Além disso, a densidade da cor representa o tamanho de cada nó. Estas mesmas cores são utilizadas nas linhas de ligação. Existe, portanto, uma ligação óbvia entre os valores representados pelos nós e os valores representados pelas linhas de ligação. Nos dois últimos exemplos, são utilizadas duas cores e os valores dos dados subjacentes são representados pelos valores relativos dessas duas cores. Por vezes, isto pode ser mais claro, especialmente quando as diferenças entre os valores dos dados são subtis.

Finalmente, a cor pode por vezes ser utilizada simplesmente para separar partes do diagrama, sem qualquer significado subjacente. É o caso do terceiro exemplo de um diagrama Sunburst. As cores são especificamente escolhidas de forma a que os limites entre sectores no diagrama de Sunburst sejam claramente visíveis. Isto é especialmente útil quando os valores são pequenos e os sectores são muito estreitos.

Outra forma de utilizar a cor é para distinguir um determinado conjunto de pontos de dados. Isto pode ser combinado com um pincel (ver acima). Ao passar o pincel sobre o gráfico, os utilizadores podem filtrar os pontos de dados. Os valores filtrados podem ser mostrados com uma cor diferente, que pode ser ligada a uma legenda separada.

Mesmo sem um pincel, as cores podem ser úteis para realçar valores específicos. Por exemplo, com o D3.js, podemos dar uma cor específica aos outliers ou utilizar cores diferentes para valores negativos e positivos. As visualizações de dados tornam-se muito mais claras quando as cores são utilizadas de forma inteligente, especialmente quando existem muitos pontos de dados. O código de cores também pode ser utilizado para mostrar a estrutura geral de uma visualização de dados.

As cores também podem ajudar nas interacções. A cor de um ponto de dados, barra ou linha pode mudar quando se passa o rato por cima, realçando que foi selecionado.

Grelha de dados

Os dados para uma tabela ou gráfico D3js normalmente vêm de uma das três fontes. Se não for provável que os dados mudem com muita frequência, podem ser armazenados num ficheiro JSON ou CSV no servidor. Se os dados forem provenientes de uma base de dados local, essa base terá de ser actualizada diretamente, quer com uma interface personalizada, quer com uma ferramenta de base de dados, como o DBeaver. Podemos configurar isto para si.

However, if data needs to be updated by somebody with no technical skills, the best option is for us to create a data grid for you. This looks and feels much like an Excel spreadsheet. It can either be on a page which is shielded from search engines or which is password-protected.

Uma variação de uma grelha de dados é um formulário: funciona como o formulário de contacto num sítio Web. Pode ser mais adequado quando os dados têm de ser introduzidos por pessoal que não está familiarizado com uma grelha de dados.

Elementos da IU

Embora o D3.js ofereça um conjunto limitado de ferramentas de IU, é melhor codificá-las utilizando uma biblioteca de componentes, como a MUI, ou HTML simples.

Os elementos de IU mais úteis são os botões de rádio e as caixas de verificação. Estes são por vezes confundidos. Os botões de rádio, como os apresentados neste Gráfico de barras empilhadas, permitem aos utilizadores escolher entre um conjunto de opções mutuamente exclusivas: neste caso, podem escolher um único conjunto de dados, apresentado como um simples gráfico de barras, ou vários conjuntos de dados, apresentados como um gráfico de barras empilhadas. No entanto, também podem ser utilizados para alterar a forma como os dados são apresentados. Nesta visualização de dados Sunburst, os botões de rádio afectam a forma como a cor é utilizada para realçar diferentes aspectos do conjunto de dados.

As caixas de verificação, por outro lado, permitem aos utilizadores escolher qualquer permutação de opções: neste caso, as escolhas não são mutuamente exclusivas. No exemplo da caixa de seleção, a <Link>visualização de dados de gráfico de linhas</Link> pode mostrar apenas um conjunto de dados, quaisquer dois conjuntos de dados ou todos os três. Isso é extremamente útil quando os usuários precisam fazer comparações específicas entre pares de conjuntos de dados: por exemplo, eles podem querer comparar valores de operações cardíacas com operações hepáticas e remover os valores de operações no baço para melhorar a clareza.

Outro elemento de interface do utilizador útil para melhorar as visualizações de dados D3.js é um interrutor de alternância. Ele é usado quando o diagrama pode estar em um de dois estados, ou quando se deseja dar aos usuários a opção de trocar parte da visualização de dados para melhorar a clareza. Neste exemplo, um botão de alternância é usado para <Link> alternar entre um gráfico de linhas e um gráfico de áreas</Link>.

Por último, podem ser utilizados selectores. Estes funcionam especialmente bem quando uma visualização de dados contém conjuntos de dados de diferentes períodos de tempo. Permitem que os utilizadores se desloquem intuitivamente para trás e para a frente ao longo da linha temporal, como nesta visualização de dados do Sankey