Gráficos JS: Mapeamento

Gráficos JS vem integrado com suporte a mapeamento geográfico, incluindo arquivos de dados otimizados para todos os mapas de países, províncias e estados, sem a necessidade de um produto ou complemento separado. O mais interessante é que a API para mapeamento é a mesma usada para gráficos regulares, permitindo que os usuários aproveitem a experiência existente para criar novos gráficos de mapas de forma rápida e fácil. Neste tutorial, configuraremos um mapa temático em várias etapas vinculado a dados do mundo real de uma fonte ativa.

Veja a caneta por Arthur Puszynski (@jsblog) em CodePen.

Para ativar a criação de gráficos na página, são adicionados os scripts jQuery e JSCharting.

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="JSC/JSCharting.js"></script>
    

Em seguida, um elemento div é colocado no HTML para hospedar o gráfico visual;

<div id="mainChart"></div>
    

Para desenhar um gráfico, a API do plug-in do jquery pode ser usada para vincular as opções do gráfico a um div e assume o seguinte formato:

$('#mainChart').JSC({/*chart options*/});
    

O básico

No mapeamento tradicional, o conceito de camadas de mapas é usado para construir mapas e o JSCharting é semelhante, porém, séries regulares e pontos são usados para essa finalidade. As séries de gráficos são equivalentes às camadas de mapas e os pontos representam as formas dentro dessas camadas. Para renderizar uma camada de mapa dos Estados Unidos, as opções de gráfico definem o tipo de gráfico como mapa e uma série com um código de mapa:

{ 
    type:'map',
    series:[{
        map:'us'
    }]
}
     

Para obter uma referência das áreas do mapa incluídas, consulte o navegador de mapeamento interativo.

Como uma série é usada, os pontos da série se tornam estados no mapa dos EUA. Como alternativa, se quiséssemos apenas o contorno dos EUA, adicionaríamos uma série com uma propriedade de mapa de pontos definida como US.

{ 
    type:'map',
    series:[{
        points:[{
            map:'us'
        }]
    }]
}
     

Voltando ao primeiro exemplo, em que usamos uma série dos Estados Unidos, os pontos são gerados internamente. Para personalizar as formas individuais da camada de mapa de uma série, os pontos podem ser especificados para cada estado e suas propriedades serão usadas em vez dos pontos gerados automaticamente. Por exemplo:

{ 
    type:'map',
    series:[{
        map:'us',
        points:[{
            map:'us.il',
            color:'red'
        }]
    }]
}
     

Veja a caneta por Arthur Puszynski (@jsblog) em CodePen.

Contexto do mapa

Outro conceito útil de mapeamento no JSCharting são as camadas de base. Essas camadas são usadas para mostrar a continuação de massas de terra quando as áreas circundantes do mapa não fazem parte da série de dados. Por exemplo, ao mostrar um mapa dos EUA, podemos adicionar opcionalmente o México e o Canadá como camadas de contexto. Essas camadas não afetam os limites de visualização do mapa e aparecem em cinza para que o foco visual permaneça na massa de terra de interesse principal;

{
    mappingBaseLayers:'mx,ca'
}
     

Para obter mais exemplos de recursos relacionados a mapas, consulte o js map features gallery

Vinculação a dados

Agora que já abordamos os conceitos básicos, vamos vincular mapas a dados do mundo real. Para isso, usaremos o seguinte conjunto de dados extraído de um documento ativo do Google Sheets para que os dados do mapa sempre reflitam os novos dados e as edições feitas na planilha em tempo real.

Uma função utilitária converterá os dados JSON da planilha em uma série de pontos. O feed de dados contém uma matriz de linhas com abreviações de estado e um valor para cada estado. Essas linhas são mapeadas para pontos e passadas para o gráfico.

Nota: Ao identificar estados, a sintaxe do código HASC, como ‘us.il’, é usada para especificar Illinois. No entanto, o FIPS também é compatível (quando aplicável) e o código equivalente para Illinois seria escrito como ‘us.fips:US17’.
Para obter uma referência completa dos códigos de mapa de todos os países do mundo, consulte o seguinte esta referência

Isso associa os códigos de estado às propriedades de mapa de pontos e o valor à propriedade de valor Z. Não usamos valores Y aqui, que são comumente usados pela maioria dos tipos de gráficos, porque os valores Y representam as coordenadas de latitude nos mapas. Os valores Z podem ser considerados como magnitude…

Os dados agora estão carregados para o gráfico; no entanto, esse gráfico ainda não visualiza os valores Z nesse mapa. Usaremos um recurso chamado smartPalettes para vincular os valores de Z do ponto a uma escala de cores a fim de visualizar os valores de Z codificando-os por cores.

palette:{
    pointValue:'{%zValue}',
    colors:['green','yellow','red']
}
     

Primeiro, especificamos o valor que vincularemos à paleta por meio da propriedade pointValue. Esse valor pode ser vinculado a qualquer token de nível de ponto, além de expressões que avaliam fórmulas matemáticas dinamicamente. Em seguida, especificamos um conjunto de cores que será aplicado ao intervalo de valores disponíveis para cada ponto, com base em seu valor.

Agora, esse mapa visualiza os dados vinculados aos valores do ponto z:

Veja a caneta por Arthur Puszynski (@jsblog) em CodePen.

SmartPalettes

Vamos nos aprofundar um pouco mais nas paletas e explorar algumas das opções adicionais. Quando especificamos uma matriz de cores, elas são renderizadas em ordem na escala com alocações iguais; para obter mais controle sobre o posicionamento das cores, podemos usar a propriedade stops, conforme mostrado na Paleta 1 abaixo. As paradas de cores definem as posições exatas de cada cor em um intervalo de 0 a 1, em vez do padrão.

Veja a caneta por Arthur Puszynski (@jsblog) em CodePen.

As interrupções de cor são definidas com uma posição na escala entre 0 e 1. Isso é semelhante às paradas de cor de preenchimento de gradiente convencionais. Convencionalmente, se quisermos que esse intervalo permaneça verde entre 0 e 0,5 e, em seguida, desbote para amarelo à medida que se aproxima de 1, será necessário um limite de cor adicional. As SmartPalettes têm um recurso de ajuste de cor que permite que isso seja aplicado mais facilmente e sem interrupções de cor adicionais. No exemplo da Paleta 2, indicaremos que a cor verde deve se ajustar à metade do intervalo entre ela e a próxima parada.

Se, em vez disso, quiséssemos que a cor amarela permanecesse sólida de 0,5 a 1, a configuração da Paleta 3 poderia ser usada;

Aqui, a configuração indica que o verde deve começar a transição imediatamente em 0 (padrão) e terminar a transição em 0,5.

Juntamos tudo isso na Paleta 4, em que usaremos um caso mais complexo com duas cores, mantendo-as praticamente sólidas, exceto por uma pequena parte no meio, em que as cores fazem uma transição perfeita.

Nota: Um conjunto de escalas de cores predefinidas está disponível neste amostra da galeria de paletas inteligentes

Essa abordagem é usada de forma muito eficaz no mapa eleitoral dos EUA exemplo em que as cores se encaixam em vermelho ou azul, mas nos estados que estavam próximos, as variações intermediárias de cores ainda são renderizadas. 13;

Conclusão

Neste artigo, começamos a arranhar a superfície do mapeamento com o JSCharting. A API relacionada a mapas é muito intuitiva e facilita o início rápido. O conjunto de dados de mapas incorporado permite que o usuário crie imediatamente gráficos de mapas sem precisar aprender ou conhecer os padrões de formato de dados de mapas; no entanto, os usuários avançados também podem carregar arquivos geoJSON e topoJSON personalizados, conforme necessário. Apesar da simplicidade da API, o componente de mapeamento foi projetado com a conveniência do desenvolvedor em sua essência;