Bouw snel dynamische grafieken op D3 met Plottable.js

Het gratis Bibliotheek D3.js is slechts een van de vele die je kunt laten maak interactieve afbeeldingen op de pagina. Hoewel D3 misschien wel het populairst is, is leren om het te gebruiken geen eenvoudige taak.

Daarom Plottable.js is zo'n waardevolle bibliotheek. Het is een gratis open-sourceproject gebouwd op de top van D3.js, het voor iedereen gemakkelijker maken om te creëren interactieve gegevensgrafieken vanuit het niets.

Deze bibliotheek behandelt al het vuile werk, zodat u zich kunt concentreren op de details, zoals gegevens. plottable genereert de juiste code voor de grootte en positie van elk diagram dat u kiest.

Elke grafiek heeft een eigen component in Plottable waar je kunt kopieer / plak de sjablooncode om de grafiek zelf te herbouwen. Vanaf dit schrijven kunt u kiezen uit 10 grafische plotstijlen, inclusief staafdiagrammen, cirkeldiagrammen, spreidingsdiagrammen en plots.

Jij kan Componenten afzonderlijk opnieuw opbouwen en pas hun instellingen dynamisch aan. Op deze manier kunt u gemakkelijk interactieve elementen, kleuren, animaties, positioneringen, maten en alles wat u nodig heeft, wijzigen.

De volledige bibliotheek is beschikbaar op GitHub als je de broncode wilt bekijken en een kopie wilt downloaden.

Maar de beste manier om te leren is door een voorbeeld te geven. Daarom zou u hun moeten bekijken voorbeeldgrafieken met Plottable om te zien hoe het werkt in actie.

Elke grafiek is volledig interactief, met broncode om op te starten. Als u een vergelijkbare grafiek opnieuw wilt opbouwen, kopieert / plakt u de JS-code en maakt u deze zo nodig opnieuw.

Ik heb twee persoonlijke favorieten van hun site: de Kalender Heatmap gemodelleerd naar GitHub's activiteitenbord en de Gesynchroniseerde grafieken met dynamische selectiefuncties.

Als u nog nooit eerder D3.js hebt gebruikt, zult u moeite hebben om deze bibliotheek te leren. Vooral omdat het is geschreven in TypeScript, dus waarschijnlijk wil je dat ook oppikken. De definitieve code is gecompileerd in ES5 JavaScript, zo zou het moeten werken in alle belangrijke browsers.

Als je bereid bent om in te duiken, kijk dan naar hun Tutorials pagina vol met handige middelen. Je leert alles wat je nodig hebt om aan de slag te gaan met Plottable en to maak dynamische webgebaseerde grafieken helemaal opnieuw.