Visualisasi Online untuk Data Indikator IPTEK

2,099 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,099
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Visualisasi Online untuk Data Indikator IPTEK

  1. 1. Visualisasi Online untuk Data Indikator IPTEK Wildan Maulana wildan.m@negeripelangi.com Indri Juwita Asmara Rini Wijayanti Elmi Achelia indr003@lipi.go.id rini.wijayanti@lipi.go.id elmi.achelia@lipi.go.id © 2009, OpenThink Labs. All Rights Reserved
  2. 2. Pendahuluan ● Ketersediaan data ● Data disajikan dalam bentuk tabel dan grafik beserta metadata ● Informasi dipublikasikan dalam berbagai media ● Media online (internet) ● Visualisasi data (penyampaian informasi) © 2009, OpenThink Labs. All Rights Reserved
  3. 3. Konsep Teknik Visualisasi Terintegrasi Interaktif Dinamis Menarik artinya : penyajian data berbasis web yang dapat diakses oleh publik namun tetap memperhatikan tingkat sekuritas yang tinggi. Data tidak hanya ditampilkan dalam bentuk tabel dan grafik, tetapi juga memiliki kaidah interaksi dengan pengguna, dimana setiap pengguna dapat memilih, memodifikasi dan menampilkan data sesuai kebutuhannya © 2009, OpenThink Labs. All Rights Reserved
  4. 4. Data Indikator IPTEK Indonesia Sektor Perguruan Tinggi ● Input : Hasil survei litbang selama 3 tahun (2005, 2006, dan 2007). ● Responden Survei: Fakultas, Lembaga Penelitian, dan Lembaga Pengembangan Masyarakat. ● Tujuan kegiatan Indikator Iptek PT: mengumpulkan, mengolah dan mempresentasikan data kegiatan litbang di perguruan tinggi. ● Hasil Pengolahan ● Meliputi 3 hal yaitu belanja litbang, SDM litbang, dan luaran litbang. ● Disajikan dalam bentuk grafik dan tabel. ● Sasaran: Upaya untuk memetakan kegiatan litbang dilakukan secara komprehensif agar peta dapat menjadi bahan yang penting dalam perumusan kebijakan pengembangan iptek nasional. © 2009, OpenThink Labs. All Rights Reserved
  5. 5. Rule of Thumb ● Mengkomunikasikan data statistik kepada publik memerlukan pemikiran, persiapan dan uji coba yang intensif. ● Aturan : John Waslen, Geowise, 2008 “Developing Practice for presenting statistics on the Web” ● 33% usaha dialokasikan pengambilan data ● 33% untuk analisa ● 33% untuk DISEMINASI © 2009, OpenThink Labs. All Rights Reserved
  6. 6. Permasalahan dalam Diseminasi ● Terbatas pada satu media ● Tidak realtime ● Penyebaran terbatas © 2009, OpenThink Labs. All Rights Reserved
  7. 7. Solusi Visualisasi Online © 2009, OpenThink Labs. All Rights Reserved
  8. 8. Media Diseminasi © 2009, OpenThink Labs. All Rights Reserved
  9. 9. Target Media (Browser) © 2009, OpenThink Labs. All Rights Reserved
  10. 10. Visualisasi Online - 1 ● Data Indikator IPTEK ● Tabel Query ● Metadata Query Datamart DB I DB B DB M ....... Tabel Query Dashboard dan Metadata © 2009, OpenThink Labs. All Rights Reserved
  11. 11. Visualisasi Online - 2 ● Sistem Dashboard ● Menggunakan Border Layout dengan bantuan jQuery Layout Plugin ● Tampilan Data ● Tabel menggunakan HTML 5 Canvas ● Grafik menggunakan : – Open Flash Chart sebagai Chart generator – Data JSON, model data yang menjadi masukan bagi Open Flash Chart © 2009, OpenThink Labs. All Rights Reserved
  12. 12. Dashboard Suatu model antarmuka sistem informasi yang dianalogikan seperti dashboard sebuah mobil yang mudah untuk dipelajari © 2009, OpenThink Labs. All Rights Reserved
  13. 13. Dashboard ● Mengkomunikasikan informasi dengan cepat ● Membantu identifikasi trend, pola, anomali data ● Membantu pengambilan keputusan secara efektif © 2009, OpenThink Labs. All Rights Reserved
  14. 14. Format Data JSON ● Format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer ● Dibuat berdasarkan bagian dari JavaScript Programming Language ● Tidak bergantung pada bahasa pemprograman apapun ● Data JSON merupakan input bagi Open Flash Chart © 2009, OpenThink Labs. All Rights Reserved
  15. 15. Format Data JSON © 2009, OpenThink Labs. All Rights Reserved
  16. 16. Dashboard Teknologi Opensource Sym fony Fram ework Sym fony Fram ework Presentation Tier (sym fony : View Layer) Sym fony : Controller Layer jQuery D ata Open Flash JSO N Chart Data Model Chart G enerator HTM L 5 Canvas MySQ L Database © 2009, OpenThink Labs. All Rights Reserved
  17. 17. Symfony Framework ● sebuah framework open source berupa pustaka dari kelas-kelas yang ditulis dengan bahasa pemrograman PHP. ● menyediakan sebuah arsitektur, komponen- komponen dan tool-tool yang diperlukan untuk membangun sebuah aplikasi web © 2009, OpenThink Labs. All Rights Reserved
  18. 18. Open Flash Chart ● Tool chart generator berbasis swf ● Menyediakan berbagai tipe grafik : bar, pie, line, scatter, dll © 2009, OpenThink Labs. All Rights Reserved
  19. 19. jQuery ● JavaScript Library ● Menyederhanakan sebuah dokumen DHTML dalam penulisan, penanganan event, animasi, dan interaksi-interaksi dengan Ajax ● Contoh penulisan code javascript dan jQuery... John Resig © 2009, OpenThink Labs. All Rights Reserved
  20. 20. jQuery Layout <SCRIPT type="text/javascript"> <!-- code untuk setting style layout --> ● Sebuah plug-in $('body').layout({ }); <!-- code untuk memanggil ui accordion → untuk membuat $("#accordion").accordion(); tampilan user </SCRIPT> <BODY> interface khususnya <div class="ui-layout-west"> <div class="header">Main Menu</div> dengan border <div class="content"> <?php layout include_partial("menu_accordion");?> </div> ● 5 pane, yaitu North, <div class="subhead"> &copy; PAPPIPTEK LIPI West, Center, East, </div> </div> dan South <div class="ui-layout-north"> <div class="header">...</div> </div> <!-- <div class="ui-layout-south"></div> --> <!-- <div class="ui-layout-east"></div> --> <div class="ui-layout-center"> <?php echo $sf_content ?> </div> </BODY> © 2009, OpenThink Labs. All Rights Reserved
  21. 21. jQuery UI ● Library jQuery yang menangani tampilan User Interface ● Sortable portlets sebagai tempat untuk tampilan grafik © 2009, OpenThink Labs. All Rights Reserved
  22. 22. jQuery UI ● Accordion untuk menu di west pane <div id="accordion" class="ui-accordian"> <!--code query ke basisdata--> <?php $cats = KategoriQueryPeer::doSelect(new Criteria()) ; ?> <?php foreach($cats as $cat) {?> <!--hasil query basisdata menjadi menu accordion--> <?php } ?> </div> © 2009, OpenThink Labs. All Rights Reserved
  23. 23. jQuery SWFObject ● Sebuah plug-in yang menjadi $(".column").sortable({ add-on jquery yang connectWith: [.'column'], memberikan fungsi unik yaitu ... menyimpan konten Flash <!--fungsi-fungsi yang dilakukan ketika menangkap sebuah portlet pada proses drag n drop--> secara fleksibel di dalam receive: function(event, ui) { browser dengan ... $("#"+id+" > .portlet-content").flash({ menggunakan jquery <!--file OpenFlashChart--> selector data: '/swf/ichor-dz.swf', <!--var js utk identifikasi portlet--> ● Menampilkan grafik yang id: chartId, dibuat dengan Open Flash name: 'chart-'+id, <!--set ukuran portlet--> Chart width: $(".column .portlet").width()-20, flashvars: { <!--data grafik--> 'data-file': '<?php echo url_for("chart/");?>'+chartAction+'? $("#"+id+" > .portlet-content").flash({}) ; title='+id+'&id='+id } }) jQuery Selector ... } }) © 2009, OpenThink Labs. All Rights Reserved
  24. 24. Data Indikator dalam Sistem Dashboard © 2009, OpenThink Labs. All Rights Reserved
  25. 25. Data Indikator dalam Sistem Dashboard ● Portlet yang ditampilkan ditentukan oleh pengguna ● Dapat ditampilkan lebih dari satu portlet ● Terdapat dua canvas layout : Satu kolom dan dua kolom ● Mendukung i18n (internasionalisasi) ● Tool yang dapat digunakan yaitu tool untuk menutup portlet, tool untuk mengkustomisasi tampilan grafik, tool untuk mengubah ukuran dan menyimpan grafik dalam bentuk image, tool untuk menulis komentar, tool untuk embedded grafik, dan tool untuk minimize portlet. ● Administrator dapat mengelompokkan beberapa portlet menjadi satu, yang kami definisikan sebagai dashboard ● Setiap portlet dapat ditambahkan metadata © 2009, OpenThink Labs. All Rights Reserved
  26. 26. http://e-kuespt.pappiptek.lipi.go.id/ © 2009, OpenThink Labs. All Rights Reserved
  27. 27. Pengetahuan Baru dalam Penelitian Ini ● Penelitian ini menghasilkan pengatahuan baru : ● Bahwa dashboard ini selain dapat diaplikasikan dalam data statistik seperti data indikator iptek, dapat juga diaplikasin dalam data statistik lainnya seperti data statistik yang dihasilkan oleh BPS dan data statistik pada umumnya ● Tidak semua tipe chart tersedia pada OpenFlash Chart, maka kita perlu membuat API (Application Programming Interface) yang dapat membuat chart, dengan menggunakan berbagai chart generator, misal Google Chart API, Fushion Chart dan XML/SWF Chart ● API ini mengubah format input data yang generik menjadi input data yang spesifik ● Draft API : http://wiki.openthinklabs.com/produk/openthink-chart-api © 2009, OpenThink Labs. All Rights Reserved
  28. 28. Kesimpulan ● Visualisasi Online menggunakan konsep Dashboard ini telah dapat memenuhi fungsi-fungsi utama yang diperlukan yaitu penyajian grafik secara interaktif dengan melibatkan pengguna dalam pengaturan layout informasi. Namun untuk grafik yang ditampilkan belum disertai data dalam bentuk tabel. ● Permasalahan terselesaikan: ● Terbatas pada satu media → visualisasi online dapat diakses media online ● Tidak realtime → Database yang sifatnya dinamis ● Penyebaran terbatas → Chart dapat di-embed di web lain. © 2009, OpenThink Labs. All Rights Reserved
  29. 29. Arah Pengembangan Selanjutnya ● Mengadopsi Standar pertukaran data statistik Internasional, yang sedang di review oleh kami diantaranya : ● DDI ● SDMX ● Doblin Core ● Alih-alih database sebagai sumber data satu-satunya, dashboard versi berikutnya diharapkan dapat juga membaca sumber data berupa salah salah satu format data diatas ● Meningkatkan interoperabilitas diseluruh browser ● Membuat Reader untuk mobile device yang populer : Blackberry, iPhone dan Java Enable Phone lainnya, dengan catatan, format data statistik yang akan digunakan sudah ditentukan ● Studi Kasus : Data Statistik BPS, Indikator IPTEK Nasional, Indikator Bioteknologi © 2009, OpenThink Labs. All Rights Reserved
  30. 30. Terimakasih Tanya & Jawab © 2009, OpenThink Labs. All Rights Reserved

×