แผนที่สู่ความสมบูรณ์แบบ: การใช้ D3.js เพื่อสร้างแผนที่เว็บที่สวยงาม

เผยแพร่แล้ว: 2022-03-11

Data Driven Documents หรือ D3.js คือ "ไลบรารี JavaScript สำหรับจัดการเอกสารตามข้อมูล" หรือพูดง่ายๆ ก็คือ D3.js คือไลบรารีการสร้างภาพข้อมูล ได้รับการพัฒนาโดย Mike Bostock โดยมีแนวคิดที่จะเชื่อมช่องว่างระหว่างการแสดงข้อมูลแบบคงที่กับการแสดงข้อมูลเชิงโต้ตอบและภาพเคลื่อนไหว

D3 เป็นห้องสมุดที่ทรงพลังพร้อมการใช้งานมากมาย ในบทช่วยสอนนี้ ฉันจะพูดถึงแอปพลิเคชันที่น่าสนใจเป็นพิเศษอย่างหนึ่งของ D3: การสร้างแผนที่ เราจะฝ่าฟันความท้าทายทั่วไปในการสร้างแผนที่เว็บที่มีประโยชน์และให้ข้อมูล และแสดงให้เห็นว่าในแต่ละกรณี D3.js มอบทุกสิ่งที่จำเป็นสำหรับนักพัฒนา JavaScript ที่มีความสามารถเพื่อทำให้แผนที่ดูสวยงามได้อย่างไร

D3.js ใช้ทำอะไร

D3.js สามารถผูกข้อมูลที่ต้องการใดๆ กับ Document Object Model (DOM) จากนั้นใช้ JavaScript, CSS, HTML และ SVG การแปลงกับเอกสารที่ขับเคลื่อนโดยข้อมูลนั้น ผลลัพธ์อาจเป็นเอาต์พุต HTML อย่างง่าย หรือแผนภูมิ SVG เชิงโต้ตอบที่มีพฤติกรรมแบบไดนามิก เช่น ภาพเคลื่อนไหว การเปลี่ยนภาพ และการโต้ตอบ การแปลงและการแสดงผลข้อมูลทั้งหมดเสร็จสิ้นในฝั่งไคลเอ็นต์ในเบราว์เซอร์

อย่างง่ายที่สุด D3.js สามารถใช้เพื่อจัดการ DOM ได้ ต่อไปนี้คือตัวอย่างง่ายๆ ที่ใช้ D3.js เพื่อเพิ่มองค์ประกอบย่อหน้าลงในเนื้อหาเอกสารเปล่า พร้อมข้อความ "Hello World":

 <!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 นั้นค่อนข้างง่าย

นี่คือตัวอย่าง D3.js ที่จะวาดแผนที่โลกตามข้อมูลที่จัดเก็บไว้ในรูปแบบข้อมูลที่เข้ากันได้กับ JSON คุณเพียงแค่ต้องกำหนดขนาดของแผนที่และการฉายภาพทางภูมิศาสตร์เพื่อใช้ (เพิ่มเติมในภายหลัง) กำหนดองค์ประกอบ 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 ขจัดความซ้ำซ้อนด้วยการจัดเก็บข้อมูลเชิงสัมพันธ์ระหว่างคุณลักษณะทางภูมิศาสตร์ ไม่ใช่แค่ข้อมูลเชิงพื้นที่ ผลที่ได้คือ รูปทรงมีขนาดกะทัดรัดและรวมเข้าด้วยกันมากขึ้น โดยที่หน้าลายใช้คุณลักษณะร่วมกัน ซึ่งส่งผลให้ไฟล์ TopoJSON ทั่วไปมีขนาดเล็กกว่า 80% เมื่อเทียบกับ GeoJSON ที่เทียบเท่า

ตัวอย่างเช่น เมื่อให้แผนที่ที่มีหลายประเทศที่มีพรมแดนติดกัน ส่วนร่วมของพรมแดนจะถูกจัดเก็บไว้สองครั้งใน GeoJSON หนึ่งครั้งสำหรับแต่ละประเทศที่ด้านใดด้านหนึ่งของพรมแดน ใน TopoJSON จะเป็นเพียงบรรทัดเดียว

ห้องสมุดแผนที่: Google Maps และ Leaflet.js

ปัจจุบัน ห้องสมุดแผนที่ยอดนิยมคือ Google Maps และ Leaflet พวกเขาได้รับการออกแบบเพื่อให้ได้รับ "แผนที่ลื่น" บนเว็บอย่างรวดเร็วและง่ายดาย “แผนที่ลื่น” เป็นคำที่อ้างถึงแผนที่เว็บที่ขับเคลื่อนด้วย JavaScript ที่ทันสมัยซึ่งอนุญาตให้ซูมและเลื่อนไปรอบๆ แผนที่

แผ่นพับเป็นทางเลือกที่ดีสำหรับ Google Maps เป็นไลบรารี JavaScript แบบโอเพนซอร์สที่ออกแบบมาเพื่อสร้างแผนที่เชิงโต้ตอบที่เหมาะกับอุปกรณ์เคลื่อนที่ โดยคำนึงถึงความเรียบง่าย ประสิทธิภาพ และความสามารถในการใช้งาน แผ่นพับจะดีที่สุดเมื่อใช้ประโยชน์จากแผนที่แบบแรสเตอร์ที่มีให้เลือกมากมายซึ่งมีอยู่ในอินเทอร์เน็ต และนำความเรียบง่ายในการทำงานกับแผนที่แบบเรียงต่อกันและความสามารถในการนำเสนอของแผนที่

สามารถใช้แผ่นพับอย่างประสบความสำเร็จเมื่อรวมกับคุณลักษณะการจัดการข้อมูลของ D3.js และสำหรับการใช้ D3.js สำหรับกราฟิกแบบเวกเตอร์ การรวมเข้าด้วยกันจะทำให้เกิดสิ่งที่ดีที่สุดในห้องสมุดทั้งสองแห่ง

Google แผนที่จะรวมเข้ากับ D3.js ได้ยากกว่า เนื่องจาก Google Maps ไม่ใช่โอเพ่นซอร์ส เป็นไปได้ที่จะใช้ Google Maps และ D3 ร่วมกัน แต่ส่วนใหญ่จะจำกัดเฉพาะการซ้อนทับข้อมูลด้วย D3.js บนแผนที่พื้นหลังของ Google Maps การบูรณาการที่ลึกซึ้งยิ่งขึ้นนั้นเป็นไปไม่ได้จริง ๆ หากไม่มีการแฮ็ก

การฉายภาพ - นอกเหนือจาก Mercator ทรงกลม

คำถามเกี่ยวกับวิธีการฉายภาพแผนที่ของโลกทรงกลม 3 มิติลงบนพื้นผิว 2 มิตินั้นเป็นปัญหาที่เก่าและซับซ้อน การเลือกการฉายภาพที่ดีที่สุดสำหรับแผนที่คือการตัดสินใจที่สำคัญสำหรับแผนที่เว็บทุกแห่ง

ในบทช่วยสอน D3.js แผนที่โลกอย่างง่ายด้านบน เราใช้ระบบพิกัดการฉายภาพ Spherical Mercator โดยการเรียก d3.geo.mercator() การฉายภาพนี้เรียกอีกอย่างว่า Web Mercator Google ฉายภาพนี้ให้เป็นที่นิยมเมื่อพวกเขาเปิดตัว Google Maps ต่อมา บริการเว็บอื่นๆ ก็นำการฉายภาพมาใช้เช่นกัน เช่น OpenStreetMap, Bing Maps, Here Maps และ MapQuest สิ่งนี้ทำให้ Spherical Mercator เป็นที่นิยมอย่างมากสำหรับแผนที่ลื่นออนไลน์

ไลบรารีการทำแผนที่ทั้งหมดรองรับการฉายภาพ Spherical Mercator แบบสำเร็จรูป หากคุณต้องการใช้การฉายภาพแบบอื่น คุณจะต้องใช้ไลบรารี Proj4js ซึ่งสามารถแปลงจากระบบพิกัดหนึ่งไปยังอีกระบบหนึ่งได้ ในกรณีของ Leaflet จะมีปลั๊กอิน Proj4Leaflet ในกรณีของ Google Maps ก็ไม่มีอะไร

D3.js นำการประมาณการการทำแผนที่ไปสู่อีกระดับด้วยการสนับสนุนในตัวสำหรับการฉายภาพทางภูมิศาสตร์ที่แตกต่างกันมากมาย D3.js จำลองการฉายภาพตามภูมิศาสตร์เป็นการแปลงทางเรขาคณิตเต็มรูปแบบ ซึ่งหมายความว่าเมื่อเส้นตรงถูกฉายเป็นเส้นโค้ง D3.js จะใช้การสุ่มตัวอย่างแบบปรับได้ที่กำหนดค่าได้ใหม่เพื่อแบ่งเส้นแบ่งย่อยและขจัดสิ่งปลอมปนในการฉายภาพ ปลั๊กอิน Extended Geographic Projections D3 ทำให้จำนวนการฉายภาพที่รองรับมีมากกว่า 40 รายการ คุณยังสามารถสร้างการฉายภาพแบบกำหนดเองใหม่ทั้งหมดโดยใช้ d3.geo.projection และ d3.geo.projectionMutator

แผนที่แรสเตอร์

ดังที่ได้กล่าวไว้ก่อนหน้านี้ จุดแข็งหลักประการหนึ่งของ D3.js คือการทำงานกับข้อมูลเวกเตอร์ หากต้องการใช้ข้อมูลแรสเตอร์ จะมีตัวเลือกในการรวม D3.js กับ Leaflet แต่ยังมีตัวเลือกให้ทำทุกอย่างด้วย D3.js โดยใช้ d3.geo.tile เพื่อสร้างแผนที่ที่ลื่นไหล แม้จะมีเพียง D3.js เพียงอย่างเดียว ผู้คนก็ยังทำสิ่งที่น่าทึ่งด้วยแผนที่แรสเตอร์

การจัดการเวกเตอร์ได้ทันที

หนึ่งในความท้าทายที่ใหญ่ที่สุดในการทำแผนที่แบบคลาสสิกคือการวางภาพรวมของแผนที่ คุณต้องการมีรูปทรงเรขาคณิตที่มีรายละเอียดมากที่สุด แต่ข้อมูลนั้นจำเป็นต้องปรับให้เข้ากับขนาดของแผนที่ที่แสดง การมีความละเอียดของข้อมูลสูงเกินไปจะเพิ่มเวลาในการดาวน์โหลดและทำให้การเรนเดอร์ช้าลง ในขณะที่ความละเอียดต่ำเกินไปจะทำลายรายละเอียดและความสัมพันธ์เชิงทอพอโลยี แผนที่ที่ไม่ลื่นไหลโดยใช้ข้อมูลเวกเตอร์อาจเกิดปัญหาใหญ่กับการวางภาพรวมของแผนที่

ทางเลือกหนึ่งคือการทำแผนที่ให้เป็นภาพรวมก่อน: เพื่อให้มีชุดข้อมูลที่แตกต่างกันในความละเอียดที่ต่างกัน แล้วแสดงชุดข้อมูลที่เหมาะสมสำหรับมาตราส่วนที่เลือกในปัจจุบัน แต่สิ่งนี้จะเพิ่มจำนวนชุดข้อมูล ทำให้การบำรุงรักษาข้อมูลยุ่งยาก และมีแนวโน้มที่จะเกิดข้อผิดพลาด แต่ไลบรารีการทำแผนที่ส่วนใหญ่จะจำกัดตัวเลือกนี้

ทางออกที่ดีกว่าคือการทำแผนที่ทั่วไปในทันที และนี่คือ D3.js อีกครั้งด้วยคุณสมบัติการจัดการข้อมูลอันทรงพลัง D3.js เปิดใช้งานการลดความซับซ้อนของบรรทัดในเบราว์เซอร์

ฉันต้องการมากขึ้น!

D3.js ไม่ใช่เรื่องง่ายที่จะเชี่ยวชาญและมีช่วงการเรียนรู้ที่สูงชัน จำเป็นต้องทำความคุ้นเคยกับเทคโนโลยีมากมาย เช่น ออบเจ็กต์ JavaScript, jQuery chaining syntax, SVG และ CSS และแน่นอน D3's API ยิ่งไปกว่านั้น เราจำเป็นต้องมีทักษะการออกแบบเล็กน้อยเพื่อสร้างกราฟิกที่สวยงามในตอนท้าย โชคดีที่ D3.js มีชุมชนขนาดใหญ่ และมีทรัพยากรมากมายให้ผู้คนเข้าไปสำรวจ จุดเริ่มต้นที่ดีสำหรับการเรียนรู้ D3 คือบทช่วยสอนเหล่านี้

หากคุณชอบเรียนรู้โดยดูตัวอย่าง Mike Bostock ได้แชร์ตัวอย่าง D3.js มากกว่า 600 ตัวอย่างบนหน้าเว็บของเขา ตัวอย่าง D3.js ทั้งหมดมีที่เก็บ git สำหรับการควบคุมเวอร์ชัน และสามารถ forkable โคลนได้ และแสดงความคิดเห็นได้

หากคุณกำลังใช้ CartoDB คุณจะดีใจที่ได้ยินว่า CartoDB ทำให้แผนที่ D3 เป็นเรื่องง่าย

และสำหรับโบนัสเล็กๆ น้อยๆ ในตอนท้าย นี่คือตัวอย่างหนึ่งที่ฉันชื่นชอบซึ่งแสดงให้เห็นถึงสิ่งมหัศจรรย์ที่ D3 สามารถทำได้:

  • Earth ซึ่งเป็นแผนที่ลม 3 มิติแบบเคลื่อนไหวทั่วโลกของทั้งโลกที่สร้างด้วย D3.js Earth คือการแสดงภาพสภาพอากาศทั่วโลก โดยอิงจากการพยากรณ์อากาศที่ทำโดยซูเปอร์คอมพิวเตอร์ที่ National Centers for Environmental Prediction, NOAA / National Weather Service และแปลงเป็น JSON คุณสามารถปรับแต่งข้อมูลที่แสดง เช่น ความสูงสำหรับการอ่านความเร็วลม เปลี่ยนข้อมูลที่ซ้อนทับ และแม้กระทั่งเปลี่ยนการฉายภาพ Earth
ที่เกี่ยวข้อง: การสำรวจเครื่องมือการทำแผนที่ออนไลน์ที่ดีที่สุดสำหรับนักพัฒนาเว็บ: แผนงานสู่แผนงาน