[D3.js] GEO 시각화 차트

Geo 데이터 출처 : https://bl.ocks.org/d3indepth/c7dabcad61f8c4398130305a2035decd
d3indepth’s Block c7dabcad61f8c4398130305a2035decd
Updated July 8, 2018

오늘은 Geo 차트를 만들어 보는 시간을 갖도록 하겠습니다. 우선 지도 데이터를 찾아보다가 d3indepth’s Block 의 예제에 있는 json 데이터 파일을 발견하여 그 데이터를 이용하여 D3.js에서 사용하는 함수를 이용하여 시각화를 간단히 해보았습니다.

Geo 데이터

https://gist.githubusercontent.com/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7/raw/c58cede8dab4673c91a3db702d50f7447b373d98/ne_110m_land.json

위 주소로 Geo 데이터 하나를 링크해 놓았더군요. 여러분들이 직접 Geo 데이터를 제공해주는 곳에 가셔서 받으셔도 되지만 이 외국분이 외부로 링크를 걸어놓은 주소지의 json 데이터 파일을 실험헤 활용 합니다.

Geo 데이터 읽기

d3.json("데이터 주소", 호출함수);

데이터 주소의 데이터를 읽어와 호출함수을 수행 됩니다.

데이터는geojson.features 들어 있네요.

Geo 세팅

    //Geo 세팅
    var projection = d3.geoMercator()
        .scale(1000)    //스케일
        .rotate([-10, 1, 0]) //지도 회전
        .center([127,37.6]); //서울 중심좌표
    
    var path = d3.geoPath().projection(projection);

projection의 인자를 우선 세팅하는데 보시는 것처럼 크기, 위치회전, 출력되는 좌표로 기본적인것만 세팅한 뒤 path의 실제 이 한줄로 세팅이 끝납니다.

Geo 출력

    function render(geojson) {
        svg.selectAll("path").data(geojson.features)
            .enter()
            .append("path")
            .attr("d", path) 
            .attr("fill", "blue")       
    }

출력은 path로 geojsion.features의 데이터들을 추가하고 해당 색은 blue로 지정합니다. 일반적인 도형과 같은 것들의 스타일을 지정할 때는 각각의 다양한 속성을 지정하셔도 됩니다.

[종합소스]

<body>
<script src="https://d3js.org/d3.v4.min.js"></script> 
<script>
  
    //Geo 세팅
    var projection = d3.geoMercator()
        .scale(1000)    //스케일
        .rotate([-10, 1, 0]) //지도 회전
        .center([127,37.6]); //서울 중심좌표  
    var path = d3.geoPath().projection(projection);　
    
  //출력
    var svg = d3.select("body").append("svg")
         .attr("width", 600)
         .attr("height", 500)
         .style("background-color","yellow");
    
    function render(geojson) {
        svg.selectAll("path").data(geojson.features)
            .enter()
            .append("path")
            .attr("d", path) 
            .attr("fill", "blue")       
    }  
    d3.json("https://gist.githubusercontent.com/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7/raw/c58cede8dab4673c91a3db702d50f7447b373d98/ne_110m_land.json", render);    
</script>
</body>