D3 er ikke et datavisualiseringsbibliotek

Forståelse, der kan hjælpe dig med at lære det (og aflære det)

D3.js er et utroligt vellykket bibliotek, men der er en forbindelse mellem, hvad folk synes, D3 gør, og hvad det faktisk gør. Som et resultat er læring D3 skræmmende og forvirrende. Ved bedre at forstå dens struktur og opdele det i mere håndterbare stykker, kan det være lettere at vælge, hvilke dele af biblioteket de skal lære, og hvilke dele man skal undgå - nøgleundervisning ikke kun for D3-begyndere, men for ekspertbrugere som mig, der måske ønsker at undersøge igen hvordan de bruger D3.

Jeg skrev en bog om D3 (to gange), så jeg er sikker på, at du tænker, at dette er en slags clickbait-titel, og at jeg kommer til at lave et subtilt spil på ord eller sige noget som om D3 ikke er en datavisualisering Bibliotek det er DET Visualisering Bibliotek. Men nej sammen med nøglefunktionalitet, der giver dig mulighed for datavisualisering, består D3 også af anden funktionalitet, der kun er tangentielt relateret til datavisualisering. Du bliver måske overrasket over det i betragtning af, hvordan D3-startsiden ser ud.

Men meget af D3 har lidt at gøre med grafik, og mange af de dele, der ikke er nødvendige for at lære at skabe effektiv datavisualisering. Vi kan tage D3 API-siden og visualisere den som et hierarki ved grafisk at indlejre funktionerne i de sektioner og underafsnit, der er beskrevet i dokumentationen. Sådan ser d3-udseende ud ved hjælp af denne metode:

Sammen med at gøre dette for hele dokumenterne grupperede jeg funktionaliteten i et par brede semantiske kategorier. Det er klart, at denne metode til visualisering af API'et ikke tegner sig for ægte kompleksitet, fordi nogle sektioner har mange små næsten duplikatfunktioner, mens andre kun har et par komplekse funktioner, men det giver en rimelig grafisk oversigt.

Et hierarkisk diagram over funktionerne, der er anført på D3 API-siden, grupperet i deres kategori (såsom d3-skala eller d3-array) og underkategori (hvis relevant, såsom kontinuerlig skala) og derefter yderligere grupperet og farvet og mærket af delen af den API, de repræsenterer. I denne formulering er geografisk datavisualiseringsfunktion en underafsnit af dataviz.

Størrelsen og kompleksiteten af ​​biblioteket har altid gjort det vanskeligt at undervise, og næsten hver lektion og bog (min inkluderet) fokuserer først på at etablere JQuery-delen af ​​biblioteket, som handler om DOM-manipulation til at oprette og manipulere elementer på en webside .

Men se på diagrammet ovenfor. Hvis du vil lære, hvordan du bruger D3 til datavisualisering, behøver du ikke lære noget i højre side, og du behøver næsten helt sikkert ikke at lære alt til venstre. Faktisk, hvis du gør det, kan du muligvis indstille dig selv til en dårligere chance for succes i det lange løb. Jeg forklarer, når jeg går gennem områderne i D3 API.

DE JQUERY DELER

Så meget af det, du læser i D3-tutorials, fokuserer på dets DOM-manipuleringsfunktionalitet. Dette inkluderer det valgte / enter / exit / exit / opdateringsmønster, du sandsynligvis har set tusind gange, men også bekvemmelighedsfunktioner til at trække, zoome, sende begivenheder og endda bruge Fetch (D3-smagen kaldes ikke overraskende d3-fetch).

Der er nyttige og interessante funktioner (som d3-zoom) sammen med bestemte D3-smagsoplevelser af eksisterende ES2015-funktionalitet, hvis du foretrækker D3-måde at skrive kode på. Men hele dette afsnit er unødvendigt, hvis du bruger noget som Vue til at oprette dine DOM-elementer og aktivt er i konflikt med andre former for DOM-styring, hvilket kræver hacks eller blandede systemer. Hvis du arbejder i et teammiljø, er det langt mere sandsynligt, at resten af ​​dit team er mere fortrolig med andre metoder til DOM-styring end D3, så der er gode grunde til at undgå dette aspekt af D3 helt.

Det er grunden til, at dette er så bundet med datavisualisering: Du kan ikke visualisere ting, medmindre de faktisk eksisterer (i DOM), men fordi det er så fremtrædende i API, kommer det til nye målgrupper, som om D3 kun kan være brugt, hvis du bruger D3 til at manipulere DOM. Det giver også mening, da D3 oprindeligt blev udviklet (v3 blev frigivet i 2013). Der er en anden grund til valg, og det er knyttet til animation, som jeg får vist nedenfor.

LODASH-DELERNE

Der er en anden betydelig del af biblioteket, der udsætter en række funktioner, der er en del af processen til datatransformation, rengøring og formatering. Nogle af dem, f.eks. Min og max-funktionerne i d3-array, er syntaktisk sukker til operationer, der kan håndteres med vanilje JavaScript. Andre, som sæt og kort, er D3-smag, der ikke er helt ens som ES2015 Sæt og kort.

Formateringshjælpeprogrammerne er der, hvis du kan lide numerisk formatering i pythonstil, noget jeg synes er mindre intuitivt end tal og tidsformatering, som i al min erfaring med D3 jeg aldrig har brugt foretrækkende øjeblik eller (før øjeblikket og nu for nylig) vanilla JavaScript tid formateringsindstillinger. Der er derudover nogle interpolationsfunktioner, der bruges internt til at skabe skalaer og farvefunktionalitet, såvel som en række tilfældige talgeneratorer.

Du er nødt til at vide, hvordan man måler og formaterer data for at udføre datavisualisering, men der er mange måder at gøre det på, ofte i processen, der fører op til oprettelsen af ​​datasættet. Der er også andre biblioteker, der måske er mere almindeligt anvendt i industri- eller native ES2015-funktioner, som større teams har en bedre chance for at forstå end bestemte D3-funktioner.

ANIMATIONENS DELER

d3-overgang er en af ​​de mest praktiske måder at animere grafiske elementer på nettet og er tæt knyttet til d3-valg. Men jeg har fundet, at animation i datavisualisering, selvom den er imponerende og iøjnefaldende, er en meget lavere prioritet end at forstå, hvordan forskellige diagramtyper præsenterer data, hvordan man korrekt design diagrammer, forstå form i datavisualisering og andre aspekter af datavisualisering øve sig. I betragtning af at du er nødt til at bruge D3-valg for at få adgang til animation via d3-overgang, er det en tung investering, der måske bedre kan bruges på at udjævne på andre måder.

Et andet aspekt af animation, der gør det valgfrit for så vidt man lærer at gøre det med D3 er, at der er andre biblioteker, der laver god animation, som GSAP, såvel som animationsløsninger, der er hjemmehørende i den metode, du (eller dit team) bruger til DOM-styring.

DATAANALYSE DELER

Vi kommer tættere på datavisualisering her. Analysering af data som CSV'er og dens forskellige smagsoplevelser (fanebladafgrænset, kommaafgrænset) er en vigtig del af datavisualisering, og jeg har ikke set et bibliotek, der gør det så let som d3-dsv. Men meget af mine produktionsdata er behandlet og tilgængelige som JavaScript-datastrukturer og kræver ikke behandling af CSV'er. d3-quadtree er et utroligt sjovt og nyttigt bibliotek til rumlig søgning, men dets direkte anvendelse er temmelig sjældent i den virkelige verden (under hætten bruges firtre til ting som netværksdiagrammer bygget med d3-kraft). Binning og nestede funktioner fra d3-samling og d3-array falder også ind under denne kategori.

DATAVISUALISERINGENS DELER

Det ægte kød af D3 til datavisualisering er i dets funktioner til at dekorere data med tegneinstruktioner, oprette nye tegnbare data fra kildedata, generere SVG-stier og oprette datavisualiseringselementer (som en akse) i DOM fra dine data og metoder. Det er nyttigt at opdele den grafiske funktionalitet af D3 i generatorer, komponenter og layout. Da layout og generatorer ikke producerer DOM-elementer, men kun råmateriale til oprettelse af DOM-elementer, skal du stadig videregive de data, de opretter, til DOM, en proces, som jeg beskriver ved hjælp af React i en tidligere artikel.

Et diagram fra D3.js i handling, der beskriver forskellen mellem generatorer, komponenter og layout.

At forstå ikke kun, hvordan man bruger layout og generatorer, men også hvordan de fungerer, er nøglen til at forstå datavisualisering. Fordi mest komplekse datavisualisering er kombinatorisk, er forståelsen af, hvordan disse forskellige funktioner kan interagere for at producere en anden form for diagram, nøglen til at forstå, hvordan man visualiserer datavisualisering godt. Det er uheldigt, at folk, der lærer D3, bruger så meget tid på at lære sin DOM-styringsfunktionalitet og kun har en overfladisk forståelse af den faktiske datavisualiseringsfunktionalitet.

D3s datavisualiseringsfunktioner

d3-form har en masse rigtig værdifulde funktioner, der trækker SVG-stier fra matriser af data, der er nyttige i sig selv og som modeller for, hvordan du kan opbygge dine egne generatorer. Dens indbyggede funktionalitet til gengivelse af lærred er rart, men der er en eksisterende løsning til det i vanilje JavaScript: Path2D.

Udover de grafiske funktioner opretter skalaer og interpolatorer ikke grafik, men er nøglen til at projicere grafik i det visuelle rum (hvad enten det er inden for et diagram, eller med farve, stregbredde eller andre kanaler, der bruges til at kommunikere visuelt). Skalaer interpolerer ikke kun tal til tal, men omdannes fra en tilstand til en anden (f.eks. Med kvantiseringsskalaer) og udsætter bekvemmelighedsfunktioner som beregning af kryds, der er egnede til akser.

d3-hierarki har hierarkiske layouts (som dendrograms, treemaps og sunbursts), men også en hierarkisk datastruktur, der giver praktiske måder at skive op og analysere hierarkiske data.

d3-force har en simpel begrænsningsbaseret kraftstyret layout, der er effektiv og generisk nok til at blive brugt i de fleste netværksvisualisering.

d3-farve og d3-farve-ordninger er ikke den eneste måde at håndtere farve på, og hvis du lige er startet, vil jeg foreslå at du arbejder med chroma.js snarere end D3s farveværktøjer.

Akse- og børstefunktionerne i D3 lider af det samme problem, som d3-valg gør, idet de når ind i DOM og skaber elementer selv. Det betyder, at de er sværere at integrere i en applikation, der bruger Vue eller React til at administrere DOM.

Nogle funktionaliteter, som lærred-til-SVG af d3-path, kan være nyttige i nogle hjørntilfælde, men den reelle værdi af at lære D3 kommer fra at lære de forskellige visualiseringsmetoder, såsom skrog, konturer, voronoi polygoner og akkorddiagrammer. At forstå, hvordan de tager forskellige former for data og udlede tegneinstruktioner, kan hjælpe dig med at forstå, hvordan data kan transformeres til dine applikationer, og hvordan disse transformationer interplayer.

GEO-DELERNE

Selvom det bestemt er en del af datavisualiseringsområdet for D3, er d3-geo sandsynligvis for specifik og ikke så let integreret på tværs af forskellige designtilfælde som de bredere datavisualiseringsstykker. Dens popularitet er vel berettiget, da D3 er blevet noget af en legeplads for neogeografer, der eksperimenterer med kartogrammer, rasterreprojektion og anden geografisk geekeri.

Det består af en million projektioner, et helt projektionsstrømningssystem, funktioner til at oversætte GeoJSON til stier, finde centroider og afgrænsningsbokse (brug d3-polygon, hvis du vil have dette til generiske geometrier). En masse sfæriske matematik og sfæriske former og steradianer.

D3 giver dig mulighed for at lave enkle choropleth-kort let, men med en høj indlæringskurve, hvis du ikke er en GIS-professional eller en kortnerd. I betragtning af de nyskabelser, der sker i WebGL-kortpladsen, hvis du ønsker at lave kort, vil du måske først udforske kepler.gl eller Mapbox.

Hvorfor dette betyder noget

Folk har svært ved at lære D3. Hvis du først forventes at lære DOM-manipuleringsdelen, kan det være en barriere, især når du arbejder på et projekt, hvor det allerede håndteres. Pointen med at lære D3 er at lære at oprette datavisualiseringsprodukter, og det er virkelig bare en del af biblioteket, som du kan fokusere på i stedet for den supplerende funktionalitet.

Det begrænser den kombinerende kvalitet af D3, hvis folk tænker på det som et selvstændigt økosystem. Datavisualisering og diagrammer handler om at kortlægge datatributter til visuelle funktioner. Det burde være fokus for enhver, der prøver at lære et bibliotek, der udfører datavisualisering, ikke DOM-styring. Der er masser af værktøjer til styring af DOM, og alle kan integrere datavisualiseringsfunktionerne i D3, hvilket kun vil øge mængden af ​​sofistikeret datavisualisering, der udføres.

Du finder måske, at brug af D3 til, at alt er særlig velegnet til din praksis. Det er fantastisk! Du skal købe min bog, da den forklarer, hvordan du bruger alle disse bits. Men jeg har fundet, at dette ofte ikke er tilfældet med folk, der kommer til at lære D3, og som et resultat taber datavisualiseringsfællesskabet bidrag fra udviklere, der virkelig bare ville gøre datavisualisering. For dem håber jeg, at jeg har gjort et anstændigt stykke arbejde med at definere, hvor de skal se, og hvad de skal fokusere på, når det kommer til at lære D3.

For dem, der allerede har mestret D3, håber jeg, at dette har hjulpet med at beskrive, hvor komplekst og eklektisk og meningsfuldt biblioteket kan synes for udenforstående (Og jeg kom ikke engang ind i al funktionskæden ...). Lad os ikke antage, at den måde, vi lærte eller bruger D3 på, er den eneste måde at gøre det på, selvom det betyder at udvikle vores praksis.