Bygg dynamiska grafer snabbt på D3 med Plottable.js

Det fria D3.js-biblioteket är bara en av många som låter dig skapa interaktiv grafik på sidan. Medan D3 kanske är den mest populära i gänget, är det inte lätt att lära sig att använda det.

Det är därför Plottable.js är ett värdefullt bibliotek. Det är ett gratis open-source-projekt byggd på toppen av D3.js, vilket gör det lättare för alla att skapa interaktiva data grafer från början.

Detta bibliotek hanterar allt smutsigt arbete, så att du kan fokusera på detaljer som data. Plottable genererar den korrekta koden för storlek och position för vilket diagram du väljer.

Varje diagram har sin egen komponent i Plottable där du kan kopiera / klistra in mallkoden att bygga upp diagrammet på egen hand. Med detta skrivande kan du välja från 10 plot graf stilar, inklusive stapeldiagram, cirkeldiagram, spridningsdiagram och områdets tomter.

Du kan bygga upp komponenter individuellt och anpassa sina inställningar dynamiskt. På så sätt kan du enkelt ändra interaktiva element, färger, animeringar, positioneringar, storlekar och allt annat du behöver.

De fullt bibliotek finns på GitHub om du vill bläddra i källkoden och hämta en kopia.

Men det bästa sättet att lära sig är genom exempel. Det är därför du borde ta en titt på deras provgrafer som körs Plottable för att se hur det fungerar i aktion.

Varje graf är helt interaktiva, med källkod för att starta. Om du vill bygga om en liknande graf bara kopiera / klistra in JS-koden och formatera efter behov.

Jag har två personliga favoriter från deras webbplats: The Kalender Heatmap modellerad efter GitHubs aktivitetsbräda och Synkroniserade diagram med dynamiska urvalsfunktioner.

Om du aldrig har använt D3.js innan du kämpar för att lära dig detta bibliotek. Särskilt för att det är skrivet i TypeScript, så du kommer förmodligen vilja hämta det också. Den slutliga koden är sammanställd i ES5 JavaScript, så det borde arbeta i alla större webbläsare.

Om du är villig att dyka in, ta en titt på deras Tutorials sida full av praktiska resurser. Du lär dig allt du behöver för att komma igång med Plottable och till skapa dynamiska webbaserade grafer från början.