Opprett JavaScript-drevne datakart med Billboard.js

Grafikk og grafikk spiller en viktig rolle i å forbedre webinnholdet. Med moderne teknologi er det så enkelt å legge til tilpassede visualer som SVG-ikoner i siden din.

Men en annen overraskende visuell du kan bygge fra bunnen av er et webkart.

Dette kan hjelpe deg grafisk dataene visuelt slik at dine besøkende raskt kan skumme relevant informasjon. Og i stedet for å kode en graf selv kan du bruke et bibliotek som Billboard.js til å gjøre alt tungt løft.

Dette er faktisk bygget på toppen av D3 som er et JavaScript-datavisningsbibliotek. Det er lett den mest populære en der ute som gjør det til den tryggeste avhengigheten du kan be om.

Med Billboard.js kan du raskt og enkelt få tilgang til D3 API. Det primære målet for Billboard er brukervennlighet, slik at den er tilgjengelig for alle. Selv om det hjelper å få litt erfaring med JavaScript, trenger du absolutt ikke å være ekspert.

Bare vær oppmerksom på at hele kodebase bruker ES6-syntaks som kan forveksles med mindre erfarne JS-devs.

Så lenge du vet hvordan å kompilere koden du burde ha det bra Vi har faktisk dekket noen få varmefunksjoner fra ES6 hvis du vil lære mer.

Alle tekniske detaljer om dette pluginet kan virke fint. Men du vil nok bare vite hva dette kan gjøre.

Ta en titt på demoversiden og klikk gjennom noen av de levende eksemplene.

Du finner alt fra kakediagrammer til spredningsdiagrammer og tilpassede animerte bargrafer.

Med Billboard.js har du full kontroll over dataene dine. Du kontrollerer hvordan den vises på siden, hvordan den er strukturert, og hvilken type UI / UX-funksjoner du legger til (hvis noen).

Det er virkelig et fantastisk kartbibliotek, og det er en av de enkleste å plukke opp. Ta en titt på prosjektets GitHub repo for å lære mer.

Du kan også grave inn i denne koden på CodePen hvis du vil leke med koden i nettleseren din.