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.