geochart in d3.js

Question

d3.js에서 지오 코트를 수행하는 방법에 대한 지침이나 예제를 찾고 있습니다. 구글 차트에서 this one과 같은 것이 필요하고, 일부 맞춤 설정이 필요하기 때문에 d3.js로 돌아가고 있습니다. 지금까지 가장 가까운 d3.js 샘플은 this이지만 코드가 매우 길어서 더 간단한 것을 찾고 싶습니다.

Answer 1

choropleth지도를 찾고 계십니까? 여기에 recent example in 28 lines of code이 있습니다.

이 예에서는 알래스카, 하와이 및 푸에르토 리코를 포함한 미국의 복합 영사법 인 기본 투영 d3.geo.albersUsa을 사용합니다. 가시 영역을 변경하려면 투영을 변경해야 할 수도 있습니다. d3.geo.albers은 동등한 지역이므로 choropleth지도에 좋습니다. albers 투영을 사용하면 origin을 설정하여 전역의 특정 부분에만 집중할 수 있으며 모든 투영에서는 scale 및 translate을 지정하여 화면에지도를 배치 할 수 있습니다.

세계지도를 표시하려면 extended projections plugin의 진행중인 개발을 살펴보십시오. 이는 특히 세계지도 (예 : Winkel Tripel)에 유용한지도 투영을 추가합니다. D3의 다음 릴리스에는 모든 투영을위한 3 차원 회전 (예 : 반자동 절단 포함, dragging this example 시도), adaptive resampling 및 개선 된 클리핑과 같은 몇 가지 흥미로운 새 기능이 포함됩니다.

choropleth에 색칠하는 경우 물론 데이터의 기능으로 "채우기"스타일을 재정 의하여 원하는대로 지형지 물을 색칠 할 수 있습니다.

Answer 2

@mbostock과 그의 답변에 대한 모든 성의를 표하며, 나는이 질문을 통해 오는 모든 사람들을위한 추가 리소스를 추가 할 것이라고 생각했습니다.

@ Yaron Naveh가 제공하는 링크의 예는 Mercator projection 인 것으로 보입니다. 에서 d3.js의 메르카토르 프로젝션 기능에 대해 자세히 알아볼 수 있습니다. @mbostock은 API의 각 투영에 대한 블록/요지를 생성 할만큼 충분히 친절했습니다 (예를 들어 투영 축소판 이미지를 클릭하십시오). 다음은 간단한 메르카토르 투영 block/gist에 대한 링크입니다.

"예술에 대해 묻기 - 기분은 어떠세요?" 링크에서, @mbostock이 채우기 스타일을 데이터의 함수로 사용하여 색칠하는 것에 대해 설명하는 약간의 코드가 있습니다. 이 예제에서는 JSON 파일에서 국가 이름의 첫 번째 문자에 대한 유니 코드 값을 선택하고 "steelblue"(# 4682B4 = 4620980)를 사용하여 해당 값에서 CSS 색상을 만드는 것입니다. 음영/색조를 계산하려는 경우).

d3.json("readme.json", function(collection) { 
    d3.select("svg").selectAll("path") 
     .data(collection.features) 
    .enter().append("path") 
     .attr("d", d3.geo.path().projection(d3.geo.mercator())) 
     .style("fill", function(d) { return '#'+Math.floor(d.properties.name.charCodeAt(0)/100*4620980).toString(16); }); 
}); 

당신은 block/gist 여기에 전체 예를 확인할 수 있습니다.

은 (@mbostock - 같은 훌륭한 도구 주셔서 감사합니다!)