Visualisasi Diagram Pewarnaan (BAB 4)

Bab 4

PENERAPAN PEWARNAAN KEDALAM DIAGRAM

4.1 Contoh Kasus

Warna merupakan sebuah nama yang muncul atas segala aktivitas pada retina mata. Selain itu, warna adalah hal penting bagi berbagai macam makanan. Warna juga menunjukkan indikasi adanya perubahan kimia dalam makanan seperti misalnya browning karamelisasi.

Klasifikasi warna paling penting adalah sistem CIE(Commision International de l’eclairage). Sistem lain yang digunakan untuk mendiskripsikan warna makanan antara lain system Munsell, Hunter, Lovibond (de Man,1999).

Sistem Hunter merupakan salah satu system warna yang telah luas digunakan untuk kolorimetri makanan. Dalam system Hunter warna dibedakan menjadi 3 dimensi warna. Simbol a untuk dimensi kemerahan dan kehijauan.Simbol b untuk dimensi kekuningan dan kebiruan. Dimensi warna yang ketiga adalah L (Lightness) atau kecerahan. Nilai CIE dapat dikonversi menjadi nilai warna dalam system Hunter menjadi L,a,b. Begitu pula sebaliknya nilai L,a,b dapat dikonversi menjadi nilai CIE X%, Y, Z% (de man, 1999).

Warna dapat diukur secara modern dengan sebuah alat, yaitu color reader seri CR – 10. Instrumen ini terdiri atas ujung reseptor (A),sebuah layar dan 4 buah tombol. 3tombol adalah target, lab, Lch yang terletak dibawah layar pada sisi smaping alat. 1 tombol terletak pada sisi atas alat yang berfungsi sebagai tombol start saat penembakan sampel (de Man,1999).

Panjang gelombang warna yang bisa ditangkap mata berkisar antara 380 – 780 nanometer dan panjang gelombang ini menentukan sifat warna. Warna juga berarti interpretasi otak dari campuran warna primer, yaitu merah, hijau dan biru dengan komposisi tertentu (Anonim, 2009).

Color reader adalah alat pengukur warna yang didesain dengan tiga reseptor sehingga mampu membedakan warna akurat antara terang dan gelap. Pengukuran warna ini menggunakan color reader dengan seri CR-10, dengan ukuran dan lebar sinar 360g/12.7oz, gampang digunakan karena hanya menggunakan satu tangan, dan perbedaan warna dalam bentuk delta (L,a,b), delta (E,a,b) atau delta (L,c,h), dapat beriluminasi 8/d. Menggunakan stander CIE D65, sumber energi berupa 4 batrai AA atau adapter AC-A12. Dapat mendeteksi dalam 10 detik dengan temperature operasi 0-40°C. Ukrannya 59 x 158 x 85 mm. Beratnya 360 gr tanpa batrai.Casing standar CR-A68, ap pelindung CR-A72.(Maryanto, dkk, 2004)

4.1.1 Interval

Interval yang dimaksud disini adalah jarak antara warna yang satu ke warna yang lain dalam proses perubahan warna. Berikut tabel interval pada perubahan warna yang dilihat dalam RGB, CMYK, dan HSV.

4.1.2 Line Chart

Line chart adalah grafik yang paling sederhana yang digambarkan sebagai garis yang menghubungkan harga-harga penutupan. Tampilan dari Line Chart sangat sederhana karena hanya berbentuk garis-garis saja. Misalnya disini akan menampilkan line chart yang dimana terdapat 2 tabel disini yaitu derajat dan warnanya.

Disini bisa mendapatkan data diatas dari pernyataan dibawah ini.

Pengukuran warna secara visual atau kualitatif sangat sulit dilakukan karena indera penglihatan manusia sulit untuk membedakan perbedaan warna yang sedikit. Pengukuran warna produk pertanian dapat dilakukan dengan menggunakan alat yang bernama Colour Reader. Alat ini dapat mengukur warna dengan hasil berupa angka dan dibagi menjadi Lightness, Chroma dan Hue. Hue merupakan karakteristik warna berdasarkan cahaya yang dipantulkan oleh objek, dalam warna dilihat dalam ukurannya mengikuti tingkatan 0-359. Sebagai contoh, pada tingkat 0 adalah warna merah, pada tingkat 60 adalah warna kuning, untuk warna hijau pada tingkatan 120, sedangkan pada tingkatan 180 adalah warna cyan. Untuk tingkat 240 merupakan warna biru, serta tingkat 300 adalah warna magenta.

Berikut contoh dari Line Chart yang kami buat dari Microsoft Excel.

Bisa dilihat disini dari merah ke magenta grafiknya yang didapat dari data diatas berbentuk garis diagonal yang dimana terdapat selisih interval sebanyak 60 derajatnya yang bisa dilihat semakin naik keatas lebih dari 0 maka warnanya akan semakin berubah.

4.1.3 Pie Chart

Pie Chart adalah chart yang berbentuk bundar menyerupai bentuk kue pie. Chart jenis ini sangat bagus digunakan untuk menampilkan grafik data presentasi dari sebuah kegiatan perubahan warna dan akan menemukan presentase dari hasil perubahan warna tersebut.

Berikut ini kami akan memaparkan pembuatan pie chart dengan bahasa pemrograman html menggunakan notepad++. Kami akan membuat chart yang nantinya bisa kita integrasikan ke dalam web aplikasi kami dengan menggunakan canvas yang merupakan elemen dari html5 dan javascript. Library yang akan kita gunakan dalam pembuatan chart ini adalah RGraph.

RGraph merupakan sebuah library javascript yang memanfaatkan element canvas html5 yang mampu membuat chart dengan cara yang sangat mudah. Visualisasi chart yang didukung oleh library RGraph ini lebih dari 20 jenis visualisasi yang berbeda. RGraph juga bisa memanfaatkan JSON data sebagai sumber data dalam pembuatan chart secara dinamis dan on the fly. Buat kami RGraph menawarkan kemudahan tersendiri dalam melengkapi web aplikasi yang dibuat dari sisi pembuatan layer presentasi yang berupa chart. Langsung saja kita mulai cara mudah membuat chart dalam web aplikasi kita ini. Kita akan melakukan percobaan ini dengan membuat sebuah web aplikasi html sederhana saja.

Sebagai langkah pertama, silahkan download terlebih dahulu library Rgraph. Buatlah sebuah folder web aplikasi html dan didalamnya terdapat folder css, js, dan datasource. Kemudian ekstrak file Rgraph.zip yang sudah di download tadi. Copy semua file yang ada dalam folder css hasil ekstrak dan letakkan dalam folder css yang kita buat. Kemudian copy seluruh file yang ada dalam folder libraries hasil ekstrak tadi dan letakkan dalam folder js yang sudah kita buat.

Kita akan membuat sebuah Pie Chart sederhana atau basic pie chart dengan menggunakan library RGraph yang sudah kita ekstrak tadi. Buatlah sebuah file html dengan nama basic-pie.html dan letakkan dalam folder web aplikasi html kita sejajar dengan folder js. Dan berikut ini isi file basic-pie.html tersebut.

<!DOCTYPE html>

<html>

<head>

//creating graph

window.onload = function () {

var pieGraph = new RGraph.Pie("cvsGraphBook", [30, 60, 120, 180, 240])

.Set("labels", ["red", "grey", "green", "blue", "magenta"])

.Set("tooltips", ["red [30]", "grey [60]", "green [120]", "blue [180]", "magenta [240]"])

.Draw();

}

</script>

</head>

<body>

<canvas id="cvsGraphBook" width="350" height="250">[No canvas support]</canvas>

</body>

</html>

Kemudian bukalah file tersebut pada browser anda dan akan menjadi seperti gambar berikut ini:

Mari kita coba pahami isi dari file basic-pie.html tersebut. Perhatikan tag body pada file basic-pie tersebut:

<canvas id="cvsGraphBook" width="350" height="250">[No canvas support]</canvas>

Disana kita membuat sebuah elemen canvas yang dimiliki oleh html5 dengan lebar 350 dan tinggi 250, kemudian di dalam tag canvas tersebut kita lihat sebuah teks “No canvas support”, teks ini akan tampil jika browser yang kita gunakan tidak mendukung html5. Kemudian perhatikan baris-baris berikut yang ada pada section ini:

Baris-baris diatas adalah baris-baris dimana kita meng-include library-library RGraph yang kita butuhkan. Oleh karena kita hendak membuat Pie maka kita meng-include file RGraph.pie.js. Kemudian perhatikan kembali baris-baris berikut ini:

//creating graph

window.onload = function () {

var pieGraph = new RGraph.Pie("cvsGraphBook", [30, 60, 120, 180, 240])

.Set("labels", ["red", "grey", "green", "blue", "magenta"])

.Set("tooltips", ["red [30]", "grey [60]", "green [120]", "blue [180]", "magenta [240]"])

.Draw(); }

</script>

Ya, disanalah baris-baris utama kita dalam membuat chart dengan library RGraph. Pada baris tersebut terlihat object RGraph.Pie dibuat berdasarkan parameter id dan data. Teks “cvsGraphBook” dalam konstruktor tersebut adalah id dari canvas tempat kita akan meletakkan hasil dari chart yang akan dibuat. Sementara parameter data, kita buat merupakan array dari angka-angka 30,60,120,180 dan 240. Kemudian untuk membuat label yang bisa mewakili deskripsi dari angka-angka tersebut kita set pada baris:

.Set("labels", ["red", "grey", "green", "blue", "magenta"])

Label tersebut juga merupakan array tapi terdiri dari jenis-jenis warna. Yang harus dipahami adalah urutan array data dan urutan array label, harus simetris jika kita ingin menempatkan data yang benar, maksudnya secara tabular data maka seharusnya simetris. Dan kemudian baris selanjutnya tertulis seperti ini:

.Set("tooltips", ["red [30]", "grey [60]", "green [120]", "blue [180]", "magenta [240]"])

Baris ini adalah baris dimana kita menge-set tooltips untuk chart yang kita buat. Sama halnya dengan label, tooltips ini juga mesti simetris dengan parameter data yang kita definisikan pada instansiasi object RGraph.Pie diatas. Tooltips ini berguna jika salah satu bagian pada pie chart tersebut di-click maka akan tampil tooltips sesuai dengan apa yang kita buat. Sampai disini kita sudah selesai membuat basic-pie-chart.

4.1.4 Organization Chart

Setelah menerapkan pewarnaan pada line chart dan pie chart, selanjutnya kami terapkan pada organization chart. Organization chart adalah diagram yang memperlihatkan adanya saling keterkaitan berbagai posisi pada suatu organisasi. Jika kami sesuaikan dengan materi yang sedang kami bahas, disini masing-masing warna saling berkaitan satu sama lain. Seperti contoh diatas, kami membuat sebuah diagram organisasi untuk organisasi warna pelangi.

Disini kami menurunkan menjadi beberapa bagian warna yang tedapat pada warna pelangi, yaitu warna merah, kuning, hijau, cyan, biru dan magenta. Untuk masing-masing warna, kami turunkan lagi dimana di setap turunan ini ada kaitannya dengan warna selanjutnya. Misalnya, turunan merah terdapat warna merah oranye, oranye tua, oranye serta warna-warna lainnya yang mendekati ke warna kuning. Ketiga turunan dapat mendekati ke warna kuning, tergantung besar kecilnya nilai yang kami input pada derajat RGB. Untuk warna merah kami memiliki nilai derajat RGB(255,0,0) lalu kami tingkatkan nilai derajatnya menjadi RGB(255,59,0) sehingga warna berubah menjadi merah-oranye, lalu untuk warna oranye tua kami tingkatkan kembali nilai derajat menjadi RGB(255,100,0) dan warna oranye ditingkatkan kembali menjadi RGB(255,165,0). Jika kami tingkatkan terus-menerus, maka semakin lama warna akan berubah menjadi lebih muda dari yang sebelumnya dan akan mndekati ke warna kuning. Lalu untuk warna selanjutnya, langkah-langkah yang dilakukan sama seperti warna merah tadi. Karena kami membuat organisasi chart yang membahas tentang organsasi warna pelangi, maka derajat nilai RGB yang kami input adalah untuk warna pelangi.

WELCOME TO MY BLOG

Cari Blog Ini

Visualisasi Diagram Pewarnaan (BAB 4)

Komentar

Posting Komentar