완벽을 향한 지도: D3.js를 사용하여 아름다운 웹 지도 만들기

게시 됨: 2022-03-11

데이터 기반 문서 또는 D3.js는 "데이터를 기반으로 문서를 조작하기 위한 JavaScript 라이브러리"입니다. 또는 더 간단히 말하면 D3.js는 데이터 시각화 라이브러리입니다. Mike Bostock은 데이터의 정적 표시와 대화형 및 애니메이션 데이터 시각화 사이의 격차를 해소하기 위해 개발했습니다.

D3는 다양한 용도로 사용되는 강력한 라이브러리입니다. 이 자습서에서는 D3의 특히 매력적인 응용 프로그램인 지도 만들기에 대해 설명합니다. 유용하고 유익한 웹 지도를 구축하는 일반적인 문제를 살펴보고 각 경우에 D3.js가 유능한 JavaScript 개발자에게 지도를 아름답게 보이게 하는 데 필요한 모든 것을 제공하는 방법을 보여줍니다.

D3.js는 무엇에 사용됩니까?

D3.js는 임의의 데이터를 DOM(Document Object Model)에 바인딩한 다음 JavaScript, CSS, HTML 및 SVG를 사용하여 해당 데이터에 의해 구동되는 문서에 변환을 적용할 수 있습니다. 결과는 간단한 HTML 출력 또는 애니메이션, 전환 및 상호 작용과 같은 동적 동작이 있는 대화형 SVG 차트가 될 수 있습니다. 모든 데이터 변환 및 렌더링은 브라우저에서 클라이언트 측에서 수행됩니다.

가장 간단한 방법으로 D3.js를 사용하여 DOM을 조작할 수 있습니다. 다음은 "Hello World" 텍스트가 있는 빈 문서 본문에 단락 요소를 추가하는 데 D3.js를 사용하는 간단한 예입니다.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Hello World</title> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <script type="text/javascript"> d3.select("body").append("p").text("Hello World"); </script> </body> </html>

그러나 D3.js의 강점은 데이터 시각화 기능에 있습니다. 예를 들어 차트를 만드는 데 사용할 수 있습니다. 애니메이션 차트를 만드는 데 사용할 수 있습니다. 서로 다른 연결된 차트를 통합하고 애니메이션하는 데에도 사용할 수 있습니다.

웹 지도 및 지리 데이터 시각화를 위한 D3

그러나 D3.js는 DOM 조작 또는 차트 그리기 이상의 용도로 사용할 수 있습니다. D3.js는 지리 정보를 처리할 때 매우 강력합니다. 지리 데이터를 조작하고 표시하는 것은 매우 까다로울 수 있지만 D3.js로 지도를 작성하는 것은 매우 간단합니다.

다음은 JSON 호환 데이터 형식으로 저장된 데이터를 기반으로 세계 지도를 그리는 D3.js 예제입니다. 지도의 크기와 사용할 지리 투영법을 정의하고(자세한 내용은 나중에) SVG 요소를 정의하고 이를 DOM에 추가하고 JSON을 사용하여 지도 데이터를 로드하기만 하면 됩니다. 지도 스타일은 CSS를 통해 수행됩니다.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 World Map</title> <style> path { stroke: white; stroke-width: 0.5px; fill: black; } </style> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v0.min.js"></script> </head> <body> <script type="text/javascript"> var width = 900; var height = 600; var projection = d3.geo.mercator(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var path = d3.geo.path() .projection(projection); var g = svg.append("g"); d3.json("world-110m2.json", function(error, topology) { g.selectAll("path") .data(topojson.object(topology, topology.objects.countries) .geometries) .enter() .append("path") .attr("d", path) }); </script> </body> </html>
관련: 업데이트 가능한 D3.js 차트를 향하여

D3에 대한 지리 데이터

이 D3.js 튜토리얼의 경우 지도 작성은 JSON 형식, 특히 GeoJSON 및 TopoJSON 사양으로 형식이 지정된 데이터에서 가장 잘 작동한다는 점을 염두에 두십시오.

GeoJSON은 "다양한 지리 데이터 구조를 인코딩하기 위한 형식"입니다. 이름/값 쌍의 기능 모음으로 그룹화된 이산 지오메트리 개체를 나타내도록 설계되었습니다.

TopoJSON은 GeoJSON의 확장으로, 기하 도형이 "호라고 하는 공유 선 세그먼트에서 함께 연결"되는 토폴로지를 인코딩할 수 있습니다. TopoJSON은 단순한 공간 정보가 아닌 지리적 특징 간의 관계 정보를 저장하여 중복성을 제거합니다. 결과적으로 지오메트리가 피쳐를 공유하는 경우 지오메트리가 훨씬 더 간결하고 결합됩니다. 그 결과 GeoJSON 파일보다 80% 더 작은 일반 TopoJSON 파일이 생성됩니다.

예를 들어, 서로 경계를 이루는 여러 국가가 있는 지도가 주어지면 경계의 공유 부분은 경계 양쪽에 있는 각 국가에 대해 한 번씩 GeoJSON에 두 번 저장됩니다. TopoJSON에서는 한 줄에 불과합니다.

지도 라이브러리: Google 지도 및 Leaflet.js

오늘날 가장 인기 있는 매핑 라이브러리는 Google 지도와 전단지입니다. 웹에서 빠르고 쉽게 "슬리피 맵"을 얻도록 설계되었습니다. "슬리피 지도"는 지도 주변을 확대/축소하고 이동할 수 있는 최신 JavaScript 기반 웹 지도를 나타내는 용어입니다.

전단지는 Google 지도의 훌륭한 대안입니다. 단순성, 성능 및 사용성을 염두에 두고 모바일 친화적인 대화형 지도를 만들도록 설계된 오픈 소스 JavaScript 라이브러리입니다. Leaflet은 인터넷에서 구할 수 있는 다양한 래스터 기반 지도를 활용할 때 가장 적합하며 타일 지도 작업의 단순성과 해당 프레젠테이션 기능을 제공합니다.

Leaflet은 D3.js의 데이터 조작 기능과 결합하고 벡터 기반 그래픽에 D3.js를 활용하는 경우 큰 성공을 거둘 수 있습니다. 이들을 결합하면 두 라이브러리 모두에서 최상의 결과를 얻을 수 있습니다.

Google 지도는 오픈 소스가 아니기 때문에 Google 지도는 D3.js와 결합하기가 더 어렵습니다. Google 지도와 D3를 함께 사용할 수 있지만 이는 대부분 Google 지도 배경 지도 위에 D3.js로 데이터를 오버레이하는 것으로 제한됩니다. 해킹 없이는 더 깊은 통합이 불가능합니다.

투영 - 구형 메르카토르 너머

3차원 구형 지구의 지도를 2차원 표면에 투영하는 방법에 대한 문제는 오래되고 복잡한 문제입니다. 지도에 가장 적합한 투영법을 선택하는 것은 모든 웹 지도에 대해 내려야 할 중요한 결정입니다.

위의 간단한 세계 지도 D3.js 튜토리얼에서 d3.geo.mercator() 를 호출하여 구형 메르카토르 투영 좌표계를 사용했습니다. 이 투영법은 Web Mercator라고도 합니다. 이 투영법은 Google이 Google 지도를 도입했을 때 대중화되었습니다. 나중에 OpenStreetMap, Bing Maps, Here Maps 및 MapQuest와 같은 다른 웹 서비스도 프로젝션을 채택했습니다. 이로 인해 Spherical Mercator는 온라인 미끄러운 지도용으로 매우 인기 있는 투영법이 되었습니다.

모든 매핑 라이브러리는 기본적으로 구형 메르카토르 투영을 지원합니다. 다른 투영법을 사용하려면 예를 들어 한 좌표계에서 다른 좌표계로 변환할 수 있는 Proj4js 라이브러리를 사용해야 합니다. Leaflet의 경우 Proj4Leaflet 플러그인이 있습니다. 구글 지도의 경우, 글쎄요, 아무것도 없습니다.

D3.js는 다양한 지리적 투영에 대한 내장 지원을 통해 지도 제작 투영을 완전히 새로운 수준으로 끌어 올립니다. D3.js는 지리적 투영을 완전한 기하학적 변환으로 모델링합니다. 즉, 직선이 곡선에 투영될 때 D3.js는 구성 가능한 적응형 리샘플링을 적용하여 선을 세분화하고 투영 아티팩트를 제거합니다. Extended Geographic Projections D3 플러그인은 지원되는 프로젝션 수를 40개 이상으로 가져옵니다. d3.geo.projection 및 d3.geo.projectionMutator 를 사용하여 완전히 새로운 사용자 지정 프로젝션을 생성하는 것도 가능합니다.

래스터 맵

앞서 언급했듯이 D3.js의 주요 장점 중 하나는 벡터 데이터 작업에 있습니다. 래스터 데이터를 사용하기 위해 D3.js와 Leaflet을 결합하는 옵션이 있습니다. 그러나 d3.geo.tile을 사용하여 미끄러운 지도를 생성하는 D3.js만으로 모든 작업을 수행할 수 있는 옵션도 있습니다. D3.js만으로도 사람들은 래스터 맵으로 놀라운 일을 하고 있습니다.

즉석에서 벡터 조작

고전 지도 제작의 가장 큰 과제 중 하나는 지도 일반화입니다. 가능한 한 많은 상세한 지오메트리를 원하지만 해당 데이터는 표시된 지도의 축척에 맞게 조정되어야 합니다. 데이터 해상도가 너무 높으면 다운로드 시간이 늘어나고 렌더링 속도가 느려지는 반면 해상도가 너무 낮으면 세부 정보와 토폴로지 관계가 손상됩니다. 벡터 데이터를 사용하는 미끄러운 지도는 지도 일반화에 큰 문제가 발생할 수 있습니다.

한 가지 옵션은 미리 맵 일반화를 수행하는 것입니다. 다른 해상도의 다른 데이터 세트를 가진 다음 현재 선택된 축척에 대한 적절한 데이터 세트를 표시합니다. 그러나 이는 데이터 세트를 늘리고 데이터 유지 관리를 복잡하게 하며 오류가 발생하기 쉽습니다. 그러나 대부분의 매핑 라이브러리는 이 옵션으로 제한됩니다.

더 나은 솔루션은 즉석에서 맵 일반화를 수행하는 것입니다. 그리고 강력한 데이터 조작 기능을 갖춘 D3.js가 다시 등장했습니다. D3.js를 사용하면 브라우저에서 라인 단순화를 수행할 수 있습니다.

내가 더 원해!

D3.js는 마스터하기가 쉽지 않으며 학습 곡선이 가파르다. JavaScript 개체, jQuery 연결 구문, SVG 및 CSS, 물론 D3의 API와 같은 많은 기술에 익숙해야 합니다. 게다가 멋진 그래픽을 만들기 위해서는 약간의 디자인 기술이 필요합니다. 운 좋게도 D3.js에는 큰 커뮤니티가 있으며 사람들이 파고들 수 있는 많은 리소스가 있습니다. D3 학습을 위한 훌륭한 출발점은 이 튜토리얼입니다.

예제를 살펴보며 배우는 것을 좋아한다면 Mike Bostock은 자신의 웹 페이지에서 600개 이상의 D3.js 예제를 공유했습니다. 모든 D3.js 예제에는 버전 제어를 위한 git 저장소가 있으며 분기, 복제 및 주석 처리가 가능합니다.

CartoDB를 사용하고 있다면 CartoDB가 D3 지도를 쉽게 만든다는 소식을 듣게 되어 기쁩니다.

그리고 마지막에 약간의 보너스를 위해 여기 D3가 할 수 있는 놀라운 것들을 보여주는 내가 가장 좋아하는 예 중 하나가 있습니다.

  • 지구, D3.js로 만든 전 세계의 글로벌 애니메이션 3D 바람 지도. Earth는 국립 환경 예측 센터(National Centers for Environmental Prediction, NOAA/National Weather Service)의 슈퍼컴퓨터가 작성한 일기 예보를 기반으로 하고 JSON으로 변환한 전 세계 기상 상태를 시각화한 것입니다. 풍속 판독값의 높이와 같은 표시된 데이터를 사용자 정의하고, 오버레이된 데이터를 변경하고, 지구 투영도 변경할 수 있습니다.
관련: 웹 개발자를 위한 최고의 온라인 매핑 도구 설문조사: 로드맵에 대한 로드맵