Visualisasi Online untuk Data Indikator IPTEK

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

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


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.


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


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
Datamart

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

Tabel Query Dashboard
dan Metadata


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


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
<SCRIPT type="text/javascript">

● Sebuah plug-in $('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 $(".column").sortable({
add-on jquery yang connectWith: [.'column'],

memberikan fungsi unik yaitu ...

menyimpan konten Flash


secara fleksibel di dalam receive: function(event, ui) {

browser dengan ...

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

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



● Menampilkan grafik yang id: chartId,

dibuat dengan Open Flash
name: 'chart-'+id,



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

flashvars: {



'data-file': '<?php echo url_for("chart/");?>'+chartAction+'?
$("#"+id+" > .portlet-content").flash({}) ; title='+id+'&id='+id

}

})
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


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


Visualisasi Online untuk Data Indikator IPTEK

Recommandé

Recommandé

Contenu connexe

Similaire à Visualisasi Online untuk Data Indikator IPTEK

Similaire à Visualisasi Online untuk Data Indikator IPTEK (20)

Plus de Wildan Maulana

Plus de Wildan Maulana (20)

Visualisasi Online untuk Data Indikator IPTEK