Este Gráfico de linhas mostra os mesmos dados que o Gráfico de barras empilhadas, mas usa pontos para marcar os pontos de dados e linhas para conectá-los. O botão de alternância (criado no MUI) alterna entre um gráfico de linhas simples e um gráfico de área. Ambas as visualizações de dados usam quase o mesmo código D3.js.
Os gráficos de área funcionam melhor como visualizações de dados quando existem conjuntos de dados únicos: ajudam os utilizadores a ver mais claramente o valor total representado pelos pontos de dados, porque este é proporcional ao tamanho da área sombreada. No entanto, quando há vários pontos de dados, as áreas sombreadas podem ser confusas, porque uma área pode obscurecer as áreas atrás dela. O D3.js permite um controlo total sobre isto: por exemplo, podemos reduzir a opacidade de algumas ou de todas as áreas, ou mesmo reduzir a opacidade das áreas que se sobrepõem às que estão por baixo. Os gráficos de áreas também podem ser confusos quando mostram valores negativos, embora o D3.js forneça formas de contornar este problema, como a utilização de cores diferentes para valores positivos e negativos.
Como no exemplo do Gráfico de barras, é possível usar controles da interface do usuário para focar em um conjunto de dados específico dentro da visualização de dados e vinculá-lo ao código D3.js. No entanto, neste caso, são utilizadas caixas de verificação em vez de botões de rádio. Com os botões de rádio, tem de selecionar apenas uma opção; no entanto, com as caixas de verificação, cada caixa pode ser selecionada ou desmarcada independentemente das outras. Assim, com esta interface, é possível selecionar qualquer permutação de conjuntos de dados: por exemplo, um único órgão, dois órgãos ou os três órgãos. A codificação para isto é um pouco mais complexa, especialmente quando há mais do que um pequeno número de pontos de dados.
O D3.js também nos permite selecionar a curva utilizada para ligar os dados. Normalmente, escolheríamos a curva mais adequada para a visualização de dados e codificá-la-íamos. No entanto, para ilustrar o que é possível, adicionámos um conjunto de botões de opção para que os utilizadores possam escolher a sua própria curva. Algumas curvas, como a Catmull-Rom, passam por todos os pontos de dados, enquanto outras, como a Curva Base, não passam. A vantagem de não passar por todos os pontos de dados é que é possível mostrar muito bem as tendências nos dados. Por outro lado, a curva de Catmull-Rom inclui todos os pontos de dados reais, mas inclui ultrapassagens e subtropas, o que dificulta a visualização de tendências.
O custo de um gráfico de linhas ou gráfico de áreas do D3.js depende muito da extensão em que ele precisa ser codificado de forma personalizada. Add-ons tais como dicas de ferramentas, animações personalizadas e assim por diante irão adicionar um pouco ao custo, mas melhoram muito a experiência do utilizador. A página Preços dá-lhe uma ideia geral. A página Preços dá-lhe uma ideia geral. No entanto, contacte-nos para uma conversa gratuita com um programador, a fim de determinar o que é melhor para si.