7 javascript library yang bisa membantu kamu membuat spesifik visualisasi
Programming javascript library bcscoder 18 Oct 2014 at 12:12 pm Jika kamu biasa menggunakan javascript library untuk membuat chart, statistik atau graphic lainnya, maka kita kali ini akan share bebera
Jika kamu biasa menggunakan javascript library untuk membuat chart, statistik atau graphic lainnya, maka kita kali ini akan share beberapa library javascript ini yang bisa membantu kamu untuk membuat visualisasi yang lebih spesifik.
1. JSPlumb
JSPlumb adalah javascript library yang dapat membantu kamu untuk membuat visualisai beberapa element seperti misalnya: flowcharts, kitchen sinks, state machines, dan hierarchical charts. Kamu tidak usah khawatir dengan browser issue karena JSPlumb sudah compatible hampir semua browser seperti IE6. JSPlumb menyediakan beberapa fitur animasi untuk visualisi yang kamu ingin buat dan yang terpenting library ini juga komatibel dengan library lainnya seperti JQuery, Mootools ataupun YUI. Sehingga jangan takut jika terjadi konflik saat menggunakannya bersamaan. Oh ya, library ini gratis kok dan kodenya bisa kamu lihat juga di Github.2. JS Sequence Diagrams
Ngomong-ngomong soal sequance diagram, jika kalian kuliah jurusan komputer pasti pernah membuat sequence diagram kan? Nah JS Sequence Diagrams ini adalah javascript library yang membantu kamu untuk membuat visualisasi sequance diagram, Cara kerjanya adalah dengan merubah perintah text menjadi sequance diagram dalam bentuk gambar vector. Menurut saya pribadi, library ini sangat keren dan mengingatkan masa kuliah dulu :)).
Library ini menyediakan 2 tema yang bisa kamu pilih, yaitu simple dan hand drawn. Jadi sebenarnya library ini mengimplementasikan 2 library lainnya yaitu Jison untuk memparsing text, dan Raphaël untuk menggambar vectornya. Supaya tidak penasaran bisa langsung lihat demo di bawah.
3. Timeline
Apa itu Timeline? Timeline adalah sebuah open source library yang bisa digunakan untuk membuat responsive timelines yang interaktif. Nah apa saja yang bisa kamu tambahkan di timeline kamu? Kamu bisa meng-embed beberapa sumber media seperti Youtube video, Vimeo, Google map, Twitter feeds dan yang lainnya. Untuk menambahkan media-media tersebut, kamu bisa menggunakan Google spreadsheet atau file JSON sebagi data sourcenya. Tidak usah lama-lama kodenya bisa kami lihat di GitHub dan demonya di bawah ini.
4. SmalWorld
Dari namanya kita bakal tahu kan ini library buat apa? Smallworld bisa membantu kamu membuat sebuah map dengan menggabungkan GeoJSON dan HTML Canvas. Library ini cukup kecil dan tidak membutuhkan dependencies library lainnya. Cara menggunakannya juga cukup mudah dan bisa dikombinasikan dengan JQuery atau Zeptop. Tapi library ini tidak memiliki fitur interactive seperi animasi atau yang lainnya, namun kamu bisa membuat animasi kamu sendiri dengan bantuan plugin lain seperti JQuery animation.
5. JoinJs
JointJS adalah JavaScript diagramming library yang bisa digunakan untuk membuat organizational charts, entity-relationship diagrams, Petri nets dan UML. Ada banyak tutorial kok yang menjelaskan dengan baik bagaimana cara menggunakan library ini di websitenya.
Tapi sayangnya library ini tidak gratis, jadi jika kalian para developer ingin memakainya, kalian butuh membeli licencenya dulu baru kemudian bisa menggunakannya secara penuh di project kalian.
6. HeatMap
Butuh library untuk mengetahui lokasi dimana user kamu paling lama berada di halaman web kamu? Yo, HeatMap dapat membatu kamu untuk merealisasikannya. Library ini khusus untuk menampilkan heatmap, dimana data yang ditampilkan terdiri dari matrix warna dari hijau sampai merah tergantung intesitas heatmapnya.
Kodenya sendiri tersedia secara gratis di GitHub. Meskipun project ini adalah open source, jika kalian perusahaan atau butuh penggunaan secara komersial, mereka juga menyediakan licence yang yang bisa kalian beli langsung loo.
7. Tangle
Library yang terakhir ini juga tidak kalah menarik dan bermanfaat untuk dicoba. Tangle adalah standalone javascript library yang bisa digunakan untuk membuat sebuah halaman website menjadi lebih interaktif dimana user bisa beramin langsung dengan parameters di dalam halaman tersebut dan secara langsung juga melihat perubahannya dalam bentuk text ataupun graphic di halaman yang sama. Kalau kamu tidak mengerti penjelasan di atas, coba kalian lihat saja langsung ke websitenya di bawah ini :))
Kesimpulan
Jadi kesimpulan apa yang bisa kita hasilkan kali ini? Setelah kita melihat berapa library diatas, diharapkan bisa menambah referensi javascript library untuk next project kamu nanti. Selain itu jika kalian hanya butuh library yang khusus untuk beberapa fitur saja kenapa harus menggunakan library yang besar seperti misalnnya D3.js? small thing, big impact!
Seperti biasa, jika kalian ada library lain yang keren-keren yang mau di share silakan tinggalkan comment, nanti kita akan tambahkan di artikel. ggtq!
Reference : www.sitepoint.com
Share via: