Byg dynamiske grafer hurtigt på D3 med Plottable.js

Den fri D3.js bibliotek er kun en af ​​mange, der lader dig oprette interaktiv grafik på siden. Mens D3 måske er den mest populære af bunken, er det ikke let at lære at bruge det.

Derfor Plottable.js er et så værdifuldt bibliotek. Det er et gratis open source-projekt bygget oven på D3.js, hvilket gør det lettere for alle at lave Interaktive data grafer fra bunden.

Dette bibliotek håndterer alt det beskidte arbejde, så du kan fokusere på specifikationer som data. plottable genererer den korrekte kode for størrelse og placering af et diagram du vælger.

Hvert diagram har sin egen komponent i Plottable hvor du kan Kopier / indsæt skabelonkoden at genopbygge diagrammet alene. Med dette skrift kan du vælge fra 10 plot graf stilarter, herunder bjælkediagrammer, cirkeldiagrammer, scatter plots og arealområder.

Du kan genopbygge komponenter individuelt og tilpasse deres indstillinger dynamisk. På den måde kan du nemt ændre interaktive elementer, farver, animationer, positioneringer, størrelser og alt andet du har brug for.

Det komplet bibliotek er tilgængelig på GitHub, hvis du vil gennemse kildekoden og downloade en kopi.

Men den bedste måde at lære er gennem eksempel. Derfor skal du kigge på deres prøvegrafer, der kører Plottable at se, hvordan det fungerer i aktion.

Hver graf er fuldt interaktive, med kildekoden til at starte. Hvis du vil genopbygge en lignende graf, skal du blot kopiere / indsætte JS-koden og reformat efter behov.

Jeg har to personlige favoritter fra deres websted: the Kalender Heatmap modelleret efter GitHubs aktivitetsbræt og Synkroniserede diagrammer med dynamiske valgfunktioner.

Hvis du aldrig har brugt D3.js før, så kæmper du for at lære dette bibliotek. Især fordi det er skrevet i TypeScript, så vil du sikkert også vælge det. Den endelige kode er kompileret i ES5 JavaScript, så det burde arbejde i alle større browsere.

Hvis du er villig til at dykke i, kig på deres Tutorials side fuld af handy ressourcer. Du lærer alt, hvad du behøver for at komme i gang med Plottable og til skabe dynamiske web-baserede grafer fra starten.