aguarde...

17 de maio de 2020

Criando a visualização de dados de mapas de Choropleth usando JavaScript, no COVID-19 Stats

Criando a visualização de dados de mapas de Choropleth usando JavaScript, no COVID-19 Stats

Hoje em dia, você vê mapas de coroas em uma variedade de páginas da web e é utilizado para vários assuntos. Você já se perguntou como essas visualizações de dados são criadas? Você está interessado em fazê-los sozinho? Nesse caso, fique comigo neste tutorial de gráficos JS, onde mostrarei como criar um mapa interativo de choropleth de JavaScript do zero, mas com facilidade.

O conhecimento básico de HTML5 e JS é sempre útil, mas mesmo se você for iniciante neste campo, entenda estas quatro etapas simples  e poderá obter rapidamente uma visualização interativa de dados de mapas de coroas interativas de várias plataformas para seu aplicativo ou local na rede Internet!

O que exatamente são os mapas coropléticos? Quando você divide a palavra, vê que choro (” choros “) significa ” área ” e pleth (” plethos “) significa ” multidão “. Exatamente, esses mapas são usados ​​para visualizar dados estatísticos relacionados a várias áreas geográficas. Cada área é colorida ou sombreada de maneira diferente, de acordo com o valor dos dados fornecidos, facilitando a compreensão de como uma medida varia em um território.

Para este tutorial de mapeamento JS, usarei dados abertos do COVID-19 para mostrar a distribuição de casos confirmados e mortes em todo o mundo por país. Começarei com um mapa básico de choropleth que representará graficamente os casos confirmados. Depois, adicionarei uma legenda, personalizarei a dica de ferramenta e adicionarei bolhas para visualizar o número de mortes.

Vamos começar!

Como criar um mapa JavaScript Choropleth

Geralmente, a construção de um gráfico ou mapa baseado em JavaScript requer quatro coisas básicas:

  1. Crie a página HTML para o seu gráfico.
  2. Adicione os arquivos JavaScript necessários.
  3. Prepare os dados que você deseja visualizar.
  4. Escreva o código JS para o gráfico.

Agora, vamos analisar cada etapa em detalhes. Aqui está um mapa de choropleth que será a saída final da primeira parte deste tutorial:

Criando a visualização de dados de mapas de Choropleth usando JavaScript, no COVID-19 Stats

Etapa 1: crie a página HTML para seu mapa

A primeira coisa que você precisa fazer é criar uma página HTML básica. Atribua um título a ele e crie um elemento de bloco HTML (por exemplo, 

)para colocar seu gráfico de mapa. Para identificá-lo 
posteriormente no código, você também deve atribuir a ele um atributo id de sua escolha. Aqui, usei o valor “container” .

Portanto, sua página pode ficar assim:





  Choropleth Map

Observe que você pode usar regras CSS no bloco para definir como deseja que seu próximo mapa de choropleth JavaScript seja colocado. Nesse caso, o uso de “100%” nos parâmetros widthheightfará com que a visualização ocupe a página inteira.

Etapa 2. Adicione os arquivos JavaScript necessários

Segundo, você deve ir para a seção e fazer referência a todos os scripts JS apropriados que você irá usar.

Para criar um mapa choropleth ao longo deste tutorial, usarei a biblioteca AnyMap JS do AnyChart que, como o nome sugere, é projetada especificamente para produzir mapas. Bibliotecas de gráficos JavaScript são muito populares hoje em dia; eles fornecem funções comuns necessárias imediatamente para tornar o processo de desenvolvimento mais simples e rápido. Essa biblioteca específica é leve, flexível e fácil de começar, principalmente graças a uma documentação bastante escrita e a muitos exemplos na galeria de mapas .

Neste tutorial, usarei a CDN , mas lembre-se de que você pode  baixar os scripts, se desejar.

Para o mapa choropleth que tenho em mente, precisarei dos seguintes módulos :

  • Core , que é o módulo básico necessário para usar qualquer outro módulo,
  • Mapas geográficos , que contém as informações necessárias para criar gráficos de mapas geográficos e
  • Dados geográficos , que contêm informações sobre as localizações geográficas.

Além disso, usarei o  Proj4js , uma biblioteca JavaScript de código aberto gratuita que transforma coordenadas de ponto em coordenadas geográficas.

Aqui está o código HTML para esta seção:





  Choropleth Map

Etapa 3: prepare os dados que você deseja visualizar

Carregar os dados

Na terceira etapa, adicione dados. À luz da pandemia do COVID-19, criarei um mapa de choropleth do JavaScript que visualizará a situação atual em todo o mundo usando dados do Centro Europeu de Prevenção e Controle de Doenças ( ECDC ). Fiz o download da versão JSON e você pode encontrá-la aqui (dados de 14 de abril).

É fácil carregar dados de um arquivo JSON usando o módulo auxiliar Data Adapter do AnyChart, que deve ser incluído na  seção:





  Choropleth Map

Agora você pode usar o método loadJsonFile fornecido pelo Data Adapter para carregar o JSON.

anychart.data.loadJsonFile ("https://static.anychart.com/git-storage/word-press/data/choropleth-map-tutorial/data.json", function (data) {

});

Estruturar os dados

Os dados JSON, que você acabou de carregar, contêm dados por dia para cada país.

Há duas coisas que você precisa fazer aqui:

  • Calcule a soma de todos os casos confirmados para cada país.
  • Estruture os dados em um formato que seja reconhecível pelo AnyChart. Especificamente, eu quero criar uma matriz que terá um ID de região e um valor.

Para implementar o acima, você precisa escrever algum código. Aqui está a abordagem que usarei para calcular e estruturar os dados:

Vou ler os dados JSON e calcular o total de casos confirmados para cada país. Assim que terminar um país, passarei essas informações para uma matriz que chamei de “dados” e depois continuarei com o próximo país.

A matriz usará:

  • id: o identificador geográfico do país
  • value: o número total de casos confirmados para o país
  • title: o nome do país

Aqui está o código para esta seção:

anychart.data.loadJsonFile ("https://static.anychart.com/git-storage/word-press/data/choropleth-map-tutorial/data.json", function (data) {

  // Variables
  // go into the records section of the data
  var geoData = data.records

  // sum of all cases per country
  var sumCases = 0;

  // convert cases to numbers
  var numC;

  // create a new array with the resulting data
  var data = [];

  // Go through the initial data
  for (var i = 0; i 

Mapear os dados

A parte final desta etapa consiste em conectar os dados resultantes ao mapa geográfico. Basta adicionar as duas linhas a seguir do código e ele será concluído:

var chart = anychart.map(data);
chart.geoData(anychart.maps.world);

Etapa 4: escreva o código JS para o gráfico

Por fim, escreva algum código JavaScript para desenvolver o próprio mapa JS do choropleth!

Lembre-se de que tudo deve ser colocado dentro da etiqueta. Você precisa colocar o código dentro da anychart.onDocumentReadyfunção que é executada quando a página estiver pronta.

Os dados precisam ser colocados dentro dessa função, então vamos pegar o código da etapa 3 e colocá-lo aqui, para começar:

script>
anychart.onDocumentReady(function () {
  // The choropleth map code will be written here
  anychart.data.loadJsonFile ("https://static.anychart.com/git-storage/word-press/data/choropleth-map-tutorial/data.json", function (data) {

  // Variables
  // go into the records section of the data
  var geoData = data.records

  // sum of all cases per country
  var sumCases = 0;

  // convert cases to numbers
  var numC;

  // create a new array with the resulting data
  var data = [];

  // Go through the initial data
  for (var i = 0; i // convert strings to numbers and save them to new variables
    numC = parseInt(geoData[i].cases);

    // check if we are in the same country by comparing the geoId.
    // if the country is the same add the cases to the appropriate variables
    if ((geoData[i + 1]) != null && (geoData[i].geoId == geoData[i + 1].geoId)) {
      sumCases = sumCases + numC;
    }
    else {

      // add last day cases of the same country
      sumCases = sumCases + numC;

      // insert the resulting data in the array using the AnyChart keywords 
      data.push({ id: geoData[i].geoId, value: sumCases, title: geoData[i].countriesAndTerritories })

      // reset the variables to start over
      sumCases = 0;

    }
  };
  // connect the data with the map
  var chart = anychart.map(data); chart.geoData(anychart.maps.world);

});

Por fim, vamos definir tudo o resto, colorindo cada país de acordo com o valor do número total de casos confirmados. Primeiro, vou especificar o tipo de gráfico, criar a série e adicionar um título apropriado. Segundo, vou criar uma escala de cores e aplicá-la ao gráfico. Veja:

// specify the chart type and set the series 
var series = chart.choropleth(data);
        
// set the chart title
chart.title("COVID-19 Global Cases");

// color scale ranges
ocs = anychart.scales.ordinalColor([
  { less: 99 },
  { from: 100, to: 999 },
  { from: 1000, to: 9999 },
  { from: 10000, to: 29999 },
  { from: 30000, to: 39000 },
  { from: 40000, to: 59000 },
  { from: 60000, to: 99999 },
  { greater: 100000 }
]);
        
// set scale colors
ocs.colors(["rgb(252,245,245)", "rgb(241,219,216)","rgb(229,190,185)", "rgb(211,152,145)", "rgb(192,117,109)", "rgb(178,93,86)", "rgb(152,50,48)", "rgb(150,33,31)"]);

// tell the series what to use as a colorRange (colorScale)
series.colorScale(ocs);

Em seguida, comando para desenhar o gráfico do mapa:

// set the container id
chart.container('container');

// draw the chart
chart.draw();

Aqui está o resultado:

O mapa resultante do choropleth JS, incorporado a AnyChart Playground , fornece uma visualização concisa de como o COVID-19 afetou cada país. Você pode passar o mouse sobre as áreas para ver o nome e o número de casos confirmados, para cada país. Todos podem ler essa visualização de dados geográficos com facilidade.

O código completo do mapa choropleth recém criado usando JavaScript / HTML5 está abaixo:





  Choropleth Map

Personalização de mapa de JS Choropleth

Você já possui um mapa de choropleths JavaScript maravilhoso e totalmente funcional. Mas e se você quiser alterar algumas coisas ou adicionar outras funcionalidades?

AnyChart é uma biblioteca de gráficos JS muito flexível. Assim, você pode incluir facilmente modificações específicas para suas necessidades.

No momento, mostrarei como implementar as seguintes alterações:

  • Adicionar uma legenda ao gráfico
  • Adicione bolhas para representação gráfica do número de mortes
  • Configure a dica de ferramenta

No final, vou obter a seguinte imagem:

Adicionar uma legenda ao gráfico

Como regra geral para visualização de dados, toda vez que você utiliza uma escala de cores, deve incluir uma explicação do que cada cor representa em algum lugar da página

Usando o AnyChart, você pode criar uma legenda apenas adicionando chart.legend(true);.

Nesse caso, como o mapa de coroas possui apenas uma série, você precisará ter as categorias envolvidas representadas na legenda.

Aqui está o código para adicionar uma legenda ao mapa choropleth JS criado acima:

// enable the legend
chart.legend(true);

// set the source mode of the legend
chart.legend().itemsSourceMode("categories");

Isso é funcional, mas por razões estéticas, quero que a legenda apareça no lado direito do gráfico e seja alinhada verticalmente. Para fazer isso, vou adicionar algumas regras CSS:

// enable the legend
chart.legend(true);

// set the source mode of the legend and add styles
chart.legend()
  .itemsSourceMode("categories") 
  .position('right')
  .align('top')
  .itemsLayout('vertical')
  .padding(50, 0, 0, 20)
  .paginator(false);

Aqui está o resultado (disponível no AnyChart Playground com o código completo):

Adicione bolhas que representem o número de mortes

Inspirado na  visualização  criada pelo Centro de Ciência e Engenharia de Sistemas (CSSE) da Universidade Johns Hopkins, decidi descrever o número de mortes usando bolhas.

Primeiro, o número total de mortes de COVID-19 para cada país precisa ser armazenado nos dados, juntamente com o número total de casos de COVID-19:

// sum of all cases per country
var sumCases = 0;

// sum of all deaths per country
var sumDeaths = 0;

// convert cases and deaths to numbers
var numC;
var numD;

// create a new array with the resulting data
var data = [];

// Go through the initial data
for (var i = 0; i 

Segundo, armazene apenas os países que têm pelo menos uma morte em uma matriz separada:

// variable to store data that will be used for bubbles
var bubbleData=[];

// store only the countries that have at least 1 death
for (var i=0; i0){
    bubbleData.push(data[i]);
  }
};

Em seguida, adicione o seguinte código JS para criar a série de bolhas no topo da série de coroas no mapa.

// create a series for bubbles
var series_1 = chart.bubble(bubbleData);

Dê uma olhada no mapa abaixo ou no AnyChart Playground :

É uma boa ideia personalizar o tamanho das bolhas para que elas não ocupem tanto espaço na plotagem. Para fazer isso, use AnyChart maxBubbleSize()minBubbleSize()funções. Por exemplo, assim:

// set the maximum size of the bubble
chart.maxBubbleSize(25);

// set the minimum size of the bubble
chart.minBubbleSize(3);

Em seguida, você pode modificar a cor e o traçado das bolhas para torná-las mais consistentes com o restante do gráfico:

// set colors and stroke of bubbles
series_1.normal().fill("black", 0.3);
series_1.hovered().fill("black", 0.1);
series_1.selected().fill("black", 0.5);
series_1.normal().stroke("rgb(150,33,31)");
series_1.hovered().stroke("rgb(150,33,31)", 2);
series_1.selected().stroke("rgb(150,33,31)", 4);

Confira o resultado após essas modificações, abaixo ou no AnyChart Playground :

Configurar a dica de ferramenta do mapa de choropleth

Por fim, vamos configurar a dica de ferramenta do mapa de coroas JS para que ele mostre informações sobre o total de casos, se você passar o mouse sobre o território de um país e o total de mortes, se você passar o mouse sobre uma bolha.

O código para conseguir isso pode ter a seguinte aparência:

// tooltip formatting
series.tooltip().format("Total Confirmed Cases: {%value}");
series_1.tooltip().format("Total Deaths: {%size}");

Veja o resultado – você também pode encontrá-lo no AnyChart Playground com o código completo:

Por precaução, aqui está o código do mapa final personalizado de coropletas, codificado em JavaScript, que agora pode ser facilmente incorporado a um projeto da Web, móvel ou autônomo:





  Choropleth Map

Conclusão

Neste tutorial, mostrei em detalhes como criar um gráfico de mapa interativo de choropleth JavaScript interativo. Essas visualizações de dados podem ser uma ferramenta realmente útil para analisar as estatísticas rapidamente.

Sinta-se à vontade para brincar com o código das amostras de mapas choropleth do JS criadas ao longo do tutorial. Por exemplo, você gostaria de adicionar os controles da interface do usuário de zoom a  seguir? Você também pode visitar a galeria do AnyChart para ver mais demos de choropleth, bolha e outros mapas JS.

Posted in Blog
Write a comment