Thursday, March 27, 2014

Membuat Grafik Simpul dengan Arbor.js

grafik simpul adalah sebuah grafik yang terlihat seperti molekul-molekul yang saling terkait seperti contoh gambar dibawah ini :

image04

oke pertanyaan, bagaimana cara membuatnya ??? langsung saja ya kita bahas satu persatu .



  1. untuk memulai siapkan dulu file-file berikut ini jquery, arbor.js, graphics.js , dan renderer semuanya itu bisa anda download di github . file contoh disertakan pula didalamnya.

  2. selanjutnya buat file html kemudian tambahkan dibagian head jquery, arbor.js, graphics.js dan renderer

  3. buat sebuah kanvas di antara <body></body>
    <canvas id="viewport" width="800" height="600"></canvas>


  4. sampai disini anda sudah siap membuat grafik simpul yang pertama. tambahkan tag untuk javascript dibagian bawah canvas
    <script language="javascript" type="text/javascript"></script>


  5. masukan scriipt berikut diantara tag script untuk initialize system arbor
    var sys = arbor.ParticleSystem(1000, 400,1);
    sys.parameters({gravity:true});


  6. kemudian setting renderer untuk menggunakan canvas, karena id dari canvas adalah viewport maka nantinya graph akan di render ke elemen id tersebut.
    sys.renderer = Renderer("#viewport") ;


  7. berikutnya setelah perintah renderer siap, kita akan buat suatu node Animals yang berwarna merah , perintahnya adalah sebagai berikut :
    var animals = sys.addNode('Animals',{'color':'red','shape':'dot','label':'Animals'});


  8. akan terbentuk bulatan Animals berwarna merah seperti gambar dibawah ini :image00

  9. langkah selanjutnya adalah linking nodes yaitu menghubungkan node-node. sebagai contoh disini saya akan menambahkan node cat berwarna ungu mudah dan dogs berwarna hijau. tambahkan perintah sebagai berikut :
    var dog = sys.addNode('dog',{'color':'green','shape':'dot','label':'dog'});
    var cat = sys.addNode('cat',{'color':'blue','shape':'dot','label':'cat'});

    image02

  10. kurang lebih hasilnya seperti gambar diatas, nah node-node tersebut masih terpisah belum terhubung. sekarang saya akan menambahkan garis atau menghubungkan node-node tersebut, sebagai contoh cat akan terhubung dengan animals, dog terhubung dengan animals. untuk melakukan ini kita menggunakan perintah addEdge sebagai berikut :
    sys.addEdge(animals, dog);
    sys.addEdge(animals, cat);


  11. artinya menambahkan menghubungkan dog dan cat kepada animals.

  12. image03


Oke sampai disini ya cara membuat node dengan arbor.js.  disini saya jelaskan juga perbedaan antara yang dibahas diartikel ini dengan sourcecode yang anda download dari github. kalau di artikel ini membuat nodenya adalah di file html tapi di dalam tag javascript, kalau di sourcecode contoh dari github. anda bisa bongkar difile site.js.  jika anda tidak puas dengan penjelasan diatas anda bisa langsung membaca dokumentasinya di http://arborjs.org/reference.

silahkan isi komentar anda disini
EmoticonEmoticon

Note: Only a member of this blog may post a comment.