Introdução

DynamicD3 oferece visualizações de dados personalizadas usando D3.js. Trabalharemos consigo para o ajudar a selecionar a forma mais eficaz de apresentar os seus dados: isto pode incluir Gráficos de barras, Gráficos de linhas, Gráficos de tartes, Diagramas de macaco ou visualizações de dados mais exóticas, como cloropletos, gráficos de bolhas ou Diagramas de explosão solar.

As visualizações de dados D3.js podem incluir um grande número de Add Ons, tais como dicas de ferramentas, zooms, mouse-overs e animações. Estes ajudam os utilizadores a compreender os dados de forma mais intuitiva e proporcionam uma experiência envolvente que não é possível com visualizações de dados estáticos. Também podemos criar uma IU personalizada - utilizando botões de rádio, caixas de verificação, cursores ou interruptores - que alarga ainda mais a gama de experiências interactivas.

Fornecemos-lhe JavaScript simples, que pode inserir diretamente no seu sítio Web, ou um componente React. Configuraremos uma página web simples e gratuita como demonstração. Como opção, podemos criar uma grelha de dados para que possa atualizar os seus dados facilmente.

O D3.js pode usar dados de um arquivo JSON ou CSV estático, ou pode obter dados de uma API. Também podemos criar uma grelha de dados para que possa atualizar os dados facilmente.

Gráficos de barras

Os gráficos de barras são normalmente utilizados para dados categóricos, como este exemplo que compara o número de operações em três órgãos específicos num grande hospital.

Note-se que um gráfico de barras não é o mesmo que um histograma, apesar de terem um aspeto semelhante. Um histograma não tem dados categóricos, como países (em que um ponto de dados está inequivocamente numa categoria ou noutra). Em vez disso, mostra dados que formam um continuum, mas que estão divididos em diferentes intervalos, designados por caixas. Por exemplo, um conjunto de dados em que o eixo x mostrasse a distância de um determinado ponto poderia ser dividido em intervalos. No entanto, esses intervalos são arbitrários e são normalmente escolhidos para apresentar os dados de forma clara.

O D3.js pode ser utilizado tanto para um gráfico de barras como para um histograma, e qualquer um destes pode representar um ou vários conjuntos de dados. Também pode ser utilizado para representar dados contínuos. No entanto, estes são apresentados de forma mais adequada num gráfico de linhas ou num gráfico de dispersão.

Gráficos de linhas

Line Charts and Area Charts displays data points over a continuous interval or time period. Depending on the curve used to connect the lines it shows trends and patterns over time. The horizontal, or x-axis represents the independent variable (often time), while the vertical axis represents the dependent variable (the value which has been measured). If the horizontal axis represents time this can be labelled using standard units of time and date, such as seconds, minutes, months and years. D3.js is extremely flexible in this regard. Date and time labels can be localized (for example, by using words in another language to represent the months).

Os gráficos de linhas são particularmente úteis para mostrar vários conjuntos de dados que estão relacionados de alguma forma. Estes conjuntos de dados utilizam normalmente o mesmo eixo x, mas podem ter escalas diferentes e eixos y diferentes. Eles são particularmente úteis para ver tendências em diferentes conjuntos de dados (como comparar quando há um pico de doença em diferentes países). Neste exemplo, uma interface de usuário é usada para alternar entre diferentes combinações de conjuntos de dados. Observe que o D3.js pode ajustar automaticamente a escala do eixo vertical à medida que os dados mudam.

Outro ponto forte dos gráficos de linhas é a capacidade de analisar tendências de forma eficaz. Pode ser desenhada uma curva que passa por cada ponto ou que mostra tendências a curto ou longo prazo. No exemplo acima referido, foi adicionada uma interface de utilizador para que os utilizadores possam explorar o conjunto de dados de diferentes formas, utilizando diferentes curvas.

A variation on the line chart is the area chart, in which the area under the line is shaded. This is also shown in the example on the Line Chart page

Gráficos de pizza

Em um gráfico de pizza, o ângulo de cada fatia é proporcional à quantidade que ela representa. Gráficos de pizza e gráficos de rosca são iguais, exceto que os gráficos de rosca têm um buraco no meio que pode conter dados. Os gráficos de rosca podem ter vários anéis mostrando uma hierarquia de valores de dados; no entanto, este tipo de gráfico é referido como um Diagrama de explosão solar.

Os gráficos de tartes são normalmente utilizados nos jornais. No entanto, embora sejam familiares e fáceis de compreender, não são a melhor forma de apresentar dados proporcionais ou categóricos, porque é difícil comparar valores diferentes (ao contrário de um gráfico de barras, em que as alturas dos rectângulos podem ser facilmente comparadas). No entanto, são úteis quando os dados representam uma proporção de um valor total. As proporções também podem ser mostradas com gráficos de barras, mas isso é menos óbvio intuitivamente.

A metáfora de uma torta pode ser estendida desenhando um pedaço da torta para fora. Isso pode ser feito de forma estática ou usando um efeito de mouse-over, como mostrado na página Gráfico de torta. Isso é conhecido como um gráfico de pizza explodido. Informações mais detalhadas podem ser fornecidas para a secção explodida.

Diagramas de Sunburst

Os gráficos Sunburst são uma forma de gráfico de pizza de vários níveis. São por vezes conhecidos como mapas de árvore radiais, porque os dados têm a mesma estrutura hierárquica que um mapa de árvore convencional.

Este tipo de visualização de dados mostra a hierarquia através de uma série de anéis que são cortados para cada nó de categoria. Cada anel corresponde a um nível na hierarquia, com o círculo central a representar o nó de raiz e a hierarquia a deslocar-se para o exterior a partir dele. Por exemplo, em este exemplo, os tipos de operação são divididos. O primeiro anel divide as operações de acordo com o órgão que é afetado. O anel seguinte divide cada uma destas secções de acordo com o tipo de tratamento (conservador, operação, transplante ou medicamentos) e o anel seguinte mostra se os doentes tinham ou não seguro. O cursor do rato mostra os valores subjacentes num ecrã na parte inferior. Isto significa que os utilizadores podem explorar os dados deslocando-se pelo ecrã. Por exemplo, podem querer saber como é que a proporção de doentes que receberam tratamento renal difere, com base na sua cobertura de seguro.

A cor pode ser utilizada para realçar agrupamentos hierárquicos ou categorias específicas. No exemplo acima, o utilizador pode alterar o esquema de cores para realçar diferentes aspectos do conjunto de dados. No primeiro exemplo, são utilizadas diferentes gamas de cores para cada anel. Isto facilita a compreensão dos dados apresentados em cada anel e, ao mesmo tempo, torna claros os limites das secções. No entanto, isto não funciona com grandes conjuntos de dados. Neste caso, é mais claro se todas as secções de um determinado anel tiverem a mesma tonalidade. Finalmente, em alguns casos, podem ser utilizadas cores aleatórias. Estas tornam mais difícil compreender o significado de cada nível na hierarquia, mas facilitam a visualização dos diferentes sectores. O ecrã da interface do utilizador no exemplo Sunburst alterna entre estas alternativas.

Diagrama Sankey

Os diagramas de Sankey são utilizados para representar processos de fluxo, tais como o fluxo de dinheiro dentro de uma organização (tal como mostrado numa demonstração financeira), o fluxo de energia ou matérias-primas através de uma série de processos industriais ou o fluxo de um ativo mais abstrato, como a informação. A altura ou largura de cada nó representa a quantidade total de fluxo através desse nó e a espessura das linhas entre cada par de nós representa a quantidade de fluxo que passa entre esses nós. Pode ser utilizada cor, quer para mostrar a quantidade de fluxo (por exemplo, utilizando um gradiente de cor), quer para mostrar algum outro aspeto do processo, como neste diagrama de Sankey, que utiliza cores para ilustrar o fluxo de refugiados.

Uma área em que os Sankeys são frequentemente utilizados é o sector da energia. Por exemplo, podem mostrar a origem do gás natural por país, os meios através dos quais chega ao seu destino (gasoduto, navio, etc.) e depois como é utilizado (utilizadores finais). Diagramas como este são úteis para os decisores políticos, uma vez que destacam as áreas onde a eficiência pode ser melhorada.

Os diagramas de Sankey são uma forma particularmente intuitiva de mostrar mudanças ao longo do tempo. Neste diagrama de Sankey, o fluxo de refugiados de vários países de origem para os Estados Unidos é mostrado ao longo de um período de tempo. O cursor permite aos utilizadores moverem-se ao longo da linha temporal e as transições suaves facilitam o acompanhamento dos nós à medida que aumentam ou diminuem de importância.

Cloropleto

Os mapas coropléticos utilizam cores para mostrar como uma variável varia numa área geográfica. São semelhantes aos mapas de calor; no entanto, ao contrário destes últimos, dividem o mapa em subunidades geopolíticas, como países, estados, províncias ou condados.

Os valores utilizados num cloropleto devem ter em conta as diferentes dimensões das áreas. Por exemplo, existe uma enorme diferença entre as dimensões dos diferentes países, pelo que não faz sentido colorir os países apenas com base nas suas populações. Em vez disso, estes dados seriam "normalizados" entre regiões, utilizando a densidade populacional em vez da população absoluta. Para ambos os tipos de visualização, as cores mais escuras ou mais intensas representam normalmente valores mais elevados, enquanto as cores mais claras ou mais pálidas indicam valores mais baixos.

Infelizmente, os dados do mundo real não são normalmente divididos em categorias naturais. Por exemplo, um cloropleto em que a intensidade de uma cor fosse proporcional à densidade populacional poderia funcionar quando existe uma diferença semelhante entre as densidades populacionais de diferentes regiões (como entre diferentes condados no mesmo estado dos EUA). No entanto, muitas vezes os dados contêm valores que são ordens de grandeza superiores a outros valores no mesmo conjunto de dados. Felizmente, o D3.js tem um conjunto rico de escalas. Nalguns casos, uma escala logarítmica pode ser mais adequada: esta mostraria bem as pequenas diferenças, mas também mostraria diferenças muito maiores. Noutros casos, uma cor pode ser utilizada para mostrar valores acima ou abaixo de um determinado limite. É este elevado nível de flexibilidade que faz do D3.js uma ferramenta tão poderosa para criar visualizações de dados.

Para além de nos ajudar a dimensionar os dados, o D3.js permite-nos utilizar uma vasta gama de projecções de mapas: estas têm um grande impacto na forma como os dados são percebidos. Os cloropletos produzidos com outras bibliotecas utilizam frequentemente projecções padrão, como a projeção de Mercator, o que pode levar a grandes distorções em certas partes do mundo. Este problema é menor quando o mapa mostra áreas mais pequenas, como os condados do Reino Unido, ou quando as áreas apresentadas estão todas a uma latitude semelhante.

Finalmente, é possível utilizar dois dados separados (mas relacionados), cada um com uma escala de cores diferente. Isto é conhecido como Cloropleth bidimensional.

Gráfico de bolhas

Os gráficos de bolhas são como gráficos de dispersão com os dados substituídos por círculos. Enquanto um gráfico de dispersão apenas pode utilizar a posição e a cor de um ponto para representar informação, um gráfico de bolhas tem também dimensões horizontais e verticais. Este facto torna os gráficos de bolhas particularmente adequados para apresentar relações multidimensionais.

Se for necessário apresentar apenas uma informação adicional para cada círculo, esta pode ser representada pela área do círculo. No entanto, isto pode ser problemático, porque os utilizadores tendem a avaliar os tamanhos relativos dos círculos com base no seu diâmetro e não nas suas áreas. É importante tornar este facto claro na legenda.

Os gráficos de bolhas funcionam menos bem quando existem muitos pontos de dados e quando existe uma grande variedade de dados. Quando há demasiados pontos de dados, o ecrã pode parecer cheio e as bolhas podem sobrepor-se. Quando existe um grande intervalo de valores no conjunto de dados, as bolhas mais pequenas podem não ser claramente visíveis. Estes problemas podem ser ultrapassados, em certa medida, utilizando interacções com o rato para dar mais informações, como o valor exato do ponto de dados subjacente.

Um último problema com os gráficos de bolhas é a ilusão da média ponderada: os tamanhos das bolhas afectam a perceção dos valores x e y do ponto de dados. Esta distorção deve ser tida em conta quando se estimam os valores médios x e y.

Os gráficos de bolhas que precisam de mostrar valores negativos podem ser criados utilizando um símbolo no centro das bolhas que representam valores negativos, cores diferentes para positivos e negativos ou mesmo formas diferentes. Com o D3.js, este nível de flexibilidade é possível, mas não é o caso da maioria das bibliotecas de visualização de dados.