خريطة مثالية: استخدام D3.js لإنشاء خرائط ويب جميلة
نشرت: 2022-03-11المستندات المستندة إلى البيانات ، أو D3.js ، هي "مكتبة JavaScript لمعالجة المستندات بناءً على البيانات". أو بعبارة أكثر بساطة ، D3.js هي مكتبة تصور البيانات. تم تطويره بواسطة مايك بوستوك بفكرة سد الفجوة بين العرض الثابت للبيانات ، وتصورات البيانات التفاعلية والمتحركة.
D3 هي مكتبة قوية مع الكثير من الاستخدامات. في هذا البرنامج التعليمي ، سأناقش تطبيقًا مقنعًا بشكل خاص لـ D3: صنع الخرائط. سوف نواجه التحديات المشتركة لبناء خريطة ويب مفيدة وغنية بالمعلومات ، ونوضح كيف أنه في كل حالة ، يوفر D3.js لمطوري JavaScript القادرين كل ما يحتاجون إليه لجعل الخرائط تبدو جميلة.
ما هو D3.js المستخدمة؟
يمكن لـ D3.js ربط أي بيانات عشوائية بنموذج كائن المستند (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
بالنسبة لهذا البرنامج التعليمي D3.js ، ضع في اعتبارك أن إنشاء الخريطة يعمل بشكل أفضل مع البيانات المنسقة بتنسيقات JSON ، لا سيما مواصفات GeoJSON و TopoJSON.
GeoJSON هو "تنسيق لترميز مجموعة متنوعة من هياكل البيانات الجغرافية". وهي مصممة لتمثيل كائنات هندسية منفصلة مجمعة في مجموعات ميزات لأزواج الاسم / القيمة.
يعد TopoJSON امتدادًا لـ GeoJSON ، والذي يمكنه ترميز الهيكل حيث يتم "تجميع الأشكال الهندسية معًا من مقاطع خط مشتركة تسمى الأقواس". يزيل TopoJSON التكرار عن طريق تخزين المعلومات العلائقية بين الميزات الجغرافية ، وليس المعلومات المكانية فقط. نتيجة لذلك ، تكون الهندسة أكثر إحكاما وتجمعًا حيث تشترك الأشكال الهندسية في الميزات. ينتج عن هذا ملف TopoJSON نموذجي أصغر بنسبة 80٪ من ملف GeoJSON المكافئ له.
لذلك ، على سبيل المثال ، بالنظر إلى خريطة مع العديد من البلدان المتاخمة لبعضها البعض ، سيتم تخزين الأجزاء المشتركة من الحدود مرتين في GeoJSON ، مرة واحدة لكل دولة على جانبي الحدود. في TopoJSON ، سيكون سطرًا واحدًا فقط.
مكتبات الخرائط: خرائط Google و Leaflet.js
اليوم ، مكتبات الخرائط الأكثر شيوعًا هي خرائط Google و Leaflet. لقد تم تصميمها للحصول على "خرائط زلقة" على الويب بسرعة وسهولة. "الخرائط الزلقة" هو مصطلح يشير إلى خرائط الويب الحديثة التي تدعم جافا سكريبت والتي تسمح بالتكبير والتحريك حول الخريطة.
Leaflet هو بديل رائع لخرائط Google. إنها مكتبة JavaScript مفتوحة المصدر مصممة لإنشاء خرائط تفاعلية صديقة للجوال ، مع مراعاة البساطة والأداء وسهولة الاستخدام. يعتبر المنشور في أفضل حالاته عند الاستفادة من مجموعة كبيرة من الخرائط المستندة إلى البيانات النقطية المتوفرة حول الإنترنت ، كما يوفر سهولة العمل مع الخرائط المكسوة بالبلاط وقدرات العرض التقديمي الخاصة بها.
يمكن استخدام Leaflet بنجاح كبير عند دمجه مع ميزات معالجة البيانات في D3.js ، ولاستخدام D3.js للرسومات القائمة على المتجهات. الجمع بينهما يبرز أفضل ما في المكتبتين.
يصعب دمج خرائط Google مع D3.js ، نظرًا لأن خرائط Google ليست مفتوحة المصدر. من الممكن استخدام خرائط Google و D3 معًا ، ولكن هذا يقتصر في الغالب على تراكب البيانات مع D3.js فوق خرائط خلفية خرائط Google. التكامل الأعمق ليس ممكنًا حقًا ، بدون القرصنة.
الإسقاطات - ما وراء مركاتور الكروية
تعد مسألة كيفية عرض خرائط للأرض الكروية ثلاثية الأبعاد على أسطح ثنائية الأبعاد مشكلة قديمة ومعقدة. يعد اختيار أفضل إسقاط للخريطة قرارًا مهمًا يجب اتخاذه لكل خريطة ويب.
في البرنامج التعليمي البسيط لخريطة العالم D3.js أعلاه ، استخدمنا نظام إحداثيات الإسقاط الكروية من خلال استدعاء d3.geo.mercator() . يُعرف هذا الإسقاط أيضًا باسم Web Mercator. شاع هذا الإسقاط بواسطة Google عندما قدموا خرائط Google. في وقت لاحق ، تبنت خدمات الويب الأخرى الإسقاط أيضًا ، مثل OpenStreetMap و Bing Maps و Here Maps و MapQuest. وقد جعل هذا من Spherical Mercator عرضًا شائعًا جدًا للخرائط الزلقة عبر الإنترنت.
تدعم جميع مكتبات الخرائط إسقاط Spherical Mercator خارج الصندوق. إذا كنت تريد استخدام إسقاطات أخرى ، فستحتاج إلى استخدام ، على سبيل المثال ، مكتبة Proj4js ، التي يمكنها إجراء أي تحويل من نظام إحداثي إلى آخر. في حالة Leaflet ، يوجد مكون إضافي Proj4Leaflet. في حالة خرائط Google ، حسنًا ، لا شيء.
يجلب 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 المتسلسل ، و SVG و CSS ، وبالطبع واجهة برمجة تطبيقات D3. علاوة على ذلك ، يحتاج المرء إلى القليل من مهارة التصميم لإنشاء رسومات جميلة في النهاية. لحسن الحظ ، تمتلك D3.js مجتمعًا كبيرًا ، وهناك الكثير من الموارد التي يمكن للأشخاص البحث فيها. تعتبر هذه الدروس نقطة انطلاق رائعة لتعلم D3.
إذا كنت تحب التعلم من خلال فحص الأمثلة ، فقد شارك Mike Bostock أكثر من 600 مثال D3.js على صفحته على الويب. تحتوي جميع أمثلة D3.js على مستودع git للتحكم في الإصدار ، وهي قابلة للتشعب والاستنساخ والتعليق.
إذا كنت تستخدم CartoDB ، فسيسعدك أن تسمع أن CartoDB تجعل خرائط D3 سهلة للغاية.
وللحصول على مكافأة صغيرة في النهاية ، إليك أحد الأمثلة المفضلة لدي لاستعراض الأشياء المدهشة التي تستطيع D3 القيام بها:
- Earth ، هي خريطة رياح عالمية متحركة ثلاثية الأبعاد للعالم بأسره مصنوعة من D3.js. Earth عبارة عن تصور لظروف الطقس العالمية ، بناءً على توقعات الطقس التي يتم إجراؤها بواسطة أجهزة الكمبيوتر العملاقة في المراكز الوطنية للتنبؤ البيئي ، NOAA / National Weather Service وتحويلها إلى JSON. يمكنك تخصيص البيانات المعروضة مثل ارتفاعات قراءات سرعة الرياح وتغيير البيانات المتراكبة وحتى تغيير إسقاط الأرض.