Gráficos com WebGL Globe

Segundo a definição do site Chrome Experiments, o “WebGL Globe é uma plataforma aberta para a visualização de dados geográficos”. É possível copiar o código, adicionar dados e criar seu próprio WebGL Globe .

O site Chrome Experiments do Google possui muitas amostras de experiências feitos pela comunidade de desenvolvedores. Todos desenvolvidos em HTML5 e JavaScript usando tecnologias web abertas, como Canvas, WebGL, WebRTC e Portable Native Client. Alguns requerimentos são necessários como uma versão estável do Google Chrome sem flags, extensões ou plugins ou Chrome para Android e IOS.

Nossa experiência consiste em inserir dados do PIB das capitais do Brasil em 2011 obtidos do IBGE apenas como exemplo e fazer uma experiência usando uma imagem obtida do site Natural Earth III . Como o Chrome Experiments usa a biblioteca JavaScript Three.js usamos o exemplo do blog Thematic Mapping blog para alterar a imagem do globo como uma segunda opção.

Para a criação do gráfico, o Chrome Experiments usa um arquivo JSON – JavaScript Object Notation – para inserir os dados. Os dados foram inseridos em uma planilha para um planejamento melhor e os valores do PIB foram divididos por 1.000.000.000 para que os dados não extrapolassem os limites do gráfico e foram usados somente 3 casas decimais após a vírgula e manipulados somente como exemplo e ilustração para este exemplo. Os valores observados na planilha abaixo são: Cidade, latitude, longitude e magnitude.

Estes dados foram inseridos seguindo a seguinte ordem: latitude, longitude, magnitude sempre separados por uma vírgula conforme a imagem abaixo:

Depois de inseridos os dados podemos ver os nossos dados no arquivo .json e ver um lindo resultado no mapa do Chrome Experiments:

Para saber mais:

http://www.chromeexperiments.com/globe

http://threejs.org/

http://blog.thematicmapping.org/2013/09/creating-webgl-earth-with-threejs.html

Anúncios