Izgradite dinamičke grafikone brzo na D3 s Plottable.js

Besplatno D3.js knjižnica je samo jedan od mnogih koji vam omogućuje stvoriti interaktivnu grafiku na stranici. Iako je D3 možda najpopularniji od hrpe, učenje za korištenje nije lak zadatak.

Zato Plottable.js je tako vrijedna knjižnica. To je besplatan open-source projekt izgrađena na vrhu D3.js, olakšavajući svima stvaranje interaktivni grafikoni podataka od nule.

Ova knjižnica obrađuje sav prljavi posao, tako da se možete usredotočiti na specifičnosti kao što su podaci. Plottable generira odgovarajući kod za veličinu i položaj bilo koje karte koju odaberete.

Svaka karta ima svoju komponentu u Plottable gdje možete kopirajte / zalijepite kôd predloška da sami izgradite grafikon. Od trenutka pisanja, možete odabrati iz 10 stilova grafikona grafikona, uključujući stupčaste grafikone, tortne grafikone, raspršene čestice i parcele područja.

Možeš Obnavljanje komponenti pojedinačno i prilagodite postavke dinamički. Na taj način možete jednostavno mijenjati interaktivne elemente, boje, animacije, pozicije, veličine i sve ostalo što vam je potrebno.

puna knjižnica je dostupan na GitHubu ako želite pregledavati izvorni kod i preuzeti kopiju.

No, najbolji način za učenje je kroz primjer. Zato ih treba pogledati primjeri grafova koji se izvode Plottable vidjeti kako djeluje.

Svaki graf je potpuno interaktivan, s izvornim kodom za pokretanje. Ako želite ponovno izgraditi sličan graf, jednostavno kopirajte / zalijepite JS kod i preoblikujte po potrebi.

Imam dva osobna favorita s njihove web lokacije: Mapa kalendara po uzoru na GitHubovu ploču aktivnosti i Sinkronizirane karte s značajkama dinamičkog odabira.

Ako nikada prije niste koristili D3.js, pokušat ćete naučiti ovu knjižnicu. Osobito zato što je to napisan u TypeScript, tako da ćete i vi vjerojatno to htjeti pokupiti. Konačni kod je sastavljen u ES5 JavaScript, tako i treba rad u svim glavnim preglednicima.

Ako ste spremni zaroniti u njih pogledajte Stranica s vodičima prepuni resursa. Naučit ćete sve što vam je potrebno da biste započeli s Plottable i to stvoriti dinamičke web-grafove od nule.