D3.js와 Open Data ~ 그 1 지도를 그리기
이번 완성도는 아래와 같습니다. 국토교통성에서 가나가와현의 행정구역 데이터를 취득해 D3.js로 묘화합니다. 김에 홈 타운으로 하고 있는 J리그 팀마다 색칠해 보았습니다. (마리노스의 마지막 절에 대해서는 접할 수 없어!)
샘플 페이지는 여기
D3 Geo Projection
D3.js에는 기본적으로 지리 그리기 기능이 포함되어 있으며 다양한 투영 방법을 사용하여 지형 데이터를 그릴 수 있습니다.
htps : // 기주 b. 코 m / m 보 s와 ck / d3 / 우키 / 게오 P 로지 ぇ c 치온 s
이 기능을 사용하여 지도를 그립니다.
데이터 얻기
우선은 국토교통성의 페이지로부터 행정 구역 데이터를 다운로드합니다
가나가와현의 데이터라면 N03-130401_14_GML.zip 라는 파일이 됩니다
도형 파일(.shp)을 GeoJSON 형식으로 변환
D3.json에서 읽을 수 있는 데이터는 GeoJSON 또는 TopoJSON 형식입니다. TopoJSON 형식이 압축 효율이 높습니다만, 가공에 한 번 걸리기 때문에 여기에서는 기본의 GeoJSON 형식을 취급하기로 합니다.
GDAL (Geospatial Data Abstraction Library) 설치
위의 국토 교통부에서 다운로드할 수 있는 데이터에는 도형 파일(확장자 .shp)이 포함되어 있습니다. 이것을 바탕으로 GeoJSON으로 변환하려면 ogr2ogr이라는 유틸리티가 필요하기 때문에 그것을 포함하는 GDAL이라는 라이브러리를 설치합니다. Mac이라면 아래 명령으로 들어갑니다.
$ brew install gdal
GeoJSON으로 변환
GDAL이 설치되면 다음 명령을 사용하여 json 형식으로 변환합니다.
$ ogr2ogr -f GeoJSON kanagawa.json N03-13_14_130401.shp
한가지 주의하지만, 변환된 파일은 shift_jis 인코딩입니다. 적절하게 편집기 등을 사용하여 utf-8로 변환하십시오.
이제 데이터를 준비할 수 있습니다.
코드
가장 간단한 형태를 상정하고 단순히 지도를 그리는 예는 아래와 같습니다.
html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="map"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="mapping.js"></script>
</body>
JS
Geo Paths API 을 사용하여 GeoJSON 데이터를 읽을 때마다 svg의 path 요소로 그립니다.
mapping.js
(function() {
var g,
width = 900,
height = 650;
// svg要素を作成し、データの受け皿となるg要素を追加している
map = d3.select('#map').append('svg')
.attr('width', width)
.attr('height', height)
.append('g');
// 同じディレクトリにあるgeojsonファイルをhttp経由で読み込む
d3.json("kanagawa.json", function(json) {
var projection,
path;
// 投影を処理する関数を用意する。データからSVGのPATHに変換するため。
projection = d3.geo.mercator()
.scale(45000)
.center(d3.geo.centroid(json)) // データから中心点を計算
.translate([width / 2, height / 2]);
// pathジェネレータ関数
path = d3.geo.path().projection(projection);
// これがenterしたデータ毎に呼び出されpath要素のd属性に
// geoJSONデータから変換した値を入れる
map.selectAll('path')
.data(json.features)
.enter()
.append('path')
.attr('d', path)
.attr("fill", function(d){
// 適当に色を塗るなど
return "hsl(0,0%,80%)";
})
.attr("stroke","hsl(80,100%,0%)" )
.on('mouseover', function(d){
// mouseoverの時のインタラクション
})
.on('click', function(d) {
// clickされた時のインタラクション
});
});
})();
이것에 다소의 색채를 한 것이 이쪽의 샘플 페이지 입니다. 꼭 봐 주세요.
다음 번 예고
지도도 그릴 수 있게 되었으므로 다음번에는 데이터를 플롯하여 새로운 지견을 얻을 수 있는 비주얼라이즈를 목표로 합니다! (아마!)
D3.js Advent Calendar 2013은 이쪽!
Reference
이 문제에 관하여(D3.js와 Open Data ~ 그 1 지도를 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sawamur@github/items/ec32237bcbaaba94108d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
