Ringkasan
Diagram sankey adalah visualisasi yang digunakan untuk menggambarkan alur dari satu kumpulan nilai ke kumpulan nilai lainnya. Objek yang terhubung disebut node dan koneksinya disebut link. Sankey paling tepat digunakan jika Anda ingin menampilkan pemetaan many-to-many di antara dua domain (misalnya, universitas dan jurusan) atau beberapa jalur melalui serangkaian tahapan (misalnya, Google Analytics menggunakan sankey untuk menunjukkan alur traffic dari halaman ke halaman lain di situs Anda).
Untuk yang aneh, nama tersebut diambil dari nama Kapten Sankey, yang membuat diagram efisiensi mesin uap yang menggunakan panah yang memiliki lebar sebanding dengan kehilangan panas.
Catatan: Diagram sankey mungkin mengalami revisi substansial dalam rilis Google Chart mendatang.
Diagram sankey dirender di browser menggunakan SVG atau VML, mana saja yang sesuai untuk browser pengguna. Kode tata letak sankey Google berasal dari kode tata letak sankey D3.
Catatan: Diagram sankey Google tidak tersedia di Microsoft Internet Explorer 8 dan versi yang lebih lama.
Contoh Sederhana
Misalkan Anda memiliki dua kategori, A dan B, yang terhubung ke tiga kategori lain, X, Y, dan Z. Beberapa koneksi tersebut lebih berat daripada yang lain. Misalnya, B memiliki koneksi yang tipis ke X dan koneksi yang jauh lebih tebal ke Y.
Coba arahkan kursor ke salah satu link untuk menyoroti koneksi.
Untuk membuat diagram sankey, berikan kumpulan baris, yang masing-masing
berisi informasi tentang satu koneksi: dari, ke, dan
bobot. Lalu, gunakan metode google.visualization.Sankey()
untuk menginisialisasi diagram, lalu metode draw() untuk
merendernya:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'A', 'X', 5 ],
[ 'A', 'Y', 7 ],
[ 'A', 'Z', 6 ],
[ 'B', 'X', 2 ],
[ 'B', 'Y', 9 ],
[ 'B', 'Z', 4 ]
]);
// Sets chart options.
var options = {
width: 600,
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
</body>
</html>
Catatan: Hindari siklus dalam data Anda: jika A menautkan ke dirinya sendiri, atau tertaut ke B yang tertaut ke C yang tertaut ke A, diagram Anda tidak akan dirender.
Sankey Multilevel
Anda dapat membuat diagram Sankey dengan beberapa tingkat koneksi:
Diagram sankey akan menambahkan level tambahan sesuai kebutuhan, sehingga menata letaknya secara otomatis. Berikut adalah kode lengkap untuk diagram di atas:
<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["sankey"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'Brazil', 'Portugal', 5 ],
[ 'Brazil', 'France', 1 ],
[ 'Brazil', 'Spain', 1 ],
[ 'Brazil', 'England', 1 ],
[ 'Canada', 'Portugal', 1 ],
[ 'Canada', 'France', 5 ],
[ 'Canada', 'England', 1 ],
[ 'Mexico', 'Portugal', 1 ],
[ 'Mexico', 'France', 1 ],
[ 'Mexico', 'Spain', 5 ],
[ 'Mexico', 'England', 1 ],
[ 'USA', 'Portugal', 1 ],
[ 'USA', 'France', 1 ],
[ 'USA', 'Spain', 1 ],
[ 'USA', 'England', 5 ],
[ 'Portugal', 'Angola', 2 ],
[ 'Portugal', 'Senegal', 1 ],
[ 'Portugal', 'Morocco', 1 ],
[ 'Portugal', 'South Africa', 3 ],
[ 'France', 'Angola', 1 ],
[ 'France', 'Senegal', 3 ],
[ 'France', 'Mali', 3 ],
[ 'France', 'Morocco', 3 ],
[ 'France', 'South Africa', 1 ],
[ 'Spain', 'Senegal', 1 ],
[ 'Spain', 'Morocco', 3 ],
[ 'Spain', 'South Africa', 1 ],
[ 'England', 'Angola', 1 ],
[ 'England', 'Senegal', 1 ],
[ 'England', 'Morocco', 2 ],
[ 'England', 'South Africa', 7 ],
[ 'South Africa', 'China', 5 ],
[ 'South Africa', 'India', 1 ],
[ 'South Africa', 'Japan', 3 ],
[ 'Angola', 'China', 5 ],
[ 'Angola', 'India', 1 ],
[ 'Angola', 'Japan', 3 ],
[ 'Senegal', 'China', 5 ],
[ 'Senegal', 'India', 1 ],
[ 'Senegal', 'Japan', 3 ],
[ 'Mali', 'China', 5 ],
[ 'Mali', 'India', 1 ],
[ 'Mali', 'Japan', 3 ],
[ 'Morocco', 'China', 5 ],
[ 'Morocco', 'India', 1 ],
[ 'Morocco', 'Japan', 3 ]
]);
// Set chart options
var options = {
width: 600,
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
chart.draw(data, options);
}
</script>
</body>
</html>
Warna Kontrol
Diagram sankey memiliki kemampuan untuk menetapkan warna kustom untuk node dan link. Node dan link dapat diberi palet warna kustom menggunakan
opsi colors (sankey.node.colors
dan sankey.link.colors). Gambar juga dapat
diberi mode pewarnaan yang berbeda menggunakan opsi
colorMode.
Jika warna tidak disesuaikan, warna akan ditetapkan secara default ke palet Material standar.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
Anda dapat mengontrol warna link, node, dan label dengan opsi konfigurasi. Di sini, kita memilih tiga dengan rona yang sama namun kecerahannya berbeda:
Berikut tampilan opsi tersebut:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Anda juga dapat mengontrol transparansi link dengan
opsi sankey.link.color.fillOpacity:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Untuk membuat batas di sekitar link, gunakan
opsi sankey.link.color.stroke
dan sankey.link.color.strokeWidth:
Warna goresan dapat ditentukan dalam format RGB atau dengan nama bahasa Inggris.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Menyesuaikan Label
Teks pada diagram sankey dapat disesuaikan menggunakan sankey.node.label.fontName dan lainnya:
Berikut stanza opsi untuk diagram di atas:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
Anda dapat menyesuaikan posisi label relatif terhadap node dengan opsi sankey.node.labelPadding:
Pada diagram di atas, kami telah menambahkan padding 30 piksel di antara label dan node.
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
Menyesuaikan Node
Anda dapat mengontrol lebar node
dengan sankey.node.width:
Di atas, kita menetapkan lebar node ke 2.
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
Anda dapat menyesuaikan jarak antar-node
dengan sankey.node.nodePadding:
Pada diagram di atas, kita menetapkan sankey.node.nodePadding ke 80.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
Memuat
Nama paket google.charts.load adalah "sankey":
google.charts.load("current" {packages: ["sankey"]});
Nama class visualisasi adalah google.visualization.Sankey:
var visualization = new google.visualization.Sankey(container);
Format Data
Baris: Setiap baris dalam tabel mewakili hubungan antara dua label. Kolom ketiga menunjukkan kekuatan koneksi, dan akan tercermin dalam lebar jalur di antara label.
Kolom:
| Kolom 0 | Kolom 1 | Kolom 2 | ... | Kolom N (opsional) | |
|---|---|---|---|---|---|
| Tujuan: | Sumber | Destination | Nilai | ... | Peran opsional |
| Jenis Data: | string | string | number | ... | |
| Peran: | domain | domain | data | ... | |
| Peran kolom opsional: | None |
None |
None |
... |
Opsi Konfigurasi
| Name | |
|---|---|
| forceIFrame |
Menggambar diagram di dalam bingkai inline. (Perhatikan bahwa pada IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.) Jenis: boolean
Default: false
|
| tinggi |
Tinggi diagram, dalam piksel. Jenis: nomor
Default: tinggi elemen yang memuatnya
|
| sankey.iterations |
Dengan sankey multilevel, terkadang tidak jelas di mana node harus ditempatkan agar keterbacaan optimal. Eksperimen mesin tata letak D3 dengan tata letak node yang berbeda, akan berhenti saat
Jenis: bilangan bulat
Default: 32
|
| sankey.link |
Mengontrol atribut hubungan antar-node. Saat ini, semua atribut terkait dengan warna:
sankey: {
link: {
color: {
fill: '#efd', // Color of the link.
fillOpacity: 0.8, // Transparency of the link.
stroke: 'black', // Color of the link border.
strokeWidth: 1 // Thickness of the link border (default 0).
},
colors: [
'#a6cee3', // Custom color palette for sankey links.
'#1f78b4', // Nodes will cycle through this palette
'#b2df8a', // giving the links for that node the color.
'#33a02c'
]
}
}
Jenis: objek
Default: null
|
| sankey.link.colorMode |
Menetapkan mode pewarnaan untuk link antar-node. Kemungkinan nilai:
Opsi ini menggantikan sankey.link.color. Jenis: string
Default: 'none'
|
| sankey.node |
Mengontrol atribut node (batang vertikal di antara link):
sankey: {
node: {
label: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#000',
bold: true,
italic: false
},
interactivity: true, // Allows you to select nodes.
labelPadding: 6, // Horizontal distance between the label and the node.
nodePadding: 10, // Vertical distance between nodes.
width: 5, // Thickness of the node.
colors: [
'#a6cee3', // Custom color palette for sankey nodes.
'#1f78b4', // Nodes will cycle through this palette
'#b2df8a', // giving each node its own color.
'#33a02c'
]
}
}
Jenis: objek
Default: null
|
| sankey.node.colorMode |
Menetapkan mode pewarnaan untuk node sankey. Kemungkinan nilai:
Jenis: string
Default: 'unique'
|
| tooltip |
Objek dengan anggota untuk mengonfigurasi berbagai elemen tooltip. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditampilkan di sini: {textStyle: {color: '#FF0000'}, showColorCode: true}
Jenis: objek
Default: null
|
| tooltip.isHtml |
Jika disetel ke benar (true), gunakan tooltip yang dirender dengan HTML (bukan yang dirender SVG. Lihat Menyesuaikan Konten Tooltip untuk mengetahui detail selengkapnya. Catatan: penyesuaian konten tooltip HTML melalui peran data kolom tooltip tidak didukung oleh visualisasi Bubble Chart. Jenis: boolean
Default: false
|
| tooltip.textStyle |
Objek yang menentukan gaya teks tooltip. Objek memiliki format ini:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Jenis: objek
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| lebar |
Lebar diagram, dalam piksel. Jenis: nomor
Default: lebar elemen yang memuatnya
|
Metode
| Metode | |
|---|---|
draw(data, options) |
Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa Jenis Pengembalian: tidak ada
|
getBoundingBox(id) |
Menampilkan objek yang berisi bagian kiri, atas, lebar, dan tinggi elemen diagram
Nilai bersifat relatif terhadap penampung diagram. Panggil ini setelah diagram digambar. Jenis Pengembalian: objek
|
getSelection() |
Menampilkan array entitas diagram yang dipilih.
Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori.
Untuk diagram ini, hanya satu entitas yang dapat dipilih pada waktu tertentu.
Jenis Pengembalian: Array elemen pilihan
|
setSelection() |
Memilih entitas diagram yang ditentukan. Membatalkan pilihan sebelumnya.
Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori.
Untuk diagram ini, hanya satu entitas yang dapat dipilih pada satu waktu.
Jenis Pengembalian: tidak ada
|
clearChart() |
Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan. Jenis Pengembalian: tidak ada
|
Acara
| Name | |
|---|---|
error |
Diaktifkan saat terjadi error saat mencoba merender diagram. Properties: id, pesan
|
onmouseover |
Diaktifkan saat pengguna mengarahkan mouse ke entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Sebuah batang berkorelasi dengan sel dalam tabel data, entri legenda ke kolom (indeks baris {i>null<i}), dan kategori ke baris (indeks kolom adalah {i>null<i}). Properti: baris, kolom
|
onmouseout |
Diaktifkan saat pengguna menjauhi entity visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Sebuah batang berkorelasi dengan sel dalam tabel data, entri legenda ke kolom (indeks baris {i>null<i}), dan kategori ke baris (indeks kolom adalah {i>null<i}). Properti: baris, kolom
|
ready |
Diagram siap untuk panggilan metode eksternal. Jika ingin berinteraksi dengan diagram, dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode Properti: tidak ada
|
select |
Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil
Properti: tidak ada
|
Kebijakan Data
Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.