Em cooperação com a OCDE, publicamos recentemente uma biblioteca de gráficos de código aberto, baseada em D3, denominada OECD Simple Charts. Como os gráficos fornecidos pela biblioteca são altamente personalizáveis, eles podem ser facilmente estilizados e ajustados de acordo com sua finalidade.

No momento, esses três tipos de gráficos diferentes podem ser criados:

Gráfico de pérola

Barras horizontalmente empilhadas

Boxplots

Os gráficos são simples e muito adequados para visualizar pequenas quantidades de dados.

Para começar, você pode instalar a biblioteca usando npm:

npm install oecd-simple-charts

Ou incorporar os arquivos oecd-simple-charts.min.js e oecd-simple-charts.min.css, ambos baixados do repositório ou diretamente incorporados de unpkg ou jsDelivr.

<script src="https://unpkg.com/oecd-simple-charts/build/oecd-simple-charts.min.js"></script>
<link href="https://unpkg.com/oecd-simple-charts/build/oecd-simple-charts.min.css" rel="stylesheet">

Para criar um gráfico, você precisa adicionar um node DOM do contêiner. Então, você pode começar com a configuração do gráfico. Você pode definir um título, alterar o tamanho e a cor dos elementos e adicionar pontos de dados. Cada gráfico possui uma função de update, que traz uma série de novos dados e atualiza a visualização.

Aqui estão alguns exemplos para os três tipos de gráfico:

Gráfico de pérola

const PearlChartExample = new OECDCharts.PearlChart({
  container: '#PearlChartExample',
  extent: [300, 600],
  title: 'Pearl Chart',
  data: [{
    value: 500,
    color: '#900c3f'
  }, {
    value: 550,
    color: '#189aa8'
  }]
});

Resultado

Barras horizontalmente empilhadas

const StackedChartExample = new OECDCharts.StackedChart({
  container: '#StackedChartExample',
  title: 'Stacked Bar Chart',
  data: [{
    values: [1, 2, 3, 4, 5],
    barLabels: ['0%', '100%'],
    colors: ['#fddd5d', '#900c3f'],
    stackLabels: ['I', 'II', 'III', 'IV', 'V']
  }, {
    values: [2, 4, 6, 8, 20],
    barLabels: ['0%', '100%'],
    colors: ['#fddd5d', '#189aa8']
  }]
});

Resultado

Boxplot

const BoxPlotExample = new OECDCharts.BoxPlot({
  container: '#BoxPlotExample',
  title: 'Box Plot',
  extent: [350, 650],
  data: [{
    values: [480, 500, 530],
    colors: ['#fddd5d', '#c7754e', '#900c3f'],
    labelLeft: { text: 'label 1' },
    labelRight: { text: 'label 2' }
  }, {
    values: [400, 520, 550],
    colors: ['#aad356', '#61b77f', '#189aa8']
  }]
});

Resultado

Para mais opções e informações, consulte a documentação. Se houver algo faltando, informe-nos ou abra um pedido de envio no repositório do GitHub.

***

Christine Wiederer faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela Redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: https://blog.webkid.io/open-source-charting-tool/