apeescape2.com
  • Põhiline
  • Brändikujundus
  • Veebi Kasutajaliides
  • Innovatsioon
  • Mobiilne Disain
Tehnoloogia

Kaart täiuslikkuseni: D3.js kasutamine ilusate veebikaartide tegemiseks

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.



Milleks D3.js kasutatakse?

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 .



D3 veebikaartide ja geograafiliste andmete visualiseerimiseks

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

D3 geograafilised andmed

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.

Kaardiraamatukogud: Google Maps ja Leaflet.js

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.

Projektsioonid - väljaspool kerakujulist Mercatorit

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.

Rasterkaardid

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.

Vektoriga manipuleerimine lennult

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 .

Ma tahan rohkem!

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:

  • maa , globaalne animeeritud 3D tuulekaart kogu maailmast, mis on tehtud rakendusega D3.js. Maa on ülemaailmsete ilmastikutingimuste visualiseerimine, mis põhineb superarvutite poolt riiklikes keskkonnaprognoosikeskustes, NOAA / riiklikus ilmateenistuses tehtud ja JSON-iks konverteeritud ilmaennustustel. Saate kohandada kuvatud andmeid, näiteks tuule kiiruse näitude kõrgust, muuta ülekattega andmeid ja isegi muuta Maa projektsiooni.
Seotud: Veebiarendajate parimate veebikaardistamise tööriistade uuring: teekaartide teekaart

Oracle SQL Serverisse ja SQL Server Oracle'i migreerimisjuhendisse

Andmeteadus Ja Andmebaasid

Oracle SQL Serverisse ja SQL Server Oracle'i migreerimisjuhendisse
Ühinemis- ja ühinemisläbirääkimiste taktika ja strateegiad: näpunäited professionaalilt

Ühinemis- ja ühinemisläbirääkimiste taktika ja strateegiad: näpunäited professionaalilt

Finantsprotsessid

Lemmik Postitused
Rubiini algoritmi dokumentatsioon koos AsciiDoci ja Knitriga
Rubiini algoritmi dokumentatsioon koos AsciiDoci ja Knitriga
Ärge laske end lollitada: arvutage töötajate ja konsultantide tegelikud kulud
Ärge laske end lollitada: arvutage töötajate ja konsultantide tegelikud kulud
Töötajate säilitamise strateegiad 101: töökohaõpe
Töötajate säilitamise strateegiad 101: töökohaõpe
AngularJSi õpetus: kohandatud direktiivide demüstifitseerimine
AngularJSi õpetus: kohandatud direktiivide demüstifitseerimine
Vilgas riistvara koos sisseehitatud tarkvaraarendusega
Vilgas riistvara koos sisseehitatud tarkvaraarendusega
 
Masinõppe manused: keerukate andmete lihtsustamine
Masinõppe manused: keerukate andmete lihtsustamine
Forexi algoritmiline kauplemine: praktiline lugu inseneridele
Forexi algoritmiline kauplemine: praktiline lugu inseneridele
Twitteri andmekaevandus: Pythoni abil suurandmete analüüsi juhend
Twitteri andmekaevandus: Pythoni abil suurandmete analüüsi juhend
Tehisintellekti investeeringute põhialus: põhitööde rajamine (I osa)
Tehisintellekti investeeringute põhialus: põhitööde rajamine (I osa)
ApeeScape'i nimekiri parimatest tasuta programmeerimisraamatutest
ApeeScape'i nimekiri parimatest tasuta programmeerimisraamatutest
Lemmik Postitused
  • masinõppe näited pythonis
  • kollase värvi psühholoogilised mõjud
  • päringu häälestamine sql-serveris
  • php vs node js jõudlus
  • mis on jõu puudutamise tehnoloogia
  • mis on SQL serveri päringute optimeerimine
  • millised on finantsjuhi ülesanded
Kategooriad
Trendid Mobiilne Ux Disain Finantsprotsessid Andmeteadus Ja Andmebaasid Kasumlikkus Ja Tõhusus Mobiilne Disain Insenerihaldus Tagumine Ots Töö Tulevik

© 2021 | Kõik Õigused Kaitstud

apeescape2.com