Izveidojiet savu siltuma karti ar D3 — apmācība ar piemēriem

Izmēģiniet Mūsu Instrumentu Problēmu Novēršanai

Siltuma kartes attēlo datus vizuāli, izmantojot krāsu gradientus, lai norādītu koncentrācijas un lielumus. Tie nodrošina intuitīvu veidu, kā vizualizēt sarežģītas datu kopas, ātri noteikt tendences un novirzes. Šajā rokasgrāmatā ir aplūkota atkārtoti lietojama interaktīva materiāla izveide siltuma kartes komponents no nulles ar D3 . Apgūstiet paņēmienus datu ielādei, vērtību kartēšanai krāsām, rīka padomu pievienošanai un panoramēšanas un tālummaiņas darbību iespējošai, lai izveidotu pielāgotu. D3 siltuma kartes .

Siltuma kartes pārskats

Siltuma kartes radās datu 2D attēlojumā, kas tabulēti kā krāsu kodēti režģi. Krāsu intensitāte korelē ar datu atribūta lielumu, kas kartēts ar paleti, sākot no gaišiem līdz tumšiem toņiem.

Piemēram, tumši sarkanās šūnas varētu norādīt uz lielu ieņēmumu skaitļiem, bet gaiši zilas apzīmē mazākas summas. Tas ļauj viegli skenēt modeļus dažādos mainīgajos.

Interaktīvās siltuma kartes

Interaktīvās siltuma kartes, ko nodrošina JavaScript bibliotēkas, piemēram, D3, balstās uz pamata koncepciju, kas nodrošina bagātīgu vizualizāciju un lietotāja pieredzi ar:

  • Vienmērīga krāsu progresija no kvantitatīvām skalām
  • Dinamiska fokusēšana, jo vērtības mainās laika gaitā
  • Rīka padomi, kas parāda precīzus skaitļus, virzot kursoru
  • Tuvināt interesējošos reģionus
  • Animācijas un pārejas

Šīs funkcijas kopā ar D3 iespējām ārējo datu plūsmu ielādei paver daudzas iespējas tīmeklī balstītām siltuma karšu lietojumprogrammām.

D3 Pārskats

D3 apzīmē Data Driven Documents. Tā nodrošina uzlabotu JavaScript bibliotēku, lai no datiem izveidotu interaktīvas pārlūkprogrammas vizualizācijas. Izmantojot HTML, CSS un SVG, D3 balstās uz tīmekļa standartiem, lai nodrošinātu jaudīgus attēlojumus, izmantojot visas mūsdienu pārlūkprogrammu iespējas.

Kāpēc siltuma kartēm izmantot D3?

Galvenie iemesli, kāpēc D3 izceļas ēku siltuma kartēs, ir šādi:

  • Datu ielāde un parsēšana - Viegli pārtveriet CSV, JSON utt
  • Spēcīgi atlasītāji - Pārvietojiet un mainiet DOM elementus
  • Mērogi un krāsu kartēšana - Intuitīvi kartējiet numurus ar krāsām
  • Pārejas un atjauninājumi - Nevainojami animēt izmaiņas
  • Koordinātas un ģeokartēšana - Tulkot datus ekrāna pozīcijās

Kopā šīs iespējas racionalizē aizraujošu siltuma karšu veidošanu ar D3.

Notiek datu ielāde

Galvenais solis, vizualizējot datus ar D3, ir avota datu kopu uzņemšana. D3 atbalsta tādu izplatītu formātu kā CSV, TSV, JSON utt ielādi no failiem vai API galapunktiem.

Datu kopas paraugs

Lai demonstrētu siltuma karti, nejauši ģenerēti pārdošanas dati par 5 gadiem un 12 mēnešiem nodrošina interesantu datu kopu, ko vizualizēt.

|_+_|

Izmantojot nejaušus datus, kas aptver 5 gadus 12 mēnešu laikā, modeļus un novirzes var būt interesanti vizuāli izpētīt.

Ielādē ar D3

D3 nodrošina |_+_| funkcija, lai iegūtu un parsētu CSV datus, nododot rezultātu atzvanīšanas funkcijai. Ielādētie dati kļūst pieejami funkcijā, izmantojot |_+_| metode, kas automātiski nosaka vērtību tipus.

|_+_|

Tas apstrādā visu darbu, kas saistīts ar datu pieprasīšanu, parsēšanu, tipa noteikšanu un kļūdu apstrādi, automatizējot lielu daļu standarta koda.

Iestatiet SVG un svarus

Kad dati ir ielādēti, ir jādefinē audekla apgabals, lai tajā būtu siltuma karte, izmantojot SVG un mērogošanas funkcijas, kas kartētas renderēšanas vērtībām.

Izmēru noteikšana SVG

SVG nodrošina vektorgrafikas pamatu vizualizācijām, izmantojot XML sintaksi. D3 atlasa un izveido SVG elementus ekrānā programmatiski, pamatojoties uz datiem.

SVG audekls tiek pielāgots un novietots, pamatojoties uz piemalēm un zīmēšanas apgabala parametriem:

|_+_|

Tādējādi tiek izveidota SVG virsma 600 x 400 pikseļi ar 50 pikseļu piemalēm katrā pusē asīm, etiķetēm utt., padarot pašu datu vizualizāciju centrētajā 400 x 300 pikseļu zīmēšanas apgabalā.

Svari

Nākamās lineārās un krāsu skalas funkcijas kartē datu vērtības uz ekrāna koordinātām.

Lineāra y skala pozīcija pēc mēneša no 0 līdz 11 pēc augstuma:

|_+_|

Krāsu skala kodē pārdošanas vērtības, kas interpolētas krāsām:

|_+_|

Šīs atkārtoti lietojamās skalas tagad pārvērš neapstrādātus datus un pikseļu pozīcijas.

Zīmēšanas dati

Kad priekšapstrāde ir pabeigta, datu vizualizācijas pamatā ir datu vērtību saistīšana ar grafiskiem elementiem, piemēram, taisnstūriem.

Saistošie dati

Datu saistīšana saista datu elementus ar DOM komponentiem:

|_+_|

Tagad katra CSV rinda ir saistīta ar SVG |_+_| elements ir gatavs tulkošanai ekrāna pozīcijās.

Kartēšanas skalas

Nākamās datu vērtības tiek kartētas uz mērogiem, izmantojot D3 ievadīšanas-atjaunināšanas-izejas modeli, lai renderētu saistījumus:

|_+_|

Tādējādi katra datu kolonna pēc indeksa tiek tulkota horizontāli, savukārt mēneši tiek novietoti vertikāli. Taisnstūra augstumi tiek aizpildīti no y pozīcijas uz leju proporcionāli pārdošanas vērtībām attiecībā pret krāsu skalu.

Precizējumi

Ja ir ieviesti pamatdatu saistījumi, ir pieejamas daudzas iespējas, lai uzlabotu siltuma karti, piemēram, etiķetes, rīka padomi, interaktivitāte un tālummaiņa, lai izceltu D3 vizualizāciju izrotāšanas paņēmienus.

Cirvji

Asis nodrošina orientētas etiķetes datu kontekstualizēšanai:

|_+_|

Lejā līdzinātā x ass kartē gadu kolonnas, formatējot ķeksīti, lai rādītu cilvēkiem lasāmus gadus, sākot no 1, nevis JavaScript 0.

Rīku padomi

Rīka padomi parāda datu vērtības, virzot kursoru:

|_+_|

Tas atklāj precīzus pārdošanas numurus, virzot peles kursoru virs šūnām.

Panoramēšana un tālummaiņa

Panoramēšana velk skata logu, kamēr tālummaiņa fokusē:

|_+_|

Tagad, velkot peles vidējo taustiņu, diagramma tiks pārvietota, un ritināšana pielāgo tālummaiņas līmeni, dinamiski izpētot datu tīklājus.

Eksportēšana un izplatīšana

Kā atkārtoti lietojamu D3 komponentu ietiniet vizualizācijas kodu funkcijas elementā un datu parametros:

|_+_|

Tas ir stabili mērogojams visās kodu bāzēs ar daudzām vizualizācijām.

Secinājums

Pielāgotu siltuma karšu izveide palīdz vizualizēt sarežģītas tendences daudzpusīgās datu kopās, kas atbalsta viedākus lēmumus. Izmantojot D3 elastīgās datu ielādes, saistīšanas, mērogošanas un kartēšanas metodes, atkārtoti lietojamās interaktīvās siltuma kartes tiek viegli komponentētas, lai bagātinātu informācijas paneļus un lietojumprogrammas.

Lai iegūtu vēl bagātīgāku grafisko analīzi, pievienojiet datu vizualizācijas rīku komplektam dendrogrammas, sankey diagrammas, akordu diagrammas un citas uzlabotas D3 metodes.

Skatīt Arī: