D3.js - ภูมิศาสตร์

พิกัดเชิงพื้นที่มักใช้สำหรับข้อมูลสภาพอากาศหรือประชากร D3.js มีเครื่องมือสามอย่างสำหรับข้อมูลทางภูมิศาสตร์ -

  • Paths - สร้างพิกเซลสุดท้าย

  • Projections - เปลี่ยนพิกัดทรงกลมเป็นพิกัดคาร์ทีเซียนและ

  • Streams - พวกเขาเร่งความเร็ว

ก่อนที่จะเรียนรู้ว่าภูมิศาสตร์ใน D3.js คืออะไรเราควรเข้าใจคำศัพท์สองคำต่อไปนี้ -

  • D3 Geo Path และ
  • Projections

ให้เราหารือเกี่ยวกับคำศัพท์ทั้งสองนี้โดยละเอียด

เส้นทางภูมิศาสตร์ D3

มันเป็นตัวสร้างเส้นทางภูมิศาสตร์ GeoJSON สร้างสตริงข้อมูลเส้นทาง SVG หรือแสดงเส้นทางไปยัง Canvas ขอแนะนำ Canvas สำหรับการคาดการณ์แบบไดนามิกหรือเชิงโต้ตอบเพื่อปรับปรุงประสิทธิภาพ ในการสร้าง D3 Geo Path Data Generator คุณสามารถเรียกใช้ฟังก์ชันต่อไปนี้

d3.geo.path()

ที่นี่ d3.geo.path() ฟังก์ชันตัวสร้างเส้นทางช่วยให้เราสามารถเลือกแผนที่ฉายที่เราต้องการใช้สำหรับการแปลจากพิกัดภูมิศาสตร์เป็นพิกัดคาร์ทีเซียน

ตัวอย่างเช่นหากเราต้องการแสดงรายละเอียดแผนที่ของอินเดียเราสามารถกำหนดเส้นทางดังที่แสดงด้านล่าง

var path = d3.geo.path()
svg.append("path")
   .attr("d", path(states))

ประมาณการ

การคาดการณ์จะเปลี่ยนรูปทรงเรขาคณิตหลายเหลี่ยมทรงกลมให้เป็นรูปเรขาคณิตเหลี่ยมเชิงระนาบ D3 มีการใช้งานการฉายภาพต่อไปนี้

  • Azimuthal - การคาดการณ์ของ Azimuthal จะฉายทรงกลมลงบนเครื่องบินโดยตรง

  • Composite - คอมโพสิตประกอบด้วยการคาดการณ์หลายอย่างที่ประกอบเป็นจอแสดงผลเดียว

  • Conic - ฉายทรงกลมลงบนกรวยแล้วคลายกรวยลงบนระนาบ

  • Cylindrical - เส้นโครงทรงกระบอกจะฉายทรงกลมลงบนทรงกระบอกที่บรรจุแล้วคลายทรงกระบอกลงบนระนาบ

ในการสร้างการฉายภาพใหม่คุณสามารถใช้ฟังก์ชันต่อไปนี้

d3.geoProjection(project)

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

var width = 400
var height = 400
var projection = d3.geo.orthographic() 
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
   .scale(100)
   .rotate([100,0,0])
   .translate([width/2, height/2])
   .clipAngle(45);

ที่นี่เราสามารถใช้การคาดการณ์ใด ๆ ข้างต้น ให้เราพิจารณาโดยสังเขปของการคาดการณ์เหล่านี้

  • d3.geo.orthographic()- การฉายภาพออร์โธกราฟิกเป็นการฉายภาพแนวราบที่เหมาะสำหรับการแสดงซีกโลกเดียว มุมมองที่ไม่มีที่สิ้นสุด

  • d3.geo.gnomonic() - การฉายภาพ gnomonic คือการฉายภาพแนวราบที่ฉายภาพวงกลมขนาดใหญ่เป็นเส้นตรง

  • d3.geo.equirectangular()- รูปทรงเท่ากันเป็นการฉายภาพทางภูมิศาสตร์ที่ง่ายที่สุด ฟังก์ชันเอกลักษณ์ ไม่ใช่ทั้งพื้นที่เท่ากันหรือตามรูปแบบ แต่บางครั้งก็ใช้สำหรับข้อมูลแรสเตอร์

  • d3.geo.mercator() - การฉายภาพ Spherical Mercator มักใช้กับไลบรารีการทำแผนที่แบบเรียงต่อกัน

  • d3.geo.transverseMercator() - การฉายภาพ Transverse Mercator

ตัวอย่างการทำงาน

ให้เราสร้างแผนที่ของอินเดียในตัวอย่างนี้ ในการดำเนินการนี้เราควรปฏิบัติตามขั้นตอนต่อไปนี้

Step 1 - Apply styles - ให้เราเพิ่มสไตล์ในแผนที่โดยใช้รหัสด้านล่าง

<style>
   path {
      stroke: white;
      stroke-width: 0.5px;
      fill: grey;
   }
   
   .stateTN { fill: red; }
   .stateAP { fill: blue; }
   .stateMP{ fill: green; }
</style>

ที่นี่เราได้ใช้สีเฉพาะสำหรับรัฐ TN, AP และ MP

Step 2 - Include topojson script - TopoJSON เป็นส่วนขยายของ GeoJSON ที่เข้ารหัสโทโพโลยีซึ่งกำหนดไว้ด้านล่าง

<script src = "http://d3js.org/topojson.v0.min.js"></script>

เราสามารถรวมสคริปต์นี้ไว้ในการเข้ารหัสของเรา

Step 3 - Define variables - เพิ่มตัวแปรในสคริปต์ของคุณโดยใช้โค้ดด้านล่าง

var width = 600;
var height = 400;
var projection = d3.geo.mercator()
   .center([78, 22])
   .scale(680)
   .translate([width / 2, height / 2]);

ที่นี่ความกว้าง SVG คือ 600 และความสูง 400 หน้าจอเป็นพื้นที่สองมิติและเรากำลังพยายามนำเสนอวัตถุสามมิติ ดังนั้นเราสามารถบิดเบือนขนาดที่ดิน / รูปร่างอย่างน่าเศร้าโดยใช้d3.geo.mercator() ฟังก์ชัน

ศูนย์ถูกระบุ [78, 22] ซึ่งจะตั้งค่าศูนย์กลางของการฉายภาพไปยังตำแหน่งที่ระบุเป็นอาร์เรย์สององค์ประกอบของลองจิจูดและละติจูดเป็นองศาและส่งกลับการฉายภาพ

ที่นี่แผนที่มีศูนย์กลางอยู่ที่ 78 องศาตะวันตกและ 22 องศาเหนือ

มาตราส่วนระบุเป็น 680 ซึ่งจะตั้งค่าตัวคูณมาตราส่วนของการฉายภาพเป็นค่าที่ระบุ หากไม่ได้ระบุมาตราส่วนจะส่งกลับค่าตัวคูณมาตราส่วนปัจจุบันซึ่งมีค่าเริ่มต้นเป็น 150 สิ่งสำคัญที่ต้องสังเกตว่าปัจจัยมาตราส่วนไม่สอดคล้องกันในการประมาณการ

Step 4 - Append SVG - ต่อท้ายแอตทริบิวต์ SVG

var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height);

Step 5 - Create path - ส่วนของโค้ดต่อไปนี้จะสร้างตัวสร้างเส้นทางภูมิศาสตร์ใหม่

var path = d3.geo.path()
   .projection(projection);

ที่นี่ตัวสร้างเส้นทาง (d3.geo.path ()) ใช้เพื่อระบุประเภทการฉายภาพ (.projection) ซึ่งกำหนดไว้ก่อนหน้านี้ว่าเป็นการฉายภาพ Mercator โดยใช้การฉายแบบตัวแปร

Step 6 - Generate data - indiatopo.json - ไฟล์นี้มีบันทึกมากมายซึ่งเราสามารถดาวน์โหลดได้อย่างง่ายดายจากไฟล์แนบต่อไปนี้

ดาวน์โหลด indiatopo.json file

หลังจากดาวน์โหลดไฟล์แล้วเราสามารถเพิ่มตำแหน่ง D3 ของเราได้ รูปแบบตัวอย่างแสดงด้านล่าง

{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......

........................................

Step 7 - Draw map - ตอนนี้อ่านข้อมูลจากไฟล์ indiatopo.json ไฟล์และวาดแผนที่

d3.json("indiatopo.json", function(error, topology) {
   g.selectAll("path")
   .data(topojson.object(topology, topology.objects.states)
   .geometries)
   .enter()
   .append("path")
   .attr("class", function(d) { return "state" + d.id; })
   .attr("d", path)
});

ที่นี่เราจะโหลดไฟล์ TopoJSON พร้อมพิกัดสำหรับแผนที่อินเดีย (indiatopo.json) จากนั้นเราขอประกาศว่าเราจะดำเนินการกับองค์ประกอบเส้นทางทั้งหมดในกราฟิก มันถูกกำหนดเป็น g.selectAll (“ path”) จากนั้นเราจะดึงข้อมูลที่กำหนดประเทศจากไฟล์ TopoJSON

.data(topojson.object(topology, topology.objects.states)
   .geometries)

สุดท้ายเราจะเพิ่มลงในข้อมูลที่เราจะแสดงโดยใช้ .enter() วิธีการแล้วเราผนวกข้อมูลนั้นเป็นองค์ประกอบเส้นทางโดยใช้ .append(“path”) วิธี.