D3.js - Geografias

As coordenadas geoespaciais são freqüentemente usadas para dados meteorológicos ou populacionais. D3.js nos dá três ferramentas para dados geográficos -

Paths - Eles produzem os pixels finais.
Projections - Eles transformam coordenadas de esfera em coordenadas cartesianas e
Streams - Eles aceleram as coisas.

Antes de aprender o que são geografias em D3.js, devemos entender os dois termos a seguir -

D3 Geo Path e
Projections

Vamos discutir esses dois termos em detalhes.

D3 Geo Path

É um gerador de caminhos geográficos. GeoJSON gera string de dados de caminho SVG ou renderiza o caminho para um Canvas. Um Canvas é recomendado para projeções dinâmicas ou interativas para melhorar o desempenho. Para gerar um Gerador de Dados Geo Path D3, você pode chamar a seguinte função.

d3.geo.path()

Aqui o d3.geo.path() A função de gerador de caminho nos permite selecionar qual projeção de mapa queremos usar para a conversão de coordenadas geográficas para coordenadas cartesianas.

Por exemplo, se quisermos mostrar os detalhes do mapa da Índia, podemos definir um caminho conforme mostrado abaixo.

var path = d3.geo.path()
svg.append("path")
   .attr("d", path(states))

Projeções

As projeções transformam a geometria poligonal esférica em geometria poligonal plana. D3 fornece as seguintes implementações de projeção.

Azimuthal - As projeções azimutais projetam a esfera diretamente em um plano.
Composite - Composto consiste em várias projeções que são compostas em uma única exibição.
Conic - Projeta a esfera em um cone e então desenrola o cone no plano.
Cylindrical - Projeções cilíndricas projetam a esfera em um cilindro recipiente e, em seguida, desenrolam o cilindro no plano.

Para criar uma nova projeção, você pode usar a seguinte função.

d3.geoProjection(project)

Ele constrói uma nova projeção a partir do projeto de projeção bruto especificado. A função de projeto leva a longitude e latitude de um determinado ponto em radianos. Você pode aplicar a seguinte projeção em seu código.

var width = 400
var height = 400
var projection = d3.geo.orthographic() 
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
   .scale(100)
   .rotate([100,0,0])
   .translate([width/2, height/2])
   .clipAngle(45);

Aqui, podemos aplicar qualquer uma das projeções acima. Vamos discutir cada uma dessas projeções em breve.

d3.geo.orthographic()- A projeção ortográfica é uma projeção azimutal adequada para exibir um único hemisfério; o ponto de vista está no infinito.
d3.geo.gnomonic() - A projeção gnomônica é uma projeção azimutal que projeta grandes círculos como linhas retas.
d3.geo.equirectangular()- O equirretangular é a projeção geográfica mais simples possível. A função de identidade. Não tem área igual nem é conforme, mas às vezes é usado para dados raster.
d3.geo.mercator() - A projeção Spherical Mercator é comumente usada por bibliotecas de mapeamento lado a lado.
d3.geo.transverseMercator() - A projeção transversal de Mercator.

Exemplo de Trabalho

Vamos criar o mapa da Índia neste exemplo. Para fazer isso, devemos seguir as etapas a seguir.

Step 1 - Apply styles - Vamos adicionar estilos no mapa usando o código abaixo.

<style>
   path {
      stroke: white;
      stroke-width: 0.5px;
      fill: grey;
   }
   
   .stateTN { fill: red; }
   .stateAP { fill: blue; }
   .stateMP{ fill: green; }
</style>

Aqui, aplicamos cores específicas para o estado TN, AP e MP.

Step 2 - Include topojson script - TopoJSON é uma extensão do GeoJSON que codifica a topologia, que é definida a seguir.

<script src = "http://d3js.org/topojson.v0.min.js"></script>

Podemos incluir esse script em nossa codificação.

Step 3 - Define variables - Adicione variáveis em seu script, usando o código abaixo.

var width = 600;
var height = 400;
var projection = d3.geo.mercator()
   .center([78, 22])
   .scale(680)
   .translate([width / 2, height / 2]);

Aqui, a largura do SVG é 600 e a altura é 400. A tela é um espaço bidimensional e estamos tentando apresentar um objeto tridimensional. Assim, podemos distorcer gravemente o tamanho / forma do terreno usando od3.geo.mercator() função.

O centro é especificado [78, 22], isso define o centro da projeção para o local especificado como uma matriz de dois elementos de longitude e latitude em graus e retorna a projeção.

Aqui, o mapa foi centralizado em 78 graus Oeste e 22 graus Norte.

A escala é especificada como 680, isso define o fator de escala da projeção para o valor especificado. Se a escala não for especificada, ele retornará o fator de escala atual, cujo padrão é 150. É importante observar que os fatores de escala não são consistentes nas projeções.

Step 4 - Append SVG - Agora, anexe os atributos SVG.

var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height);

Step 5 - Create path - A seguinte parte do código cria um novo gerador de caminho geográfico.

var path = d3.geo.path()
   .projection(projection);

Aqui, o gerador de caminho (d3.geo.path ()) é usado para especificar um tipo de projeção (.projection), que foi definido anteriormente como uma projeção Mercator usando a projeção variável.

Step 6 - Generate data - indiatopo.json - Este arquivo contém muitos registros, que podemos facilmente baixar do seguinte anexo.

Baixar indiatopo.json file

Após o download do arquivo, podemos adicioná-lo em nossa localização D3. O formato de amostra é mostrado abaixo.

{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......

........................................

Step 7 - Draw map - Agora, leia os dados do indiatopo.json arquivo e desenhe o mapa.

d3.json("indiatopo.json", function(error, topology) {
   g.selectAll("path")
   .data(topojson.object(topology, topology.objects.states)
   .geometries)
   .enter()
   .append("path")
   .attr("class", function(d) { return "state" + d.id; })
   .attr("d", path)
});

Aqui, carregaremos o arquivo TopoJSON com as coordenadas do mapa da Índia (indiatopo.json). Em seguida, declaramos que vamos atuar em todos os elementos de caminho do gráfico. É definido como g.selectAll (“caminho”). Em seguida, extrairemos os dados que definem os países do arquivo TopoJSON.

.data(topojson.object(topology, topology.objects.states)
   .geometries)

Finalmente, vamos adicioná-lo aos dados que vamos exibir usando o .enter() método e, em seguida, acrescentamos esses dados como elementos de caminho usando o .append(“path”) método.

↰ Previous page Next page ↱