[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-7-javascript-library-yang-bisa-membantu-kamu-membuat-spesifik-visualisasi":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},307,"7-javascript-library-yang-bisa-membantu-kamu-membuat-spesifik-visualisasi","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",null,[],"2014-11-27T16:00:00Z","2026-07-14T04:39:29.167575Z","Programming \n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\njavascript\nlibrary\n bcscoder\n 18 Oct 2014 at 12:12 pm\t\t\t\t\t\t\n\u003Chr\u002F>\n\u003Cp>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.\u003C\u002Fp>\u003Ch4>1. JSPlumb\u003C\u002Fh4>\nJSPlumb adalah javascript library yang dapat membantu kamu untuk membuat visualisai beberapa element seperti misalnya: \u003Cem>flowcharts\u003C\u002Fem>, \u003Cem>kitchen sinks\u003C\u002Fem>, \u003Cem>state machines\u003C\u002Fem>, dan \u003Cem>hierarchical charts\u003C\u002Fem>. 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 \u003Ca href=\"http:\u002F\u002Fgithub.com\u002Fsporritt\u002Fjsplumb\u002F\">Github\u003C\u002Fa>.\u003Cbr\u002F>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fjsplumbtoolkit.com\u002Fdemo\u002Fflowchart\">Demo\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fjsplumbtoolkit.com\u002Fdoc\u002Fhome.html\">Dokumentasi\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch4>2. JS Sequence Diagrams\u003C\u002Fh4>\n\u003Cp>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 :)).\u003C\u002Fp>\n\u003Cp>Library ini  menyediakan 2 tema yang bisa kamu pilih, yaitu \u003Cem>simple \u003C\u002Fem>dan \u003Cem>hand drawn. \u003C\u002Fem>Jadi\u003Cem> \u003C\u002Fem>sebenarnya library ini mengimplementasikan 2 library lainnya yaitu \u003Ca href=\"http:\u002F\u002Fzaach.github.com\u002Fjison\u002F\">Jison\u003C\u002Fa> untuk memparsing text, dan \u003Ca href=\"http:\u002F\u002Fraphaeljs.com\u002F\">Raphaël\u003C\u002Fa> untuk menggambar vectornya. Supaya tidak penasaran bisa langsung lihat demo di bawah.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Fbramp.github.io\u002Fjs-sequence-diagrams\u002F\">Demo\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch4>3. Timeline\u003C\u002Fh4>\n\u003Cp>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 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FNUKnightLab\u002FTimelineJS\">GitHub\u003C\u002Fa> dan demonya di bawah ini.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Ftimeline.knightlab.com\u002F#examples\">Demos\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FNUKnightLab\u002FTimelineJS\">Dokumentasi\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch4>4. SmalWorld\u003C\u002Fh4>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmikefowler\u002Fsmallworld.js\">Github\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Fmikefowler.me\u002Fsmallworld.js\u002F\">Documentation\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch4>5. JoinJs\u003C\u002Fh4>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Fwww.jointjs.com\u002Fdemos\">Demo\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Fwww.jointjs.com\u002Ftutorial\">Dokumentasi\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch4>6. HeatMap\u003C\u002Fh4>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>Kodenya sendiri tersedia secara gratis di \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpa7\u002Fheatmap.js\">GitHub\u003C\u002Fa>. 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.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Fwww.patrick-wied.at\u002Fstatic\u002Fheatmapjs\u002Fexamples.html\">Demo\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Fwww.patrick-wied.at\u002Fstatic\u002Fheatmapjs\u002Fdocs.html\">Dokumentasi\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch4>7. Tangle\u003C\u002Fh4>\n\u003Cp>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 :))\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Fworrydream.com\u002FTangle\u002F\">Demo\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Fworrydream.com\u002FTangle\u002Fguide.html\">Dokumentasi\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch4>Kesimpulan\u003C\u002Fh4>\n\u003Cp>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? \u003Cem>small thing, big impact!\u003C\u002Fem> \u003C\u002Fp>\n\u003Cp>Seperti biasa, jika kalian ada library lain yang keren-keren yang mau di share silakan tinggalkan comment, nanti kita akan tambahkan di artikel. ggtq!\u003C\u002Fp>\n\u003Cp>\u003Cem>Reference : www.sitepoint.com\u003C\u002Fem>\u003C\u002Fp>\n \u003Chr\u002F>\n\t\t\t\t\tShare via:","Programming javascript library bcscoder 18 Oct 2014 at 12:12 pm Jika kamu biasa menggunakan javascript library untuk membuat chart, statistik atau graphic lainn",[],[],0]