Apresentação de introdução a visualizações geográficas, feita no segundo encontro do Meetup D3.js e Visualização de Dados de Belo Horizonte (http://www.meetup.com/d3js-BH/).
plano; necessária para criação de mapas. Toda projeção distorce a superfície terrestre de alguma maneira: área, forma, direção, distância, escala, ângulo. Não existe uma ideal para todo caso. Projeções equivalentes (áreas se preservam); Projeções conformes (ângulos se preservam); Projeções eqüidistantes (distâncias se preservam); Projeções azimutais (direções se preservam); Projeções afiláticas ou arbitrárias (tanto ângulo quanto área se deformam). cônica plana cilindrica
estruturas de dados geográficas, no formato JSON. GeoJSON feature collection of features Point LineString Polygon MultiPoint MultiLineString MultiPolygon GeometryCollection geometry object + propriedades adicionais uma lista de features consiste em um único GeoJSON object geometry type crs, opcional bbox, opcional Coordinate Reference System object Bounding boxes padrão: longitude e latitude em graus decimais
Polygon GeometryCollection 'coordinates' contém uma única posição. 'coordinates' é um arranjo de duas ou mais posições. 'coordinates' é um arranjo de LineString fechados, com no mínimo 4 posições (1a = última). Se houver vários Polygons, o primeiro é o anel externo e os demais são furos ou anéis internos. Coleção de geometry objects, listados no membro "geometries".
Polygon GeometryCollection 'coordinates' contém uma única posição. 'coordinates' é um arranjo de duas ou mais posições. 'coordinates' é um arranjo de LineString fechados, com no mínimo 4 posições (1a = última). Se houver vários Polygons, o primeiro é o anel externo e os demais são furos ou anéis internos. Coleção de geometry objects, listados no membro "geometries". Geralmente são endereços, locais. Geralmente são ruas, avenidas, fronteiras. Geralmente são cidades, estados, pedaços de terra. Coleções dos demais tipos.
Polygon GeometryCollection 'coordinates' contém uma única posição. 'coordinates' é um arranjo de duas ou mais posições. 'coordinates' é um arranjo de LineString fechados, com no mínimo 4 posições (1a = última). Se houver vários Polygons, o primeiro é o anel externo e os demais são furos ou anéis internos. Coleção de geometry objects, listados no membro "geometries". MultiPoint MultiLineString MultiPolygon 'coordinates' é um arranjo de Point. 'coordinates' é um arranjo de LineString. 'coordinates' é um arranjo de Polygon.
"Point", "coordinates": [102.0, 0.5]}, "properties": {"prop0": "value0"} }, { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0] ] }, "properties": { "prop0": "value0", "prop1": 0.0 } } ] } GeoJSON JSON Geometry and Feature Description exemplo de objeto GeoJSON lista de features Exemplo de feature com geometry do tipo LineString, com coordenadas em longitude e latitude e com propriedades especificadas. tipo FeatureCollection
por Michael Bostock, disponível no GitHub*. Topologia? Ramo da matemática que estuda espaços e formas. Topologia Geoespacial. Estudo das regras acerca das relações entre pontos, linhas e polígonos que representam regiões geográficas. Ex. Compartilhamento de fronteiras; simplificação de linhas*, distorção de formas*. Ao invés de representar geometrias de maneira discreta, como GeoJSON, TopoJSON une as geometrias a partir de segmentos de linha comuns, chamados de arcs. Elimina redundância: arquivos 80% menores. Ex. Fronteira entre MG e SP é representada apenas uma vez e referenciada pelos dois estados. * Links na seção de Referências.
transform objects arcs Novo tipo, indroduzido no TopoJSON, contém objetos GeoJSON. Topology Como converter as coordenadas inteiras delta-encoded para o formato original. Ex: latitude e longitude. scale/traslate Mapa que associa name - geometry obj. Os objetos são os de GeoJSON. Não armazena coord. individuais: em cada geometria, fica apenas uma referência para arcs. Cada arc é uma sequência de Points (similar à LineString). Arcs são combinados em geometrias. arranjo de arcs
objeto TopoJSON { "type": "Topology", "transform": { "scale": [0.036003600360036005, 0.017361589674592462], "translate": [-180, -89.99892578124998] }, "objects": { "aruba": { "type": "Polygon", "arcs": [[0]], "id": 533 } }, "arcs": [ [[3058, 5901], [0, -2], [-2, 1], [-1, 3], [-2, 3], [0, 3], [1, 1], [1, -3], [2, -5], [1, -1]] ] } Exemplo de object, nome 'aruba', do tipo Polygon, cujo parâmetro arcs se refere às coordenadas da posição 0 do arranjo principal de arcs. Ou seja, topology.arcs[0] tipo Topology lista de arcos e suas coordenadas
Polygon com 'furo no meio' em TopoJSON {"type": "Polygon", "arcs": [[42, 43], [44]]} Se topology.arcs[42] representa A -> B e topology.arcs[43] representa B -> C -> D a referência [42,43] representa A -> B -> C -> D parte externa, furo Os arcs [42, 43], [44] do polígono são referências para topology. arcs[42], topology.arcs[42] e topology.arcs[44].
size or topology, then use TopoJSON. If you don’t care about either, then use GeoJSON for simplicity’s sake." disse Michael Bostock no Stack Overflow *. Há duas vantagens no uso de TopoJSON: o tamanho do arquivo e o uso de topologia. No entanto, TopoJSON é um formato mais complexo que GeoJSON: Há necessidade de conversão para GeoJSON para usar d3.geo.path; seu formato simplificado de coordenadas pode indroduzir erros de arredondamento. Manipulação server-side, que não demanda aspectos topológicos: usar GeoJSON; Se há necessidade de utilizar topologia ou o arquivo será enviado para o cliente: TopoJSON. * Links na seção de Referências.
= d3.geo.mercator() .scale(600) .translate([1.5*width, height/4]); var states = topojson.feature(br, br.objects.states); var path = d3.geo.path().projection(projection); svg.append("path") .datum(states) .attr("d",path); }); d3.geo.path é um mecanismo para exibição de dados geográficos. Dado um objeto geometry ou feature, ele gera uma string de dados e associa ao atributo "d" de um path no SVG. atribui cada estado brasileiro a um path do SVG.
function (d) { return "state state-" + d.id; }) .attr("d", path); Para cada path de um estado, associa as classes state e state-#, onde # é o id do estado no TopoJSON.
map data at 1:10m, 1:50m, and 1:110m scales http://www.naturalearthdata.com/ GeoCommons, Community site for open data and maps http://geocommons.com/ IBGE, Mapas http://mapas.ibge.gov.br/ Repositório GitHub mbostock: world-atlas, TopoJSON de mapas do mundo https://github.com/mbostock/world-atlas Repositório GitHub mbostock: us-atlas, TopoJSON de mapas dos EUA https://github.com/mbostock/us-atlas Repositório GitHub carolinabigonha: br-atlas, GeoJSON/TopoJSON de mapas Brasileiros https://github. com/carolinabigonha/br-atlas
& TopoJSON: http://prag.ma/code/d3-cartogram/#none/2010 Michael Bostock, Line Simplification: http://bost.ocks.org/mike/simplify/ Michael Bostock, Let's Make a Map: http://bost.ocks.org/mike/map/ Michael Bostock, Choropleth: http://bl.ocks.org/mbostock/4060606 Michael Bostock, How to Infer Topology? http://bost.ocks.org/mike/topology/ Michael Bostock, Projection Transitions: http://bl.ocks.org/mbostock/3711652 syntagmatic, Comparing Map Projections: http://bl.ocks.org/syntagmatic/3711245 xkcd, What your favorite Map Projection says about you? http://xkcd.com/977/
carolinabigonha
oracle4engineer
kakehashi
isaoshimizu
akexorcist
shigashiyama
shonansurvivors
uhyo
trishagee
10xinc
kamina_zzz
fumiyasac0921
shumei_ito
keavy
ammeep
phodgson
samanthasiow
maggiecrowley
philnash
zakiyama
csswizardry
honnibal
garrettdimon
aki_iinuma
jonrohan
![Geo Projections, D3.js var projection = d3.geo.albersUsa() .translate([w/2, h/2]); var](https://files.speakerdeck.com/presentations/da8537e01c7b0131083b5a1f14477b5d/slide_8.jpg){kind=link}
![Obrigada! @carolinabigonha github.com/carolinabigonha [email protected]](https://files.speakerdeck.com/presentations/da8537e01c7b0131083b5a1f14477b5d/slide_33.jpg){kind=link}