Site icon Opsumo

Tegning med data: Del 3 – Highcharts-blogg

Side-by-side network graphs illustrating different algorithmic forces

I Drawing with Data: Part 2 av vår tegning med dataopplæringsserie brukte vi styledMode for å transformere området spline range-serien vår til undervannstrær og skapte noen eteriske solstråler ved å bruke en rekke linjeserier og en SVG-gradient vi definerte i kartkonfigurasjonens defs-objekt. Nå er det på tide å legge til vår nettverksgrafserie, aka jellypus.

Network Graph Refresher

Nettverksgrafer visualiserer relasjoner mellom elementer i et nettverk, som enheter på et LAN, tilkoblinger i et transportsystem eller enda mer abstrakte ting som ideer i et tankekart.

Nettverksgrafserien består av noder og lenker, eller linjer, hvor nodene representerer elementene (enheter, togstasjoner, ideer) og koblingene viser sammenhengene mellom de enkelte nodene. Individuelle noder kan også ha forskjellige størrelser og vekter (dvs. masse) som hjelper til med å visualisere deres betydning i nettverket.

Nettverksgrafens layoutalgoritme simulerer deretter et fysisk system som bruker tiltrekningskreftene, frastøtingen og tyngdekraften for å arrangere nodene på en måte som best illustrerer nettverkets natur og hierarkiet til nodene.

Men hvordan bestemmer layoutalgoritmen hvor nodene skal gå og hvordan de skal oppføre seg i forhold til hverandre? En stor del av magien er et konsept kalt barysenteret og dets tilhørende krefter.

Barysenteret

Barycenter (fra gresk barús for “tung” og kéntron for “sentrum”) er det felles massesenteret mellom to eller flere legemer i et system og punktet der alle legemer i systemet er balansert eller stabilt i forhold til hverandre .

I en nettverksgraf finner Highcharts-layoutalgoritmen barysenteret basert på vekten eller massen til hver node og dens forbindelse til andre noder, og simulerer deretter barysenterkrefter som trekker nodene mot eller skyver dem bort fra barysenteret. Denne simuleringen pågår til nodene når en likevekt og setter seg i deres endelige posisjoner.

Du kan påvirke styrken til barysenterkreftene ved å justere layoutalgoritmens gravitasjonskonstant. Jo høyere gravitasjonskonstanten, desto raskere vil nodene skynde seg mot barysenteret og hope seg oppå hverandre. En lavere gravitasjonskonstant vil bremse nodenes reise til barysenteret, men de kommer til slutt dit og glomer sammen i en slags nettverksgraf-singularitet.

For ytterligere å kontrollere barycenter-krefter, kan du justere layoutalgoritmens frastøtende og attraktive krefter.

Krefter i spill

Layoutalgoritmens frastøtende kraft-innstilling bestemmer hvor mye individuelle noder frastøter hverandre. Jo høyere innstillingen er, jo lenger vil nodene svirre fra hverandre.


Se pennen
Nettverksgraf: Gravitasjonskraft
av Nancy Dillon (@nasin)
CodePen.

Den attraktive kraften gjelder koblingene eller linjene mellom noder og påvirker styrken til kraften som trekker sammenkoblede noder. Legg merke til at tiltrekningskraften ikke gjelder individuelle noder. For å kontrollere posisjonen til individuelle noder, endre innstillingene for frastøtende kraft.
Sammen med gravitasjon, frastøting og tiltrekning, er en annen måte å påvirke oppførselen til layoutalgoritmens barysenterkrefter ved å justere massene til individuelle noder.

Mer vekt

Som standard utleder en nettverksgrafs noder sin masse fra radiusen til markørene. For eksempel, hvis en nodemarkør har en radius på 10, er dens masse 10. Men du kan overstyre denne oppførselen ved å tilordne en eksplisitt masse gjennom nodens massekonfigurasjonsinnstilling, og når du gjør det, gjør layoutalgoritmen noen interessante ting.

Ta for eksempel en nettverksgraf der gravitasjonskonstanten og frastøtende krefter er balansert på en slik måte at nodene danner en jevn ball.

Hvis du gir en av nodene en masse 10 ganger større enn alle de andre nodene, vil du legge merke til at de lettere nodene ønsker å orientere seg rundt den tyngre noden. Dette er fordi den økte massen til den tyngre noden har flyttet barysenteret til systemet nærmere den tyngre noden.

Imidlertid ser den tyngre noden ut til å være omgitt av et “kraftfelt” som får de lettere nodene til å holde avstand. Dette er fordi den økte massen til den tyngre noden har forsterket dens frastøtende kraft.


Se pennen
Nettverksgraf: Gravitasjonskraft
av Nancy Dillon (@nasin)
CodePen.

Dra den store noden rundt. Legg merke til hvordan de små nodene reorienterer seg mot den store nodens barysenter mens de samtidig blir frastøtt. Dette fenomenet skaper en illusjon av et hode som kontrollerer de mindre nodene med bevegelsen, akkurat som en jellypus!

På tide å lage Jellypus

Før jeg legger til nettverksgrafserien til kartkonfigurasjonen min, må jeg legge til modulen for nettverksgrafseriene i HTML-filen min.

Deretter legger jeg til en nettverksgrafserie og gir den et klassenavn “jellypus” slik at jeg kan style den senere.

Legg merke til i layoutAlgorithm-objektet hvordan attractiveForce- og repulsiveForce-innstillingene er funksjoner som returnerer verdier. Disse verdiene forteller layoutalgoritmen hvor mye disse kreftene skal brukes mellom individuelle noder.

For vår jellypus vil vi at den frastøtende Kraften skal være halvparten av gravitasjonskonstanten. Dette vil sikre at nodene til jellypus-kroppen følger hodeknuten fra en respektabel avstand mens de opprettholder deres grupperte konfigurasjon.

I tillegg til disse innstillingene, vil jeg sette initialPositions til “random” for å gi oppsettet et mer organisk preg. Jeg vil også sette enableSimulation til true siden det er dette som får nettverksgrafen til å animere.

{ type: ‘networkgraph’, className: ‘jellypus’, zIndex: 2, markør: { enabled: true, radius: 5, symbol: ‘circle’ }, layoutAlgorithm: { enableSimulation: true, initialPositions: ‘random’, // Brukes bare på lenker, skal være 0 attractiveForce: function() { return 0; }, repulsiveForce: function() { return 1; }, integrasjon: ‘euler’, gravitasjonskonstant: 2 } }

For dataene vil jeg bruke dataene fra min originale nettverksgrafanimasjon jeg diskuterte i del 1 av denne opplæringsserien. Dataene består av både noder og lenker. Her er resultatet:

Se pennen
Jellypus 13
av Nancy Dillon (@nasin)
CodePen.

Hei jellypus!

Du vil legge merke til når du holder musepekeren over nettverksgrafen, at alle de andre seriene dempes, noe som skaper en irriterende flimmereffekt. For å forhindre at dette skjer, legger jeg til .highcharts-series-inactive i CSS-filen min og setter opacity-egenskapen til 1.

Styling av Jellypus

For å få jellypus til å se mer ut som en iriserende sjødyr, la oss konfigurere en annen SVG-gradient. Men i stedet for å definere gradienten i defs-objektet, setter vi den opp i HTML-filen. Denne metoden er flott hvis du bruker en online gradientgenerator som tilbyr klipp og lim inn SVG-kode.

Deretter lager jeg stiler for jellypus’ nodemarkører og lenker i min CSS og bruker gradienten som en fyllfarge ved å referere til IDen. (Jeg ga også lenkene en strek-dasharray på 3px for å få dem til å se mer rotete ut.)

.jellypus .highcharts-point { fyll-opasitet: 1; slagbredde:0,5px; stroke-dasharray: 3px; /* for lenkene */ stroke: white; } .jellypus.highcharts-markers .highcharts-point { strøk: hvit; fyll: url(#rgrad); /* svg gradient */ fyll-opasitet: 0,8; slag-dasharray: 0; }

En ting til … hele scenen ser litt utvasket ut, så jeg bruker et CSS-filter på container-div-en min for å øke den totale metningen.

#container { filter: saturate(1.5); }


Se pennen
Jellypus 14
av Nancy Dillon (@nasin)
CodePen.

Konklusjon

I denne artikkelen tok vi et dypdykk i Highcharts sin nettverksgraflayoutalgoritme for å bedre forstå hvordan nodemasse, barysenteret og frastøtende krefter fungerer. Vi lærte også hvordan du legger til en SVG-gradient via HTML.

I den neste opplæringen vil vi lære jellypus å svømme.

Exit mobile version