Dataohjatut asiakirjat tai D3.js , on 'JavaScript-kirjasto dataan perustuvien asiakirjojen manipuloimiseksi'. Tai yksinkertaisesti sanottuna, D3.js on tietojen visualisointikirjasto. Sen on kehittänyt Mike Bostock ajatuksella kuroa umpeen tietojen staattinen näyttö ja vuorovaikutteinen ja animoituja tietojen visualisointeja.
D3 on a voimakas kirjasto runsaalla käytöllä. Tässä opetusohjelmassa käsittelen yhtä erityisen kiinnostavaa D3-sovellusta: kartan tekemistä. Käymme läpi hyödyllisen ja informatiivisen verkkokartan rakentamisen yleiset haasteet ja näytämme, kuinka D3.js antaa kussakin tapauksessa pystyvät JavaScript-kehittäjät kaikki mitä he tarvitsevat tehdä karttoja näyttää ja tuntuu kauniilta.
D3.js voi sitoa minkä tahansa mielivaltaisen tiedon Document Object Model (DOM): iin ja käyttää sitten JavaScriptiä, CSS: ää, HTML: ää ja SVG: tä käyttämällä muunnoksia kyseisten tietojen ohjaamaan asiakirjaan. Tulos voi olla yksinkertainen HTML-lähtö tai interaktiiviset SVG-kaaviot, joilla on dynaaminen käyttäytyminen, kuten animaatiot, siirtymät ja vuorovaikutus. Kaikki datan muunnokset ja renderöinnit tehdään asiakaspuolella selaimessa.
Yksinkertaisimmillaan D3.js: ää voidaan käyttää DOM: n manipulointiin. Tässä on yksinkertainen esimerkki, jossa D3.js: llä lisätään kappaleelementti tyhjään asiakirjarunkoon 'Hello World' -tekstillä:
D3 Hello World d3.select('body').append('p').text('Hello World'); D3.js: n vahvuus on kuitenkin sen tietojen visualisointikyvyssä. Esimerkiksi sitä voidaan käyttää luomiseen kaavioita . Sitä voidaan käyttää luomiseen animoituja kaavioita . Sitä voidaan käyttää jopa integroida ja animoida erilaisia yhdistettyjä kaavioita .
Mutta D3.js: ää voidaan käyttää paljon enemmän kuin vain DOM-manipulointiin tai kaavioiden piirtämiseen. D3.js on erittäin tehokas käsittelyssä maantieteelliset tiedot . Maantieteellisten tietojen käsittely ja esittäminen voi olla hyvin hankalaa, mutta kartan rakentaminen D3.js: llä on melko yksinkertaista.
Tässä on D3.js-esimerkki, joka piirtää maailmankartan JSON-yhteensopivaan datamuotoon tallennettujen tietojen perusteella. Sinun tarvitsee vain määritellä käytettävän kartan koko ja maantieteellinen projektio (lisätietoja myöhemmin), määritellä SVG-elementti, liittää se DOM: iin ja ladata karttatiedot JSON: n avulla. Kartan muotoilu tehdään CSS: n kautta.
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) }); Liittyvät: Kohti päivitettäviä D3.js-kaavioita Muista tässä D3.js-opetusohjelmassa, että kartanrakennus toimii parhaiten JSON-muotoisissa muodoissa olevien tietojen kanssa, etenkin GeoJSON ja TopoJSON tekniset tiedot.
GeoJSON on 'muoto erilaisten maantieteellisten tietorakenteiden koodaamiseksi'. Se on suunniteltu edustamaan erillisiä geometriaobjekteja ryhmiteltyinä ominaisuuskokoelmiksi nimi / arvo-pareittain.
TopoJSON on GeoJSON: n laajennus, joka voi koodata topologiaa, jossa geometriat 'ommellaan yhteen jaetuista linjasegmenteistä, joita kutsutaan kaariksi'. TopoJSON eliminoi redundanssin tallentamalla maantieteellisten piirteiden välistä relaatiotietoa, ei pelkästään paikkatietoa. Tämän seurauksena geometria on paljon kompaktimpi ja yhdistetty missä geometriat jakavat piirteitä. Tuloksena on 80% pienempi tyypillinen TopoJSON-tiedosto kuin sen GeoJSON-vastaava.
Joten, kun esimerkiksi annetaan kartta, jossa on useita toisiaan reunustavia maita, yhteiset rajojen osat tallennetaan kahdesti GeoJSONiin, kerran kullekin maalle rajan kummallekin puolelle. TopoJSONissa se on vain yksi rivi.
Nykyään suosituimmat kartoituskirjastot ovat Google Kartat ja Esite . Ne on suunniteltu saamaan 'liukkaat kartat' verkkoon nopeasti ja helposti. 'Slippy maps' on termi, joka viittaa moderneihin JavaScript-pohjaisiin verkkokarttoihin, jotka mahdollistavat zoomauksen ja panoroinnin kartan ympäri.
Esite on loistava vaihtoehto Google Mapsille. Se on avoimen lähdekoodin JavaScript-kirjasto, joka on suunniteltu tekemään mobiiliystävällisiä interaktiivisia karttoja yksinkertaisuuden, suorituskyvyn ja käytettävyyden kannalta. Esite on parhaimmillaan, kun hyödynnetään suurta valikoimaa rasteripohjaisia karttoja, jotka ovat saatavilla Internetissä, ja tuo yksinkertaisuuden työskennellä laatoitettujen karttojen kanssa ja niiden esitystoiminnoilla.
Esitteitä voidaan käyttää erittäin menestyksekkäästi milloin yhdistettynä D3.js: n datankäsittelyominaisuuksiin ja D3.js: n käytöstä vektoripohjaiseen grafiikkaan. Niiden yhdistäminen tuo esiin molempien kirjastojen parhaat puolet.
Google Mapsia on vaikeampaa yhdistää D3.js: n kanssa, koska Google Maps ei ole avoimen lähdekoodin. On mahdollista käyttää Google Maps ja D3 yhdessä, mutta tämä rajoittuu enimmäkseen tietojen peittämiseen D3.js: n kanssa Google Mapsin taustakartoissa. Syvempi integraatio ei ole todella mahdollista ilman hakkerointia.
Kysymys siitä, miten kolmiulotteisen pallomaisen maan kartat projisoidaan 2-ulotteisille pinnoille, on vanha ja monimutkainen ongelma . Parhaan heijastuksen valitseminen kartalle on tärkeä päätös jokaiselle verkkokartalle.
Yllä olevassa yksinkertaisessa maailmankartan D3.js-opetusohjelmassa käytimme Pallomainen Mercator projektio-koordinaatisto soittamalla d3.geo.mercator(). Tämä projektio tunnetaan myös nimellä Web Mercator . Google suositteli tätä projektiota esitellessään Google Kartat . Myöhemmin myös muut verkkopalvelut hyväksyivät ennusteen, nimittäin OpenStreetMap , Bing Maps , Täällä kartat ja MapQuest . Tämä on tehnyt Spherical Mercatorista erittäin suositun projektio liukkaille online-kartoille.
Kaikki kartoituskirjastot tukevat pallomaista Mercator-projektiota laatikosta. Jos haluat käyttää muita projektioita, sinun on käytettävä esimerkiksi Proj4js kirjasto, joka voi tehdä minkä tahansa muunnoksen yhdestä koordinaattijärjestelmästä toiseen. Esitteessä on a Proj4lehtinen kytkeä. Google Mapsissa ei ole mitään.
D3.js tuo kartografiset ennusteet aivan uudelle tasolle sisäänrakennetulla tuella monille erilaisille maantieteelliset ennusteet . D3.js mallintaa maantieteelliset projektiot täydellisinä geometrisin muunnoksina, mikä tarkoittaa, että kun suorat linjat projisoidaan käyriksi, D3.js käyttää konfiguroitavaa adaptiivista uudelleennäytteistystä viivojen jakamiseen ja eliminoi projektio-artefaktit. Laajennettu maantieteellinen projektio D3 -laajennus tuo tuettujen projektioiden määrän yli 40. On jopa mahdollista luoda kokonaan uusi mukautettu projektio d3.geo.projection ja d3.geo.projectionMutator.
Kuten aiemmin mainittiin, yksi D3.js: n tärkeimmistä vahvuuksista on työskennellä vektoridatan kanssa. Rasteritietojen käyttämiseksi on mahdollista yhdistää D3.js ja Leaflet. Mutta on myös mahdollisuus tehdä kaikki vain D3.js: n avulla d3.geo.tile luoda liukas karttoja . Jopa pelkästään D3.js: n avulla ihmiset tekevät hämmästyttäviä asioita rasterikartoilla.
Yksi klassisen kartografian suurimmista haasteista on kartan yleistys . Haluat, että sinulla on mahdollisimman yksityiskohtainen geometria, mutta tietojen on mukauduttava näytetyn kartan mittakaavaan. Liian suuri datan resoluutio pidentää latausaikaa ja hidastaa renderointia, kun taas liian pieni resoluutio pilaa yksityiskohdat ja topologiset suhteet. Vektoritietoja käyttävät liukkaat kartat voivat kohdata suuren ongelman kartan yleistämisessä.
Yksi vaihtoehto on tehdä kartan yleistys etukäteen: saada eri tietojoukot eri tarkkuuksilla ja näyttää sitten sopiva tietojoukko valitulle asteikolle. Mutta tämä moninkertaistaa tietojoukot, vaikeuttaa tietojen ylläpitoa ja on altis virheille. Silti suurin osa kartoituskirjastoista on rajoitettu tähän vaihtoehtoon.
Parempi ratkaisu on tehdä kartan yleistyminen lennossa. Ja tässä tulee jälleen D3.js, sen tehokkailla datan käsittelyominaisuuksilla. D3.js sallii rivin yksinkertaistaminen selaimessa .
D3.js: ää ei ole helppo hallita, ja sillä on jyrkkä oppimiskäyrä. On tunnettava monia tekniikoita, nimittäin JavaScript-objekteja, jQuery-ketjun syntaksia, SVG ja CSS ja tietysti D3: n sovellusliittymä . Tämän lisäksi on oltava vähän suunnittelutaitoa, jotta loppujen lopuksi voidaan luoda hienoja grafiikoita. Onneksi D3.js: llä on suuri yhteisö, ja ihmisille on paljon resursseja, joihin voi kaivaa. Hyvä lähtökohta D3: n oppimiselle on nämä oppaat .
Jos haluat oppia tutkimalla esimerkkejä, Mike Bostock on jakanut yli 600 D3.js-esimerkkiä hänen verkkosivullaan. Kaikissa D3.js-esimerkeissä on git-arkisto versionhallintaa varten, ja ne ovat haarautuvia, kloonattavia ja kommentoitavia.
Jos käytät CartoDB: tä, kuulet siitä mielellämme CartoDB tekee D3-kartoista tuulta .
Ja pienen bonuksen saamiseksi lopussa, tässä on yksi suosikkiesimerkkini, jotka esittävät hämmästyttäviä asioita, joihin D3 pystyy:
