Vodič za JavaScript: Jednostavna vizualizacija podataka s React-vis

Vizualizacija podataka važan je dio pričanja priča, ali možete se satima izgubiti u korovu pomoću D3.js samo da napravite nekoliko jednostavnih karata. Ako su grafikoni sve što vam treba, postoji mnoštvo knjižnica koje omotavaju D3 i pružaju vam prikladne načine za izgradnju jednostavnih vizualizacija. Ovaj tjedan počet ćemo gledati React-vis, biblioteku grafikona koju je Uber stvorio i otvorena.

React i d3.js imaju zanimljiv odnos. React se bavi deklarativnim prikazom komponenata, a D3.js imperativnom manipulacijom DOM elementima. Njihova zajednička upotreba moguća je pomoću refs, ali puno je ljepše uvrstiti sav manipulacijski kôd u zasebnu komponentu, tako da ne morate toliko mijenjati kontekst. Srećom, React-vis biblioteka to već čini za nas s gomilom komponenata koje je moguće komponirati i koje možemo koristiti za izgradnju svojih vizualizacija.

Najbolji način za testiranje knjižnica za vizualizaciju podataka ili bilo koje druge biblioteke jest izgraditi nešto s njima. Učinimo to, koristeći skup podataka o popularnim imenima beba grada New Yorka.

Priprema podataka za React-vis

Za početak sam pokrenuo React projekt create-react-appi dodao nekoliko ovisnosti: react-vis, d3-fetchza pomoć pri uvlačenju CSV podataka i momentza formatiranje datuma. Također sam sastavio malo uzorka koda za uvlačenje i raščlanjivanje CSV-a koji uključuje popularna imena d3-fetch. U JSON formatu, skup podataka koji uvlačimo ima oko 11 000 redaka i svaki unos izgleda ovako:

{

  "Godina rođenja": "2016",

  "Ženski spol",

  "Etnička pripadnost": "Azijski i Tihi ostrv",

  "Ime djeteta": "Olivia",

  "Brojanje": "172",

  "Poredak": "1"

}

Budući da bi razmaci u tipkama i brojevi predstavljeni kao nizovi učinili ove podatke neugodnim za rad, izmijenit ćemo podatke prilikom učitavanja kako bismo izveli neko masiranje. Taj kod jednostavno koristi dsvmetodu iz d3-fetch:

uvoz {dsv} iz 'd3-dohvaćanja';

uvoz trenutak iz 'trenutka';

dsv (",", dataUrl, (d) => {

  povratak {

    yearOfBirth: + d ['Godina rođenja'],

    spol: d ['Spol'],

    etnička pripadnost: d ['etnička pripadnost'],

    firstName: d ['Ime djeteta'],

    count: + d ['Brojanje'],

    rank: + d ['Rank'],

  };

});

Sada su naši ulazni podaci puno ugodniji. Izgleda ovako:

{

  "yearOfBirth": 2016,

  "ženski spol",

  "nacionalnost": "Azijski i pacifički ostrv",

  "firstName": "Olivia",

  "brojanje": 172,

  "čin": 1

}

Naš prvi zaplet s React-visom

Prva komponenta koju ćete vjerojatno koristiti je neki oblik an-a XYPlot, koji sadrži druge komponente i prisutan je u gotovo svakom grafikonu koji napravite. Ovo je uglavnom samo omot koji definira veličinu vizualizacije, ali može sadržavati i neka svojstva koja se prenose i na djecu. Sam po sebi XYPlotne generira ništa osim praznog prostora:

   
    

  širina = {300}

  visina = {300}

Da bismo zapravo prikazali podatke, trebat ćemo upotrijebiti neku vrstu. Niz je komponenta koja zapravo crta podatke, kao što je okomiti trakasti grafikon ( VerticalBarSeries) ili linijski grafikon ( LineSeries). Na raspolaganju imamo 14 serija, ali započet ćemo s jednostavnim VerticalBarSeries. Svaka serija nasljeđuje od osnovnog skupa atributa. Najkorisniji za nas bit će dataatribut:

   
    

  širina = {300}

  visina = {300}

    podaci = {podaci}

  />

To, međutim, neće uspjeti jer React-vis očekuje da elementi u polju podataka budu u sljedećem obliku:

{

  x: 2016, // Ovo će se preslikati na x-os

  y: 4 // Ovo će se preslikati na os y

}

Na primjer, da bismo prikazali ukupan broj beba prebrojanih u skupu podataka prema godini, trebat ćemo obraditi podatke da bismo dobili po jedan objekt za svaku godinu gdje je xatribut godina, a yatribut ukupan broj beba u skup podataka. Kôd za koji sam to napisao prilično je kratak:

const totalBabiesByYear = Object.entries (data.reduce ((acc, row) => {

  if (row.yearOfBirth u skladu) {

    acc [row.yearOfBirth] = acc [row.yearOfBirth] + row.count

  } ostalo {

    acc [row.yearOfBirth] = broj redova

  }

  vratiti se prema;

}, {})). map (([k, v]) => ({x: + k, y: v}));

Kad ga priključite na VerticalBarSeries, dobit ćemo neke rezultate!

To samo po sebi nije posebno korisno, ali srećom React-vis knjižnica nudi neke dodatne komponente koje se mogu koristiti za kontekstualizaciju informacija. Uvezimo XAxisi YAxistako možemo prikazati više informacija u našoj tablici. Te ćemo komponente prikazati unutar, XYPlotuz naš VerticalBarSeries. Kôd i rezultati izgledaju ovako:

   
    

  širina = {600}

  visina = {600}

    podaci = {totalBabiesByYear}

  />

Naše oznake osi y odsječene su i oznake osi x oblikovane su kao brojevi, ali napredujemo. Da bi se x-os tretirala kao diskretne redne vrijednosti za razliku od kontinuiranog numeričkog raspona, dodati ćemo xType="ordinal"kao svojstvo na XYPlot. Dok smo kod toga, grafikonu možemo dodati lijevu marginu kako bismo mogli vidjeti više oznaka osi y:

   
    

  širina = {600}

  visina = {600}

  marža = {{

    lijevo: 70

  }}

  xType = "redni"

Poslujemo! Naš grafikon već izgleda sjajno - a većina posla koji smo morali obaviti odnosila se na masiranje podataka, a ne na stvarno prikazivanje.

Sljedeći tjedan nastavit ćemo s istraživanjem komponenata React-vis knjižnice i definirati neke osnovne interakcije. Pogledajte ovaj projekt na GitHubu ako se želite poigrati sa skupom podataka i React-vis knjižnicom. Imate li vizualizacije koje ste napravili s React-visom? Pošaljite mi snimak zaslona na Twitteru @freethejazz.