CONTOH KASUS
4.1 BUBBLE
CHART
4.1.1 CONTOH KASUS
SATU
Sebuah diagram bubble adalah jenis grak yang
menampilkan tiga dimensi data. Setiap entitas dengan triplet nya (v1, v2, v3)
dari data yang terkait diplot sebagai disk yang mengungkapkan dua dari
nilainilai vi melalui lokasi xy disk dan yang ketiga melalui ukurannya. Grak
gelembung dapat memfasilitasi pemahaman hubungan ilmiah sosial, ekonomi,
kesehatan, dan lainnya.
Sebuah grak gelembung adalah
variasi dari grak scatter di mana titik data diganti dengan gelembung. Sebuah
grak gelembung dapat digunakan sebagai pengganti dari grak scatter jika data
Anda memiliki tiga seri data, masing-masing berisi satu set nilai. Sebagai
contoh, lembar kerja pada gambar berikut ini berisi nilai-nilai untuk tiga
jenis data: jumlah produk, nilai dolar dari penjualan, dan ukuran persentase
pangsa pasar.
Dalam grak Bubble, ukuran gelembung ditentukan oleh
nilai-nilai dalam seri ketiga data. Misalnya, Bubble grak menampilkan uku-
ran gelembung berikut yang sesuai dengan nilai-nilai pada
kolom dari data sampel (Pangsa pasar%).
Perhatikan bahwa data dalam gelembung grak ini diplot sebagai
berikut:
Jumlah produk yang ditampilkan
di sepanjang horizontal ( x ) axis.
Jumlah
penjualan ditampilkan bersama vertikal (y) sumbu.
Pangsa pasar persentase
diwakili oleh ukuran gelembung.
Sebuah grak gelembung menampilkan seperangkat
nilai-nilai numerik sebagai lingkaran. Hal ini terutama berguna untuk set data
dengan puluhan hingga ratusan nilai-nilai, atau dengan nilai-nilai yang berbeda
dengan beberapa kali lipat.
Lingkaran dalam grak gelembung
mewakili nilai-nilai data yang berbeda , dengan luas lingkaran sesuai dengan
nilai . Posisi gelembung tidak berarti apa-apa , tetapi dirancang untuk
berkemas lingkaran bersama-sama dengan ruang yang relatif sedikit terbuang .
Karena grak gelembung menggunakan daerah untuk mewakili angka
, yang terbaik adalah untuk
nilai-nilai positif . Jika kumpulan data Anda termasuk nilai-nilai negatif ,
mereka akan ditampilkan dalam warna yang berbeda : lingkaran untuk 100 dan
lingkaran untuk -100 akan baik menjadi ukuran yang sama , tapi mungkin 100 biru
dan -100 mungkin merah. Jika set data Anda memiliki banyak angka negatif ,
pertimbangkan untuk menggunakan blok histogram sebagai gantinya.
Untuk melihat nilai yang tepat dari lingkaran pada
tabel, gerakkan mouse Anda di atasnya . Jika Anda telah memetakan lebih dari
satu dimensi , menggunakan menu untuk memilih dimensi untuk menunjukkan . Jika
set data Anda memiliki beberapa kolom numerik , Anda dapat memilih kolom untuk
dasar lingkaran ukuran pada dengan menggunakan menu di bagian bawah grak .
Sebuah
grak gelembung adalah variasi dari grak scatter di mana titik data diganti
dengan gelembung. Sebuah grak gelembung dapat digunakan sebagai pengganti dari
grak scatter jika data Anda memiliki tiga seri data, masing-masing berisi satu
set nilai.
Grak gelembung yang tidak biasa, namun memiliki
keunggulan. Mereka terbaca dapat menunjukkan nilai-nilai data yang berbeda
dengan rasio 100.000, dan dapat menampilkan ratusan nilai individual sekaligus.
Anda dapat menganggap mereka sebagai melakukan akar kuadrat visual yang
mengubah pada kumpulan data.
4.1.2 CONTOH KASUS
DUA
Contoh di atas membandingkan 5 perusahaan menggunakan 3
ukuran:
Jenis produk yang dijual (sumbu
x)
Nilai penjualan (sumbu y)
Persentase
pangsa pasar (sumbu z)
Dengan grak ini, dengan cukup mudah orang bisa melihat
bahwa lingkaran yang lebih besar menunjukkan pangsa pasar yang lebih besar
pula. Selanjutnya lokasi di mana lingkaran tersebut berada menunjukkan seberapa
banyak jenis produk yang dijual dan berapa nilai penjualannya. Perhatikan bahwa
presisi tidak terlalu jelas dalam grak gelembung karena fungsinya memang untuk
menunjukkan perbedaan relatif antara data-data yang diperbandingkan secara
visual dan cepat.
4.1.3 CONTOH KASUS
TIGA
Gambar diatas adalah contoh Bubble chart pada
JSFIDDLE, pada gambar diatas kita dapat melihat bubble chart asupan gula dan
lemak per negara. pada gambar diatas kita membandingkan beberapa negara dengan
menggunakan 3 ukuran, yaitu:
asupan
gula (sumbu Y) asupan lemak (sumbu X) obesitas pada orang dewasa (sumbu Z)
dengan grak ini kita dapat melihat bahwa negara dengan
lingkaran terbesar adalah negara dengan asupan gula dan lemak tertinggi dan
yang terkecil adalah yang terenda. berikut adalah kodingan dalam chart yang
telah kita buat diatas menggunakan JSFIDDLE: $(function () {
Highcharts.chart(’container’, { chart: { type: ’bubble’, plotBorderWidth: 1 ,
zoomType: ’xy’ } , legend: { enabled: false } , title:
{
text: ’Sugar and fat in take per country’ } , subtitle: { text: ’Source: <a
href="http://www. euromonitor.com/">Euromonitor</a> and
<a href="https://data.oecd.org/"> OECD</a>’ } , xAxis: {
gridLineWidth: 1 , title: { text: ’Daily fat intake’ }, labels: { format:
’{value} gr’ } , plotLines: [{ color: ’black’, dashStyle:
’dot’, width: 2, value: 65, label: { rotation: 0, y: 15,
style: { fontStyle: ’italic’ } , text: ’Safe fat intake 65g/day’ } , zIndex: 3
}] }, yAxis: { startOnTick: false, endOnTick: false, title: { text: ’Daily
sugar intake’ } , labels: { format: ’{value} gr’ } , maxPadding: 0.2 ,
plotLines:
[{ color: ’black’, dashStyle: ’dot’, width: 2, value: 50, label: { align:
’right’, style: { fontStyle: ’italic’ }, text: ’Safe sugar intake 50g/day’, x:
-10 } , zIndex: 3 }] } , tooltip: { useHTML: true, headerFormat:
’<table>’, pointFormat:
’<tr><th colspan="2">
< h3>{point.country}</h 3>
< /th >
</tr>’ + ’<tr>
<th>Fat intake:</th>
< td>{point.x}g</td >
</tr>’ + ’<tr>
<th>Sugar intake:</th>
< td>{point.y}g</td >
</tr>’ + ’<tr>
<th>Obesity ( adults):</th >
<
td>{point.z}%</td > </tr>’, footerFormat: ’</table>’,
followPointer: true } , plotOptions: { series: { dataLabels: { enabled: true,
format: ’{point.name}’
}
}
} ,
series: [{ data: [ { x: 95, y: 95, z: 13.8 , name: ’BE’, country: ’Belgium’ },
{ x: 86.5, y: 102.9, z: 14.7, name: ’DE’, country: ’Germany’ }, { x: 80.8, y:
91.5, z: 15.8 , name: ’FI’, country: ’Finland’ }, { x: 80.4, y: 102.5, z: 12,
name: ’NL’, country: ’Netherlands’ }, { x: 80.3, y: 86.1, z: 11.8, name: ’SE’,
country: ’Sweden’ }, { x: 78.4, y: 70.1, z: 16.6, name: ’ES’, country: ’Spain’
}, { x: 74.2, y: 68.5, z: 14.5 , name: ’FR’, country: ’France’ }, { x: 73.5, y:
83.1, z: 10, name: ’NO’, country: ’Norway’ }, { x: 71, y: 93.2, z: 24.7, name:
’UK’, country: ’United Kingdom’ }, { x: 69.2, y: 57.6, z: 10.4, name: ’IT’,
country: ’Italy’ }, { x: 68.6, y: 20, z: 16, name: ’RU’, country: ’Russia’ }, {
x: 65.5, y: 126.4, z: 35.3, name: ’US’, country: ’United States’ }, { x: 65.4,
y: 50.8, z: 28.5, name: ’HU’, country: ’Hungary’ }, { x: 63.4, y: 51.8, z:
15.4, name: ’PT’, country: ’Portugal’ }, { x: 64, y: 82.9, z: 31.3, name: ’NZ’,
country: ’New Zealand’ } ] }]
}); }) ;
4.2 GEOCHART
4.2.1 CONTOH KASUS 1
Data statistik wilayah biasa ditampilkan pada peta.
Berbagai media digunakan untuk menempatkan peta itu, baik lewat kertas, gambar,
atau web. Tampilan peta dalam web tentu diharapkan tidak statis tetapi cukup
interaktif bagi yang melihat.
Sudah banyak cara yang tersedia untuk menampilkan data
wilayah di web. Salah satu caranya adalah memanfaatkan Geo Chart milik/layanan
Google (Visualization API).
Chart ini bisa menampilkan data dari tingkat benua,
negara, provinsi, hingga kota, tanpa harus berpusing ria dengan letak bujur
lintang wilayah tersebut. Tinggal memanfaatkan ID wilayah yang terdaftar pada
ISO 3166-1 alpha-2. Layanan ini berupa Javascript.
akan saya berikan kodingan dari geo char akan kami buat
menggunakan layanan Google:
< html >
< head >
<script type=’text/javascript’ src=
’https://www.google.com/jsapi’></script>
<script type=’text/javascript’> goo gle.load(’visualization’, ’1’,
{’packages’: [ ’geochart’]}); google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() { var data = google.visualization. arrayToDataTable([
[ ’Region’,
’Population ( fiktif)’],
[’Jakarta’, 69043] ,
[’East Java’, 24813] ,
[’West Java’, 15712] ,
[’Yogyakarta’, 10937] ,
[’Central
Java’, 10345] ,
[’North Sumatra’, 9470] ,
[’Banten’, 3405] ,
[’South Sumatra’, 3181] ,
[’Riau’, 2898] ,
[’Bali’, 2830] ,
[’South Sulawesi’, 2811] ,
[’Lampung’, 4000] ,
[’West Sumatra’, 3000] ,
[’East Kalimantan’, 2000] ,
[’Central Sulawesi’, 2953] ,
[’West Kalimantan’, 10666] ,
[’Riau Islands’, 5000] ,
[’South Kalimantan’, 4367] ,
[’North Sulawesi’, 6790] ,
[’West Nusa Tenggara’, 9932] ,
[’East Nusa Tenggara’, 6654] ,
[’Papua’, 2000] ,
[’Central Kalimantan’, 7549] ,
[’Aceh’, 6660] ,
[’Bengkulu’, 4642] ,
[’Jambi’, 3456] ,
[’Maluku’, 5432] ,
[’Gorontalo’, 10000] ,
[’South East Sulawesi’, 8096] ,
[’North Maluku’, 4567] ,
[’Bangka Belitung Islands’, 2345] ,
[’West Papua’, 1085]
]) ;
var options = { region: ’ID’, displayMode: ’markers’, colorAxis: {colors:
[’green’, ’blue’]
} } ;
var chart = new google.visualization.
GeoChart(document.getElementById(’chart_div’));
chart.draw(data, options);
} ;
< /script >
< /head >
< body >
<div id="chart_div" style="width:
900px; height: 500 px;"></div >
< /body >
< /html >
Dari kodingan diatas akan diperoleh
gambar berikut:
4.3 ANNOTATION
CHART
4.3.1 CONTOH KASUS
SATU
< html >
< head >
<script type="text/javascript" src="https:
//www.gstatic.com/charts/loader.js"></script> <script
type=’text/javascript’> google. charts.load(’current’, {
’packages’:[’annotationchart’]}); google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var
data = new google.visualization.DataTable(); data.addColumn(’date’, ’Date’);
data.addColumn(’number’, ’Kepler-22b mission’); data.addColumn(’string’,
’Kepler title’); data.addColumn(’string’, ’Kepler text’);
data.addColumn(’number’, ’Gliese 163 mission’); data.addColumn(’string’,
’Gliese title’); data.addColumn(’string’, ’Gliese text’); data.addRows([
[new
Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined],
[new Date(2314, 2, 16), 24045, ’Lalibertines’,
’First encounter’, 12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, ’Lalibertines’,
They are very tall’,
15766, ’Gallantors’, ’First Encounter’],
[new Date(2314, 2, 18), 12284, ’Lalibertines’,
’Attack on our crew!’, 34334, ’Gallantors’,
’Statement of shared principles’],
[new Date(2314, 2, 19), 8476, ’Lalibertines’,
’Heavy casualties’, 66467 ,
’Gallantors’, ’Mysteries revealed’],
[new Date(2314, 2, 20), 0, ’Lalibertines’,
’All crew lost’, 79463 ,
’Gallantors’, ’Omniscience achieved’]
]) ; var chart = new
google.visualization.
AnnotationChart(document.get
ElementById(’chart_div’)); var options = { displayAnnotations: true } ;
chart.draw(data, options);
}
< /script >
< /head >
< body >
<div id=’chart_div’ style=’width:
900px; height: 500 px;’></div >
< /body >
< /html >
Kodingan diatas dibuat menggunakan
aplikasi JSFIDDLE sehingga
Grak menunjukkan perkembangan setiap
hari , jam , maupun tahun, dibuat secara lengkap dan dengan menggunakan
JSFIDDLE.
4.3.2 CONTOH KASUS
DUA
Gambar diatas menunjukkan 4 brand coklat dengan
penjualan tertinggga, dapat dilihat bahwa coklat dengan brand butternger berada
pada peringkat teratas dalam penjualan coklat dan coklar dengan brand snickers
pada urutan kedua, coee crisp pada urutan ketiga dan 100grand pada urutan
terakhir dengan total penjualan terendah , berikut adalah pemrograman yang
dilakukan menggunakan HTML dalam pembuatan grak diatas:
< html >
< head >
<title>My first chart using FusionCharts Suite
XT</title> <script type="text/javascript" src="http://
static.fusioncharts.com/code/ latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://
static.fusioncharts.com/code/ latest/themes/fusioncharts.theme.
fint.js?cacheBust=56"></script> <script
type="text/javascript"> FusionCharts.ready(function(){ var fusioncharts
= new FusionCharts({ type: ’column2d’,
renderAt:
’chart-container’, width: ’400’, height: ’300’, dataFormat: ’json’, dataSource:
{
"chart": {
"caption": "Top 4 Chocolate Brands
Sold",
"subCaption": "Last Year",
"xAxisName": "Brand",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "120000",
"numberPrefix": "$",
"theme": "fint",
"PlotfillAlpha": "0",
"placeValuesInside": "0",
"rotateValues": "0",
"valueFontColor": "#333333"
} ,
"annotations": {
"width": "500",
"height": "300",
"autoScale": "1",
"groups": [{
"id": "user-images",
"xScale_": "20",
"yScale_": "20",
"items": [{
"id": "butterFinger-icon",
"type":
"image", "url": "http://static.
fusioncharts.com/sampledata/ images/butterFinger.png", "x":
"$xaxis.label.0.x - 30 ",
"y": "$canvasEndY - 150 ",
"xScale":
"50", "yScale": "40",
}, {
"id": "tom-user-icon",
"type":
"image", "url": "http://static.
fusioncharts.com/sampledata/images
/snickrs.png", "x": "$xaxis. label.1.x - 26",
"y": "$canvasEndY - 141", "xScale":
"48",
"yScale": "38" } ,
{ "id": "Milton-user-icon",
"type":
"image", "url": "http://static.
fusioncharts.com/sampledata/ images/coffee_crisp.png", "x":
"$xaxis.label.2.x - 22 ",
"y": "$canvasEndY - 134 ",
"xScale": "43", "yScale":
"36" } ,
{ "id": "Brian-user-icon",
"type":
"image", "url": "http://static.
fusioncharts.com/sampledata/images /100grand.png",
"x": "$xaxis.label.3.x - 22 ",
"y": "$canvasEndY - 131 ",
"xScale": "43",
"yScale": "35" }] }] } ,
"data": [{
"label": "Butterfinger",
"value": "92000" } ,
{ "label": "Snickers",
"value": "87000" } ,
{ "label": "Coffee Crisp",
"value": "83000" } ,
{
"label": "100 Grand",
"value":
"80000" }] } } ) ; fusioncharts.render()
; }) ;
< /script >
< /head >
< body >
<div
id="chart-container"> FusionCharts XT will load here! < /div
>
< /body >
< /html >
4.3.3 CONTOH KASUS
TIGA
Gambar dibawah adalah pengaplikasian
annotation chart dalam spline chart
gambar ini menunjukkan chart dari pengunjung yang
datang ke Bakerseld Central, dapat dilihat bahwa pengunjung tertinggi berada
pada hari rabu dengan jumlah pengunjung sebanyak 25500 pengunjung dan
pengunjung dengan jumlah paling sedikit adalah pada hari kamis dimana jumlah
pengunjung berada dibawah jumlah 12000 pengunjung dan pada hari lainnya
berkisar antara 1500 sampai 20000 pengunjung. berikut adalah pemrograman yang
dilakukan menggunakan JSON
{
"chart": {
"theme": "fint",
"caption": "Bakersfield Central
- Total footfalls",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"showValues": "0"
} ,
"annotations": {
"groups": [
{
"id": "infobar", "items":
[
{
"id": "high-line",
"type": "line",
"x": "$canvasStartX",
"y": "$dataset.0.set.2.y",
"tox": "$canvasEndX",
"toy": "$dataset.0.set.2.y",
"color":
"#6baa01", "dashed": "1",
"thickness": "1" } ,
{ "id": "label",
"type": "text",
"text": "Highest footfall 25.5 K",
"fillcolor": "#6baa01",
"rotate": "90",
"x":
"$canvasEndX - 60 ",
"y": "$dataset.0.set.2.y - 10 "
}
]
}
]
} ,
"data":[
{
"label": "Mon",
"value": "15123" } ,
{ "label": "Tue",
"value": "14233" } ,
{ "label": "Wed",
"value": "25507" } ,
{ "label": "Thu",
"value": "9110" } ,
{ "label": "Fri",
"value": "15529" } ,
{ "label": "Sat",
"value": "20803" } ,
{ "label": "Sun",
"value": "19202" }
]
}
4.3.4 CONTOH KASUS
EMPAT
Pada gambar diatas kita dapat melihat penggunaan
annotation chart dalam gambar, dichart diatas kita dapat melihat uturan manager
dengan penghasilan terbesar sampai yang terkecil dimulai dari bagian kiri ken
bagian kanan, pendapatan terbesar dalam tiga bulan terakhir diperoleh oleh
Jennifer dengan pendapatan sebesar $92K dan Tom pada posisi pendapatan terbesar
kedua dengan $89K, Militon dengan $83K, Brian dengan $66K dan Lynda dengan $58K
yaitu penghasilan terrendah, berikut adalah pemograman yang dilakukan menggunakan
HTML:
< html >
< head >
<title>My first chart using
FusionCharts Suite XT</title>
<script
type="text/javascript" src="
http://static.fusioncharts.com/code/
latest/fusioncharts.js"></script> <script
type="text/javascript" src=" http://static.fusion
charts.com/code/latest/themes/ fusioncharts.theme.fint
.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){ var fusioncharts = new
FusionCharts({ type: ’column2d’, renderAt:
’chart-container’, width: ’500’, height: ’300’, dataFormat:
’json’, dataSource: {
"chart": {
"caption":
"Revenue by store managers",
"subCaption":
"Last quarter",
"xAxisName":
"Managers",
"yAxisName":
"Revenue (In USD)",
"numberPrefix":
"$",
"theme":
"fint",
"LabelPadding":
"50"
} ,
"annotations": {
"groups": [{
"id":
"user-images",
"items": [{
"id":
"jennifer-user-icon",
"type":
"image",
"url":
"http://static.
fusioncharts.com/sampledata/images/round-1.png",
"x":
"$xaxis.label.0.x - 24 ",
"y": "$xaxis.label.0.y - 48 "
} ,
{
"id":
"tom-user-icon",
"type":
"image",
"url":
"http://static.
fusioncharts.com/sampledata/images/round-3.png",
"x":
"$xaxis.label.1.x - 24 ",
"y":
"$xaxis.label.1.y - 48 "
} ,
{
"id":
"Milton-user-icon", "type": "image",
"url":
"http://static.
fusioncharts.com/sampledata/images/round-4.png",
"x":
"$xaxis.label.2.x - 24 ",
"y":
"$xaxis.label.2.y - 48 "
}, {
"id":
"Brian-user-icon",
"type":
"image",
"url":
"http://static.
fusioncharts.com/sampledata/images/round-5.png",
"x":
"$xaxis.label.3.x - 24 ",
"y":
"$xaxis.label.3.y - 48 "
}, {
"id":
"Lynda-user-icon",
"type":
"image",
"url":
"http://static.
fusioncharts.com/sampledata/images/round-2.png",
"x":
"$xaxis.label.4.x - 24 ",
"y":
"$xaxis.label.4.y - 48 "
}]
}]
} ,
"data": [{
"label": "Jennifer",
"value":
"92000"
}, {
"label":
"Tom",
"value":
"87000"
}, {
"label":
"Milton",
"value":
"83000"
}, {
"label":
"Brian",
"value":
"66000"
}, {
"label":
"Lynda",
"value":
"58000"
}]
}
}
) ; fusioncharts.render(); }) ;
< /script >
< /head >
< body >
<div id="chart-container"> FusionCharts XT
will load here! < /div >
< /body >
< /html
>
07.22
By
Unknown
0 komentar: