Maak op JavaScript gebaseerde gegevensgrafieken met Billboard.js

Afbeeldingen en afbeeldingen spelen een cruciale rol bij het verbeteren van de webcontent. Met moderne technologie is het zo eenvoudig om aangepaste afbeeldingen zoals SVG-pictogrammen aan uw pagina toe te voegen.

Maar een andere verrassende visual die je vanaf nul kunt bouwen, is een webkaart.

Dit kan je helpen teken de gegevens visueel uit zodat uw bezoekers snel relevante informatie kunnen doorbladeren. En in plaats van zelf een grafiek te coderen, kunt u een bibliotheek zoals Billboard.js gebruiken om al het zware werk te doen.

Dit is eigenlijk bovenop D3 gebouwd, een JavaScript-bibliotheek voor gegevensvisualisatie. Het is gemakkelijk de populairste die er is en het de veiligste afhankelijkheid maakt waar je om kunt vragen.

Met Billboard.js heeft u snel en eenvoudig toegang tot de D3 API. Het primaire doel van Billboard is gebruiksgemak, waardoor het voor iedereen toegankelijk is. Hoewel het enige ervaring heeft met JavaScript, hoeft u zeker geen expert te zijn.

Merk alleen op dat de volledige codebase ES6-syntaxis gebruikt, wat verwarrend kan zijn voor minder ervaren JS-ontwikkelaars.

Zo lang als jij weet hoe je de code moet compileren het komt goed met je. We hebben een paar geweldige functies van ES6 behandeld als je meer wilt weten.

Alle technische details over deze plug-in lijken misschien aardig. Maar waarschijnlijk wil je het gewoon weten wat dit kan doen.

Bekijk de demopagina en klik door enkele van de live voorbeelden.

U vindt alles van taartgrafieken tot spreidingsdiagrammen en aangepaste geanimeerde staafdiagrammen.

Met Billboard.js heb je dat volledige controle over uw gegevens. U bepaalt hoe het op de pagina wordt weergegeven, hoe het is gestructureerd en welk type UI / UX-functies u toevoegt (indien aanwezig).

Het is echt een fantastische diagrambibliotheek en het is een van de gemakkelijkst op te halen. Bekijk de GitHub-repo van het project voor meer informatie.

Je kunt dit codefragment ook doornemen met CodePen als je met de code in je browser wilt spelen.