Bab IV Desain Pemodelan Grafik

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 >