Bygg dynamiske grafer raskt på D3 med Plottable.js

Den gratis D3.js bibliotek er bare en av mange som lar deg Lag interaktiv grafikk på siden. Mens D3 er kanskje den mest populære av gjengen, er det ikke lett å lære å bruke det.

Derfor Plottable.js er et så verdifullt bibliotek. Det er et gratis åpen kildekode-prosjekt bygget på toppen av D3.js, noe som gjør det lettere for alle å lage interaktive datagrafer fra grunnen av.

Dette biblioteket håndterer alt det skitne arbeidet, slik at du kan fokusere på detaljer som data. plottable genererer riktig kode for størrelsen og plasseringen av et diagram du velger.

Hvert diagram har sin egen komponent i Plottable hvor du kan kopier / lim inn malekoden å gjenoppbygge diagrammet på egen hånd. Som i denne skrivingen kan du velge fra 10 plott grafiske stiler, inkludert bargrafer, kakediagrammer, scatter plots, og arealplott.

Du kan gjenoppbygge komponenter individuelt og tilpasse innstillingene dine dynamisk. På denne måten kan du enkelt endre interaktive elementer, farger, animasjoner, posisjoneringer, størrelser og alt annet du trenger.

De fullt bibliotek er tilgjengelig på GitHub hvis du vil bla gjennom kildekoden og laste ned en kopi.

Men den beste måten å lære er gjennom eksempel. Det er derfor du bør ta en titt på deres Eksempelgrafer som kjører Plottable for å se hvordan det fungerer i aksjon.

Hver graf er fullt interaktiv, med kildekoden for å starte opp. Hvis du vil gjenoppbygge en lignende graf, bare kopier / lim inn JS-koden og reformat etter behov.

Jeg har to personlige favoritter fra deres nettsted: The Kalender Heatmap modellert etter GitHubs aktivitetsbrett og Synkroniserte diagrammer med dynamiske utvalgsfunksjoner.

Hvis du aldri har brukt D3.js før, så sliter du med å lære dette biblioteket. Spesielt fordi det er skrevet i TypeScript, så vil du sannsynligvis også plukke opp det også. Den endelige koden er kompilert til ES5 JavaScript, så det burde arbeid i alle de store nettleserne.

Hvis du er villig til å dykke i, ta en titt på deres Opplæringsside full av praktiske ressurser. Du lærer alt du trenger for å komme i gang med Plottable og til Lag dynamiske nettbaserte grafer fra bunnen av.