Bab 2 Buku Pengenalan Teknologi & Pengembangan Software Game

Bab 2

Teori Konsep Visualisasi/Model Grafik

2.1 Konsep Visualisasi

2.1.1 Definisi Visualisasi

Menurut (Mc Cormick, 1987) definisi visualisasi adalah metode penggunakan komputer untuk mentransformasikan simbol menjadi geometrik dan memungkinkan peneliti dalam hal mengamati simulasi komputasi yang dapat memperkaya proses penemuan ilmiah sehingga dapat mengembangkan pemahaman yang lebih dalam dan tak terduga. Dari definisi tersebut maka dapat kita simpulkan bahwa visualisasi adalah suatu media perantara untuk penggambaran data secara visual yang lebih interaktif agar mudah dipahami dan menambah pemahaman seseorang ketika melihat suatu data. Visualisai ini sangat berguna dalam berbagai sector bidang, baik di dunia computer, didunia sains, didunia ekonomi pun sangat berguna. Bayangkan saja jika data data numerik tidak disajikan secara visual baik secara diagram maupun grafik, tentu saja kita akan mengalami kesulitan dalam memahami suatu data, bahkan kitapun mungkin dapat mengalami kesalahan dalam memahami suatu data, oleh Karena itu kita perlu media visual yang dapat menggambarkan suatu data data yang berupa numerik maupun matematik.
Berikut ini ada beberapa tujuan dari visualisasi adalah :
1. Mengeksplor. Kegiatan eksplor dapat disebut juga penjelajahan atau pencarian, adalah tindakan mencari atau melakukan penjelajahan dengan tujuan menemukan sesuatu yang baru. Dalam hal visualisasi, mengeksplor bisa dalam bentuk eksploarasi terhadap data atau informasi yang ada yang dapat digunakan sebagai salah satu bagian dari elemen pengambilan keputusan.
2. Menghitung. Menghitung adalah kegiatan yang bertujuan untuk mendapat gambaran tentang dimensi/bentuk suatu objek. Dalam hubungannya dengan visualisasi, menghitung dapat diartikan sebagai kegiatan melakukan analisa terhadap data yang ada dalam bentuk gambar seperti grafik dan tabel yang sudah terhitung sehingga manajemen hanya perlu melakukan pengambilan keputusan dari data yang sudah terhitung.
3. Menyampaikan. Data mentah yang diolah lalu ditampilan dalam bentuk seperti grafik merupakan bentuk penyampaian dengan cara pendekatan visual yang mana dapat membuat orang yang melihat gambar tersebut dapat dengan mudah menyimpulkan arti dalam gambar tersebut karena secara umum data yang diolah dalam bentuk grafik lebih mudah dipahami karena sifatnya yang tidak berbelit-belit melainkan langsung kepada point yang dituju.

2.1.2 Karakteristik Visualisasi Informasi

Menurut (McCormick, 1987), karakteristik visualisasi informasi yang baik memiliki empat karakteristik sebagai berikut :
1. Menggunakan Pola. Penggunaan pola berguna agar manusia yang melihatnya dapat melakukan scanning, recognizing, remembering terhadap apa yang mereka lihat dan menyimpulkan dengan cepat berdasarkan pola-pola yang membedakan pola yang satu dengan yang lain
2. Perbandingan Gambar. Macam-macam perbandingan gambar dapat berupa panjang, bentuk, orientasi, gradiasi warna, tekstur yang mana merupakan pembeda antara visual yang satu dengan yang lain. Sehingga dengan perbedaan ini juga dapat menimpulkan perbedaan informasi yang dihasilkan dari perbandingan gambar yang satu dengan yang lain, dan dengan perbandingan gambar kita juga dapat mengetahui informasi yang mana yang lebih baik untuk kita maupun orang lain.
3. Gambar Animasi. Animasi dapat menggambarkan atau membedakan berdasarkan perjalanan waktu yang terjadi yang mana tidak dapat digambarkan secara jelas dengan menggunakan gambar yang diam. Gambar animasi mungkin bagi sebagian orang lebih digemari dan disukai, Karena dengan animasi, makna dan pesan yang ada dalam gambar disampaikan secara lebih menarik.
4. Warna Deskipsi. Deskipsi warna dapat membantu perbedaan warna yang di gunakan. Dalam hal ini perbedaan warna juga dapat mempengaruhi perbedaan informasi yang dihasilkan. Dan juga dapat menjadikan informasi menjadi lebih menarik dan warna juga bisa menjadi tambahan pemahaman secara cepat jika warna warna tersebut diberikan keteranan secara khusus.

2.1.3 Macam Macam Media Visual

Menurut (McCormick, 1987), terdapat macam-macam media visual sebagai berikut :
1. Diagram. Diagram adalah suatu gambaran-gambaran sederhana untuk memperlihatkan hubungan timbal balik, terutama dengan garis-garis diagram yang baik adalah sangat sederhana yakni hanya bagian-bagian terpenting saja yang diperhatikan. Diagram dengan tipe pie seperti dibawah ini merupakan diagram yang sangat mudah dipahami dan sangat mudah diserap informasinya, Karena diagram dengan tipe ini men visualisasikan informasi dengan menjadikan informasi menjadi potongan potongan pie, dengan besar pie sesuai dengan nilai data tersebut.
2. Grafik. Grafik adalah suatu grafis yang menggunakan titik-titik atau garis untuk menyampaikan informasi statistic yang saling berhubungan. Dengan berasumsi pada pengertian grafik tersebut, dalam proses belajar mengajar, grafik mempunyai fungsi untuk memperlihatkan perbandingan informasi kualitas-kualitas maupun kuantitas dengan cepat dan sederhana, terutama pada penyajian secara statistik.
3. Poster. Poster merupakan kombinasi visualisasi yang kuat dengan warna dan pesan dengan maksud untuk menangkap perhatian orang lewat, tetapi cukup lama menanamkan gagasan yang berarti di dalam ingatannya. Media ini pada umumnya digunakan untuk mengenalkan suatu produk dari suatu perusahaan atau digunakan sebagai sarana promosi.
4. Kartun. Kartun adalah menggambarkan dalam bentuk lukisan atau karikatur tentang orang, gagasan atau situasi yang didesain untuk mempengaruhi opini masyarakat. Dengan berasumsi pada konsep tersebut, kartun dapat digunakan sebagai alat bantu proses pengajaran walaupun banyak kartun yang membuat orang-orang tersenyum, tetapi pada dasarnya kartun mempunyai manfaat dalam proses belajar mengajar terutama dalam penjelasan rangkaian bahan satu urutan logis atau mendukung makna.
5. Komik. Komik merupakan suatu bentuk kartun yang mengungkapkan karakter dan memerankan suatu berita dalam urutan yang erat dihubungkan dengan gambar dan di rancang untuk memberikan hiburan pada pembaca.
6. Gambar media. Media grafis paling umum digunakan dalam PBM, karena merupakan bahasa yang umum dan dapat mudah dimengerti oleh peserta didik. Kemudahan mencerna media grafis karena sifatnya visual konkrit menampilkan objek sesuai dengan bentuk dan wujud aslinya sehingga tidak verbalistik.
7. Bagan. Bagan merupakan media yang berisi tentang gambargambar keterangan-keterangan, daftar-daftar dan sebagainya. Bagan digunakan untuk memperagakan pokok-pokok isi bagan secara jelas dan sederhana antara lain: perkembangan, perbandingan, struktur, organisasi.

2.2 Konsep Model Grafik

2.2.1 Model

Model merupakan rencana, representasi, atau deskripsi yang menjelaskan suatu objek, sistem, atau konsep, yang seringkali berupa penyederhanaan atau idealisasi. Bentuknya dapat berupa model fisik (maket, bentuk prototipe), model citra (gambar rancangan, citra komputer), atau rumusan matematis.

2.2.2 Grafik

Grafik (dari bahasa Inggris “Graphic”) adalah presentasi visual pada sebuah permukaan seperti dinding, kanvas, layar komputer, kertas, atau batu bertujuan untuk memberi tanda, informasi, ilustrasi, atau untuk hiburan. Contohnya adalah: foto, gambar, Line Art, grafik, diagram, tipografi, angka, simbol, desain geometris, peta, gambar teknik, dan lain-lain. Seringkali dalam bentuk kombinasi teks, ilustrasi, dan warna. Jadi model grafik adalah suatu rencara, representasi atau suatu penyerderhana an bentuk suatu objek atau pun data kedalam suatu grafik atau gambar baik itu yang berupa grafik, diagram,typografi dll. Model grafik juga dapat diartikan sebagai kesatuan bentuk, titik, dan garis.

2.2.3 Elemen yang Membentuk Model Grafik Komputer secara Geometri

Gambar 2.2.1: Elemen Model Grafik secara Geometri

1. Point atau titik
Dot atau dalam istilah computer dikenal dengan pixel (picture element) atau kadang juga disebut dengan pel adalah elemen terkecl dari sebuah gambar atau pola dalam tampilan komputer. Kumpulan dari pixel membentuk sebuah gambar atau pola yang dapat dikenali dalam variasi warna dan jumlah yang banyak. Kumpulan pixel dalam jumlah panjang dan lebar tertentu disebut dengan resolusi.
2. Line atau garis
Dua buah titik selalu dihubungkan dengan garis dimana jarak terdekatnya adalah berupa garis lulus.
3. Vertex
Titik pada gambar 3D.

Gambar 2.2.2: Vertex

4. Edge 

Garis pada 3D yang membutuhkan vertex. 

Gambar 2.2.3: Edge 

5. Polygon atau face 

Bangun sembarang yang terbentuk dari vertex vertex yang terhubung . merupakan unit fundamental dari grafik komputer.

Gambar 2.2.4: Face 

6. Kurva 

Objek geometri yang merupakan garis lengkung, atau garis yang terbentuk karena persambungan titik titik yang kontinyu. 

Gambar 2.2.5: Kurva 

7. Raster 

Berasal dari system TV yang menggunakan kolom pixel. Keuntungannya adalah dapat menggambarkan benda (model) seperti dunia nyata dengan banyak variasi warna. Namun raster juga memiliki kekurangan yaitu memakan memory yang besar dan jika diperbesar dengan sekala tertentu makan gambarnya akan pecah.

2.2.4 Kegiatan yang berkaitan dengan Pemodelan Grafik Komputer 

1. Pemodelan Geometris merupakan cabang dari matematika terapan dan komputasi geometri yang mempelajari metode dan algoritma untuk deskripsi matematika bentuk, baik itu berbentuk 2D maupun bentuk 3D. 

2. Rendering adalah suatu kegiatan memproduksi citra yang lebih solid dari model yang telah dibentuk. 

3. Animasi adalah menetapkan atau menampilkan kembali tingkah laku/behavior objek bergantung pada waktu yang berjalan, dan animasi juga merupakan suatu gambar yang bergerak yang terdiri dari beberapa frame. 

2.2.5 Histogram 

Histogram merupakan informasi penting mengenai isi citra digital dapat diketahui dengan membuat histogram citra. Histogram citra adalah grafik yang menggambarkan penyebaran nilai-nilai intensitas pixel dari suatu citra atau bagian tertentu di dalam citra. Dari sebuah histogram dapat diketahui frekuensi kemunculan nisbi (relative) dari intensitas pada citra tersebut. Histogram juga dapat menunjukkan banyak hal tentang kecerahan (brightness) dan kontas (contrast) dari sebuah gambar. Karena itu, histogram adalah alat bantu yang berharga dalam pekerjaan pengolahan citra baik secara kualitatif maupun kuantitatif. 

2.2.5.1 Operasi Titik Histogram 

Histogram citra sangat berkaitan dengan berbagai teknik pengolahan citra, terutama metode-metode yang tergolong dalam operasi titik. Oleh karena itu, pada bagian awal dari operasi titik akan dijelaskan terlebih dulu tentang konsep histogram. Histogram citra menunjuk pada histogram dad nilai intensitas pixel. Histogram menampilkan banyaknya pixel dalam suatu citra yang dikelompokkan berdasarkan level nilai intensitas pixel yang berbeda. Pada citra grayscale 8 bit, terdapat 256 level nilai intensitas yang berbeda maka pada histogram akan ditampilkan secara grafik distribusi dad masing-masing 256 level nilai pixel tersebut. Histogram citra ditampilkan dalam grafik 2D, dengan sumbu x menyatakan nilai intensitas pixel dan sumbu y menyatakan frekuensi (banyaknya kemunculan) suatu nilai intensitas pixel. Proses pembentukan histogram dapat dilakukan dengan memeriksa setiap nilai pixel pada citra, kemudian hitung banyaknya nilai pixel tersebut dan disimpan di memori.

Gambar 2.2.6: Histogram Citra

2.2.5.2 Metode Histogram 

Metode histogram adalah metode yang paling sering digunakan. Nilai T ditentukan berdasarkan histogram dari citra yang akan diambang-kan. Suatu citra yang memiliki objek tunggal dengan latar belakang homogen, biasanya memiliki histogram yang bimodal (memiliki dua maksimum lokal atau dua puncak).

Gambar 2.2.7: Metode Histogram

2.2.5.3 Penyesuaian Kecerahan 

Penyesuaian kecerahan (brightness) intensitas pixel merupakan operasi pixel yang paling sederhana. Tingkat kecerahan suatu citra dapat dilihat dad histogramnya. Semua pixel biasanya terkonsentrasi pada salah satu sisi histogram dengan rentangan gray level tertentu. Semakin dinaikkan tingkat brightness suatu citra maka konsentrasi nilai pixel pada histogram akan bergeser ke sisi kanan, demikian juga sebaliknya, semakin diturunkan maka konsentrasi nilai pixel pada histogram akan bergeser ke sisi kiri.

Gambar 2.2.8: Penyesuaian Kecerahan

Penyesuaian tingkat brightness suatu citra dapat dinyatakan sebagai

Gambar 2.2.9: Penyesuaian Kecerahan

dengan U’ dan U berturut-turut menyatakan citra setelah dan sebelum penyesuaian kecerahan sedangkan c adalah suatu konstanta yang merupakan faktor penyesuaian. Proses penyesuaian di atas dilakukan dengan menambahkan (mengurangkan) nilai setiap pixel dengan suatu konstanta. Apabila nilai pixel setelah penyesuaian melebihi nilai maksimum intensitas yang mungkin untuk citra grayscale, nilai maksimum intensitas adalah 255 maka nilai pixel tersebut akan dijadikan 255. Demikian pula sebaliknya, bila nilai pixel hasil penyesuaian lebih kecil dari 0 (nol) maka nilai pixel tersebut dijadikan 0.

2.2.5.4 Perengangan Kontras 

Kontras suatu citra adalah distribusi pixel terang dan gelap. Citra grayscale dengan kontras rendah maka akan terlihat terlalu gelap, terlalu terang, atau terlalu abu-abu. Histogram citra dengan kontras rendah, semua pixels akan terkonsentrasi pada sisi kid, sisi kanan, atau di tengah. Semua pixel akan terkelompok secara rapat pada suatu sisi tertentu dan menggunakan sebagian kecil dari semua kemungkinan nilai pixel. Citra dengan kontras tinggi memiliki daerah gelap dan terang yang luas. Histogram citra dengan kontras tinggi memiliki dua puncak besar. Satu puncak terkonsentrasi pada sisi kiri dan yang satunya terkonsentrasi pada sisi kanan histogram. Citra dengan kontras yang bagus menampilkan rentangan nilai pixel yang lebar. Histogramnya relatif menunjukkan distribusi nilai pixel yang seragam, tidak memiliki puncak utama, atau tidak memiliki Iembah. Perenggangan kontras adalah teknik yang sangat berguna untuk memperbaiki kontras citra terutama citra yang memiliki kontras rendah. Teknik ini bekerja dengan baik pada citra yang memiliki distribusi Gaussian atau mendekati distribusi Gaussian.

Gambar 2.2.10: Perengangan Kontras

Pada perenggangan kontras, setiap pixel pada citra U ditransformasi dengan menggunakan fungsi berikut.

Gambar 2.2.11: Rumus Peregangan Kontras

Dengan o(ij) dan u(ij) berturut-turut pixel sesudah dan sebelum ditransformasi pada koordinat (i,j), c dan d berturut-turut menyatakan nilai maksimum dan minimum dari pixel pada citra input, dan L menyatakan nilai grayscale maksimum. Bila nilai pixel lebih kecil dari 0 maka akan dijadikan 0 dan bila lebih besar dari (L-1) maka akan dijadikan (L-1). 

2.2.5.5 Ekualisasi Histogram 

Ekualisasi histogram merupakan salah satu bagian penting dari beberapa aplikasi pengolahan citra. Tujuan dari teknik ini adalah untuk menghasilkan histogram citra yang seragam. Teknik ini dapat dilakukan pada keseluruhan citra atau pada beberapa bagian citra saja. Histogram hasil proses ekualisasi tidak akan seragam atau sama untuk seluruh intensitas. Teknik ini hanya melakukan distribusi ulang terhadap distribusi intensitas dari histogram awal. Jika histogram awal memiliki beberapa puncak dan lembah maka histogram hasil ekualisasi akan tetap memiliki puncak dan lembah. Akan tetapi puncak dan lembah tersebut akan digeser. Histogram hasil ekualisasi akan lebih disebarkan (spreading). Distribusi ulang terhadap histogram awal dilakukan dengan meme-takan setiap nilai pixel pada histogram awal menjadi nilai pixel baru dengan cara sebagai berikut.

Gambar 2.2.12: Rumus Ekualisasi

Dengan/n(g) adalah nilai pixel baru, N menyatakan banyaknya pixel pada citra (bila citra berukuran 8 x 8 maka N adalah 64), g menyatakan nilai gray level awal yang nilainya dari 1 . . . L-1 (L menyatakan nilai gray level maksimum). Sedangkan c(g) menyatakan banyaknya pixel yang memiliki nilai sama dengan g atau kurang yang secara matematis dapat dinyatakan sebagai: c(g)=Egi), g =I, 2, . , L-1 (4.13) dengan h(i) menyatakan histogram awal. Berikut contoh penyebaran histogram dengan proses ekualisasi histogram.

Gambar 2.2.13: Rumus Ekualisasi 

Dengan h(i) menyatakan histogram awal. Berikut contoh penyebaran histogram dengan proses ekualisasi histogram.

2.2.5.6 Ekualisasi Histogram Adaptif 

Pada dasamya ekualisasi histogram adaptif sama dengan ekualisasi histo-gram di atas. Hanya saja pada ekualisasi histogram adaptif, citra dibagi menjadi blok-blok (sub-image) dengan ukuran n x n, kemudian pada setiap blok dilakukan proses ekualisasi histogram. Ukuran blok (n) dapat bervariasi dan setiap ukuran blok akan memberikan hasil yang berbeda. Setiap blok dapat saling tumpang tindih beberapa pixel dengan blok lainnya. 

2.2.5.7 Penajaman Lokal 

Perenggangan kontras dan ekualisasi histogram yang dibahas sebelumnya merupakan proses yang bersifat global, artinya nilai pixel barn diperoleh berdasarkan penyebaran gray level pada keseluruhan citra. Proses penajaman pada citra juga dapat dilakukan secara lokal, yaitu nilai pixel bare dihitung pada suatu window tertentu pada citra kemudian bergerak pixel demi pixel. Nilai pixel bare yang dihitung adalah pixel pada pusat window.

Gambar 2.2.14: Penajaman Lokal 

Ekualisasi histogram adaptif adalah contoh lain dari penajaman lokal. Ciri histogram didasarkan pada histogram dari suatu citra. Bila x menyatakan tingkat keabuan pada suatu citra maka probabilitas dari x dinyatakan dengan:

Gambar 2.2.15: Penajaman Lokal 

dengan x = 0,. . . ,L-1.

2.2.6 Area Chart 

2.2.6.1 Pengertian 

Area chart adalah area grafik yang diberikan dalam browser menggunakan SVG atau VML. 

Gambar 2.2.16: Area Chart

2.2.6.2 Grafik Area Bertumpuk 

Secara default, grafik daerah menarik seri di atas satu sama lain. Dalam bagan daerah, nilai untuk setiap seri akan selalu ditumpuk relatif terhadap nilai seri sebelumnya. Susun campuran nilai-nilai negatif dan positif akan menyebabkan daerah tumpang tindih. Penting untuk dicatat bahwa opsi interpolateNulls tidak bekerja dengan grafik area bertumpuk. Di sebelah kiri, isStacked diatur ke false (default), dan di sebelah kanan itu diatur ke benar.

Gambar 2.2.17: Grafik Area Bertumpuk (1) 

Perhatikan bahwa urutan entri legenda berbeda. Dalam grafik kedua, ditumpuk, urutannya dibalik, menempatkan seri 0 di bagian bawah, untuk lebih sesuai dengan susun elemen seri, membuat legenda sesuai dengan data. grafik area bertumpuk juga mendukung 100% susun, dimana tumpukan elemen pada setiap domain-nilai yang rescaled sehingga mereka menambahkan hingga 100%. Pilihan untuk ini isStacked: ‘percent’, yang format setiap nilai sebagai persentase dari 100%, dan isStacked: ‘relative’, yang format setiap nilai sebagai sebagian kecil dari 1. Ada juga pilihan isStacked: ‘absolute’ , yang secara fungsional setara dengan isStacked: true.

Gambar 2.2.18: Grafik Area Bertumpuk (2) 

Misalkan salah satu seri Anda tidak memiliki data untuk beberapa x-nilai Anda. Misalnya, di tangga lagu di atas, mari kita asumsikan bahwa drone tidak tersedia hingga tahun 2015, dan Segways tidak tersedia pada tahun 2014. Catatan yang kita gunakan nilai null dimana data yang kurang, sehingga grafik akan terlihat seperti ini:

Gambar 2.2.19: Grafik Bertumpuk 3 

Jika mereka diskontinuitas tidak menarik, Anda dapat mengganti angka nol untuk nulls, dan / atau menetapkan pilihan interpolateNulls untuk benar. 2.2.7 Candlestick Bar Candlestick merupakan metode yang dikembangkan oleh Munehisa Homma (1724-1803) seorang pedagang beras dari Jepang. Ia menggunakan candlestick untuk melihat psikologis pedagang beras dan meramalkan pergerakan harga tersebut. Sedangkan orang yang mempopulerkan grafik candlestick di dunia barat yaitu Steven Nison pada tahun 1990-an. Candlestick adalah sebuah jenis grafik yang mengindikasikan kisaran transaksi pada suatu mata uang/saham. Berisi informasi mengenai harga pembukaan (open), harga tertinggi (high), harga terendah (low), dan harga penutupan (close). Jika harga penutupan berada di atas harga pembukaan, maka jenis candle kosong. Sebaliknya jika harga penutupan berada di bawah harga pembukaan (harga turun), maka candle akan berisi. Pola analisis ini diperkenalkan pertama kali oleh para pedagang komuditas di Jepang pada awal abad 18-an.

Gambar 2.2.20: Candlestick Bar 

Candlestick menampilkan harga pembukaan (open), harga terendah (low), dan harga penutupan (close). Harga pembukaan (open) adalah harga yang pertama kali terjadi pada suatu saham di waktu awal pembukaan bursa. Awal waktu pembukaan saham di Bursa Efek Indonesia dimulai pukul 09.00 WIB. Harga tertinggi (high) adalah harga tertinggi yang pernah terjadi dalam satu hari perdagangan saham di bursa saham. Harga terendah (low) adalah harga terendah yang pernah terjadi dalam satu hari perdagangan saham di bursa saham. Sedangkan harga penutupan (close) adalah harga terakhir kali terjadi pada suatu saham di waktu akhir menjelang penutupan bursa saham. Bursa Efek Indonesia berakhir pukul 16.00 WIB. Shadow atau bayangan adalah harga tertinggi atau terendah yang terjadi pada hari itu. Sedangkan panjang badan candle mencerminkan jarak pergerakan harga. Candle Putih berarti harga penutupan lebih besar dari pada harga pembukaan, artinya pergerakan saham pada hari itu bergerak naik. Candle Putih sering disebut bullish. Sedangkan Candle Hitam berarti harga penutupan lebih kecil dari pada harga pembukaan, artinya pergerakan harga saham pada hari itu bergerak turun. Candle Hitam sering disebut bearish. Candlestick menunjukkan periode pergerakan saham dalam satu minggu, satu bulan atau satu tahun. Tergantung dengan pengaturan dari chart yang digunakan. 

2.2.8 Bar Chart

Barchart adalah jenis grafik yang digunakan untuk menampilkan dan membandingkan jumlah, frekuensi atau ukuran lainnya (misalnya mean) untuk kategori diskrit data yang berbeda. Bar chart salah satu jenis yang paling umum digunakan dari grafik karena mereka mudah untuk membuat dan sangat mudah untuk menafsirkan. Pada contoh di bawah, yang menunjukkan persentase penduduk Inggris yang menghadiri berbagai acara budaya selama 1999-2000, jenis acara adalah kategori diskrit data.

Gambar 2.2.21: Bar Chart 

Grafik dibangun sedemikian rupa sehingga panjang dari bar yang berbeda sebanding dengan ukuran kategori yang mereka wakili. Sumbu x mewakili kategori yang berbeda dan tidak memiliki skala. Dalam rangka untuk menekankan fakta bahwa kategori diskrit, kesenjangan yang tersisa antara bar pada sumbu x. Sumbu y memang memiliki skala dan ini menunjukkan unit pengukuran. 

2.2.8.1 Sejarah Bar Chart 

Barchart atau bagan balok Barchart ditemukan oleh L. Gantt Chart dan Fredick W. Taylor dalam bentuk bagan balok, panjang balok mempresentasikan sebagai durasi setiap kegiatan. Keuntungan dari bagan balok ini adalah imformatif, mudah dibaca dan efektif untuk komunikasi serta dapat dibuat dengan mudah dan sederhana. Selain itu pada bagan balok ini juga dapat ditentukan milestone sebagai bagian target yang harus diperhatikan guna kelancaran produktifitas proyek secara keseluruhan Pada proses updating, bagan balok dapat diperpendek atau diperpanjang, yang menunjukkan bahwa durasi kegiatan akan bertambah atau berkurang sesuai kebutuhan dalam proses perbaikan jadwal. Banyak sumber mempertimbangkan William Playfair (1759- 1823) telah menciptakan grafik bar dan ekspor dan impor dari Skotlandia ke dan dari bagian yang berbeda untuk satu tahun dari 1780 Natal Natal 1781 grafik dari The komersial dan politik Atlas menjadi grafik bar pertama dalam sejarah. Diagram kecepatan dari sebuah objek yang terus-menerus mempercepat melawan waktu diterbitkan dalam The Latitude bentuk (dikaitkan Martino Jacobus de Sancto atau, mungkin, Nicole Oresme) [1] sekitar 300 tahun sebelum dapat ditafsirkan sebagai “grafik batang proto”. 

2.2.8.2 Tipe Data yang Ditampilkan 

Bar chart berguna untuk menampilkan data yang diklasifikasikan ke dalam kategori nominal atau ordinal. Data Nominal dikategorikan menurut informasi deskriptif atau kualitatif seperti county lahir, atau subjek belajar di universitas. Data ordinal serupa tetapi kategori yang berbeda juga dapat peringkat, misalnya dalam survei orang mungkin diminta untuk mengatakan apakah mereka berpikir sesuatu yang sangat miskin, miskin, adil, baik atau sangat baik. Dengan data nominal, mengatur kategori sehingga berurutan bar kelas dari kategori terbesar untuk kategori terkecil membantu pembaca untuk menafsirkan data. Namun, hal ini tidak sesuai untuk data ordinal karena kategori sudah memiliki urutan yang jelas. Bar chart juga berguna untuk menampilkan data yang meliputi kategori dengan nilai-nilai negatif, karena mungkin untuk posisi bar di bawah dan di atas sumbu x.

2.2.8.3 Jenis Bar Chart 

Horizontal Bar chart biasanya ditarik sehingga bar vertikal yang berarti bahwa tinggi bar, lebih besar kategori. Namun, hal ini juga mungkin untuk menarik bar chart sehingga bar horizontal yang berarti bahwa semakin lama bar, lebih besar kategori. Ini adalah cara yang sangat efektif untuk menyajikan data ketika kategori yang berbeda memiliki judul panjang yang akan sulit untuk menyertakan bawah bar vertikal, atau ketika ada sejumlah besar kategori yang berbeda dan ada cukup ruang untuk cocok untuk semua kolom yang diperlukan untuk bar chart vertikal di seluruh halaman.

Gambar 2.2.22: Bar Chart Horizontal 

Pengelompokkan Bar Chart Bar Chart Kelompok adalah cara untuk menunjukkan informasi tentang berbagai subkelompok dari kategori utama. Pada contoh di bawah, sebuah bar chart dikelompokkan digunakan untuk menunjukkan skema yang berbeda (sub-kelompok) dengan kategori yang berbeda dari bahan rumah tangga didaur ulang.

Gambar 2.2.23: Bar Chart Kelompok 

Sebuah bar terpisah mewakili masing-masing sub-kelompok (mis situs kemudahan sipil) dan ini biasanya berwarna atau berbayang berbeda untuk membedakan antara mereka. Dalam kasus tersebut, legenda atau kunci biasanya disediakan untuk menunjukkan apa yang sub-kelompok masing-masing nuansa / warna wakili. Legenda bisa ditempatkan di daerah plot atau mungkin terletak di bawah grafik. Kelompok Bar Chart dapat digunakan untuk menampilkan beberapa sub-kelompok masingmasing kategori, tetapi perawatan harus diambil untuk memastikan bahwa grafik tidak mengandung terlalu banyak informasi sehingga rumit untuk membaca dan menafsirkan. Dikelompokkan bar chart dapat ditarik sebagai kedua grafik horizontal atau vertikal tergantung pada sifat dari data yang akan disajikan. Penumpukan Bar Chart Pertumpukan Bar Chart mirip dengan grafik bar dikelompokkan dalam bahwa mereka digunakan untuk menampilkan informasi tentang sub-kelompok yang membentuk kategori yang berbeda. Dalam grafik bar ditumpuk bar yang mewakili sub-kelompok ditempatkan di atas satu sama lain untuk membuat satu kolom, atau berdampingan untuk membuat sebuah bar tunggal. Tinggi keseluruhan atau panjang bar menunjukkan ukuran total kategori sementara warna yang berbeda atau nuansa digunakan untuk menunjukkan kontribusi relatif. Contoh dari bar chart ditumpuk: Berlangganan satelit dan TV kabel dengan pendudukan kepala rumah.

Gambar 2.2.24: Bar Chart Menumpuk 

Pertumpukan Bar Chart juga dapat digunakan untuk menunjukkan persentase kontribusi yang berbeda sub-kelompok berkontribusi untuk setiap kategori terpisah. Dalam hal ini bar yang mewakili kategori individu semua ukuran yang sama. Informasi tersebut juga dapat disajikan dalam serangkaian pie chart. Mewarnai Bar Ada tiga cara untuk memilih warna yaitu ; nilai RGB, nama warna bahasa inggris, dan deklarasi CSS seperti berikut :

var data = google.visualization.arrayToDataTable([ 

[‘Element’, ‘Density’, { role: ‘style’ }], 

[‘Copper’, 8.94, ‘#b87333’], // RGB value 

[‘Silver’, 10.49, ‘silver’], // English color name 

[‘Gold’, 19.30, ‘gold’], 

[‘Platinum’, 21.45, ‘color: #e5e4e2’ ], // CSS-style declaration ]);

Gambar 2.2.25: Mewarnai Bar 

Gaya Bar Peran gaya memungkinkan anda mengontrol beberapa aspek dari bar penampilan dengan deklarasi CSS seperti: 

1. Warna 

2. Kegelapan 

3. Isi warna 

4. Mengisi opacity 

5. Stroke warna 

6. Stroke opacity 

7. Stroke lebar

Gambar 2.2.26: Gaya Bar 

Pertama dua bar setiap menggunakan warna tertentu (yang pertama dengan nama Inggris, yang kedua dengan nilai RGB). Tidak ada opacity dipilih, sehingga default dari 1,0 (sangat lengkap) digunakan; itu sebabnya bar kedua mengaburkan gridline belakangnya.
Di bar ketiga, opacity 0,2 digunakan, mengungkapkan gridline tersebut. Di bar keempat, tiga atribut gaya yang digunakan: stroke warna dan stroke-width untuk menarik perbatasan, dan mengisi warna untuk menentukan warna persegi panjang di dalam. Bar paling kanan tambahan menggunakan langkah-opacity dan mengisi opacity untuk memilih kekeruhan untuk perbatasan dan isi:
function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Year’, ‘Visitations’, { role: ‘style’ } ],
[‘2010’, 10, ‘color: gray’],
[‘2020’, 14, ‘color: #76A7FA’],
[‘2030’, 16, ‘opacity: 0.2’],
[‘2040’, 22, ‘stroke-color: #703593; stroke-width: 4; fillcolor: #C5A5CF’],
[‘2050’, 28, ‘stroke-color: #871B47; stroke-opacity: 0.6; strokewidth: 8; fill-color:
#BC5679; fill-opacity: 0.2’]
]);

Label Bar Grafik memiliki beberapa jenis label, seperti label centang, label legenda, dan label dalam tooltips.

Gambar 2.2.27: Label Bar 1 

Contoh, grafik diatas dapat diubah menjadi grafik dibawah ini

Gambar 2.2.28: Label Bar 2 

dengan cara mendefinisikan kolom baru dengan {role: ‘annotation’ } memegang bar label :
var data = google.visualization.arrayToDataTable([
[‘Element’, ‘Density’, { role: ‘style’ }, { role: ‘annotation’ } ],
[‘Copper’, 8.94, ‘#b87333’, ‘Cu’ ],
[‘Silver’, 10.49, ‘silver’, ‘Ag’ ],
[‘Gold’, 19.30, ‘gold’, ‘Au’ ],
[‘Platinum’, 21.45, ‘color: #e5e4e2’, ‘Pt’ ]
]);