Skapa JavaScript-driven datakartor med Billboard.js

Grafik och grafik spelar en viktig roll för att förbättra webbinnehållet. Med modern teknik är det så enkelt att lägga till anpassade bilder som SVG-ikoner i din sida.

Men en annan överraskande bild som du kan bygga från början är ett webbschema.

Detta kan hjälpa dig Grafikera data visuellt så dina besökare kan snabbt skumma relevant information. Och istället för att du kodar en graf själv kan du använda ett bibliotek som Billboard.js för att göra allt tungt lyft.

Detta är faktiskt byggt på toppen av D3, vilket är ett JavaScript-visualiseringsbibliotek. Det är lätt det mest populära där ute och gör det det säkraste beroende du kan begära.

Med Billboard.js kan du snabbt och enkelt få åtkomst till D3 API. Det primära målet för Billboard är användarvänlighet, vilket gör det tillgängligt för alla. Även om det hjälper till att ha lite erfarenhet av JavaScript, behöver du verkligen inte vara expert.

Observera att hela kodbasen använder ES6-syntax som kan vara förvirrande för mindre erfarna JS-devs.

Så länge du vet hur man sammanställer koden du borde ha det bra Vi täckte faktiskt några heta funktioner från ES6 om du vill lära dig mer.

Alla tekniska detaljer om det här pluginet kan tyckas trevligt. Men du vill bara veta vad detta kan göra.

Ta en titt på demoversidan och klicka på några av de levande exemplen.

Du hittar allt från cirkeldiagram till spridningsdiagram och anpassade animerade stapeldiagram.

Med Billboard.js har du fullständig kontroll över dina data. Du kontrollerar hur det visas på sidan, hur det är strukturerat och vilken typ av UI / UX-funktioner du lägger till (om någon).

Det är verkligen ett fantastiskt diagrambibliotek och det är en av de enklaste att hämta. Ta en titt på projektets GitHub repo för att lära dig mer.

Du kan också gräva i det här koden på CodePen om du vill leka med koden i din webbläsare.