BAB V PENUTUP
Kesimpulan
Desain grafis pada saat ini merupakan hal yang bisa dan biasa kita temukan dalam kehidupan sehari-hari. Mulai dari membuka mata hingga kembali menutup mata untuk tidur. Sesungguhnya desain grafis erat hubungannya dengan proses cetak-mencetak. Melalui media cetak ini, desain grafis berfungsi sebagai media penghubung antar pihak yang berkepentingan. Jaman yang semakin berkembang dan teknologi yang beragam, menjadikan desain grafis sesuatu yang menarik untuk dicermati perkembangannya.
Perkembangan desain yang berasal dan berkiblat dari negara-negara barat menjadikan desain di Indonesia belum memilki landasan yang kuat di negeri sendiri. Pergeseran visual yang terjadi mempengaruhi pandangan dan penghargaan masyarakat terhadap karya-karya bangsa sendiri, yang kurang mendapatkan tempat secara proporsional dan dapat menghilangkan kebudayaan lokal sebagai jati diri bangsa.
Perancangan buku desain pemodelan grafis ini dapat menjadi alternatif bacaan tentang sejarah perkembangan desain grafis dengan penyampaian yang berbeda dari buku sejenis. Indonesia yang menarik dan komunikatif, dapat menjadi salah satu upaya mendokumentasikan dan mengembangkan desain grafis yang ada di Indonesia. Menjadikannya sesuatu yang baru dan dapat diterima bagi berbagai kalangan dengan tujuan pembelajaran maupun referensi baik yang berhubungan langsung maupun tidak langsung terhadap dunia desain grafis.
Pemodelan adalah membentuk suatu benda-benda atau obyek. Membuat dan mendesain obyek tersebut sehingga terlihat seperti hidup. Sesuai dengan obyek dan basisnya, proses ini secara keseluruhan dikerjakan di komputer. Melalui konsep dan proses desain, keseluruhan obyek bisa diperlihatkan secara 3 dimensi, sehingga banyak yang menyebut hasil ini sebagai pemodelan 3 dimensi (3D modelling). Kalau memang desain grafik ini memiliki kemampuan untuk menghasilkan imajinasi menjadi kenyataan maka gambar yang real juga menjadi harga mati. Bagaimana caranya ya tergantung bagaimana pembuatnya.
Oleh karena itu dibutuhkanlah sebuah konsep dalam pemodelan.konsep seperti itulah yang nantinya akan dibuat untuk dijadikan suatu hasil yang berguna. Maupun itu gambar, video dan hal - hal lainnya yang apabila dijelaskan dengan sudut pandang grafis lebih memudahkan untuk diingat dan dipahami.
DAFTAR PUSTAKA
[||[https://developers.google.com/chart/interactive/docs/gallery/candlestickchart]]
[https://books.google.co.id/books?id=NectMutqXJAC&pg=PA130&dq=pengapikasian+histogram&hl=en&sa=X&redir_esc=y#v=snippet&q=histogram&f=false (Pengolahan Citra Digital)]
[||amutiara.staff.gunadarma.ac.id/Downloads/files/39978/Bab-6_Histogram+Citra.pdf ]
[https://developers.google.com/chart/interactive/docs/gallery/histogram]
[||sir.stikom.edu/938/5/BAB%20III.pdf]
[||repository.usu.ac.id/bitstream/123456789/37713/4/Chapter%20II.pdf]
[||lib.unnes.ac.id/18385/1/5101409109.pdf]
[||sumarna.staff.gunadarma.ac.id/Downloads/files/.../3+Grafik+Komp-Konsep+Dasar.pdf]
[https://developers.google.com/chart/interactive/docs/gallery/barchart#top_of_page ]
[https://www2.le.ac.uk/offices/ld/resources/study-guides-pdfs/numeracy-skills-pdfs/bar-charts-v0.1.pdf]
Lee, L. (2015). In love with Fibonacci: Menguasai Perdagangan Saham Dengan Menggunakan Fibonacci. Surabaya: Brilliant.
RH Liembono, d. S. (2015). Buku Saham Para Master. Surabaya : Brilliant.
Minggu, 22 Januari 2017
BAB IV KASUS PEMANFAATAN PERANGKAT LUNAK
BAB IV KASUS PEMANFAATAN PERANGKAT LUNAK
Penerapan Candlestick Chart Dalam Teknologi Informasi
Perkembangan teknologi informasi yang sangat pesat membawa seluruh elemen-elemen yang ada, baik itu ekonomi, bisnis, pendidikan, kenegaraan dsb. Dalam dunia teknologi informasi khususnya dalam bidang bisnis kita dapat menyertakan diagram (chart) candlestick dengan menggunakan salah satu Google API (Application Progamming Interface) yaitu Google Chart.
Google Chart merupakan suatu API yang digunakan untuk memvisualisasikan data ke dalam bentuk garis, peta pohon hierarkis, hingga grafik. Cara yang paling umum untuk menggunakan Google Chart adalah dengan JavaScript sederhana yang dimasukkan ke dalam halaman Web anda.
Semua jenis grafik digambarkan oleh data dengan menggunakan kelas DataTable, sehingga mudah untuk beralih ke jenis grafik lain untuk menemukan penampilan grafik yang ideal. DataTable menyediakan metode untuk menyortir, memodifikasi, dan penyaringan data. Selain itu DataTable dapat diisi langsung dari halaman web anda, database, atau penyedia data (data provider) yang mendukung protokol Charts Google Datasouce (protokol tersebut termasuk SQL seperti bahasa queri yang diimplementasikan oleh Google Spreadsheets, Google Fusion Tables, dan pihak ketiga penyedia data seperti SalesForce).
Konfigurasi Opsional
Berikut code JavaScript untuk membuat grafik Candlestick :
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() { var data = google.visualization.arrayToDataTable([
['Senin', 20, 28, 38, 45], //[string,x1,y1,y2,x2]
['Selasa', 31, 38, 55, 66], //[string,x1,y1,y2,x2]
['Rabu', 50, 55, 77, 80], //[string,x1,y1,y2,x2]
['Kamis', 77, 77, 66, 50], //[string,x1,y1,y2,x2]
['Jumat', 68, 66, 22, 15] //[string,x1,y1,y2,x2]
// Treat first row as data as well.
], true);
var options = { legend:'none' };
var chart = new
google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options); }
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height:
500px;"></div>
</body>
</html>
Maka output (hasil) yang dikeluarkan sebagai berikut :
MENGATUR WARNA
Berikut adalah histogram dari populasi nasional:
.
.
Ada lebih dari dua ratus negara dengan populasi kurang dari seratus juta, dan setelah itu mati. histogram ini menggunakan pilihan warna untuk meberikan warna hijau:
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['green'],
};
Seperti semua Charts Google, warna dapat ditentukan baik sebagai nama bahasa Inggris atau sebagai nilai hex.
Penerapan Bar Chart Dalam Google Chart
Membuat Material Bar Chart
Pada tahun 2014, Google mengumumkan pedoman dimaksudkan untuk mendukung tampilan umum dan merasa seluruh properti dan aplikasi (seperti aplikasi Android) yang berjalan di platform Google. Kami menyebutnya upaya ini Desain Material. Kami akan menyediakan "Material" versi dari semua grafik utama kami; Anda dipersilakan untuk menggunakan mereka jika Anda suka bagaimana mereka terlihat.
Membuat Material Bar Chart mirip dengan menciptakan apa yang sekarang kita akan sebut "klasik" Bar Chart. Anda memuat Google Visualisasi API (meskipun dengan paket 'bar' bukan paket 'corechart'), mendefinisikan DataTable Anda, dan kemudian membuat objek (tapi google.charts.Bar kelas bukan google.visualization.BarChart).
Bahan Bar Charts memiliki banyak perbaikan kecil lebih Classic Bar Charts, termasuk palet warna ditingkatkan, bulat sudut, label format yang lebih jelas, jarak standar ketat antara seri, gridlines lebih lembut dan judul (dan penambahan sub judul).
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new
google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
Menggunakan google.charts.Bar.convertOptions() memungkinkan pengguna untuk mengambil keuntungan dari fitur tertentu, seperti pilihan preset hAxis/vAxis.format.
Grafik top-X
Jika Anda ingin menempatkan label sumbu X dan judul di bagian atas grafik Anda daripada bagian bawah, Anda dapat melakukannya di tangga lagu Material dengan pilihan axes.x:
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new
google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new
google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Penerapan Candlestick Chart Dalam Teknologi Informasi
Perkembangan teknologi informasi yang sangat pesat membawa seluruh elemen-elemen yang ada, baik itu ekonomi, bisnis, pendidikan, kenegaraan dsb. Dalam dunia teknologi informasi khususnya dalam bidang bisnis kita dapat menyertakan diagram (chart) candlestick dengan menggunakan salah satu Google API (Application Progamming Interface) yaitu Google Chart.
Google Chart merupakan suatu API yang digunakan untuk memvisualisasikan data ke dalam bentuk garis, peta pohon hierarkis, hingga grafik. Cara yang paling umum untuk menggunakan Google Chart adalah dengan JavaScript sederhana yang dimasukkan ke dalam halaman Web anda.
Semua jenis grafik digambarkan oleh data dengan menggunakan kelas DataTable, sehingga mudah untuk beralih ke jenis grafik lain untuk menemukan penampilan grafik yang ideal. DataTable menyediakan metode untuk menyortir, memodifikasi, dan penyaringan data. Selain itu DataTable dapat diisi langsung dari halaman web anda, database, atau penyedia data (data provider) yang mendukung protokol Charts Google Datasouce (protokol tersebut termasuk SQL seperti bahasa queri yang diimplementasikan oleh Google Spreadsheets, Google Fusion Tables, dan pihak ketiga penyedia data seperti SalesForce).
Konfigurasi Opsional
METODE
EVENT
Berikut contoh pemodelan grafik candlestick pada Google Chart. Misal sebuah perusahaan bernama PT Maju Terus bertransaksi di Bea cukai dalam waktu 5 hari dengan data transaksi sebagai berikut :
Berikut code JavaScript untuk membuat grafik Candlestick :
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() { var data = google.visualization.arrayToDataTable([
['Senin', 20, 28, 38, 45], //[string,x1,y1,y2,x2]
['Selasa', 31, 38, 55, 66], //[string,x1,y1,y2,x2]
['Rabu', 50, 55, 77, 80], //[string,x1,y1,y2,x2]
['Kamis', 77, 77, 66, 50], //[string,x1,y1,y2,x2]
['Jumat', 68, 66, 22, 15] //[string,x1,y1,y2,x2]
// Treat first row as data as well.
], true);
var options = { legend:'none' };
var chart = new
google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options); }
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height:
500px;"></div>
</body>
</html>
Maka output (hasil) yang dikeluarkan sebagai berikut :
Penerapan Histogram
Membuat Histogram
Misalkan citra digital memiliki L derajat keabuan, yaitu dari nilai 0 sampai L – 1 (misalnya pada citra dengan kuantisasi derajat keabuan 8-bit, nilai derajat keabuan dari 0 sampai 255). Secara matematis histogram citra dihitung dengan rumus
yang dalam hal ini,
ni = jumlah pixel yang memiliki derajat keabuan
i n = jumlah seluruh pixel di dalam citra
Plot hi versus fi dinamakan histogram. Gambar 6.1 adalah contoh sebuah histogram citra. Secara grafis histogram ditampilkan dengan diagram batang. Perhatikan dari persamaan 6.1 bahwa nilai ni telah dinormalkan dengan membaginya dengan n. Nilai hi berada di dalam selang 0 sampai 1.
Sebagai contoh, misalkan matriks di bawah ini menyatakan citra dijital yang berukuran 8 ´ 8 pixel dengan derajat keabuan dari 0 sampai 15 (ada 16 buah derajat keabuan):
Tabulasi perhitungan histogramnya ditunjukan pada Tabel 6.1. Mudah dilihat bahwa semakin besar nilai ni maka semakin besar pula nilai hi .
Tabel perhitungan histogram
Contoh:
Berikut adalah histogram dari panjang dinosaurus:
Histogram tersebut memberitahu kita bahwa bin paling umum adalah <10 meter, dan bahwa hanya ada satu dinosaurus lebih dari 40 meter. Kita bisa membawa lebih bar untuk menemukan bahwa itu adalah Seismosaurus (yang mungkin hanya Diplodocus yang sangat besar; ahli paleontologi tidak yakin).
Kode untuk menghasilkan histogram ini ditampilkan di bawah. Setelah mendefinisikan data (google.visualization.arrayToDataTable), grafik didefinisikan dengan panggilan untuk visualisasi google. Histogram dan digambar dengan metode imbang.
Diagram histogram diatas bila akan lebih jelas bila dilihat pada web/browser karena pada bin/balok diagram tersebut terdapat keterangan dari dinasaurus yang disebutkan dalam kodingan html dibawah ini
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Dinosaur', 'Length'],
['Acrocanthosaurus (top-spined lizard)', 12.2],
['Albertosaurus (Alberta lizard)', 9.1],
['Allosaurus (other lizard)', 12.2],
['Apatosaurus (deceptive lizard)', 22.9],
['Archaeopteryx (ancient wing)', 0.9],
['Argentinosaurus (Argentina lizard)', 36.6],
['Baryonyx (heavy claws)', 9.1],
['Brachiosaurus (arm lizard)', 30.5],
['Ceratosaurus (horned lizard)', 6.1],
['Coelophysis (hollow form)', 2.7],
['Compsognathus (elegant jaw)', 0.9],
['Deinonychus (terrible claw)', 2.7],
['Diplodocus (double beam)', 27.1],
['Dromicelomimus (emu mimic)', 3.4],
['Gallimimus (fowl mimic)', 5.5],
['Mamenchisaurus (Mamenchi lizard)', 21.0],
['Megalosaurus (big lizard)', 7.9],
['Microvenator (small hunter)', 1.2],
['Ornithomimus (bird mimic)', 4.6],
['Oviraptor (egg robber)', 1.5],
['Plateosaurus (flat lizard)', 7.9],
['Sauronithoides (narrow-clawed lizard)', 2.0],
['Seismosaurus (tremor lizard)', 45.7],
['Spinosaurus (spiny lizard)', 12.2],
['Supersaurus (super lizard)', 30.5],
['Tyrannosaurus (tyrant lizard)', 15.2],
['Ultrasaurus (ultra lizard)', 30.5],
['Velociraptor (swift robber)', 1.8]]);
var options = {
title: 'Lengths of dinosaurs, in meters',
legend: { position: 'none' },
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Kodingan diatas dapat diketikkan melalu notepad dengan opsi save (.html), kemudian buka notepad menggunakan browser (klik kanan pada notepad – open with – (ex. google chrome) maka akan muncul diagram histogram seperti diatas dengan keterangannya.
MENGATUR WARNA
Berikut adalah histogram dari populasi nasional:
.
.
Ada lebih dari dua ratus negara dengan populasi kurang dari seratus juta, dan setelah itu mati. histogram ini menggunakan pilihan warna untuk meberikan warna hijau:
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['green'],
};
Seperti semua Charts Google, warna dapat ditentukan baik sebagai nama bahasa Inggris atau sebagai nilai hex.
Penerapan Bar Chart Dalam Google Chart
Membuat Material Bar Chart
Pada tahun 2014, Google mengumumkan pedoman dimaksudkan untuk mendukung tampilan umum dan merasa seluruh properti dan aplikasi (seperti aplikasi Android) yang berjalan di platform Google. Kami menyebutnya upaya ini Desain Material. Kami akan menyediakan "Material" versi dari semua grafik utama kami; Anda dipersilakan untuk menggunakan mereka jika Anda suka bagaimana mereka terlihat.
Membuat Material Bar Chart mirip dengan menciptakan apa yang sekarang kita akan sebut "klasik" Bar Chart. Anda memuat Google Visualisasi API (meskipun dengan paket 'bar' bukan paket 'corechart'), mendefinisikan DataTable Anda, dan kemudian membuat objek (tapi google.charts.Bar kelas bukan google.visualization.BarChart).
Bahan Bar Charts memiliki banyak perbaikan kecil lebih Classic Bar Charts, termasuk palet warna ditingkatkan, bulat sudut, label format yang lebih jelas, jarak standar ketat antara seri, gridlines lebih lembut dan judul (dan penambahan sub judul).
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new
google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
Menggunakan google.charts.Bar.convertOptions() memungkinkan pengguna untuk mengambil keuntungan dari fitur tertentu, seperti pilihan preset hAxis/vAxis.format.
Grafik Dual-X
Kadang-kadang Anda akan ingin menampilkan dua seri dalam bar chart, dengan dua x-sumbu independen: sumbu atas untuk satu seri, dan sumbu bawah untuk lain:
Perhatikan bahwa tidak hanya dua x-sumbu berlabel berbeda ("parsec" versus "magnitudo semu") tetapi mereka masing-masing memiliki skala independen mereka sendiri dan gridlines. Jika Anda ingin menyesuaikan perilaku tersebut, gunakan opsi hAxis.gridlines.
Dalam kode di bawah, sumbu dan pilihan seri bersama-sama menentukan penampilan dual-X dari grafik. Opsi seri menentukan sumbu yang digunakan untuk setiap ('jarak' dan 'kecerahan', mereka tidak perlu memiliki hubungan dengan nama kolom dalam DataTable). Opsi sumbu kemudian membuat grafik ini grafik dual-X, menempatkan 'magnitudo tampak' sumbu di bagian atas dan sumbu 'parsec' di bagian bawah.
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'horizontal', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chart = new
google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Grafik top-X
Jika Anda ingin menempatkan label sumbu X dan judul di bagian atas grafik Anda daripada bagian bawah, Anda dapat melakukannya di tangga lagu Material dengan pilihan axes.x:
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new
google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new
google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
BAB III PERANGKAT LUNAK YANG MENDUKUNG
BAB III PERANGKAT LUNAK YANG MENDUKUNG
Menggunakan Charts Google
Charts Google menyediakan cara yang sempurna untuk memvisualisasikan data di website Anda. Dari grafik garis sederhana untuk peta pohon hirarkis yang kompleks, galeri grafik memberikan sejumlah besar jenis bagan yang siap digunakan.
Cara yang paling umum untuk menggunakan Google Charts adalah dengan JavaScript sederhana yang Anda masukkan dalam halaman web Anda. Anda memuat beberapa perpustakaan Bagan Google, daftar data yang akan memetakan, pilih opsi untuk menyesuaikan grafik Anda, dan akhirnya membuat objek grafik denganidyang Anda pilih. Kemudian, kemudian di halaman web, Anda membuat<Div> dengan itu id untuk menampilkan Chart Google. Itu semua yang Anda butuhkan untuk memulai.
Grafik yang terkena sebagai kelas JavaScript, dan Google Chart menyediakan banyak jenis grafik untuk Anda gunakan. Tampilan default biasanya akan semua yang Anda butuhkan, dan Anda dapat selalu menyesuaikan grafik agar sesuai dengan tampilan dan nuansa situs Anda. Grafik yang sangat interaktif dan mengekspos peristiwa yang memungkinkan Anda menghubungkan mereka untuk membuat kompleks dashboard atau pengalaman lainnya terintegrasi dengan halaman web Anda. Grafik tersebut diberikan menggunakan teknologi HTML5 / SVG untuk menyediakan kompatibilitas cross-browser (termasuk VML untuk versi IE yang lebih tua) dan lintas platform portabilitas untuk iPhone, iPads dan Android. pengguna Anda tidak akan pernah main-main dengan plugin atau perangkat lunak apapun. Jika mereka memiliki web browser, mereka dapat melihat grafik Anda.
Semua jenis grafik akan diisi dengan data menggunakan Tabel data kelas, sehingga mudah untuk beralih di antara jenis grafik yang Anda bereksperimen untuk menemukan penampilan ideal. DataTable menyediakan metode untuk menyortir, memodifikasi, dan penyaringan data, dan dapat diisi langsung dari halaman web Anda, database, atau penyedia data yang mendukung Chart Tools DataSource protokol. (Protokol Itu termasuk bahasa query SQL-seperti dan diimplementasikan oleh Google Spreadsheets, Google Fusion Tables, dan ketiga penyedia data pihak seperti Salesforce. Anda bahkan dapat menerapkan protokol di situs Anda sendiri dan menjadi penyedia data untuk layanan lainnya.)
Cara Menggambar Grafik menggunakan HTML 5
chart.draw()
Ini adalah metode dasar, berikut adalah langkah-langkah dasarnya :
1. Memuat the gstatic library loader, Google Visualization, dan chart libraries
2. Siapkan data anda
3. Siapkan opsi grafik
4. Menginstansiasi class grafik.
5. Secara opsional meregistrasi untuk menerima setiap events grafik.
6. Panggil chart.draw().
Keuntungan:
• Anda memiliki kontrol penuh atas setiap langkah dari proses.
• Anda dapat meregistrasi untuk memperhatikan semua event yang dilontarkan oleh grafik.
Kerugian:
• Banyak kata.
• Anda harus secara eksplisit memuat semua pustaka grafik yang diperlukan.
• Jika anda mengirim kueri, anda harus secara manual mengimplementasikan untuk callback, mengecek keberhasilan, mengekstrak value DataTable yang dikembalikan, dan menyampaikannya ke chart.
Contoh:
ChartWrapper
ChartWrapper merupakan class yang memudahkan untuk menangani pengambilan seluruh grafik library yang sesuai untuk anda dan juga menyederhanakan pengiriman kueri alat grafik Datasources.
Keuntungan:
1. Code lebih sedikit.
2. Memuat semua pustaka grafik yang diperlukan untuk anda.
3. Membuat kueri Datasources jauh lebih mudah dengan membuat objek.
4. Query dan penangan callback untuk anda
5. Menyampaikan wadah element ID, dan akan memanggil getElementByID untuk anda.
6. Data dapat disampaikan dalam berbagai format: sebagai sebuah array nilai, sebagai sebuah literal string JSON, atau sebagai DataTable
Kerugian:
• ChartWrapper saat ini hanya mengembangkan event select, ready, and error. Untuk mendapatkan event yang lain.
Contoh:
DrawChart()
DrawChart merupakan metode statis global yang membungkus ChartWrapper.
Keuntungan:
• Sama seperti ChartWrapper, tapi lebih sedikit untuk digunakan.
Kerugian:
• Tidak mengembalikkan handle untuk pembungkus (DrawChart), sehingga anda tidak bisa menangani events.
Contoh:
Menggunakan Charts Google
Charts Google menyediakan cara yang sempurna untuk memvisualisasikan data di website Anda. Dari grafik garis sederhana untuk peta pohon hirarkis yang kompleks, galeri grafik memberikan sejumlah besar jenis bagan yang siap digunakan.
Cara yang paling umum untuk menggunakan Google Charts adalah dengan JavaScript sederhana yang Anda masukkan dalam halaman web Anda. Anda memuat beberapa perpustakaan Bagan Google, daftar data yang akan memetakan, pilih opsi untuk menyesuaikan grafik Anda, dan akhirnya membuat objek grafik denganidyang Anda pilih. Kemudian, kemudian di halaman web, Anda membuat<Div> dengan itu id untuk menampilkan Chart Google. Itu semua yang Anda butuhkan untuk memulai.
Grafik yang terkena sebagai kelas JavaScript, dan Google Chart menyediakan banyak jenis grafik untuk Anda gunakan. Tampilan default biasanya akan semua yang Anda butuhkan, dan Anda dapat selalu menyesuaikan grafik agar sesuai dengan tampilan dan nuansa situs Anda. Grafik yang sangat interaktif dan mengekspos peristiwa yang memungkinkan Anda menghubungkan mereka untuk membuat kompleks dashboard atau pengalaman lainnya terintegrasi dengan halaman web Anda. Grafik tersebut diberikan menggunakan teknologi HTML5 / SVG untuk menyediakan kompatibilitas cross-browser (termasuk VML untuk versi IE yang lebih tua) dan lintas platform portabilitas untuk iPhone, iPads dan Android. pengguna Anda tidak akan pernah main-main dengan plugin atau perangkat lunak apapun. Jika mereka memiliki web browser, mereka dapat melihat grafik Anda.
Semua jenis grafik akan diisi dengan data menggunakan Tabel data kelas, sehingga mudah untuk beralih di antara jenis grafik yang Anda bereksperimen untuk menemukan penampilan ideal. DataTable menyediakan metode untuk menyortir, memodifikasi, dan penyaringan data, dan dapat diisi langsung dari halaman web Anda, database, atau penyedia data yang mendukung Chart Tools DataSource protokol. (Protokol Itu termasuk bahasa query SQL-seperti dan diimplementasikan oleh Google Spreadsheets, Google Fusion Tables, dan ketiga penyedia data pihak seperti Salesforce. Anda bahkan dapat menerapkan protokol di situs Anda sendiri dan menjadi penyedia data untuk layanan lainnya.)
Cara Menggambar Grafik menggunakan HTML 5
chart.draw()
Ini adalah metode dasar, berikut adalah langkah-langkah dasarnya :
1. Memuat the gstatic library loader, Google Visualization, dan chart libraries
2. Siapkan data anda
3. Siapkan opsi grafik
4. Menginstansiasi class grafik.
5. Secara opsional meregistrasi untuk menerima setiap events grafik.
6. Panggil chart.draw().
Keuntungan:
• Anda memiliki kontrol penuh atas setiap langkah dari proses.
• Anda dapat meregistrasi untuk memperhatikan semua event yang dilontarkan oleh grafik.
Kerugian:
• Banyak kata.
• Anda harus secara eksplisit memuat semua pustaka grafik yang diperlukan.
• Jika anda mengirim kueri, anda harus secara manual mengimplementasikan untuk callback, mengecek keberhasilan, mengekstrak value DataTable yang dikembalikan, dan menyampaikannya ke chart.
Contoh:
ChartWrapper
ChartWrapper merupakan class yang memudahkan untuk menangani pengambilan seluruh grafik library yang sesuai untuk anda dan juga menyederhanakan pengiriman kueri alat grafik Datasources.
Keuntungan:
1. Code lebih sedikit.
2. Memuat semua pustaka grafik yang diperlukan untuk anda.
3. Membuat kueri Datasources jauh lebih mudah dengan membuat objek.
4. Query dan penangan callback untuk anda
5. Menyampaikan wadah element ID, dan akan memanggil getElementByID untuk anda.
6. Data dapat disampaikan dalam berbagai format: sebagai sebuah array nilai, sebagai sebuah literal string JSON, atau sebagai DataTable
Kerugian:
• ChartWrapper saat ini hanya mengembangkan event select, ready, and error. Untuk mendapatkan event yang lain.
Contoh:
DrawChart()
DrawChart merupakan metode statis global yang membungkus ChartWrapper.
Keuntungan:
• Sama seperti ChartWrapper, tapi lebih sedikit untuk digunakan.
Kerugian:
• Tidak mengembalikkan handle untuk pembungkus (DrawChart), sehingga anda tidak bisa menangani events.
Contoh:
Sabtu, 21 Januari 2017
BAB II TEORI KONSEP VISUALISASI DAN MODEL GRAFIS
BAB II
TEORI KONSEP VISUALISASI DAN MODEL GRAFIS
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.
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 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.
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.
Berikut dibawah ini merupakan contoh gambar grafik jumlah peserta kursus Bahasa inggris, dengan men visualisasikan data secara grafik kita dapat mengetahui minat peserta kursus dari taun ke taunnya dengan mudah.
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. (1989 : 69).
6. Gambar
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 gambar-gambar keterangan-keterangan, daftar-daftar dan sebagainya. Bagan digunakan untuk memperagakan pokok-pokok isi bagan secara jelas dan sederhana antara lain: perkembangan, perbandingan, struktur, organisasi.
1.4 KONSEP MODEL GRAFIK
1.4.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.
1.4.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.
1.4.3 Elemen - elemen yang membentuk suatu model grafik komputer secara Geometri:
1. Titik (point)
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. Garis (Line)
Dua buah titik selalu dihubungkan dengan garis dimana jarak terdekatnya adalah berupa garis lulus.
3. Vertex
Titik pada gambar 3 Dimensi (3D).
4. Edge
Garis pada 3D yang menghubungkan 2 vertex.
5. Polygon / face / facet
Bangun sembarang yang terbentuk dari vertex vertex yang terhubung . merupakan unit fundamental dari grafik komputer.
6. Kurva
Kurva adalah suatu objek geometri yang merupakan garis lengkung, atau garis yang terbentuk Karena persambunga titik titik yang kontinyu.
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.
1.4.4 Kegiatan yang terkait dengan pemodelan grafik komputer
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.
Rendering adalah suatu kegiatan memproduksi citra yang lebih solid dari model yang telah dibentuk.
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.
Histogram
Informasi penting mengenai isi citra digital dapat diketahui dengan membuat histogram citra.
00.00.0000 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.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. Contoh-contoh histogram citra dapat dilihat pada Gambar 4.1 (b) dan pada pembahasan-pembahasan lain tentang operasi titik. Histogram juga bisa diterapkan untuk citra berwarna, dengan cara memisahkan terlebih dulu 3 komponen wama red, green, dan blue, kemudian setiap komponen warna dibuat histogramnya. Histogram citra berwama juga dapat ditampilkan dalam grafik 3D dengan salah satu sumbu menyatakan komponen ruang warna.
2.2 Penyesuaian Kecerahan (Brightness Adjustment)
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 4.1).
2.3 Metode Histogram
00.00.0000 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), seperti ditunjukkan pada Gambar 4.2.
Citra yang memiliki histogram seperti pada Gambar 4.2(a) dapat diambangkan dengan nilai ambang tunggal (Gambar 4.3). Gambar 4.2(b) menunjukkan histogram dengan 3 puncak. Puncak di tengah menunjukkan suatu objek sehingga pengambangan harus dilakukan dengan dua nilai T.
Citra yang memiliki histogram seperti gambar 5.27(c), pengambangan dengan nilai ambang tunggal tidak akan memberikan hasil yang memuaskan dan pengambangan lokal adaptif adalah penyelesaian yang tepat untuk masalah tersebut (Gambar 5.29).
2.4 Perenggangan Kontras (Constrast Stretching)
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 (Gambar 4.4 (c)). 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.
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:
Bar Chart
Bar chart 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. Mereka juga tipe grafik yang fleksibel dan ada beberapa variasi dari bar chart standar termasuk grafik horisontal bar, dikelompokkan atau grafik komponen, dan ditumpuk bar chart. Pada contoh di bawah, yang menunjukkan persentase penduduk Inggris yang menghadiri berbagai acara budaya selama 1999-2000, jenis acara adalah kategori diskrit data.
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
5.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".
5.2 Tipe Data Yang Bisa Ditampilkan Menggunakan Bar Chart
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.
5.3 Jenis-Jenis Bar Chart
5.3.1 Bar Chart Horisontal
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.
Perhatikan, bahwa dalam Excel grafik di mana bar disajikan secara vertikal disebut sebagai bagan kolom, sementara grafik dengan batang horizontal disebut bar chart.
5.3.2 Pengkelompokan Bar Chart
Bar Chart Kelompok adalah cara untuk menunjukkan informasi tentang berbagai sub-kelompok 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.
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 masing-masing 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.
5.3.3 Pertumpukan Bar Chart
Pertmupukan 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
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.
5.3.4 Mewarnai Bar
Lihat grafik kepadatan dari empat logam mulia:
Gambar di atas, semua warna adalah biru. Itu karena mereka semua bagian dari seri yang sama; jika ada seri kedua, yang akan menjadi berwarna merah. Kita dapat menyesuaikan warna-warna ini dengan peran gaya:
Ada tiga cara yang berbeda untuk memilih warna, dan tabel data kami menampilkan mereka semua: nilai RGB, nama warna bahasa Inggris, dan deklarasi CSS seperti:
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
]);
5.3.5 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
Kita tidak menyarankan anda mencampur gaya terlalu bebas dalam bagan-memilih gaya dan tetap dengan itu-tapi untuk menunjukkan semua atribut gaya, inilah sampler:
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; fill-color: #C5A5CF'],
['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']]);
5.3.6 Label Bar
Grafik memiliki beberapa jenis label, seperti label centang, label legenda, dan label dalam tooltips. Pada bagian ini, kita akan melihat bagaimana untuk menempatkan label dalam (atau dekat) bar di bar chart. Katakanlah kita ingin membubuhi keterangan masing-masing bar dengan simbol kimia yang sesuai. Kita dapat melakukannya dengan peran penjelasan:
Pada tabel data, kita mendefinisikan kolom baru dengan { role: 'annotation' } memegang bar label kita:
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' ]
]);
Sementara pengguna dapat mengarahkan kursor ke bar untuk melihat nilai-nilai data yang mungkin ingin meletakkan bar-nya:
Ini sedikit lebih rumit dari yang seharusnya, karena kita membuat DataView untuk menentukan penjelasan untuk setiap bar.
TEORI KONSEP VISUALISASI DAN MODEL GRAFIS
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.
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 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.
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.
Berikut dibawah ini merupakan contoh gambar grafik jumlah peserta kursus Bahasa inggris, dengan men visualisasikan data secara grafik kita dapat mengetahui minat peserta kursus dari taun ke taunnya dengan mudah.
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. (1989 : 69).
6. Gambar
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 gambar-gambar keterangan-keterangan, daftar-daftar dan sebagainya. Bagan digunakan untuk memperagakan pokok-pokok isi bagan secara jelas dan sederhana antara lain: perkembangan, perbandingan, struktur, organisasi.
1.4 KONSEP MODEL GRAFIK
1.4.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.
1.4.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.
1.4.3 Elemen - elemen yang membentuk suatu model grafik komputer secara Geometri:
1. Titik (point)
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. Garis (Line)
Dua buah titik selalu dihubungkan dengan garis dimana jarak terdekatnya adalah berupa garis lulus.
Titik pada gambar 3 Dimensi (3D).
4. Edge
Garis pada 3D yang menghubungkan 2 vertex.
5. Polygon / face / facet
Bangun sembarang yang terbentuk dari vertex vertex yang terhubung . merupakan unit fundamental dari grafik komputer.
6. Kurva
Kurva adalah suatu objek geometri yang merupakan garis lengkung, atau garis yang terbentuk Karena persambunga titik titik yang kontinyu.
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.
1.4.4 Kegiatan yang terkait dengan pemodelan grafik komputer
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.
Rendering adalah suatu kegiatan memproduksi citra yang lebih solid dari model yang telah dibentuk.
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.
Histogram
Informasi penting mengenai isi citra digital dapat diketahui dengan membuat histogram citra.
00.00.0000 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.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. Contoh-contoh histogram citra dapat dilihat pada Gambar 4.1 (b) dan pada pembahasan-pembahasan lain tentang operasi titik. Histogram juga bisa diterapkan untuk citra berwarna, dengan cara memisahkan terlebih dulu 3 komponen wama red, green, dan blue, kemudian setiap komponen warna dibuat histogramnya. Histogram citra berwama juga dapat ditampilkan dalam grafik 3D dengan salah satu sumbu menyatakan komponen ruang warna.
2.2 Penyesuaian Kecerahan (Brightness Adjustment)
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 4.1).
Penyesuaian tingkat brightness suatu citra dapat dinyatakan sebagai
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.3 Metode Histogram
00.00.0000 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), seperti ditunjukkan pada Gambar 4.2.
Citra yang memiliki histogram seperti pada Gambar 4.2(a) dapat diambangkan dengan nilai ambang tunggal (Gambar 4.3). Gambar 4.2(b) menunjukkan histogram dengan 3 puncak. Puncak di tengah menunjukkan suatu objek sehingga pengambangan harus dilakukan dengan dua nilai T.
Citra yang memiliki histogram seperti gambar 5.27(c), pengambangan dengan nilai ambang tunggal tidak akan memberikan hasil yang memuaskan dan pengambangan lokal adaptif adalah penyelesaian yang tepat untuk masalah tersebut (Gambar 5.29).
2.4 Perenggangan Kontras (Constrast Stretching)
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 (Gambar 4.4 (c)). 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.
Pada perenggangan kontras, setiap pixel pada citra U ditransformasi dengan menggunakan fungsi berikut.
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).
Gambar 4.4 menunjukkan contoh perenggangan kontras. Citra masukan memiliki kontras rendah, terlalu abu-abu (histogram terpusat di tengah), kemudian direnggangkan dengan nilai c = 79 dan d = 136, sehingga citra keluaran lebih jelas (histogram lebih menyebar).
Permasalahan yang muncul dengan menggunakan formula di atas adalah bila nilai maksimum (d) pixel terlalu tinggi dan nilai minimum (c) pixel terlalu rendah, akan tetapi kehadiran pixel dengan nilai maksimum atau nilai minimum sangat sedikit (atau mungkin hanya 1) maka proses penskalaan yaitu pembagi (d — c) pada formula di atas menjadi kurang representatif. Untuk menyelesaikan perrnasalahan ini dapat dilakukan dengan memilih nilai c dan d berdasarkan persentase tertentu, misalnya c diberi nilai dengan nilai pixel di mana terdapat sekitar p% pixel lebih kecil dari c, demikian juga untuk nilai d diberi nilai pixel di mana terdapat sekitar q% pixel lebih besar dari d.
Sudah tentu nilai p dapat sama atau berbeda dengan q. Nilai p dan q dapat ditentukan dengan membuat histogram citra input dan berdasarkan sebaran nilai pixel pada histogram, nilai p dan q yang representative dapat dipilih.
Dengan plow dan phigh berturut turut menyatakan nilai pixel yang berkaitan dengan nilai p% dan q%.
2.5 Ekualisasi Histogram (Histogram Equalization)
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.
00.00.0000 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.
Dengan h(i) menyatakan histogram awal. Berikut contoh penyebaran histogram dengan proses ekualisasi histogram.
Tampak pada Gambar 4.9-1 histogram hasil ekualisasi histogram tidak rata (Gambar (b)), hanya mendistribusi ulang histogram awal (Gambar (d)). Ekualisasi histogram ini dapat meningkatkan kualitas kontras citra (lihat Gambar 4.9-1(a) dan (c)).
2.6 Ekualisasi Histogram Adaptif (Adaptif Histogram Equalization)
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.
Contoh hasil ekualisasi histogram adaptif ditunjukkan pada Gambar 4.9-2. Pada gambar tersebut disajikan suatu citra retina grayscale 4.9-2 (a), hasil ekualisasi histogram ditunjukkan pada Gambar 4.9-2 (b), dan hasil ekualisasi histogram adaptif dengan ukuran blok 9 x 9 pixel ditunjukkan pada Gambar 4.9-2 (c). Tampak pada gambar tersebut terjadi perbedaan yang cukup signifikan antara hasil ekualisasi histogram tanpa adaptif dan dengan adaptif.
2.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.
dengan x = 0,…,L-1
Ciri histogram juga sangat berguna dalam analisis bentuk (shape analysis).
Area Chart
3.1 Ikhtisar
Area grafik yang diberikan dalam browser menggunakan SVG atau VML. Menampilkan tips ketika melayang di atas poin.
3.2 Grafik Area Bertumpuk
Secara default, grafik daerah menarik seri di atas satu sama lain. Anda dapat stack mereka atas satu sama lain sebagai gantinya, sehingga nilai-nilai data pada setiap x-nilai dijumlahkan. 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:
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.
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:
Jika mereka diskontinuitas tidak menarik, Anda dapat mengganti angka nol untuk nulls, dan / atau menetapkan pilihan interpolateNulls untuk benar:
Candlestick Chart
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.
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, bergantung dengan setting dari chart yang digunakan.
Bar Chart
Bar chart 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. Mereka juga tipe grafik yang fleksibel dan ada beberapa variasi dari bar chart standar termasuk grafik horisontal bar, dikelompokkan atau grafik komponen, dan ditumpuk bar chart. Pada contoh di bawah, yang menunjukkan persentase penduduk Inggris yang menghadiri berbagai acara budaya selama 1999-2000, jenis acara adalah kategori diskrit data.
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
5.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".
5.2 Tipe Data Yang Bisa Ditampilkan Menggunakan Bar Chart
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.
5.3 Jenis-Jenis Bar Chart
5.3.1 Bar Chart Horisontal
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.
Perhatikan, bahwa dalam Excel grafik di mana bar disajikan secara vertikal disebut sebagai bagan kolom, sementara grafik dengan batang horizontal disebut bar chart.
5.3.2 Pengkelompokan Bar Chart
Bar Chart Kelompok adalah cara untuk menunjukkan informasi tentang berbagai sub-kelompok 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.
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 masing-masing 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.
5.3.3 Pertumpukan Bar Chart
Pertmupukan 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
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.
5.3.4 Mewarnai Bar
Lihat grafik kepadatan dari empat logam mulia:
Gambar di atas, semua warna adalah biru. Itu karena mereka semua bagian dari seri yang sama; jika ada seri kedua, yang akan menjadi berwarna merah. Kita dapat menyesuaikan warna-warna ini dengan peran gaya:
Ada tiga cara yang berbeda untuk memilih warna, dan tabel data kami menampilkan mereka semua: nilai RGB, nama warna bahasa Inggris, dan deklarasi CSS seperti:
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
]);
5.3.5 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
Kita tidak menyarankan anda mencampur gaya terlalu bebas dalam bagan-memilih gaya dan tetap dengan itu-tapi untuk menunjukkan semua atribut gaya, inilah sampler:
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; fill-color: #C5A5CF'],
['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']]);
5.3.6 Label Bar
Grafik memiliki beberapa jenis label, seperti label centang, label legenda, dan label dalam tooltips. Pada bagian ini, kita akan melihat bagaimana untuk menempatkan label dalam (atau dekat) bar di bar chart. Katakanlah kita ingin membubuhi keterangan masing-masing bar dengan simbol kimia yang sesuai. Kita dapat melakukannya dengan peran penjelasan:
Pada tabel data, kita mendefinisikan kolom baru dengan { role: 'annotation' } memegang bar label kita:
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' ]
]);
Sementara pengguna dapat mengarahkan kursor ke bar untuk melihat nilai-nilai data yang mungkin ingin meletakkan bar-nya:
Ini sedikit lebih rumit dari yang seharusnya, karena kita membuat DataView untuk menentukan penjelasan untuk setiap bar.
Langganan:
Postingan (Atom)