Dalam membuat chart bubble, terkadang kita memerlukan label yang berada di dalam lingkaran untuk memberikan informasi lebih lanjut tentang data. Pada artikel ini, kita akan membahas bagaimana cara menambahkan label di dalam lingkaran pada chart bubble menggunakan Vega-Lite.

Menggunakan Vega-Lite

Pada awalnya, saya memiliki script Vega-Lite seperti berikut:

{
 "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
 "data": {
 "values": [
 {
 "A": 16506,
 "B": "",
 "C": "Estimate Line Type 1",
 "D": 30347707.14,
 "E": null,
 "Label": "",
 "F": null
 }
 ]
 },
 "width": 600,
 "height": 400,
 "layer": [
 {
 "transform": [
 {
 "filter": {
 "field": "C",
 "oneOf": ["Amount (inflation adjusted NEW)"]
 }
 }
 ],
 "mark": {
 "type": "circle",
 "opacity": 0.8,
 "stroke": "black",
 "strokeWidth": 1
 },
 "encoding": {
 "x": {
 "field": "A",
 "type": "quantitative",
 "axis": {"grid": false}
 },
 "y": {
 "field": "F",
 "type": "quantitative",
 "axis": {"title": "F"}
 },
 "size": {
 "field": "E",
 "type": "quantitative",
 "title": "E",
 "legend": {"clipHeight": 30},
 "scale": {"rangeMax": 5000}
 },
 "color": {"field": "B", "type": "nominal"}
 }
 },
 {
 "transform": [
 {
 "filter": {
 "field": "C",
 "oneOf": ["Estimate Line Type 1", "Estimate Line Type 2"]
 }
 }
 ],
 "mark": {"type": "line"},
 "encoding": {
 "x": {"field": "A", "type": "quantitative"},
 "y": {"field": "D", "type": "quantitative"},
 "color": {"field": "C", "type": "nominal"}
 }
 }
 ],
 "config": {}
}

Script di atas hanya menampilkan chart bubble dengan beberapa label, tetapi tidak memiliki label di dalam lingkaran.

Menambahkan Label

Untuk menambahkan label di dalam lingkaran, kita perlu menggunakan layer lain yang berisi mark text. Kita akan membuat layer baru untuk menambahkan label.

{
 "mark": {"type": "text"},
 "encoding": {
 "x": {
 "field": "A",
 "type": "quantitative"
 },
 "y": {
 "field": "F",
 "type": "quantitative"
 }
 }
}

Kita juga perlu membuat transform untuk menggabungkan kedua layer menjadi satu. Kita akan menggunakan filter untuk menyeleksi data yang sesuai.

{
 "transform": [
 {
 "filter": {
 "field": "C",
 "oneOf": ["Amount (inflation adjusted NEW)"]
 }
 }
 ]
}

Hasil

Dengan membuat layer baru untuk menambahkan label dan menggabungkannya dengan chart bubble, kita dapat melihat label di dalam lingkaran. Berikut adalah contoh hasilnya:

[Contoh Chart Bubble dengan Label]

Kita dapat melihat bahwa label berada di dalam lingkaran dan memberikan informasi lebih lanjut tentang data.

Kesimpulan

Dalam artikel ini, kita telah membahas bagaimana cara menambahkan label di dalam lingkaran pada chart bubble menggunakan Vega-Lite. Dengan membuat layer baru untuk menambahkan label dan menggabungkannya dengan chart bubble, kita dapat melihat label di dalam lingkaran yang memberikan informasi lebih lanjut tentang data.