Aku menulis paragraf ini diringi dengan salah satu lagu hits Sheila On 7, Dan… Tak hanya karena lagu itu enak didengar tetapi juga lagu itu menggiringku untuk bernostalgia ke masa kejayaan kaset. Aku masih ingat betul bagaimana dulu aku merengek minta diantar ke kota untuk berbelanja kaset orisinal album Sheila On 7. Sesampai di rumah aku mainkan kaset itu berulang-ulang, khususnya pada lagu pertama side B itu. Beberapa hari kemudian, kasetnya sudah ngelokor tak karuan.
Sekarang aku jadi bertanya-tanya, apakah kamu paham apa yang aku ceritakan di atas? Dugaanku, hanya sedikit yang memahaminya—khususnya tentang kaset dan fenomena ngelokor-nya. Paling tidak, dugaanku itu sejalan dengan temuanku ketika tersesat di laman pangkalan data pendapatan industri musik di Amerika Serika (AS). Di laman itu, aku mendapati sebuah diagram interaktif nan apik. Silakan amati diagram itu pada Gambar 1.
Meskipun kurang begitu jelas, dari Gambar 1 kita dapat melihat bahwa setelah tahun 2000 pendapatan industri musik dari format kaset dan sejenisnya terus menurun. Bahkan, tak ada lagi pendapatan yang sumbernya dari penjualan kaset dan sejenisnya setelah tahun 2008. Tapi, stop! Kita hentikan sampai di sini interpretasi datanya. Kita apresiasi bagaimana data tersebut dipresentasikan.
Diagram tersebut memberikan contoh penggunaan diagram batang yang efektif, meskipun sumbu horizontalnya menyatakan waktu.1 Pemilihan warnanya secara efektif menunjukkan tren dalam data. Misalnya, kita dapat melihat pada Gambar 1 bahwa dari kiri ke kanan warna biru semakin mengecil ketika warna oranye semakin membesar. Hal ini menunjukkan pendapatan industri musik di AS dari format kaset dan sejenisnya semakin menurun seiring adanya format CD.
Tak hanya itu. Jika kamu mengunjungi situs web RIAA, kamu dapat berinteraksi dengan diagram tersebut. Kamu dapat memilih pendapatan seperti apa yang ditampilkan—apakah yang disesuaikan dengan inflasi ataukah tidak. Kamu dapat mengatur batasan tahun untuk data yang disajikan. Kamu juga dapat memilih format-format apa saja yang perlu dipresentasikan dalam diagram. Terakhir, kamu dapat menyorot dan mengklik setiap batangnya untuk melihat informasi yang disajikan batang tersebut.
Bisakah kita membuat visualisasi data seperti itu? Tentu bisa! Kita akan membuat visualisasi data itu dengan menggunakan pemrograman R, khususnya dengan paket {ggplot2} dan {plotly}, dan Observable JS. Untuk melakukan visualisasi data di R, terlebih dahulu kita panggil paket-paket yang kita perlukan.
Mempersiapkan dan Menjelajah Data
Kita siapkan datanya terlebih dahulu. Data tersebut dapat kita peroleh dari situs web RIAA. Data dari situs itu yang sudah aku rapikan dapat diakses di GitHub. Mari kita impor data tersebut dengan read_csv().
url_fail <- "https://raw.githubusercontent.com/jelajahstatid/jelajahstatid.github.io/refs/heads/main/pos/2025-01-pendapatan-musik/aset/pendapatan_as_riaa.csv"
pendapatan_as_riaa <- read_csv(
file = url_fail,
show_col_types = FALSE
)
print(pendapatan_as_riaa)# A tibble: 508 × 5
format grup tahun pendapatan pendapatan_infl
<chr> <chr> <date> <dbl> <dbl>
1 CD Disc 1983-01-01 17.2 52.6
2 CD Disc 1984-01-01 103. 303.
3 CD Disc 1985-01-01 390. 1103
4 CD Disc 1986-01-01 930. 2586.
5 CD Disc 1987-01-01 1594. 4274.
6 CD Disc 1988-01-01 2090. 5383.
7 CD Disc 1989-01-01 2588. 6359.
8 CD Disc 1990-01-01 3452. 8047.
9 CD Disc 1991-01-01 4338. 9704.
10 CD Disc 1992-01-01 5326. 11568
# ℹ 498 more rowsKita mendapatkan sebuah tibble pendapatan_as_riaa yang memiliki lima variabel dan 508 baris. Variabel-variabel tersebut adalah format, grup, dan tahun, serta dua ukuran pendapatan: pendapatan yang tidak disesuaikan dengan inflasi (pendapatan) dan yang disesuaikan dengan inflasi (pendapatan_infl). Pendapatan tersebut semuanya dalam juta dolar AS.
Untuk mengakrabkan diri dengan data tersebut, mari kita lihat lebih jauh dalam data itu. Apa saja format dan grup dalam data tersebut? Mari kita selidiki!
pendapatan_as_riaa$format |>
unique() [1] "CD" "CD Single"
[3] "8 - Track" "Cassette"
[5] "Cassette Single" "DVD Audio"
[7] "Download Album" "Download Music Video"
[9] "Download Single" "Kiosk"
[11] "LP/EP" "Limited Tier Paid Subscription"
[13] "Music Video (Physical)" "On-Demand Streaming (Ad-Supported)"
[15] "Other Ad-Supported Streaming" "Other Digital"
[17] "Other Physical" "Other Tapes"
[19] "Paid Subscription" "Ringtones & Ringbacks"
[21] "SACD" "SoundExchange Distributions"
[23] "Synchronization" "Vinyl Single" pendapatan_as_riaa$grup |>
unique()[1] "Disc" "Tape" "Other" "Download" "Vinyl" "Streaming"
[7] NA Kita selidiki juga pengkategorian format ke dalam grup. Kita dapat melakukannya dengan kode berikut.
pendapatan_as_riaa |>
select(grup, format) |>
group_by(grup, format) |>
unique() |>
ungroup() |>
arrange(grup, format) |>
print(n = 24)# A tibble: 24 × 2
grup format
<chr> <chr>
1 Disc CD
2 Disc CD Single
3 Disc SACD
4 Download Download Album
5 Download Download Music Video
6 Download Download Single
7 Download Other Digital
8 Download Ringtones & Ringbacks
9 Other DVD Audio
10 Other Kiosk
11 Other Music Video (Physical)
12 Other Synchronization
13 Streaming Limited Tier Paid Subscription
14 Streaming On-Demand Streaming (Ad-Supported)
15 Streaming Other Ad-Supported Streaming
16 Streaming Paid Subscription
17 Streaming SoundExchange Distributions
18 Tape 8 - Track
19 Tape Cassette
20 Tape Cassette Single
21 Tape Other Tapes
22 Vinyl LP/EP
23 Vinyl Vinyl Single
24 <NA> Other Physical Bagaimana dengan rentangan tahun-nya? Dengan menjalankan kode berikut, kita tahu bahwa tahun-nya merentang dari 1973 sampai 2023.
[1] "1973-01-01" "1974-01-01" "1975-01-01" "1976-01-01" "1977-01-01"
[6] "1978-01-01" "1979-01-01" "1980-01-01" "1981-01-01" "1982-01-01"
[11] "1983-01-01" "1984-01-01" "1985-01-01" "1986-01-01" "1987-01-01"
[16] "1988-01-01" "1989-01-01" "1990-01-01" "1991-01-01" "1992-01-01"
[21] "1993-01-01" "1994-01-01" "1995-01-01" "1996-01-01" "1997-01-01"
[26] "1998-01-01" "1999-01-01" "2000-01-01" "2001-01-01" "2002-01-01"
[31] "2003-01-01" "2004-01-01" "2005-01-01" "2006-01-01" "2007-01-01"
[36] "2008-01-01" "2009-01-01" "2010-01-01" "2011-01-01" "2012-01-01"
[41] "2013-01-01" "2014-01-01" "2015-01-01" "2016-01-01" "2017-01-01"
[46] "2018-01-01" "2019-01-01" "2020-01-01" "2021-01-01" "2022-01-01"
[51] "2023-01-01"Untuk mengkonfirmasi apa yang kukatakan di awal, yaitu pendapatan dari format kaset dan sejenisnya terus menurun setelah tahun 2000, mari kita lihat dari data pendapatan_as_riaa.
pendapatan_as_riaa |>
filter(
grup == "Tape",
tahun > as.Date("2000-01-01")
) |>
group_by(grup, tahun) |>
summarise(
total_pendapatan = sum(pendapatan, na.rm = TRUE),
total_pendapatan_infl = sum(pendapatan_infl, na.rm = TRUE),
.groups = "drop"
)# A tibble: 8 × 4
grup tahun total_pendapatan total_pendapatan_infl
<chr> <date> <dbl> <dbl>
1 Tape 2001-01-01 358. 616.
2 Tape 2002-01-01 208. 353.
3 Tape 2003-01-01 108. 179
4 Tape 2004-01-01 23.7 38.2
5 Tape 2005-01-01 13.1 20.4
6 Tape 2006-01-01 3.7 5.6
7 Tape 2007-01-01 3 4.4
8 Tape 2008-01-01 0.9 1.3Terkonfirmasi! Pendapatan dari kaset dan sejenisnya terus merosot setelah tahun 2000. Bahkan, pendapatan dari format tersebut menghilang mulai tahun 2009.
Memvisualisasikan Data dengan {ggplot2}
Kita telah akrab dengan data pendapatan_as_riaa. Sekarang waktunya untuk memvisualisasikannya. Untuk mendapatan diagram seperti pada Gambar 1, kita gunakan geom_col() dengan position = "stack" dan stat = "identity".
Untuk awalan, tidak terlalu buruk diagramnya. Tapi kita perlu memodifikasi beberapa hal dari diagram batang pada Gambar 2.
Kita definisikan warna-warna diagram batangnya.
Kita atur legendanya agar terletak di bawah dan terdiri dari empat kolom.
Kita atur urutan level pada variabel
formatagar keterbacaannya membaik.Kita tambahkan judul, anak judul, dan takarir ke dalam diagram, serta kita perbaiki judul sumbu vertikal dan horizontalnya.
Kita jalankan rencana pertama dan ketiga terlebih dahulu dengan membuat objek urutan_format dan pemetaan_format_warna.
# Urutan level pada variabel `format`
urutan_format <- c(
"LP/EP", "Vinyl Single", "8 - Track",
"Cassette", "Cassette Single", "Other Tapes",
"Kiosk", "CD", "CD Single",
"SACD", "DVD Audio", "Music Video (Physical)",
"Download Album", "Download Single", "Ringtones & Ringbacks",
"Download Music Video", "Other Digital", "Synchronization",
"Paid Subscription", "On-Demand Streaming (Ad-Supported)",
"Other Ad-Supported Streaming",
"SoundExchange Distributions",
"Limited Tier Paid Subscription"
)
# Pemetaan setiap level pada `format` dengan warna
pemetaan_format_warna <- c(
"LP/EP" = "#2A5784",
"Vinyl Single" = "#43719F",
"8 - Track" = "#5B8DB8",
"Cassette" = "#7AAAD0",
"Cassette Single" = "#9BC7E4",
"Other Tapes" = "#BADDF1",
"Kiosk" = "#E1575A",
"CD" = "#EE7423",
"CD Single" = "#F59D3D",
"SACD" = "#FFC686",
"DVD Audio" = "#9D7760",
"Music Video (Physical)" = "#F1CF63",
"Download Album" = "#7C4D79",
"Download Single" = "#9B6A97",
"Ringtones & Ringbacks" = "#BE89AC",
"Download Music Video" = "#D5A5C4",
"Other Digital" = "#EFC9E6",
"Synchronization" = "#BBB1AC",
"Paid Subscription" = "#24693D",
"On-Demand Streaming (Ad-Supported)" = "#398949",
"Other Ad-Supported Streaming" = "#61AA57",
"SoundExchange Distributions" = "#7DC470",
"Limited Tier Paid Subscription" = "#B4E0A7"
)Kita jalankan rencana selanjutnya. Untuk melakukannya, kita jalankan kode berikut ini. Hasilnya ditunjukkan pada Gambar 3.
plot_musik <- pendapatan_as_riaa |>
mutate(
format = factor(
format,
levels = urutan_format
)
) |>
ggplot(
aes(x = tahun, y = pendapatan_infl, fill = format)
) +
geom_bar(
position = "stack",
stat = "identity"
) +
scale_fill_manual(
name = "Format",
values = pemetaan_format_warna
) +
guides(
fill = guide_legend(ncol = 4)
) +
theme_minimal() +
theme(
axis.title.x = element_blank(),
legend.position = "bottom",
legend.title = element_blank(),
legend.key.spacing.y = unit(.025, "cm"),
plot.title = element_text(
face = "bold"
)
) +
labs(
title = "Pendapatan Industri Musik di AS Berdasarkan Format",
subtitle = "Disesuaikan dengan Inflasi, Nilai Dolar Tahun 2023",
y = "Pendapatan\n(juta dolar AS)",
caption = "Data: Recording Industry Association of America (RIAA)"
)
print(plot_musik)
Diagram batang pada Gambar 3 sudah mirip dengan yang ditunjukkan pada Gambar 1. Diagram tersebut telah efektif menyampaikan informasi tentang pendapatan industri musik berdasarkan formatnya.
Menambahkan Interaktivitas dengan {plotly}
Diagram batang pada Gambar 3 memang sudah efektif dalam menyampaikan informasi pendapatan industri musik di AS berdasarkan formatnya. Meskipun demikian, kita kesulitan dalam mencari informasi yang sifatnya detail. Misalnya, dari gambar tersebut apakah kamu dapat mengetahui besarnya pendapatan dari format download album pada tahun 2010? Sulit, bukan?
Untuk mengatasi masalah tersebut, kita dapat menambahkan interaktivitas ke dalam grafik tersebut dengan {plotly}. Untungnya paket ini dapat kita terapkan terhadap objek ggplot sebelumnya dengan fungsi ggplotly().
ggplotly(
p = plot_musik
)Kita dapat menyorot batang-batang pada Gambar 4 untuk melihat informasi detailnya. Misalnya, kita dapat mengarahkan kursor ke batang berwarna ungu tua pada tahun 2010. Di situ kita dapat melihat bahwa besarnya pendapatan industri musik dari format download album pada tahun itu adalah 1219,1 juta dolar AS.
Selain itu, kita dapat mengklik satu atau lebih item legenda untuk menghilangkan data yang bersangkutan dari diagram. Kita juga dapat mengklik dua kali item legenda untuk mengisolasinya. Fitur-fitur interaktivitas ini memudahkan kita dalam membaca dan menginterpretasi data.
Memvisualisasikan Data dengan Observable JS
Pada Bagian 2 dan Bagian 3 kita telah memvisualisasikan data pendapatan industri musik dengan menggunakan pemrograman R. Sekarang, kita akan memvisualisasikannya dengan Observable JS, khususnya Plot.
Pertama, kita impor data dengan menggunakan d3.csv(). Kita masukkan alamat url data kita ke dalam fungsi tersebut. Kita gunakan fungsi d3.autoType untuk mengkonversi variabel-variabel dalam data kita ke dalam Date dan numerik secara otomatis. Kita simpan data tersebut dengan nama pendapatanMusik.
csvUrl = "https://raw.githubusercontent.com/jelajahstatid/jelajahstatid.github.io/refs/heads/main/pos/2025-01-pendapatan-musik/aset/pendapatan_as_riaa.csv"pendapatanMusik = d3.csv(csvUrl, d3.autoType)Setelah itu, kita visualisasikan data tersebut dengan menggunakan tiga objek geometris: barY, ruleY, dan axisX. Objek geometris barY kita gunakan untuk membuat diagram batang vertikal dengan y: "pendapatan_infl", x: "tahun", fill: "format". Kita atur agar persegi panjang tersebut interaktif dengan menambahkan tip: true. Objek geometris ruleY kita gunakan untuk membuat garis horizontal yang memotong sumbu-\(y\) di \(y = 0\). Garis itu adalah sumbu-\(x\). Terakhir, kita atur agar tik-tik pada sumbu-\(x\) dibuat dengan selang lima tahunan. Pengaturan ini kita lakukan pada objek geometris axisX.
Kita dapat mengatur legenda warnanya pada color. Kita atur legend: true untuk menampilkan legendanya dan columns: 4 untuk mengatur banyaknya kolom dalam penyajian item-item legenda tersebut. Kita juga dapat melakukan pengaturan lebih lanjut terhadap x, y, caption, dan subtitle. Hasilnya disajikan pada Gambar 5.
Plot.plot({
x: {label: "Tahun"},
y: {
grid: true,
label: "Pendapatan (juta dolar AS)"
},
color: {
legend: true,
columns: 4
},
marks: [
Plot.barY(pendapatanMusik,{
y: "pendapatan_infl",
x: "tahun",
fill: "format",
order: null,
tip: true
}),
Plot.ruleY([0]),
Plot.axisX({ticks: "5 years"})
],
caption: "Data: Recording Industry Association of America (RIAA)",
subtitle: "Disesuaikan dengan Inflasi, Nilai Dolar Tahun 2023"
})Alright! Kita mendapatkan Gambar 5 yang secara fungsi serupa dengan Gambar 4. Selanjutnya kita akan memodifikasi diagram tersebut dalam hal tampilan dan interaktivitasnya. Untuk tampilan, kita akan mengatur warnanya agar sama dengan diagram pada Gambar 3 dan Gambar 4. Kita juga akan menambahkan interaktivitas pada diagram tersebut dengan menambahkan beberapa input.
Menambahkan Interaktivitas dengan Input Observable
Kita tambahkan interaktivitas terhadap Gambar 5 dengan beberapa input Observable. Ada empat input yang dapat kita tambahkan. Deskripsi keempat input tersebut adalah sebagai berikut.
Input pendapatan. Input ini menyediakan pilihan bagi pengguna untuk memilih jenis pendapatan yang divisualisasikan—apakah yang disesuaikan dengan inflasi atau yang tidak.
Input format. Input ini memberikan keleluasaan bagi pengguna untuk memilih format-format apa yang akan divisualisasikan.
Input rentang tahun. Input ini dapat digunakan pengguna untuk memilih rentang tahun terhadap data yang divisualisasikan. Untuk melakukannya, kita sediakan dua input. Kedua input ini digunakan sebagai batas tahun pertama dan kedua.
Setelah penambahan input-input tersebut, diagram batang interaktifnya disajikan pada Gambar 6.
Voila! Kita mendapatkan diagram batang interaktif seperti pada situs webnya RIAA. Bagaimana membuat diagram batang seperti yang ditunjukkan pada Gambar 6? Well, kode lengkapnya dapat kamu lihat dan pelajari di catatan ini.
Catatan Akhir
Kita telah memvisualisasikan data pendapatan industri musik dengan beragam cara. Pada Bagian 2 dan Bagian 3, kita melakukan visualisasi dengan pemrograman R. Bagian-bagian itu mendemonstrasikan bagaimana membuat diagram dengan menggunakan {ggplot2} dan {plotly}. Kedua paket tersebut sangat membantu untuk melakukan visualisasi data, baik statis maupun dinamis.
Pada Bagian 4, kita menggunakan Observable Plot untuk membuat diagram yang serupa. Pada Bagian 5, kita lengkapi diagram tersebut dengan beberapa input untuk membuat diagramnya semakin dinamis. Teknik visualisasi data seperti ini sangat berguna jika kita ingin mempresentasikan data dengan media daring.
Apa selanjutnya? Teknik visualisasi yang didemonstrasikan dalam artikel ini tentu dapat dikembangkan lagi. Misalnya, jika kamu ingin berfokus untuk membuat animasi, kamu dapat menggunakan {gganimate}. Kamu ingin menyelam lebih dalam tentang interaktivitas dengan R? Kamu dapat mencoba {shiny}. Terakhir, jika kamu ingin belajar lebih lanjut tentang visualisasi data dengan Observable JS, kamu patut mencoba D3.