[javascript] D3.js를 이용한 지도 시각화

07 Dec 2023

javascript

지도 시각화는 데이터를 지리적으로 표현하는 강력한 도구입니다. D3.js(D3 stands for Data-Driven Documents)는 데이터 시각화를 위한 자바스크립트 라이브러리로, 지도 시각화를 구현하는 데 매우 유용합니다. 이번 포스트에서는 D3.js를 이용하여 지도 시각화를 해보겠습니다.

D3.js 설치

먼저, D3.js를 설치해야 합니다. D3.js는 npm 혹은 cdn을 통해 설치할 수 있습니다. 아래의 명령어로 npm을 사용하여 설치해 보겠습니다.

npm install d3

GeoJSON 데이터

지도 시각화를 위해 GeoJSON 형식의 데이터가 필요합니다. GeoJSON은 지리적인 위치와 항목의 속성 정보를 담을 수 있는 데이터 형식입니다. 예를 들어, 다음과 같은 GeoJSON 데이터를 사용해 보겠습니다.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [125.6, 10.1]
      },
      "properties": {
        "name": "Location A"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [126.0, 11.0]
      },
      "properties": {
        "name": "Location B"
      }
    }
  ]
}

GeoJSON 데이터는 FeatureCollection으로 시작하며, features 배열에 각각의 위치 정보를 담고 있습니다. 각 위치 정보는 type, geometry, properties로 구성되어 있습니다.

지도 시각화 구현

이제 D3.js를 사용하여 GeoJSON 데이터를 지도로 시각화해 보겠습니다. 아래의 예제 코드를 참고해주세요.

// SVG 요소 생성
const svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 지도 투영 방식 설정
const projection = d3.geoMercator()
  .scale(100)
  .center([129, 35])
  .translate([250, 250]);

// 지도 경로 생성
const path = d3.geoPath().projection(projection);

// GeoJSON 데이터 로드
d3.json("data.json").then(function(data) {
  // 데이터 바인딩
  svg.selectAll("path")
    .data(data.features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("fill", "steelblue");
});

위의 코드에서는 D3.js를 사용하여 SVG 요소를 생성하고, 투영 방식을 설정하고, GeoJSON 데이터를 로드한 뒤 데이터를 바인딩하여 지도를 그리고 있습니다. 결과적으로, 지도의 각 위치는 steelblue 색상으로 표시됩니다.

마무리

D3.js를 사용하여 지도 시각화를 구현하는 방법을 알아보았습니다. D3.js는 다양한 데이터 시각화에 유용한 기능들을 제공하므로, 데이터 시각화 작업을 할 때는 D3.js를 고려해보시기 바랍니다.

D3.js 설치

GeoJSON 데이터

지도 시각화 구현

마무리

참고 자료