Visualisasi Online untuk Data Indikator IPTEK

© 2009, OpenThink Labs. All Rights Reserved

Visualisasi Online untuk Data Indikator IPTEK

Wildan Maulana

[email protected]

Indri Juwita Asmara

[email protected]

Elmi Achelia

[email protected]

Rini Wijayanti

[email protected]


Pendahuluan● Ketersediaan data● Data disajikan dalam bentuk tabel dan grafik

beserta metadata ● Informasi dipublikasikan dalam berbagai media● Media online (internet)● Visualisasi data (penyampaian informasi)


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


DataIndikator 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.


Rule of Thumb● Mengkomunikasikan data statistik kepada publik

memerlukan pemikiran, persiapan dan uji coba yang intensif.

● Aturan :● 33% usaha dialokasikan pengambilan data● 33% untuk analisa● 33% untuk DISEMINASI

John Waslen, Geowise, 2008“Developing Practice for presenting statistics on the Web”


Permasalahan dalam Diseminasi● Terbatas pada satu media● Tidak realtime ● Penyebaran terbatas


Solusi

Visualisasi Online


Media Diseminasi


Target Media (Browser)


Visualisasi Online - 1● Data Indikator IPTEK

● Tabel Query● Metadata Query

Tabel Query dan Metadata

.......DB I DB B DB M

Datamart

Dashboard


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


Dashboard

Suatu model antarmuka sistem informasi yang dianalogikan seperti dashboard sebuah mobil yang mudah untuk dipelajari


Dashboard● Mengkomunikasikan informasi dengan cepat● Membantu identifikasi trend, pola, anomali data● Membantu pengambilan keputusan secara efektif


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


Format Data JSON


Dashboard

Teknologi Opensource

MySQL

Data JSON

Open Flash Chart

jQuery

Database

Data Model Chart Generator

Presentation Tier (symfony : View Layer)

Symfony : Controller Layer

HTML 5 Canvas

Symfony FrameworkSymfony Framework


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


Open Flash Chart● Tool chart generator berbasis swf

● Menyediakan berbagai tipe grafik : bar, pie, line, scatter, dll


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


jQuery Layout● Sebuah plug-in

untuk membuat tampilan user interface khususnya dengan border layout

● 5 pane, yaitu North, West, Center, East, dan South

<SCRIPT type="text/javascript">  $('body').layout({ }); <div class="ui-layout-center"> <?php echo $sf_content ?></div></BODY>


jQuery UI● Library jQuery yang menangani tampilan User Interface

● Sortable portlets sebagai tempat untuk tampilan grafik


jQuery UI● Accordion untuk

menu di west pane<div id="accordion" class="ui-accordian">  <?php $cats = KategoriQueryPeer::doSelect(new Criteria()) ; ?> <?php foreach($cats as $cat) {?>  <?php } ?></div>


jQuery SWFObject● Sebuah plug-in yang menjadi

add-on jquery yang memberikan fungsi unik yaitu menyimpan konten Flash secara fleksibel di dalam browser dengan menggunakan jquery selector

● Menampilkan grafik yang dibuat dengan Open Flash Chart

$(".column").sortable({

connectWith: [.'column'],

...



receive: function(event, ui) {

...

$("#"+id+" > .portlet-content").flash({



data: '/swf/ichor-dz.swf',



id: chartId,

name: 'chart-'+id,



width: $(".column .portlet").width()-20,

flashvars: {



'data-file': '<?php echo url_for("chart/");?>'+chartAction+'?

title='+id+'&id='+id

}

})

...

}

})

$("#"+id+" > .portlet-content").flash({}) ;

jQuery Selector


Data Indikator dalam Sistem Dashboard


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


http://e-kuespt.pappiptek.lipi.go.id/


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

http://wiki.openthinklabs.com/produk/openthink-chart-api


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.


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


Terimakasih

Tanya & Jawab

Technology

Visualisasi Online untuk Data Indikator IPTEK