Selamat datang di Chapter 05 Topic 01 Part 1

online course Business Intelligence dari

Binar Academy!
 Introduction
PM 101

Di topik sebelumnya, yaitu Chapter 4, kita sudah belajar

cara merancang prototipe dashboard serta
mengumpulkan feedback dari user.

Di Chapter 5 Topic 1 kali ini, kita akan memahami

bagaimana membangun dashboard yang efektif untuk
menyampaikan insight melalui visualisasi data.

Kita akan belajar cara memilih chart, warna ukuran, teks,

alur, hingga mengatur layout pada dashboard seperti apa
yang tepat.
Introduction
PM 101

1. Cara memilih jenis chart untuk

ditampilkan pada dashboard
2. Cara menentukan warna, ukuran, dan
teks dalam dashboard
3. Cara mengatur layout dan membentuk
alur pada dashboard
Memilih Chart yang Tepat

Seringkali ketika kita dihadapin dengan

banyaknya pilihan chart, kita dibuat
bingung…

Kira-kira chart mana ya yang paling tepat

buat merepresentasikan data-data kita?
Memilih Chart yang Tepat

gas cari tau biar

malem ini klean
dapat tertidur
tenang~

Kita juga suka dibikin bertanya-tanya, apa

sih sebenarnya kelebihan dan kekurangan
dari masing-masing chart ini?

Nah, biar nggak kelamaan overthinking,

kita langsung cari tau aja yuk jawabannya
di sini!
PM 101 Chart yang Tepat
Memilih

Berawal dari intinya inti...

Karena inti dari visualisasi data itu sendiri ada pada
bagaimana ia dapat membantu kita melihat pola-pola
pada data sekaligus menemukan insight yang
tersembunyi di dalamnya.

Nah, cara buat mewujudkan itu semua, salah satunya kita

harus pandai-pandai dalam memilih chart yang tepat
untuk diletakkan pada dashboard nanti.

Kenapa ya begitu? 🤔
PM 101 Chart yang Tepat
Memilih

Chart itu bak si pusat perhatian~

Chart merupakan elemen paling umum yang biasa
digunakan buat memvisualisasikan data. Bentuknya
seperti grafis dan simbol-simbol yang memang didesain
supaya jadi elemen paling mencolok.

Jadi, sekali lihat dashboard mata kita akan langsung

tertuju pada chart tersebut. Istilahnya bagian yang paling
eye-catching gitu deh~
 PM 101 Chart yang Tepat
Memilih

Chart yang tepat bantu user dalam

memaknai data!
Bisa dibilang, penggunaan chart pada dashboard
merupakan cara yang paling efektif untuk
merepresentasikan data.

Karenanya, pemilihan chart yang tepat tentunya juga

bakal memberikan pengaruh yang signifikan dari segi
efisiensi waktu.

Khususnya, menyingkat waktu dari proses memahami

dan memaknai data, hingga proses menemukan insight~
Jenis-jenis
PM 101 Chart

Cara pilih chart yang tepat itu gimana sih? 🤔

Pertama-tama, kita perlu tahu kira-kira kita mau menonjolkan apa sih dari data kita?

Dalam memilih chart, kita bisa mulai dari mengetahui apa yang mau kita tonjolkan,
seperti:

1. Perbandingan (Comparison)
2. Hubungan/Korelasi (Relationship)
3. Komposisi (Composition)
4. Persebaran (Distribution)

Per masing-masing fokus ini, chart apa saja ya yang bisa kita gunakan?

Oke! Siapin sabuk pengamannya, kita bakal meluncur buat cari tau satu per satu dan
kenalan sama tipe-tipe chart!
 Jenis-jenis
PM 101 Chart

Perbandingan
Ketika ingin memperbandingkan data, kamu juga harus
tanya lagi nih. Ingin memperbandingkan data dari segi
kategori atau waktu kah?

Kalau jawabannya kategori, maka kamu bisa mencoba

menggunakan chart berikut:

1. Bar chart vertical: khusus untuk beberapa kategori

2. Bar chart horizontal: khusus untuk beberapa
kategori
3. Column chart: khusus untuk dua variabel per item
 Jenis-jenis
PM 101 Chart

Apabila jawabannya waktu, maka pilihan chart yang bisa

kamu gunakan adalah:

1. Line chart: khusus untuk data non siklus (satu

kategori/lebih)
2. Bar chart vertical: khusus untuk satu atau
beberapa kategori
3. Circular area chart: khusus untuk data siklus
 Jenis-jenis
PM 101 Chart

Hubungan/korelasi
Apabila ingin menonjolkan hubungan/korelasi data pada
chart, kita bisa menggunakan:

1. Scatter plot: khusus untuk dua variabel/metrik

2. Bubble chart: untuk dua atau lebih variabel/metrik
 Jenis-jenis
PM 101 Chart

Komposisi
Untuk melihat komposisi data, kita juga harus tahu dulu
nih, apakah yang ingin ditonjolkan itu adalah data yang
statis (tidak berubah) atau non statis (dapat berubah
sewaktu-waktu).
Jenis-jenis
PM 101 Chart

Jika data yang ingin kamu tonjolkan itu adalah data non
statis, maka pilihan chart-nya adalah:

1. Stacked 100% bar chart: untuk beberapa periode,

khusus menonjolkan perbedaan relatif (angka tidak
mutlak)
2. Stacked area chart 100%: untuk banyak periode,
khusus menonjolkan perbedaan relatif (angka tidak
mutlak)
3. Stacked bar chart: untuk beberapa periode,
menonjolkan perbedaan relatif (angka tidak
mutlak) dan absolut (angka mutlak)
4. Stacked area chart: untuk banyak periode,
menonjolkan perbedaan relatif (angka tidak
mutlak) dan absolut (angka mutlak)
 Jenis-jenis
PM 101 Chart

Jika data yang ingin kamu tonjolkan itu adalah data statis,
maka pilihan chart-nya adalah:

1. Pie chart: untuk menunjukkan bagian dari total,

khusus untuk satu kategori
2. Stacked 100% bar chart: khusus menonjolkan
persentase suatu komponen dari beberapa
komponen
3. Waterfall chart: khusus menonjolkan total
akumulasi (penjumlahan data) atau subtraksi
(pengurangan data).
4. Tree map: khusus menonjolkan akumulasi dari
total dan perbedaan absolut (angka mutlak)
 Jenis-jenis
PM 101 Chart

Persebaran
Kalau kita ingin melihat persebaran data, maka kita
disarankan untuk menggunakan chart bentuk:

1. Bar histogram: persebaran satu variabel dalam

beberapa poin data
2. Line histogram: persebaran satu variabel dalam
banyak poin data
3. Scatter plot: persebaran dari dua variabel
4. Regional Analysis: khusus menonjolkan geografis
 PM 101 Chart yang Tepat
Memilih

Wah, banyak juga ya ternyata...

Tapi tenang sob! Kamu gak perlu menghafal semuanya
kok~

Untuk memilih chart yang tepat, sebetulnya kamu hanya

perlu memiliki penalaran yang baik dan mengetahui apa
yang ingin ditonjolkan dari data tersebut, sekaligus
kebutuhan user!
PM 101 Chart yang Tepat
Memilih

Tunggu tunggu! Apa jadinya sih kalau

sampai salah pilih chart?
Misalnya aja nih ya, penggunaan bar chart atau bagan
jenis batang.

Chart ini biasanya digunakan untuk mengelompokkan

data yang terdiri dari beberapa kategori data.

Penggunaan chart yang demikian membuat user jadi

mudah membandingkan data mana yang punya nilai
tertinggi/terendah, serta menyoroti perbedaan dan tren
dengan sekejap.
 PM 101 Chart yang Tepat
Memilih

kalau ini mah

macam roda
Tapi coba deh bayangin... lucky spin~
kwakkwokkwak

Kalau kategori-kategori data yang demikian

divisualisasikan dengan menggunakan pie chart (bagan
lingkaran) seperti gambar di samping!
 PM 101 Chart yang Tepat
Memilih

Kelihatan kan? Kelihatan dong~

Penggunaan chart seperti ini itu kurang tepat banget.

Malah yang ada bikin pusing dan meresahkan! 😥

Hanya karena menurut kita pie chart lebih estetik

dibanding bar chart, belum tentu penggunaannya juga
bakal efektif.
Memilih Chart yang Tepat

Nah, itu dia jenis-jenis chart yang

perlu kamu tahu!
Kira-kira gimana ya cara nerapin
chart-chart tersebut supaya dapat
memvisualisasikan data-data kita
dengan tepat?
Memilih Chart yang Tepat

Supaya kamu makin dapat gambaran

mengenai cara memilih chart yang
tepat itu kayak apa, kita ikuti
petualangan Sabrina di part 2 ini yuk~
Sekalian sambil kita latihan
bareng-bareng!
PM 101 Chart yang Tepat
Memilih

Sabrina butuh bantuanmu!

Ceritanya SayurSay (perusahaan startup tempat Sabrina
bekerja) mau ngerekrut satu kandidat baru untuk mengisi
posisi BI Analyst di kantornya tersebut.

Nah, karena pertanyaannya bakal berhubungan dengan

materi di Chapter 4 mengenai proses pembuatan
dashboard, Sabrina butuh bantuan kamu nih buat memilih
kandidat mana yang paling cocok buat posisi ini~

Yuk kita mulai!

PM 101 Chart yang Tepat
Memilih

Pertanyaan 1: Menurut kamu...

Berapa kali sih proses pengumpulan feedback dari user
dilakukan terhadap prototipe dashboard yang kamu buat?
 PM 101 Chart yang Tepat
Memilih

Pertanyaan 2: Kenapa sih begitu?

Kandidat mana nih yang menurut kamu
jawabannya mendekati benar?

Coba bisikin Sabrina dong! 👂✋

 PM 101 Chart yang Tepat
Memilih

Betul! Kandidat B-lah yang

jawabannya paling tepat!
Kenapa begitu? Pada dasarnya pembuatan dashboard
dan pengumpulan feedback dari user bukanlah proses
yang linier.

Melainkan, proses ini bakal dilakukan lebih dari satu kali

sampai user merasa bahwa prototipe dashboard
benar-benar bisa menjawab kebutuhannya.

Sebagaimana proses inilah yang sering kita sebut

sebagai tahap improvement loop!
 PM 101 Chart yang Tepat
Memilih

Ngomong-ngomong soal ngumpulin

feedback nih...
Sambil
dibantuin juga
Kebetulan Sabrina mau ngajakin kita buat sama-sama yak~
memecahkan masalah terkait feedback yang diberikan
user dari hasil review prototipe dashboard.

Ini tentunya juga bakal berhubungan sama topik yang lagi

kita obrolin sekarang ini.

Langsung mulai aja yuk!

 PM 101 Chart yang Tepat
Memilih

Habis review, terbitlah revisi!

Ceritanya, habis kasih lihat prototipe dashboard-nya ke
user, Sabrina dapat beberapa feedback membangun
terkait kerjaannya tersebut.

Jadi, terbitlah yang namanya revisi!

Untungnya Sabrina anaknya nggak gampang menyerah,

alias pantang piknik sebelum revisi~
 PM 101 Chart yang Tepat
Memilih

Revisi lagiii?
hhmmm sudah
kuduga

Dari segi flow sama desain sih udah

oke tapi...
Sayangnya, chart yang Sabrina pilih dirasa kurang tepat
dan kurang efektif untuk merepresentasikan data-data
yang ada sehingga sulit buat dibaca maupun dipahami.

Maka dari itu, chart-chart pada dashboard perlu direvisi

lagi deh~
 PM 101 Chart yang Tepat
Memilih

Data Penjualan Sayur di Aplikasi SayurSay

Kategori Agustus September Oktober

Produk

Oke, dimulai dari revisi pertama dulu Wortel 300 200 400

ya!
Brokoli 300 400 500

Berangkat dari tabel di samping~ Kita bisa lihat, terdapat

Kol 500 400 300
data yang penjualan sayur di aplikasi SayurSay dari bulan
Agustus hingga Oktober.
 PM 101 Chart yang Tepat
Memilih

Beginilah penampakan chart-nya

sebelum direvisi...
Nah, awalnya Sabrina memvisualisasikan data ini dengan
menggunakan line chart.

Tapi, sayangnya ini bikin user sedikit sulit menemukan

insight, khususnya perbandingan antara produk dengan
penjualan terendah dan tertinggi. Sebagaimana hal
tersebutlah yang semestinya ditonjolkan.

Menurut kamu untuk kasus ini, Sabrina bakal ganti ke

chart yang mana ya?
 PM 101 Chart yang Tepat
Memilih

Tebakanmu betul! Sabrina mengganti

chart-nya ke bar chart~
Lalu… Voila! Setelah diganti ke bar chart, akhirnya user
dapat lebih mudah mendapatkan insight.

Dari sini user jadi bisa melihat perbandingannya dengan

jelas dan menyimpulkan bahwa:

1. Penjualan wortel mengalami fluktuasi

2. Penjualan sayur brokoli mengalami peningkatan
3. Penjualan sayur kol mengalami penurunan
 PM 101 Chart yang Tepat
Memilih

Kira-kira kenapa ya bar chart?

Bar chart umumnya dipakai untuk menunjukkan
perbandingan, baik terhadap waktu maupun terhadap
kategori.

Kalau fokusnya ingin melihat perbandingan waktu, maka

bar chart-nya bisa seperti gambar di samping ini~
 PM 101 Chart yang Tepat - Bar Chart
Memilih

Ketika bar chart dibuat secara horizontal, kita juga bisa

mengurutkan data dari yang tertinggi. Sehingga
menunjukkan perbandingan dalam hal posisi/ranking!

Wujudnya seperti gambar di samping ini~ Coba tebak

siapa nih yang jadi juaranya? 😜
 PM 101 Chart yang Tepat - Bar Chart
Memilih

Hmm, chart line sebenernya sabi juga

sih... tapi ada tapinya!
Di chart pertama pun sebenarnya kita bisa melihat bahwa
penjualan brokoli mengalami peningkatan. Namun
sayangnya, insight tersebut tidak begitu menonjol
dibandingkan insight lainnya.

Hal ini terjadi karena di line chart ini terdapat garis-garis

yang bersinggungan satu sama lain.

Jadi, setuju kan ya? Untuk melihat perbandingan, lebih

gampang dicerna yang versi bar chart?
 PM 101 Chart yang Tepat – Stacked Bar Chart
Memilih

Intermezzo dikit ya, kalau gini

gimana?
Seandainya lain cerita, yang mana user ingin melihat
komposisi (gabungan kategori data) dan akumulasi data
(jumlah total dari data) secara keseluruhan.

Kira-kira kalau data yang sama divisualisasikan dengan

menggunakan stacked bar seperti ini, insight apa yang
pertama kali kamu temukan?
 PM 101 Chart yang Tepat – Stacked Bar Chart
Memilih

Stacked bar chart (bar chart yang ditumpuk) digunakan

untuk menunjukkan komposisi. Komposisi ini membantu
kita bisa mengukur besarnya suatu bagian dari
keseluruhan.

Nah, di sebelah ini versi yang 100% stacked bar chart!

Chart ini juga sama-sama menunjukkan komposisi.
Namun bedanya, ditunjukkan dalam skala 100%.

Dengan ini, kita bisa lebih mudah mengukur komposisi

dengan persentase.
PM 101 Chart yang Tepat
Memilih

Data Pertumbuhan Followers di Medsos SayurSay

Oke, kita lanjut lagi revisinya ya! Kategori Agustus September Oktober
Media Sosial
Perhatikan tabel di samping!
Instagram 1000 4000 5000
Bisa kita lihat bahwa tabel ini merupakan data mengenai
pertumbuhan followers medsos-nya SayurSay dari bulan Twitter 500 1000 1500

Agustus hingga Oktober.

Facebook 1000 2000 3000
 PM 101 Chart yang Tepat
Memilih

Awalnya Sabrina memilih buat pakai

stacked bar chart…
Memang sih, salah satu insight yang bisa diambil dri chart
ini adalah pertumbuhan followers Instagram lebih cepat.

Tapi, ternyata hal itu tidak terlalu bisa menjawab kebutuhan

user yang awalnya ingin melihat pertumbuhan followers
dari waktu ke waktu~

Sehingga tetap perlu direvisi!

PM 101 Chart yang Tepat
Memilih

bantu jawab
dong gannn
puxing uga nih

Nah, menurut kamu kalau kasusnya seperti ini, Sabrina

harus pilih chart yang mana ya?

A. Line Chart
B. Bar Chart
C. Scatter plot
PM 101 Chart yang Tepat - Line Chart
Memilih

Yap, line chart udah yang paling tepat

deh buat kasus ini!
Line chart pada umumnya dipakai untuk menunjukkan
perbandingan terhadap waktu dan menonjolkan
pertumbuhan (growth) dari data kita.

Nah, bisa dilihat ya bentuk dari line chart yang Sabrina

gunakan di samping ini!
PM 101 Chart yang Tepat - Line Chart
Memilih

Tidak hanya pertumbuhan (growth), user juga jadi bisa

menunjukkan perbandingan terhadap kategori,
sebagaimana yang bisa kita saksikan pada garis-garis
pada chart ini.

Hayo, insight apa nih yang juga bisa kamu simpulkan dari
sini?
PM 101 Chart yang Tepat - Pie Chart
Memilih

Terus kapan pie chart bisa dipakai?

Ketika ingin menunjukkan komposisi satu atau per
kategori, barulah kita dapat menggunakan pie chart!

Nah, di sini Sabrina mendesain dashboard-nya sedikit

lebih interaktif gitu!

Jadi waktu user nge-klik kategori bulan diline chart, user

bakal langsung dikasih lihat detailnya dalam bentuk
pie-chart seperti gambar di samping!
PM 101 Chart yang Tepat
Memilih

Data Penjualan vs Profit SayurSay

Sip! Kita lanjut lagi ke revisi
berikutnya! Kategori Produk Penjualan Profit

Berbeda dari kasus-kasus sebelumnya, di kasus berikut

Wortel 300 600K
ini Sabrina harus menggabungkan kedua data ini ke
dalam satu tipe chart~
Brokoli 300 300K

Kira-kira chart manakah yang paling tepat untuk

Kol 500 1000K
memvisualisasikan kedua variabel data di samping?

A. Line chart Bayam 800 800k

B. Scatter plot
Kangkung 500 700k
C. Pie chart
PM 101 Chart yang Tepat - Scatter Plot
Memilih

Scatter plot adalah jawabannya~

Bentuk dari scatter plot sendiri adalah grafis yang terdiri
dari sekumpulan titik-titik dari nilai sepasang variabel

Scatter plot dapat dipakai untuk menunjukkan

persebaran sekaligus hubungan/korelasi antar dua
variabel, yaitu (Variabel X dan Variabel Y).

Jadi, di sini kita mendapati variabel X kita adalah profit,

sedangkan variabel Y adalah penjualan.

Coba perhatikan gambar di samping ya!

PM 101 Chart yang Tepat - Scatter Plot
Memilih

Dari chart scatter plot ini, salah satu insight yang bisa
disimpulkan adalah bahwa:

● Kangkung vs kol memiliki volume penjualan yang

mirip, namun sayur kol menghasilkan keuntungan
yang lebih banyak.

Wah! Sepertinya lagi banyak yang suka masak kol goreng

di rumah deh makanya bisa sampai laku keras~ 😜
 PM 101 Chart yang Tepat - Scatter Plot
Memilih

Sekarang gantian, Sabrina mau balik

tanya ke kamu!
Menurut penglihatanmu, apa sih yang kamu bisa
simpulkan dari relasi penjualan dan profit dari brokoli vs
wortel dari scatter plot ini?
PM 101 Chart yang Tepat
Memilih

Data Supplier Produk SayurSay

Wah makin jago nih~ Satu lagi ya,

Kategori Produk Lokasi
kita bahas revisi terakhir!
Wortel Jawa & Bali
Di sini sudah ada data supplier produknya SayurSay yang
tersebar di tiap-tiap pulau besar di Indonesia.
Brokoli Kalimantan

Menurut kamu tipe chart manakah yang paling tepat

Kol Papua
untuk memvisualisasikan data seperti ini?

A. Scatter Plot Cabai Sumatra

B. Regional Analysis
Sawi Sulawesi
C. Line histogram
PM 101 Chart yang Tepat - Regional Analysis
Memilih

Sabi dong yang ini pakai regional

analysis chart!
Regional analysis chart digunakan untuk
memvisualisasikan data pada peta geografis untuk
menjawab pertanyaan spesifik lokasi, atau membantu
eksplorasi data dalam bentuk peta geografis.

Sehingga data tadi akhirnya Sabrina visualisasikan

dengan menggunakan regional analysis chart!
PM 101 Chart yang Tepat - Regional Analysis
Memilih

Alhasil, dari sini user bisa mengetahui supplier dari

produk SayurSay sebagian besar berasal dari pulau-pulau
mana saja dengan lebih mudah!

Keren ya? 🤩
 PM 101 Chart yang Tepat – Custom Shape
Memilih

Habis revisi, Sabrina juga percantik

tipis-tipis pakai custom shape~
Nah, chart-chart yang tadi Sabrina revisi tadi ia perbagus
dengan menggunakan custom shape.

Di sini, kita bisa menggunakan bentuk seperti lingkaran,

segitiga, persegi, belah ketupat, dan bentuk lainnya.

Begitu juga dengan gambar, logo atau simbol~

 PM 101 Chart yang Tepat – Custom Shape
Memilih

Custom shape sendiri berjuan untuk membuat kisah yang

ada pada data lebih menarik bagi user, sekaligus
membantu user membaca insight dengan lebih cepat lho~
Jadi langsung kelihatan gitu deh!

Contohnya juga kayak yang satu ini nih 👉

PM 101 Chart yang Tepat – Custom Shape
Memilih

Coba deh lihat bar chart di atas ini, kamu lebih cepat menangkap insight
dari chart yang kiri atau yang kanan?
 PM 101 Chart yang Tepat
Memilih

Revisi selesai, makasih ya udah

bantuin Sabrina! 😍
Dari petualangan Sabrina ini kita juga jadi tahu, kalau
semua tipe chart memiliki kegunaannya masing-masing
dan fokus yang berbeda-beda dalam memvisualisasi
data.

Jadi bukan berarti chart sebelum direvisi tadi itu tidak bisa
digunakan ya guys~

Cuman, ibarat chart yang tepat di waktu yang salah aja! 😜

PM 101 Chart yang Tepat
Memilih

Ini mengapa visualisasi data itu Kudu eksplor chart

terus juga ya fren
sangatlah powerful~ biar mainnya makin
jauh makin jago~

Pada dasarnya, mata kita diciptakan untuk bisa

menangkap berbagai pola visual, yang kemudian
diterjemahkan oleh otak kita menjadi kesimpulan yang
berbeda-beda.

Karena itu, dalam memvisualisasikan data atau

merancang dashboard, kita perlu paham dulu nih apa
yang mau kita tunjukkan dan tonjolkan terlebih dahulu.

Baru deh setelah itu kita pilih chart yang tepat! 😏

PM 101 Chart yang Tepat
Memilih

Asyiqueee~
Keren gak sihh
kata-katanya!

Kalau katanya sih gini...

“Your message determines how you visualize the data.”

Alias pesan/tujuanmu bakal menentukan gimana

nantinya kamu memvisualisasi data!
Memilih Warna yang Tepat

Setelah memilih chart, kita juga penting

memperhatikan warna, ukuran, dan teks
yang akan kita gunakan.

Hal ini dikarenakan penggunaan warna

yang tidak tepat seringkali berpengaruh
pada efektivitas dari dashboard kita.

Jadi, memilih ketiga hal ini pun ada ilmunya

lho, yuk kita lihat!
PM 101 Warna yang Tepat
Memilih

Kita mulai dari warna dulu!

Kenapa sih memilih warna yang tepat juga gak kalah
penting?

Dalam visualisasi data, warna itu berguna sebagai

pendukung dalam penyampaian insight.

Jadi, bisa dibilang warna bisa memperkaya chart kita

dalam hal mendukung informasi tambahan yang tadinya
bisa saja tidak ditampilkan oleh bentuk maupun tulisan.
 PM 101 Warna yang Tepat
Memilih

Si pengalih perhatiannya user 👀

Warna pada chart dapat dimanfaatkan untuk
mengalihkan perhatian sekaligus memberi tahu hal-hal
mana saja yang penting/tidak perlu ditonjolkan.

Seperti chart grafik suhu mesin produksi di samping ini~

Penggunaan warna kontras hijau dan merah pada chart,

seakan-akan mengisyaratkan informasi aman dan bahaya
yang disampaikan pada data.
 PM 101 Warna yang Tepat
Memilih

Dari chart ini, kita justru lebih teralihkan dengan data

berwarna merah ketimbang yang hijau.

Setuju nggak? 😏

Karena selain mencolok, warna merah yang digunakan di

sini juga bertujuan untuk menonjolkan informasi/insight
penting dari chart ini, yaitu tentang mesin mana saja yang
terindikasi bahaya dan harus segera ditindaklanjuti.
 PM 101 Warna yang Tepat
Memilih

Pilih warna gak bisa asal tabrak lari~

Warna yang terlalu beragam hanya akan membuat
pembaca bingung, apalagi warna yang terlalu ‘ngejreng’.

Sudah dipastikan, hal ini bakal bikin pembaca jadi nggak

mood buat lanjut memahami insight yang ada di
dashboard kita! 😜

Maka dari itu, sebagai BI Analyst, kita juga wajib tahu

teori-teori warna sebagai berikut!
 PM 101 Warna yang Tepat
Memilih

Jurus-jurus nentuin warna yang tepat!

Ada 5 teknik penggunaan warna yang dapat kita gunakan
untuk mendukung penyampaian insight dari dashboard,
yaitu:

1. Sequential
2. Diverging
3. Categorial
4. Highlight
5. Alert

Kita bedah satu-satu seperti biasa ya~

 PM 101 Warna yang Tepat - Sequential Colors
Memilih

Data Penjualan Sayur di Aplikasi SayurSay

Sequential Kategori
Produk
Agustus September Oktober

Dalam teknik sequential, warna diterapkan berdasarkan Wortel 300 100 400
tinggi atau rendahnya nilai suatu metrik. Perhatikan tabel
di samping ya! Brokoli 300 400 500

Dengan bantuan warna seperti ini, user bakal jadi jauh Kol 500 400 300

dapat memahami data dengan lebih mudah. Sekaligus

Bayam 700 500 500
dapat dengan cepat menemukan insight dari chart
tersebut. Kangkung 500 600 400

Coba deh sebutkan produk yang terjual paling banyak dan

Cabai 300 200 200
sedikit di bulan September?
Tomat 100 200 300
 PM 101 Warna yang Tepat - Diverging Colors
Memilih

Diverging
Data Harian Kenaikan Followers di Medsos SayurSay
Kalau di teknik sequential kita hanya menggunakan satu
Kategori Hari Instagram Twitter Facebook
spektrum warna yang intensitasnya dibedakan, di teknik
diverging ini kita bakal menggunakan lebih dari satu Senin 5 -1 0
spektrum warna, yang mana kedua spektrum ini
Selasa 2 1 -3
dipisahkan oleh warna netral yang mewakili titik tengah.
Rabu -1 0 4
Nah, berdasarkan contoh di samping ini, kita bisa melihat:
Kamis 6 2 3
1. Angka yang negatif (kurang dari nol) diwarnai
merah Jumat 0 7 0
2. Angka yang positif (lebih dari nol) diwarnai hijau.
Sabtu -2 -3 -2
3. Angka yang sangat dekat dengan nol diwarnai
putih atau abu-abu Minggu 9 0 0
 PM 101 Warna yang Tepat - Categorical Colors
Memilih

Categorical
Di teknik pewarnaan categorical, kita membedakan
beberapa kategori secara kontras dengan menggunakan
warna yang jauh berbeda untuk setiap kategori~
 PM 101 Warna yang Tepat - Highlight dan Alert
Memilih

Highlight dan Alert

Highlight menyoroti sesuatu yang baik dengan
warna-warna positif. Biasanya diberi warna hijau
atau biru.

Sedangkan Alert memberikan peringatan atas

sesuatu yang buruk dengan warna-warna negatif,
dan biasanya diberi warna merah.

Kategori yang tidak disoroti juga diberikan

warna-warna netral atau warna abu-abu.
Contohnya kayak gini nih! 😏
 PM 101 Warna yang Tepat
Memilih

Satu hal lain yang perlu diingat!

Terutama dalam membuat dashboard adalah bahwa
warna yang digunakan haruslah konsisten.

Jika warna ungu di suatu chart merepresentasikan

Facebook, maka semua kategori Facebook di chart lain
dalam dashboard yang sama juga harus menggunakan
warna yang serupa. Seperti contoh di samping ini~

Dengan memikirkan konsistensi warna dalam dashboard,

pembaca dihindarkan dari kesalahan interpretasi data!
PM 101 Warna yang Tepat
Memilih

Contoh pemilihan warna yang tidak tepat

Ini bukan buat ditiru ya guys~ Pokoknya, jangan sampai kamu mewarnai
dashboard-mu nanti tidak konsisten seperti ini ya 😐
 PM 101 Warna yang Tepat
Memilih

Data Harian Suhu Temperatur di Indonesia

Apa sih dampaknya kalau kita salah

menggunakan warna?
Perhatikan gambar di samping ya~ Dashboard ini
menunjukkan suhu temperatur di Indonesia selama 30
hari dari bulan Januari-Desember.

Namun, ada pemilihan warna yang kurang tepat nih guys.

Di sini, awalnya suhu dingin diwakili dengan warna merah
dan suhu panas diwakili dengan warna hijau.

Hmm… sepertinya ada yang janggal. Hayo, coba tebak

apa?
 PM 101 Warna yang Tepat
Memilih

Data Harian Suhu Temperatur di Indonesia

Yep! Pemilihan warnanya bikin salah

persepsi! 😭
Biasanya, dingin kerap diasosiasikan dengan warna biru.
Begitupun panas sering diasosiasikan dengan warna
merah.

Setuju kan?
 PM 101 Warna yang Tepat
Memilih

Data Harian Suhu Temperatur di Indonesia

Tapi, di chart ini pemilihan warnanya rentan menimbulkan

mispersepsi.

Dingin malah ditandai dengan merah, dan panas malah

ditandai dengan hijau.

Kita pun jadi bingung mana yang sebetulnya suhu dingin

dan suhu panas?
 PM 101 Warna yang Tepat
Memilih

Selain itu, di sini gradasi warna juga kurang lebar.

Hanya ada warna merah, putih, dan hijau, yang mana

mengurangi penyebaran kategori temperatur di dashboard
ini.
 PM 101 Warna yang Tepat
Memilih

Data Harian Suhu Temperatur di Indonesia

Terus seharusnya gimana dong?

Di sini, kita perlu mengganti warna merah ke warna biru.

Kemudian kita perlu memberi beberapa tingkatan gradasi

warna lagi dari rentang warna biru ke warna merah.
Sehingga jadi ada warna biru, ungu, putih, kuning, oranye,
dan merah.

Kira-kira wujudnya seperti gambar di samping ini~

Menurutmu chart mana yang jauh lebih membantu? Chart
yang ini kan? 😌
 Memilih Ukuran yang Tepat

Jangan samakan
aqu dengan
Lanjut, kita bahas tentang ukuran 📏 dirinya hikshiks

Semakin besar objek, maka bakal semakin mudah dilihat

tampilannya.

Ukuran dan warna yang bervariatif mungkin cocok-cocok

aja kalau kita terapkan di chart jenis bar.

Namun, perlu diingat ya guys~ Beda jenis chart, berbeda

juga perlakukannya!
 Memilih Ukuran yang Tepat

Kalau di chart, size matters~

Nah, pada chart-chart tertentu memperhatikan ukuran itu
juga sangatlah penting.

Contohnya tree maps~

Besar dan kecil persegi yang ada di tree maps ini

menandakan besar-kecilnya nilai volume yang terdapat
pada data.
PM 101 Ukuran yang Tepat
Memilih

Sama juga untuk map chart di bawah ini!

Ukuran tanda lingkaran pada map chart sangat penting dan juga harus
didasarkan pada besaran nilai tiap-tiap kategori pada peta. Kelihatan kan guys?
 PM 101 Ukuran yang Tepat
Memilih

Begitu juga dengan line chart!

Di sini perlu diperhatikan kalau perbedaan antara titik data

yang terlalu kecil atau terlalu besar itu juga kurang baik.

Secara visual, chart jadi jadi sulit dibaca. Jadi perlu

dipertimbangkan juga ya saat akan mengatur ukuran di
chart~
 PM 101 Ukuran yang Tepat
Memilih

Contohnya lagi gini nih!

Coba perhatikan gambar di samping ini ya~

Visualisasi data menggunakan map chart ini

menunjukkan data daftar harga Airbnb yang ada di San
Francisco.

Sekilas sih kelihatan oke-oke aja… Tapi, map chart seperti

ini kurang tepat~
PM 101 Ukuran yang Tepat
Memilih

Kira-kira apa yang harus diperbaiki?

Coba dijawab ya!

A. Ganti jenis chart lain dan gunakan warna

sequential
B. Gunakan warna diverging dan ganti bentuk
lingkaran menggunakan simbol harga
C. Gunakan ke warna categorical dan ganti ukuran
bentuk lingkaran sesuai nilai data
 PM 101 Ukuran yang Tepat
Memilih

Yep! Jawaban yang tepat adalah C!

Bisa kita lihat ya guys~ Semua bentuk lingkaran di map
chart ini memiliki ukuran dan warna yang sama semua.

Sehingga kita jadinya sulit untuk membedakan nilai antara

kategori satu dan yang lainnya secara sekilas.
 PM 101 Ukuran yang Tepat
Memilih

Dengan menggunakan warna yang berbeda dan

menyesuaikan ukuran bentuk lingkaran dengan besaran
jumlah nilai data...

Alhasil, visualisasi data AirBnB ini menjadi lebih mudah

dipahami serta dimaknai, seperti gambar berikut ini~

Sekarang user jadi lebih mudah dan cepat menangkap

perbedaan, yang mana juga memungkinkan user untuk
membuat keputusan yang lebih baik!
 Memilih Teks yang Tepat

Oke sip! Sekarang kita bahas yang

teks ya~
Dalam sebuah chart juga diperlukannya keterangan data
dalam bentuk tertulis/teks.

Hal ini dilakukan untuk menghindari ambiguitas atau

kesalahpahaman dalam mengartikan data-data yang
disajikan.

Contohnya kayak teks warning di grafik suhu di samping

ini, menandakan bahwa jika suhu menyentuh angka >500
maka dikategorikan dalam bahaya.
 PM 101 Teks yang Tepat
Memilih

Teks yang mudah dibaca adalah

koentji 🔑
Misalnya buat menonjolkan informasi, yang paling
penting itu adalah kita harus memastikan bahwa ia harus
terlihat dan terbaca.

Karenanya, di sini kita perlu menggunakan ukuran teks

yang lebih besar, seperti gambar di samping ini~
PM 101 Teks yang Tepat
Memilih

Teks harus singkat dan kuat~

Untuk judul chart, buatlah teks yang singkat namun dapat
menyampaikan pesan secara kuat.

Selain itu, sampaikanlah inti pesan atau cerita dengan

kata-kata sesedikit mungkin agar tidak terlalu memakan
tempat.
 PM 101 Teks yang Tepat
Memilih

Temuin ‘sweet spot’ untuk menaruh

label teks
Terlalu banyak label teks/tanda bisa sangat mengganggu~

Jadi, coba beri label pada indikator yang penting saja,

misalnya seperti min/max. Untuk informasi yang lebih rinci
untuk kita dapat menggunakan hover/tooltips (tampilan
informasi berupa teks).
 PM 101 Teks yang Tepat
Memilih

Biar makin kebayang, simak contoh

kasus berikut ini ya!
Visualisasi data ini menunjukkan kepada kita daerah
mana aja yang menghasilkan produk sayur di SayurSay.

Sebenarnya, bar chart ini cukup bagus~

Tapi karena ada banyak variabel, kategori, dan metrik, teks

jadinya banyak yang terpotong. Sehingga menghilangkan
tujuan dari visualisasi ini.
 PM 101 Teks yang Tepat
Memilih

Karena kemudahan dibaca itu adalah prioritas~

Maka dari itu dengan mengatur ulang bar chart serta

memberikan label teks secara lengkap adalah hal yang
harus dilakukan di sini~

Di sini kita bisa memanfaatkan hover untuk menampilkan

tooltips, seperti gambar di samping ini!
 Mengatur Alur dan Layout pada Dashboard

Jangan lupa layout dashboard juga

perlu diatur ya...
Efektivitas dashboard juga dipengaruhi oleh layout.
Maksudnya gimana tuh?

Istilahnya, kita harus tahu bagaimana cara menyusun dan

meletakkan chart pada dashboard.

Peletakkan chart yang tepat ini penting, untuk

membentuk alur informasi dan alur berpikir dari user~
 Mengatur
PM 101 Alur dan Layout pada Dashboard

Aturan mengatur layout pada

dashboard:
● Aturan Pertama

Layout disusun dari kiri atas ke kanan bawah, dan

chart-chart diletakkan dari yang paling penting ke yang
paling tidak penting.

Mayoritas dari kita bisanya terbiasa untuk membaca

informasi dari atas ke bawah dan dari kiri ke kanan.
Karena itulah kita memanfaatkannya dan
menerapkannya untuk membentuk alur informasi.
 Mengatur
PM 101 Alur dan Layout pada Dashboard

● Aturan Kedua

Layout diatur dari atas ke bawah, chart-chart diletakkan

sesuai level hierarki informasi dari yang tertinggi ke yang
terendah.

Chart yang berisi rangkuman ditempatkan di bagian atas.

Semakin ke bawah, informasi yang dimuat dalam chart
maka informasi bakal semakin mendetail.
 Mengatur
PM 101 Alur dan Layout pada Dashboard

● Aturan Ketiga

Selain peletakan chart, layout yang baik juga harus

memberikan ‘ruang bernapas’ antara chart ke chart.
Sehingga user tidak mengalami overload informasi.
Mengatur
PM 101 Alur dan Layout pada Dashboard

Caranya adalah dengan mengkategorikan informasi. Jadi, chart-chart yang

berisi informasi A dikumpulkan di dalam satu bagian/section, sedangkan yang
berisi informasi B disatukan di bagian/section yang lain.
Mengatur
PM 101 Alur dan Layout pada Dashboard

Setelah Sesudah

Cara kedua adalah dengan memberikan jarak (white space) antar chart. White
space berfungsi seperti jeda antar kalimat ketika kita berbicara, atau seperti tanda
koma ketika kita membaca buku. Jadi, pesan terkesan tidak saling bertabrakan~
 Mengatur
PM 101 Alur dan Layout pada Dashboard

● Aturan Keempat

Jangan memuat terlalu banyak informasi penting

sehingga terlihat seperti saling bersaing untuk
mendapatkan perhatian.
Merancang
PM 101 Dashboard yang Efektif

Mengedukasi user buat ngerti cara

gunain dashboard kita juga wajib!
Kita perlu memberikan yang namanya panduan
user/guideline di dashboard kita.

Jangan biarkan user kita bingung dan tanpa panduan

tentang cara menggunakan dashboard yang kita buat.

Contohnya seperti gambar di samping!

 Merancang
PM 101 Dashboard yang Efektif

Dashboard yang kurang efektif bikin

alur jadi nggak teratur~
Akibatnya dashboard kita gagal dalam menyampaikan
informasi penting yang dibutuhkan user untuk mengambil
keputusan.

Jadi, perlu banget nih kita bijak dalam memilih chart,

warna, ukuran, teks, layout, dan alur di dashboard kita
agar menjadi dashboard yang efektif.
 Merancang
PM 101 Dashboard yang Efektif

Terakhir, jangan lupa menambahkan panduan untuk user

ya di dashboard kamu ya~

Komunikasi dengan user itu juga nggak kalah penting

agar user bisa menggunakan dashboard kita juga secara
efektif.
Refleksi Belajar

Nah, itu dia serba-serbi cara membangun

dashboard yang efektif!

Menurut kamu apalagi nih yang harus kita

perhatikan supaya dashboard bisa efektif?
Quiz

Saatnya

Quiz
Quiz

1
Marta ingin menunjukkan perbandingan jumlah siswa berdasarkan asal kota mereka. Chart
mana yang tidak tepat untuk tujuan Marta?

A Line chart

B Pie chart

C Bar chart
Pembahasan Quiz
Quiz

A Line chart

Line chart adalah pilihan tepat apabila ingin membandingkan

sesuatu terhadap waktu. Marta ingin membandingkan jumlah
siswa antar kota, sehingga tidak tepat kalau menggunakan line
chart.
Quiz

2
Joe membuat stacked bar chart untuk memperlihatkan komposisi hasil penjualan tiga jenis
makanan dari seluruh penjualannya.

A Joe seharusnya membuat line chart

B Joe seharusnya membuat scatter plot

C Keputusan Joe sudah tepat

Pembahasan Quiz
Quiz

C Keputusan Joe sudah tepat

Untuk memperlihatkan komposisi, kita dapat menggunakan

stacked bar chart atau pie chart.
Quiz

3
Tania mengkombinasikan bar chart dan line chart dalam satu chart.

A Kedua chart harus membandingkan data terhadap waktu

B Kedua chart harus menunjukkan data yang sama persis

C Bar chart dan line chart tidak boleh dikombinasikan

Pembahasan Quiz
Quiz

A Kedua chart harus membandingkan data

terhadap waktu

Kombinasi bar chart dan line chart disebut juga combo chart.
Karena line chart harus membandingkan data terhadap waktu,
maka bar chart-nya juga harus menggunakan perbandingan yang
sama, meskipun menunjukkan metrik yang berbeda.
Quiz

4
Manakah dataset yang tidak cocok diwarnai dengan menggunakan categorical colors?

A Perbandingan penjualan antara 3 produk

B Perbandingan harga saham per hari dalam bulan Agustus

C Perbandingan jumlah pengguna Spotify di Android dan iPhone

Pembahasan Quiz
Quiz

B Perbandingan harga saham per hari dalam bulan

Agustus

Kita perlu 31 warna yang berbeda untuk membedakan 31 hari

dalam bulan Agustus. Dalam kasus ini, mewarnai 31 hari dengan
warna yang berbeda tidak akan bermanfaat, malah akan
membingungkan.
Quiz

5
Penerapan layout dashboard yang tidak baik adalah ...

A Menempatkan chart yang paling krusial di kiri atas

B Menempatkan sebanyak-banyaknya chart pada halaman dashboard

C Menempatkan chart yang berisi informasi detail di bagian bawah

Pembahasan Quiz
Quiz

B Menempatkan sebanyak-banyaknya chart pada

halaman dashboard

Hal ini akan menyebabkan information overload. Disarankan

membagi-bagi kumpulan chart berdasarkan kategori informasinya,
dan menempatkan masing-masing kategori pada halaman
dashboard yang berbeda..
Rangkuman

Kategori chart berdasarkan fokus data

1. Perbandingan (Comparison)
2. Hubungan/Korelasi (Relationship)
3. Komposisi (Composition)
4. Persebaran (Distribution)

Tipe chart (Perbandingan)

1. Bar chart vertical

2. Bar chart horizontal
3. Column chart
4. Line chart
5. Circular area chart
Rangkuman

Tipe chart (Hubungan)

1. Scatter plot
2. Bubble chart

Tipe chart (Komposisi)

1. Stacked 100% bar chart

2. Stacked area chart 100%
3. Stacked bar chart
4. Stacked area chart
5. Pie chart
6. Waterfall chart
7. Tree map
Rangkuman

Tipe chart (Persebaran)

1. Bar Histogram
2. Line histogram
3. Scatter plot
4. Regional Analysis

Teknik Menentukan Warna pada Dashboard

1. Sequential
2. Diverging
3. Categorial
4. Highlight
5. Alert
Closing

Chapter 5 Topic 1 sampai di sini

dulu ya~
Di Topic 2, kita lanjut bahas lebih
jauh lagi mengenai data
storytelling!
Penasaran, yuk cus ke Topic
selanjutnya!