O hartă spre perfecțiune: folosind D3.js pentru a crea hărți web frumoase
Publicat: 2022-03-11Data Driven Documents, sau D3.js, este „o bibliotecă JavaScript pentru manipularea documentelor bazate pe date”. Sau pentru a spune mai simplu, D3.js este o bibliotecă de vizualizare a datelor. A fost dezvoltat de Mike Bostock cu ideea de a reduce decalajul dintre afișarea statică a datelor și vizualizările interactive și animate de date.
D3 este o bibliotecă puternică, cu o mulțime de utilizări. În acest tutorial, voi discuta despre o aplicație deosebit de convingătoare a D3: realizarea de hărți. Vom trece prin provocările comune ale construirii unei hărți web utile și informative și vom arăta cum, în fiecare caz, D3.js oferă dezvoltatorilor JavaScript capabili tot ce au nevoie pentru ca hărțile să arate și să se simtă frumoase.
Pentru ce este folosit D3.js?
D3.js poate lega orice date arbitrare la un Document Object Model (DOM) și apoi, prin utilizarea JavaScript, CSS, HTML și SVG, poate aplica transformări documentului care sunt conduse de acele date. Rezultatul poate fi o ieșire HTML simplă sau diagrame SVG interactive cu comportament dinamic, cum ar fi animații, tranziții și interacțiune. Toate transformările și randările datelor se fac pe partea client, în browser.
Cel mai simplu, D3.js poate fi folosit pentru a manipula un DOM. Iată un exemplu simplu în care D3.js este folosit pentru a adăuga un element de paragraf la corpul unui document gol, cu textul „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>Puterea lui D3.js este însă capacitatea sa de vizualizare a datelor. De exemplu, poate fi folosit pentru a crea diagrame. Poate fi folosit pentru a crea diagrame animate. Poate fi folosit chiar și pentru a integra și anima diferite diagrame conectate.
D3 pentru hărți web și vizualizare a datelor geografice
Dar D3.js poate fi folosit pentru mult mai mult decât doar manipularea DOM sau pentru a desena diagrame. D3.js este extrem de puternic când vine vorba de manipularea informațiilor geografice. Manipularea și prezentarea datelor geografice poate fi foarte dificilă, dar construirea unei hărți cu un D3.js este destul de simplă.
Iată un exemplu D3.js care va desena o hartă a lumii pe baza datelor stocate într-un format de date compatibil cu JSON. Trebuie doar să definiți dimensiunea hărții și proiecția geografică de utilizat (mai multe despre asta mai târziu), să definiți un element SVG, să-l atașați la DOM și să încărcați datele hărții folosind JSON. Stilizarea hărții se face prin 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>Date geografice pentru D3
Pentru acest tutorial D3.js, rețineți că construirea hărții funcționează cel mai bine cu date formatate în formate JSON, în special cu specificațiile GeoJSON și TopoJSON.
GeoJSON este „un format pentru codificarea unei varietăți de structuri de date geografice”. Este conceput pentru a reprezenta obiecte cu geometrie discretă grupate în colecții de caracteristici de perechi nume/valoare.
TopoJSON este o extensie a GeoJSON, care poate codifica topologia în care geometriile sunt „legate împreună din segmente de linie partajate numite arce”. TopoJSON elimină redundanța prin stocarea informațiilor relaționale între caracteristicile geografice, nu doar informații spațiale. Ca rezultat, geometria este mult mai compactă și combinată acolo unde geometriile împărtășesc caracteristici. Rezultă un fișier tipic TopoJSON cu 80% mai mic decât echivalentul său GeoJSON.
Deci, de exemplu, având în vedere o hartă cu mai multe țări care se învecinează între ele, părțile comune ale granițelor vor fi stocate de două ori în GeoJSON, o dată pentru fiecare țară de fiecare parte a graniței. În TopoJSON, va fi doar o linie.
Biblioteci de hărți: Google Maps și Leaflet.js
Astăzi, cele mai populare biblioteci de cartografiere sunt Google Maps și Leaflet. Sunt concepute pentru a obține „hărți alunecoase” pe web rapid și ușor. „Hărți alunecoase” este un termen care se referă la hărțile web moderne, bazate pe JavaScript, care permit mărirea și deplasarea în jurul hărții.
Leaflet este o alternativă excelentă la Google Maps. Este o bibliotecă JavaScript open source, concepută pentru a realiza hărți interactive pentru dispozitive mobile, având în vedere simplitatea, performanța și utilizarea. Leaflet este cel mai bun atunci când profită de selecția mare de hărți bazate pe raster care sunt disponibile pe internet și aduce simplitatea lucrului cu hărți în mosaic și capabilitățile lor de prezentare.
Pliantul poate fi folosit cu mare succes atunci când este combinat cu funcțiile de manipulare a datelor D3.js și pentru utilizarea D3.js pentru grafică vectorială. Combinarea acestora scoate la iveală tot ce este mai bun din ambele biblioteci.
Google Maps este mai dificil de combinat cu D3.js, deoarece Google Maps nu este open source. Este posibil să utilizați Google Maps și D3 împreună, dar acest lucru se limitează în principal la suprapunerea datelor cu D3.js peste hărțile de fundal Google Maps. Integrarea mai profundă nu este cu adevărat posibilă, fără hacking.
Proiecții - Dincolo de Mercator sferic
Întrebarea cum să proiectăm hărți ale Pământului sferic tridimensional pe suprafețe bidimensionale este o problemă veche și complexă. Alegerea celei mai bune proiecții pentru o hartă este o decizie importantă de luat pentru fiecare hartă web.
În tutorialul nostru simplu despre harta lumii D3.js de mai sus, am folosit sistemul de coordonate de proiecție Spherical Mercator apelând d3.geo.mercator() . Această proiecție este cunoscută și sub numele de Web Mercator. Această proiecție a fost popularizată de Google când au introdus Google Maps. Ulterior, și alte servicii web au adoptat proiecția, și anume OpenStreetMap, Bing Maps, Here Maps și MapQuest. Acest lucru a făcut din Spherical Mercator o proiecție foarte populară pentru hărțile alunecoase online.
Toate bibliotecile de cartografiere acceptă proiecția Spherical Mercator din cutie. Dacă doriți să utilizați alte proiecții, va trebui să utilizați, de exemplu, biblioteca Proj4js, care poate face orice transformare de la un sistem de coordonate la altul. În cazul Leaflet, există un plugin Proj4Leaflet. În cazul Google Maps, nu există nimic.
D3.js aduce proiecțiile cartografice la un nivel cu totul nou, cu suport încorporat pentru multe proiecții geografice diferite. D3.js modelează proiecțiile geografice ca transformări geometrice complete, ceea ce înseamnă că atunci când liniile drepte sunt proiectate în curbe, D3.js aplică reeșantionare adaptativă configurabilă pentru a subdiviza liniile și pentru a elimina artefactele de proiecție. Plugin-ul Extended Geographic Projections D3 aduce numărul de proiecții acceptate la peste 40. Este chiar posibil să creați o nouă proiecție personalizată folosind d3.geo.projection și d3.geo.projectionMutator .
Hărți raster
După cum am menționat anterior, unul dintre principalele puncte forte ale D3.js este lucrul cu date vectoriale. Pentru a utiliza datele raster, există o opțiune de a combina D3.js cu Leaflet. Dar există și o opțiune de a face totul doar cu D3.js folosind d3.geo.tile pentru a crea hărți alunecoase. Chiar și doar cu D3.js, oamenii fac lucruri uimitoare cu hărți raster.
Manipularea vectorială în zbor
Una dintre cele mai mari provocări ale cartografiei clasice este generalizarea hărților. Vrei să ai cât mai multă geometrie detaliată, dar acele date trebuie să se adapteze la scara hărții afișate. Având o rezoluție prea mare a datelor, crește timpul de descărcare și încetinește redarea, în timp ce o rezoluție prea mică ruinează detaliile și relațiile topologice. Hărțile alunecoase care utilizează date vectoriale pot întâmpina o mare problemă cu generalizarea hărții.
O opțiune este să faceți în prealabil generalizarea hărții: să aveți seturi de date diferite în rezoluții diferite și apoi să afișați setul de date adecvat pentru scara selectată curent. Dar acest lucru multiplică seturile de date, complică întreținerea datelor și este predispus la erori. Cu toate acestea, majoritatea bibliotecilor de cartografiere sunt limitate la această opțiune.
Soluția mai bună este să faci generalizarea hărții din mers. Și aici vine din nou D3.js, cu funcțiile sale puternice de manipulare a datelor. D3.js permite simplificarea liniilor în browser.
Vreau mai mult!
D3.js nu este ușor de stăpânit și are o curbă de învățare abruptă. Este necesar să fii familiarizat cu o mulțime de tehnologii, și anume obiecte JavaScript, sintaxa jQuery chaining, SVG și CSS și, desigur, API-ul D3. În plus, trebuie să aveți un pic de abilități de proiectare pentru a crea o grafică frumoasă în cele din urmă. Din fericire, D3.js are o comunitate mare și există o mulțime de resurse în care oamenii pot săpa. Un punct de plecare excelent pentru a învăța D3 sunt aceste tutoriale.
Dacă vă place să învățați examinând exemple, Mike Bostock a distribuit peste 600 de exemple D3.js pe pagina sa web. Toate exemplele D3.js au depozit git pentru controlul versiunilor și pot fi bifurcate, clonabile și comentabile.
Dacă utilizați CartoDB, veți fi bucuroși să auziți că CartoDB face hărțile D3 ușor.
Și pentru un mic bonus la sfârșit, iată unul dintre exemplele mele preferate care arată lucrurile uimitoare de care este capabil D3:
- Earth, o hartă a vântului 3D animată globală a întregii lumi realizată cu D3.js. Pământul este o vizualizare a condițiilor meteorologice globale, bazată pe prognozele meteo făcute de supercomputere la Centrele Naționale pentru Predicția Mediului, NOAA / Serviciul Național de Meteorologie și convertite în JSON. Puteți personaliza datele afișate, cum ar fi înălțimile pentru citirile vitezei vântului, puteți modifica datele suprapuse și chiar puteți modifica proiecția Pământului.