lt.geologyidea.com
Daugiau

Perjungti sluoksnius su legendomis „CartoDB.js“?

Perjungti sluoksnius su legendomis „CartoDB.js“?


We are searching data for your request:

Forums and discussions:
Manuals and reference books:
Data from registers:
Wait the end of the search in all databases.
Upon completion, a link will appear to access the found materials.


„CartoDB“ svetainėje sukūriau žemėlapį su keliais sluoksniais, kiekvienas su savo legenda. Dabar norėčiau naudoti „CartoDB.js“, kad galėčiau perjungti tarp sluoksnių, todėl legenda persijungs su atitinkamu sluoksniu.

aš naudojaucartodb.createVis ()įkelti žemėlapį ir jo sluoksnius. Aš galiu rodyti ir slėpti sluoksnius naudodamaslayer.show ()irlayer.hide (), bet rodoma (-os) užrašas (-ai) matomam (-iems) sluoksniui (-ams) žemėlapio CartoDB svetainės versijoje.

Gal galėtumėte papasakoti, kaip perjungti legendą, kad ji atitiktų matomą CartoDB.js sluoksnį.


Auremoser / md-wkshop.md

Barselonoje kursime žemės naudojimo duomenų vizualizaciją, ypač tai, kaip pastato pėdsakai ir traukinių linijos telpa į tą projekciją.

Žemėlapį sudarysime pagal „CartoDB“ duomenų bibliotekoje esančius duomenis (apie 2014 m.), Nagrinėsime kai kuriuos „choropleth“ metodus ir kai kuriuos „SQL“ tvarkydami šiuos duomenis.

  • šie duomenys turi pėdsakų pavadinimus ir fizines ypatybes
  • jie taip pat turi stulpelį, kuriame nurodomi gyventojai arba gyventojų skaičius vienam pėdsakui (tikėtina)
  • gyventojų tankumą galime apskaičiuoti pagal pėdsaką

Čia galite sugadinti duomenų rinkinį, su kuriuo dirbsime, ir seminaro failus.

apibūdinimas Šaltinis parsisiųsti
2014 m. Pastato pėdsakai „CartoBCN“ parcelas_islas_barcelona.geojson
2012 m. Ispanijos geležinkelio stotys „DataHub“ estaciones.geojson

** Taip pat galite importuoti duomenis iš mūsų „Duomenų bibliotekos“. **

Pasirinkite parcelas_islas_barcelona ir patraukite jį į savo prietaisų skydelį, kad galėtumėte manipuliuoti.

Geoerdviniai duomenys yra informacija, identifikuojanti geografinę vietą ir jai būdingus bruožus / kraštus, paprastai vaizduojamus taškais, linijomis, daugiakampiais ir (arba) sudėtingomis geografinėmis savybėmis.

Norint tiesiogiai atsisiųsti surašymo duomenis / FIPS, reikia šiek tiek patobulinti.

  • patikrinkite duomenų šaltinį ir atnaujinimo datą
  • pašalinti antraštes / papildomus stulpelius („Excel“ arba „Open Refine“)
  • importuoti „csv / xls / geojson“ ir automatinį geokodavimą per „carto“
  • ištaisykite stulpelių pavadinimus suprantamesniais terminais
  • teisingi duomenų tipai
  • atlikite bet kokį preliminarų sql ar filtrą, kuris tinka

Štai kaip gali atrodyti, kai įkeliate duomenis:

Duomenų pateikimas „CartoDB“

Pats pagrindinis SQL sakinys yra:

* Reiškia viską. Tai reiškia, kad visos lentelės eilutės ir stulpeliai grąžinami, kai tik vykdoma užklausa.

Išsamesnė užklausa yra tokia:

  1. SELECT yra tai, ko prašote (būtina)
  2. FROM yra ten, kur yra duomenys (būtina)
  3. KUR yra jūsų prašomų duomenų filtras (neprivaloma)
  4. „GROUP BY“ ir „ORDER BY“ yra neprivalomi papildymai. Daugiau apie agregavimo / kitas funkcijas galite skaityti toliau.

„CartoDB“ yra dvi specialios skiltys:

Pirmasis iš jų yra standartinės platumos / ilgumos vienetais, o antrasis - projekcija, pagrįsta originalia „Mercator“ projekcija, bet optimizuota žiniatinkliui.

Jei norite paleisti SQL komandas ir pamatyti savo žemėlapio atnaujinimą, būtinai PASIRINKITE „the_geom_webmercator“, nes tai stulpelis, kuris naudojamas atvaizdavimui - kitas yra daugiau patogumo stulpelis, nes daugumoje duomenų rinkinių naudojami lat / long.

Tai yra SQL sakinys, kurį galite įkelti į savo vizualizacijos dėklą, kad galėtumėte pateikti užklausas ir tyrinėti duomenis naudodami tiesioginę vizualinę išvestį. Šiuo atveju mes apskaičiuojame Barselonos daugiakampių projekcijos atstatymą taip, kad ji geriau atitiktų pagrindinius žemėlapius, todėl atnaujinant lentelę teisinga projekcija naudojama „PostGIS“ funkcija ST_Transform. Čia galite rasti kitą pavyzdį su bikelanes.

Tai užklausa, į kurią lentelėje įtraukiama šiek tiek daugiau informacijos, apskaičiuojant kiekvieno gyventojo kiekvieno pėdsako santykinę erdvę, vadinamą person_area.

Galite įvesti užklausas, jas pritaikyti, žaliame lauke po stulpelių pavadinimais spustelėkite „sukurti lentelę iš užklausos“.

Naršyklės redaktoriuje turite daugybę tinkinimo parinkčių.

  • sql - vykdykite SQL ir postgis funkcijas visuose savo duomenyse
  • vedlys - koreguokite savo žemėlapio tipą, spalvas ir užpildymą
  • vidinis langas - sukurkite žymeklius, patarimus su informacija iš savo duomenų lentelių
  • css - pritaikykite žemėlapio css ir stilių už vedlio ribų
  • legendos - sukurkite raktus savo žemėlapiui
  • filtrai - filtruokite duomenis be sql

Filtrai yra puikus būdas tyrinėti jūsų duomenis. Be duomenų filtravimo, jie leidžia jums pamatyti pasiskirstymų histogramas, unikalių įrašų skaičių arba stulpelių, kuriuose yra daug teksto įrašų, paieškos laukelį.

Vedlys leidžia pasirinkti vizualizacijos „tipą“ ir pritaikyti spalvų paletes, dizaino detales ir kitaip nustatyti žemėlapio toną. Į aukščiau pateiktą pavyzdį taip pat įtraukiau informaciją apie estaciones, kurią galite rasti aukščiau susietoje su 2012 m. Geležinkelio stoties duomenimis.

Čia pateikiamas pavyzdys, kaip galite parašyti užklausą, kad susietumėte pagal tuos duomenis nupieštus dokumentus:

  • Paprasta - pagrindinė vizualizacija
  • Klasteris - skaičiuoja taškų skaičių tam tikrame regione
  • Choropleth - sukuria jūsų duomenų histogramą ir suteikia šiukšliadėžėms skirtingas spalvas, atsižvelgiant į pasirinktą spalvų rampą
  • Kategorija - spalvų duomenys pagal unikalią kategoriją (geriausiai tinka keliems unikaliems tipams)
  • Burbulas - dydžio žymekliai pagal stulpelių vertes
  • Intensyvumas - spalvos pagal tankį
  • Tankis - duomenys, susumuoti pagal taškų skaičių šešiakampyje
  • Sukimo momentas - laiko vizualizavimas
  • Šiluma - sklandesnis koncentracijos žemėlapis, akcentuojantis toli arti artimą vaizdą

###Paprasta Žemėlapis Vizualizacijos stilius paprastas yra numatytoji visų žemėlapių vizualizacija.

Vedlyje galimi stiliai:

  • Žymeklio užpildymas: pakeisti visų žymeklių dydį, spalvą ir neskaidrumą
  • Markerio smūgis: pakeisti kiekvieno žymeklio krašto plotį, spalvą ir neskaidrumą
  • Kompozicinė operacija: pakeisti žymeklių spalvą, kai jie sutampa
  • Etiketės tekstas: Tekstas, rodomas žymekliu (gali būti iš stulpelių)

  • Pasirinkite, kurie stulpelių duomenys bus rodomi langelyje, perjungdami stulpelį
  • Tinkinkite toliau pasirinkdami HTML rodinį

Pasirinkite skirtingų tiekėjų pagrindines žemėlapius, naudokite pasirinktines spalvas, NASA duomenis, „MapBox“ plyteles ir kt.

„Choropleth“ žemėlapiuose žemėlapio elementai yra nuspalvinti pagal tai, kur su žemėlapio elementu susijusi vertė patenka į diapazoną. Tai panašu į histogramą, kur kiekviena šiukšliadėžė yra nuspalvinta skirtingai, atsižvelgiant į jūsų pasirinktą spalvų skalę. Atkreipkite dėmesį į anksčiau pateiktą „CartoCSS“ ekrano kopiją.

Kiekybinis įvertinimas yra galimybė atkreipti dėmesį, nes ji kontroliuoja, kaip duomenys susiejami į skirtingas spalvas.

  • Vienodas intervalas suteikia vienodo dydžio šiukšliadėžes visame diapazone, o tai reiškia, kad išskirtiniai išsiskiria.

  • Quantile šiukšliadėžes, kad kiekviena kvantilė turėtų maždaug tiek pat reikšmių. Tai yra numatytasis nustatymas ir tinka daugumai „įprastų“ duomenų.

  • Jenks siekiama padidinti standartinį nuokrypį tarp kiekvienos duomenų grupės, tuo pačiu sumažinant kiekvienos grupės standartinį nuokrypį. Kitaip tariant, tai padidina panašumą tam tikroje grupėje kartu su skirtumais nuo kiekvienos kitos grupės. „Jenks“ metodas tai daro maišydamas kiekvienos grupės duomenis, kol jis aptinka optimizavimą.

Pažaiskite su jais ir sužinokite, kas geriausiai tinka jūsų duomenų rinkiniui.

„CartoCSS“ yra mūsų žemėlapių stiliaus kalba.

Galite suteikti jam pavadinimą ir pakeisti spalvų tekstą. Taip pat galite pakeisti spalvas rankiniu būdu arba, dar geriau, pakeisti spalvų rampą vedlyje.

Spustelėkite 90 laipsnių rodyklę, kad grįžtumėte į lentelių / vizualizacijų peržiūrą

Sujungti ir sujungti lenteles, norint sukurti vieną duomenų rinkinį, yra įprastas poreikis. Tarkime, kad turite du duomenų rinkinius, susijusius su ta pačia vieta / žemėlapiu, ir turite juos sujungti, kad jie galėtų naudotis ta pačia geometrija.

Tai galite padaryti naudodami „SQL“. Skaitykite daugiau čia, tačiau „CartoDB“ taip pat turi redagavimo mygtuką.

Čia yra šių duomenų rinkinių naudojimo atvejis:

kai įkeliate „parselas“ duomenis iš „Duomenų bibliotekos“, jame yra vietos pavadinimų pavadinimų

šiame duomenų šaltinyje yra vietovardžiai ir gyventojų duomenys

galite juos abu įkelti į „cartodb“ ir pasirinkti mygtuką „sujungti lenteles“

pasirinkite stulpelį arba erdvinį sujungimą

pasirinkite stulpelius, prie kurių norite prisijungti, šiuo atveju abu duomenų rinkiniai turi „vardo“ stulpelį

perjunkite norimus egzistuoti stulpelius savo naujame „sujungtame“ duomenų rinkinyje

Įkėlę duomenis, galite žaisti naudodami redaktoriaus parinktis, kad pamatytumėte, kokio tipo vizualizaciją galite atlikti.

Pradėjau nuo SQL užklausos, kad pridėčiau stulpelį person_area, kaip minėta aukščiau

Tada galite pasirinkti tą „vedlio“ stulpelį „choropleth“ žemėlapiui ir pasirinkti spalvas.

Nukopijuokime kitos seminaro pusės saugyklą ir sužinokite daugiau apie „Github“!

„Github“ yra socialinio kodavimo svetainė, kurią galime naudoti savo dokumentams saugoti. Rytoj su Chema turėsime ilgesnį seminarą apie tai, kaip veikia „Github“.

  1. Sukurkite paskyrą „Github“: https://github.com/
  2. Peržiūrėkite šią saugyklą: https://github.com/auremoser/prado-2015
  3. Klonuokime tą saugyklą: [email protected]: auremoser / prado-2015.git

  • įveskite ls, kad išvardytumėte failus darbalaukyje
  • tipo cd prado-2015
  • tada jūs esate savo saugykloje ir, jei norite, galite manipuliuoti failais, juos išsaugoti ir perkelti į github saugyklą.

Šioje saugykloje (prado-2015) yra failas, vadinamas užrašais. "notes" turi šabloną.md, skirtą dokumentacijai.

Norėdami pradėti dokumentuoti savo seminaro projektą, galite jį užpildyti išsamia informacija.

  • Šio šablono pastabos yra parašytos „Markdown“, kuri yra speciali teksto ir vaizdų formavimo sintaksė.
  • Apie tai galite sužinoti čia
  • Čia yra dar vienas projekto dokumentacijos pavyzdys.

Rytoj mes tai dar kartą peržiūrėsime, su visais klausimais kreipkitės į mane :).

Pagalvokite, kaip norėtumėte dokumentuoti savo projektą, ir užpildykite šabloną čia. Galite redaguoti failą tiesiai savo klonuotoje saugykloje.

Taip pat yra šablono pavyzdys, jei kyla problemų dokumentuojant savo projektą.

  • RYTOJE: Aš surengsiu „darbo laiko kartografavimą“. Ateikite ryte aplankyti mano stalo, kad gautumėte pagalbos dėl jūsų žemėlapių!

Štai šio skyriaus atskaitos taškas: ckpt-1

  • duomenų rinkinį iš viršaus
  • Visjson iš savo paskyros, galite nurodyti mano rasti ir jūsų.
  • Pagrindinis teksto rengyklė
  • Naršyklė
  • Kietajame diske esančius HTML failus galite atidaryti naudodami naršyklę. Norėdami atidaryti failą bet kurioje programoje, naudokite „CMD + O“ arba „CTRL + O“, kaip tai darytumėte.
  • Taip pat galite paleisti nedidelį serverį, eidami į aplanką, kuriame saugosite savo failus, ir paleisdami „http-server“ ir daugumoje „Mac“ paleisdami mazgą, kuriame įdiegėte http serverio sąranką! jei ne, jokio streso, tiesiog sekite paskui.

„Viz.json“ failas yra pagrindinis „CartoDB JavaScript“ funkcijų („createVis“ ir „createLayer“) duomenų šaltinis vizualizacijoms naršyklėje kurti.

  • Bylos struktūra: JSON
  • Nurodo, kaip pasiekti duomenis: sąrašas serverių, padomenių ir kt.
  • Kūrėjams svarbiausia sluoksnių masyvas, nes jis aiškiai parodo vizualizacijų sudarymo struktūrą
    • Pagrindinius žemėlapius, jei taikoma, apibrėžia kaip sluoksnius [0]
    • „CartoDB“ duomenų sluoksnis yra sluoksniai [1], gali būti sudarytas iš kelių posluoksnių
      • Nustato vidinius langus, kuriuos aptarsime šiame seminare
      • Apibrėžia duomenis, prieinamus naudojant SQL sakinį
      • Nurodo plytelių sluoksnių stilių, jei taikoma
      • Apibrėžia interaktyvumą (kokie duomenys rodomi sluoksnio įvykiuose)
      • sluoksnio_vardas taip pat yra lentelės pavadinimas, iš kurio duomenys gaunami paskyroje su raktu vartotojo vardas

      Galite jį peržiūrėti atidarydami teksto rengyklę ir įkeldami failą arba atsisiųsdami JSON peržiūros priemonės plėtinį naršyklės rodiniams („Chrome“ arba „Firefox“).

      Pagrindinės vizualizacijos kūrimas „JavaScript“

      Čia nukopijuokite ir įklijuokite šabloną.

      Sukurkite pagrindinę vizualizaciją naudodami „createVis“, nukopijuodami ir įklijuodami: arba tarp scenarijaus žymų savo HTML, arba sukurdami failą, vadinamą [?]. Js (šablone naudojau main.js) ir nurodydami jį tarp scenarijaus žymų:

      „createVis“ puikiai tinka greitai sukurti žemėlapius su labai mažu kodu. Taip pat yra daug pritaikymo. Dokumentai yra čia.

      Redaguokite laukus, kad jie atitiktų jūsų žemėlapį, iš naujo įkelkite naršyklės langą, jūsų žemėlapis turėtų veikti.

      Tinkintas žemėlapis su „CreateLayer“

      Štai šio skyriaus atskaitos taškas: ckpt-2

      „createLayer“ yra kitas pagrindinis žemėlapių pateikimo į naršyklę metodas.

      Toliau pateikiama pagrindinė „createLayer“ struktūra (priklauso nuo „Leaflet.js“):

      Vienas didelis skirtumas yra tas, kad mes aiškiai atskleidžiame SQL ir „CartoCSS“, leisdami lengvai pritaikyti.

      Redaguokite laukus, kad jie atitiktų jūsų žemėlapį, iš naujo įkelkite naršyklės langą, jūsų žemėlapis turėtų veikti.

      Štai šio skyriaus atskaitos taškas: ckpt-3

      Naujas tikslas: Sukursime interaktyvų žemėlapį, kuris leis mums perjungti tarp pagrindinių siuntų kontūrų ir asmens rajono tankio (choropleth) rodinį tuose rajonuose.

      Norėdami tai pasiekti, naudosime SQL, prie kurio dirbome anksčiau.

      Tai galite padaryti keliais būdais, naudosime SQL, galite perskaityti turimų funkcijų magijos dokumentus „PostGIS“ dokumentuose ir kitaip tiesiog sekti.

      Grįžtant prie ką tik sukurto „createLayer“ pavyzdžio:

      • Įklijuokite šią „CartoCSS“ struktūrą savo tinklalapio skyriuje & lthead & gt.
      • Tai iš anksto sukonfigūruotas „Choropleth“ stilius. Taip pat galite sukurti vieną skrisdami, apskaičiuodami duomenų diapazoną ir kurdami šiose ribose esančias šiukšliadėžes.

      (nepamirškite kablelio!) Ir eilutė po Cartocss su

      Šios dvi kodo dalys yra tik „jQuery“ operacija, kuri suranda HTML elementą, kurio ID yra sql arba „cartocss“, ir ištraukia jame esantį tekstą.

      posluoksniai [0] .set (options) // SQL ir CartoCSS keitimas žr. aukščiau

      Patikrinkite kontrolės punkto kodą čia, jei esate įstrigęs. Taip pat galite paleisti SQL dėkle (ne vietiniuose failuose) ir žemėlapis bus užpildytas. Pridėjimas pridedant jį kaip šabloną yra tas, kad galite jį pakeisti kita SQL arba vykdyti įvairias užklausas su skirtingomis šablonų nuorodomis vietoje, ir jūs neapsiribojate viena užklausos parinktimi.

      Perkraukite savo naršyklės langą, jūsų žemėlapis turėtų veikti!

      Pridėti interaktyvumo mygtukus

      Štai šio skyriaus atskaitos taškas: ckpt-4

      Norėdami pridėti daugiau interaktyvumo, sukursime du mygtukus, norėdami perjungti paprasto žemėlapio rodinį ir rodinį, kuriame pateikiamas choropleth žemėlapis. Tai galime lengvai padaryti „CartoDB“ naudodami metodus sublayer.setSQL () ir sublayer.setCartoCSS () duomenims pakeisti.

      Pirmiausia sukurkite kitą & ltstyle type = "cartocss / text" & gt žymų rinkinį naudodami šį „CartoCSS“ stilių. Įsitikinkite, kad ID yra paprastas.

      Štai šio skyriaus ckpt-5 atskaitos taškas

      „Windows“ įtraukimas į redaktorių

      Savo redaktoriuje galite įgalinti „hover“ vidinius „Windows“ langus, kurie bus nukreipti į jūsų žemėlapį ir suteiks jums choropleth kontekstą.

      • pritaikymas html / css formatu
      • visus lentelės duomenis galite naudoti, kad užpildytumėte patarimus
      • HTML šablonai
        • Vairo žymėjimas
        • Informacijos rodymo pritaikymas
        • Įtraukite vaizdus

        Tada pridėkite tai prie parinkčių:

        Po antrinių sluoksnių [0] .set (.) Pridėkite tai:

        Galite remtis tuo arba atsisiųsti demonstracinį bloką čia, kad galėtumėte peržiūrėti savo darbo rezultatus naudodamiesi ribotu interaktyvumu!

        Už „CartoJS“ bibliotekos ribų mes turime kitų, kurie padės jums sukurti dinamišką pasakojimą su savo duomenimis.

        „TimeSeries“ duomenys + pasakojimas

        Žemėlapiai, nurodantys laiką - Sukimo momentas

        Žemėlapiai, pasakojantys istorijas - Odisėja JS

        Čia pateikiamas šio skyriaus ckpt-6 atskaitos taškas

        Galite naudoti „CartoDB“ SQL API, jei norite pateikti užklausą savo duomenims ir įtraukti juos į bet kurią pasirinktą diagramų biblioteką.

        Galite lengvai sukabinti surašymo vandens tankio diagramą, patikrinkite kodą čia.

        Tipas Pavadinimas Nuoroda / demonstracinė versija Tinklaraščio straipsnis
        Chart.js juostos diagrama Eismo duomenys Aurelijos blokas
        Aukštos diagramos Jutiklio duomenys „Github“ / „Demo“ „MOW Post“
        Aukštos diagramos Orų duomenys Aurelijos blokas Pamoka
        Chart.js linijos grafikas „Tornado Data“ Andriaus blokas
        Plot.ly Žemės drebėjimo duomenys „Plotly Tutorial“ „CartoDB“ tinklaraštis
        Chart.js juostos diagrama Pastato pėdsako duomenys Aurelijos blokas

        • sql.execute (SQL komanda), jei norite išgauti duomenis iš savo paskyros, įdėti į diagramas, „Windows“ ir pan.
          • Naudojant Chart.js
            : šalys, miestai, kodai, vėliavos, kalbos, platuma / ilguma ir kt.: kelių agentūrų erdviniai duomenys: Baskų krašto Barselonos rotušės atvirieji duomenys: Catalunya (2012): paskirstyti geoerdviniai duomenys

          Jei sukuriate žemėlapį, kuriuo didžiuojatės, arba norite tiesiog pasisveikinti, susisiekite su manimi @auremoser


          Žiūrėti video įrašą: CartoDB tutorial