Andmetega juhitud dokumendid või D3.js , on „JavaScripti teek andmete põhjal dokumentidega manipuleerimiseks“. Või lihtsamalt öeldes on D3.js andmete visualiseerimise teek. Selle töötas välja Mike Bostock ideega ületada lõhe andmete staatilise kuvamise vahel ja interaktiivne ja animeeritud andmete visualiseerimine.
D3 on a võimas raamatukogu tonnide kasutustega. Selles õpetuses käsitlen D3 ühte eriti kaasahaaravat rakendust: kaarditegemist. Tutvume kasuliku ja informatiivse veebikaardi loomise ühiste väljakutsetega ning näitame, kuidas D3.js võimekad JavaScripti arendajad kõik, mida nad vajavad teha kaarte vaata ja tunne ilusat.
D3.js saab siduda mis tahes suvalised andmed dokumendi objektimudeliga (DOM) ja seejärel JavaScripti, CSS-i, HTML-i ja SVG-i abil rakendada dokumendist teisendusi, mida need andmed juhivad. Tulemuseks võib olla lihtne HTML-väljund või interaktiivsed SVG-diagrammid, millel on dünaamiline käitumine, näiteks animatsioonid, üleminekud ja interaktsioon. Kõik andmete teisendused ja renderdused tehakse brauseris kliendipoolselt.
Kõige lihtsamalt saab D3.js-i kasutada DOM-iga manipuleerimiseks. Siin on lihtne näide, kus D3.js-i kasutatakse tühja dokumendi kehasse lõiguelemendi lisamiseks tekstiga “Hello World”:
D3 Hello World d3.select('body').append('p').text('Hello World'); D3.js tugevus seisneb aga andmete visualiseerimisvõimes. Näiteks saab seda kasutada loomiseks edetabelid . Seda saab kasutada loomiseks animeeritud graafikud . Seda saab isegi kasutada integreerida ja animeerida erinevaid ühendatud graafikuid .
Kuid D3.js-i saab kasutada palju rohkemaks kui lihtsalt DOM-i manipuleerimiseks või diagrammide joonistamiseks. D3.js on käsitlemisel äärmiselt võimas geograafiline teave . Geograafiliste andmete manipuleerimine ja esitamine võib olla väga keeruline, kuid D3.js-iga kaardi koostamine on üsna lihtne.
Siin on D3.js näide, mis joonistab maailmakaardi JSON-ühilduvas andmevormingus salvestatud andmete põhjal. Peate lihtsalt määrama kaardi suuruse ja kasutatava geograafilise projektsiooni (lisateavet selle kohta hiljem), määratlema SVG elemendi, lisama selle DOM-i ja laadima kaardiandmed JSON-i abil. Kaardi kujundamine toimub CSS-i kaudu.
D3 World Map path { stroke: white; stroke-width: 0.5px; fill: black; } 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) }); Seotud: Uuendatavate D3.js graafikute suunas Selle D3.js-õpetuse puhul pidage meeles, et kaardiehitus töötab kõige paremini JSON-vormingus vormindatud andmetega, eriti GeoJSON ja TopoJSON spetsifikatsioonid.
GeoJSON on “mitmesuguste geograafiliste andmete struktuuride kodeerimise vorming”. See on mõeldud esindama diskreetseid geomeetrilisi objekte, mis on rühmitatud nime / väärtuse paaride tunnuskogudesse.
TopoJSON on GeoJSONi laiendus, mis suudab kodeerida topoloogiat, kus geomeetriad on “kokku ühendatud jagatud joone segmentidest, mida nimetatakse kaareks”. TopoJSON välistab üleliigsuse, salvestades geograafiliste tunnuste vahelist suheteavet, mitte ainult ruumiandmeid. Seetõttu on geomeetria palju kompaktsem ja kombineeritud seal, kus geomeetriad jagavad omadusi. Selle tulemuseks on 80% väiksem tüüpiline TopoJSON-fail kui selle GeoJSON-i ekvivalent.
Nii näiteks antakse kaart, kus on mitu teineteisega piirnevat riiki, piiride jagatud osad kaks korda GeoJSONis, üks kord iga riigi jaoks mõlemal pool piiri. TopoJSONis saab see olema ainult üks rida.
Tänapäeval on kõige populaarsemad kaardistamisraamatukogud Google kaardid ja Infoleht . Need on loodud libedate kaartide veebi kiireks ja lihtsaks saamiseks. „Libedad kaardid” on termin, mis viitab kaasaegsetele JavaScripti toega veebikaartidele, mis võimaldavad kaarti suumida ja paanida.
kinnisvarafondide tüübid
Infoleht on suurepärane alternatiiv Google Mapsile. See on avatud lähtekoodiga JavaScripti teek, mis on loodud mobiilsõbralike interaktiivsete kaartide loomiseks, pidades silmas lihtsust, jõudlust ja kasutatavust. Voldik on parim, kui kasutada suurt rasteripõhiste kaartide valikut, mis on kättesaadavad Internetis, ja see toob paanikaartidega töötamise lihtsuse ja nende esitamisvõimalused.
Infolehte saab väga edukalt kasutada siis, kui koos D3.js-i andmetöötlusfunktsioonidega ja D3.js kasutamiseks vektoripõhises graafikas. Nende ühendamine toob välja mõlema raamatukogu parima.
Google Mapsi on D3.js-iga raskem ühendada, kuna Google Maps pole avatud lähtekoodiga. On võimalik kasutada Google Maps ja D3 koos, kuid see piirdub enamasti andmete ülekandmisega D3.js-ga üle Google Mapsi taustkaartide. Sügavam integratsioon pole tegelikult võimalik, ilma häkkimisteta.
Küsimus, kuidas projitseerida kolmemõõtmelise sfäärilise Maa kaarte kahemõõtmelistele pindadele, on vana ja keeruline probleem . Kaardi jaoks parima projektsiooni valimine on iga veebikaardi jaoks oluline otsus.
Meie ülaltoodud lihtsas maailmakaardi D3.js õpetuses kasutasime Sfääriline Mercator projektsiooni koordinaatide süsteem helistades d3.geo.mercator() Seda projektsiooni tuntakse ka kui Veebimarkator . Google tutvustas seda projektsiooni nende tutvustamisel Google kaardid . Hiljem võtsid projekti ka teised veebiteenused, nimelt OpenStreetMap , Bingi kaardid , Siin kaardid ja MapQuest . See on muutnud sfäärilise Mercatori väga libedate veebikaartide jaoks väga populaarseks projektsiooniks.
Kõik kaardistamise teegid toetavad kerakujulise Mercatori projektsiooni karbist välja. Kui soovite kasutada muid projektsioone, peate kasutama näiteks Proj4js raamatukogu, mis võib teha mis tahes teisendusi ühest koordinaatsüsteemist teise. Voldiku puhul on olemas a Proj4Leht sisse panema. Google Mapsi puhul pole midagi.
D3.js viib kartograafilised projektsioonid täiesti uuele tasemele koos sisseehitatud toega paljudele erinevatele geograafilised prognoosid . D3.js modelleerib geograafilisi projektsioone täielike geomeetriliste teisendustena, mis tähendab, et sirgjoonte projitseerimisel kõveratesse rakendab D3.js konfigureeritavat adaptiivset proovivõtmist joonte alajaotamiseks ja välistab projektsiooniartefaktid. The Laiendatud geograafiliste projektsioonide D3 pistikprogramm viib toetatud projektsioonide arvu üle 40. Kasutades d3.geo.projection on isegi võimalik luua täiesti uus kohandatud projektsioon ja d3.geo.projectionMutator.
Nagu varem mainitud, on D3.js üks peamisi tugevusi töötamine vektorandmetega. Rasterandmete kasutamiseks on võimalus ühendada D3.js Leafletiga. Kuid on ka võimalus teha kõike lihtsalt D3.js-i abil d3.geo.tile looma libedad kaardid . Isegi ainult D3.js-ga üksi, teevad inimesed seda hämmastavad asjad rastrikaartidega.
Klassikalise kartograafia üks suurimaid väljakutseid on kaardi üldistus . Soovite, et teil oleks võimalikult üksikasjalik geomeetria, kuid need andmed peavad kohanema kuvatava kaardi mõõtmetega. Liiga kõrge andmelahutusvõime pikendab allalaadimise aega ja aeglustab renderdamist, liiga madal eraldusvõime aga rikub detaile ja topoloogilisi seoseid. Vektorandmeid kasutavatel libedatel kaartidel võib kaartide üldistamisel tekkida suur probleem.
kuidas luua prototüüp
Üks võimalus on eelnevalt teha kaardil üldistus: erineva eraldusvõimega erinevad andmekogumid ja kuvada seejärel valitud valitud skaala jaoks sobiv andmekogum. Kuid see mitmekordistab andmekogumeid, raskendab andmete hooldamist ja on altid vigadele. Kuid enamik kaardistamise teekidest on piiratud selle suvandiga.
Parem lahendus on teha kaardil üldistamine lennult. Ja siin tuleb taas D3.js koos võimsate andmetöötlusfunktsioonidega. D3.js lubab rea lihtsustamine tuleb teha brauseris .
D3.js ei ole kerge omandada ja sellel on järsk õppimiskõver. Peab olema tuttav paljude tehnoloogiatega, nimelt JavaScripti objektidega, jQuery ketisüntaksiga, SVG ja CSS-iga ning muidugi D3 API . Kõige tipuks peab omama natuke disainioskust, et lõpuks kena graafika luua. Õnneks on D3.js-is suur kogukond ja inimestel on palju ressursse, kuhu süveneda. Suurepärane lähtepunkt D3 õppimiseks on need õpetused .
Kui teile meeldib näiteid uurides õppida, on Mike Bostock seda jaganud üle 600 D3.js näite oma veebilehel. Kõigil D3.js-i näidetel on versioonihalduse jaoks git-hoidla ning need on hargnevad, kloonitavad ja kommenteeritavad.
Kui kasutate CartoDB-d, on teil seda hea meel kuulda CartoDB muudab D3 kaardid imelihtsaks .
Ja väikese boonuse saamiseks on siin üks minu lemmiknäidetest, mis näitavad hämmastavaid asju, milleks D3 on võimeline:
