Genel bakış
Sankey şeması, bir değer grubundan diğerine akışı göstermek için kullanılan görselleştirmedir. Birbirine bağlı olan öğelere düğüm, bağlantılara ise bağlantı adı verilir. Sankeyler, iki alan arasında (ör. üniversiteler ve mağribiler) ya da bir dizi aşama boyunca birden fazla yolu (örneğin, Google Analytics, web sitenizdeki diğer sayfalardan gelen trafiğin nasıl gerçekleştiğini göstermek için) kullanmak istediğinizde en iyi şekilde kullanılır.
Merak edenlerin adları, ısı kaybıyla orantılı genişliklere sahip okların kullanıldığı buhar motoru verimliliği şemasını oluşturan Captain Sankey'den geliyor.
Not: San Francisco grafiğinde, gelecekteki Google Listeleri sürümlerinde önemli düzeltmeler yapılıyor olabilir.
Sankey diyagramları, tarayıcıda SVG veya VML kullanılarak hangisinin uygun olduğuna bağlı olarak tarayıcıda oluşturulur. Google'ın sankey düzen kodu, D3'ün sankey düzen kodundan türetilmiştir.
Not: Google sankey grafikleri, Microsoft Internet Explorer 8 ve önceki sürümlerde kullanılamaz.
Basit Bir Örnek
A, B ve X, Y ve Z olmak üzere üç kategoriye bağlanan iki kategoriniz olduğunu varsayalım. Bu bağlantıların bazıları diğerlerinden daha ağır. Örneğin, B'nin X ile zayıf bir bağlantısı ve Y'yle çok daha derin bir bağlantısı vardır.
Bağlantıyı vurgulamak için imleci bağlantılardan birinin üzerine getirin.
Sankey grafiği oluşturmak için bir bağlantıyla ilgili her şeyi içeren bir satır kümesi sağlayın: başlangıç, bitiş ve ağırlık. Ardından, grafiği başlatmak için google.visualization.Sankey() yöntemini ve ardından oluşturmak için draw() yöntemini kullanın:
<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>
Not: Verilerinizde döngülerden kaçının: A'nın kendisi veya A'ya bağlantı veren B'ye bağlantı veriyorsa grafiğiniz oluşturulmaz.
Çok Düzeyli Sanketler
Birden fazla düzeyde bağlantı içeren bir Sankey grafiği oluşturabilirsiniz:
Sankey grafikleri, gerektiğinde otomatik olarak yerleştirilerek daha fazla seviye ekler. Yukarıda belirtilen kodun tamamı aşağıda verilmiştir:
<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>
Renkleri Kontrol Etme
Sankey grafikleri, düğümler ve bağlantılar için özel renkler ayarlayabilir. Düğümlere ve bağlantılara colors seçenekleri (sırasıyla sankey.node.colors ve sankey.link.colors) kullanılarak özel renk paletleri verilebilir. Ayrıca, colorMode seçeneği kullanılarak farklı boyama modları da sağlanabilir.
Renkler özelleştirilmezse varsayılan olarak standart Malzeme paletine ayarlanır.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
Bağlantıların, düğümlerin ve etiketlerin renklerini yapılandırma seçenekleriyle kontrol edebilirsiniz. Burada, aynı renk tonuyla ve farklı parlaklıklarla üç tane seçiyoruz:
Bu seçenekler şu şekilde görünür:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Bağlantıların şeffaflığını sankey.link.color.fillOpacity seçeneğiyle de kontrol edebilirsiniz:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Bağlantıların etrafına kenarlık oluşturmak için sankey.link.color.stroke ve sankey.link.color.strokeWidth seçeneklerini kullanın:
Fırça rengi RGB biçiminde veya İngilizce adla belirtilebilir.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Etiketleri Özelleştirme
San Francisco grafiklerindeki metin, sankey.node.label.fontName ve arkadaşlarınız kullanılarak özelleştirilebilir:
Yukarıdaki grafik için standart seçenek şu şekildedir:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
sankey.node.labelPadding seçeneğini kullanarak etiketlerin konumunu düğümlere göre ayarlayabilirsiniz:
Yukarıdaki grafikte, etiketler ile düğümler arasına 30 piksellik dolgu eklenmiştir.
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
Düğümleri Ayarlama
Düğümlerin genişliğini sankey.node.width ile kontrol edebilirsiniz:
Yukarıda düğüm genişliğini 2 olarak ayarladık.
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
Düğümler arasındaki mesafeyi sankey.node.nodePadding kullanarak ayarlayabilirsiniz:
Yukarıdaki grafikte sankey.node.nodePadding, 80 olarak ayarlanmıştır.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
Yükleniyor
google.charts.load paket adı "sankey":
google.charts.load("current" {packages: ["sankey"]});
Görselleştirmenin sınıf adı google.visualization.Sankey:
var visualization = new google.visualization.Sankey(container);
Veri Biçimi
Satırlar: Tablodaki her bir satır, iki etiket arasındaki bir bağlantıyı temsil eder. Üçüncü sütun, bu bağlantının gücünü belirtir ve etiketler arasındaki yolun genişliğine yansıtılır.
Sütunlar:
| 0. Sütun | 1. Sütun | 2. Sütun | ... | N sütunu (isteğe bağlı) | |
|---|---|---|---|---|---|
| Amaç: | Kaynak | Hedef | Değer | ... | İsteğe bağlı roller |
| Veri Türü: | string | string | numara | ... | |
| Rol: | alan | alan | veri | ... | |
| İsteğe bağlı sütun rolleri: | Yok |
Yok |
Yok |
... |
Yapılandırma Seçenekleri
| Ad | |
|---|---|
| iFrame |
Grafiği satır içi bir çerçevenin içine çizer. (IE8'de bu seçeneğin yok sayıldığını unutmayın; tüm IE8 grafikleri i-Frame'lerde çizilmiştir.) Tür: boole
Varsayılan: false
|
| yükseklik |
Grafiğin piksel cinsinden yüksekliği. Tür: sayı
Varsayılan: kapsayıcı öğenin yüksekliği
|
| ayn.iterasyonlar |
Çok düzeyli sankeyler söz konusu olduğunda, bazen en iyi okunabilirlik için düğümlerin nereye yerleştirilmesi gerektiği belirsizdir. D3 düzen motoru farklı düğüm düzenlerine sahip, Tür: Tam sayı
Varsayılan: 32
|
| sankey.bağlantı |
Düğümler arasındaki bağlantıların özelliklerini kontrol eder. Şu anda tüm özellikler renkle ilgili:
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'
]
}
}
Tür: nesne
Varsayılan: null
|
| sankey.bağlantı.renkModu |
Düğümler arasındaki bağlantılar için bir renklendirme modu belirler. Olası değerler:
Bu seçenek sankey.link.color değerini geçersiz kılar. Tür: dize
Varsayılan: "none"
|
| sankey.düğüm |
Düğümlerin özelliklerini kontrol eder (bağlantılar arasındaki dikey çubuklar):
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'
]
}
}
Tür: nesne
Varsayılan: null
|
| sankey.node.renkModu |
Sankey düğümleri için renklendirme modu ayarlar. Olası değerler:
Tür: dize
Varsayılan: "benzersiz"
|
| ipucu |
Çeşitli ipucu öğelerini yapılandırmak için üyeleri olan bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz: {textStyle: {color: '#FF0000'}, showColorCode: true}
Tür: nesne
Varsayılan: null
|
| ipucu |
Doğru değerine ayarlanırsa HTML oluşturulan (SVG tarafından oluşturulan yerine) ipuçlarını kullanın. Daha fazla ayrıntı için İpucu İçeriğini Özelleştirme bölümüne bakın. Not: HTML ipucu içeriğinin ipuçu sütunu veri rolü üzerinden özelleştirilmesi, Baloncuk Grafiği görselleştirmesi tarafından desteklenmez. Tür: boole
Varsayılan: false
|
| tips.textStyle |
İpucu metin stilini belirten bir nesne. Nesnenin biçimi şöyledir:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tür: nesne
Varsayılan:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| genişlik |
Grafiğin piksel cinsinden genişliği. Tür: sayı
Varsayılan: kapsayıcı öğenin genişliği
|
Yöntemler
| Yöntem | |
|---|---|
draw(data, options) |
Grafiği çizer. Grafik, yalnızca Return Type: yok
|
getBoundingBox(id) |
Değerler, grafiğin kapsayıcısına bağlıdır. Bunu, grafik çizildikten sonra çağırın. Return Type: nesne türü
|
getSelection() |
Seçilen grafik varlıklarından oluşan bir diziyi döndürür.
Seçilebilir öğeler çubuklar, açıklama girişi ve kategorilerdir.
Bu grafik için herhangi bir zamanda yalnızca bir varlık seçilebilir.
Dönüş Türü: Seçim öğeleri dizisi
|
setSelection() |
Belirtilen grafik öğelerini seçer. Önceki seçimleri iptal eder.
Seçilebilir öğeler çubuklar, açıklama girişi ve kategorilerdir.
Bu grafik için aynı anda yalnızca bir öğe seçilebilir.
Return Type: yok
|
clearChart() |
Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır. Return Type: yok
|
Etkinlikler
| Ad | |
|---|---|
error |
Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir. Özellikler: kimlik, mesaj
|
onmouseover |
Kullanıcı, görsel varlığın üzerine geldiğinde tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri döndürür. Çubuk, veri tablosundaki bir hücreyle, sütun için açıklama girişi (satır dizini null) ve kategori satıra karşılık gelir (sütun dizini null). Özellikler: satır, sütun
|
onmouseout |
Kullanıcı, görsel öğeden fareyi uzaklaştırdığında tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri aktarır. Çubuk, veri tablosundaki bir hücreyle, sütun için açıklama girişi (satır dizini null) ve kategori satıra karşılık gelir (sütun dizini null). Özellikler: satır, sütun
|
ready |
Grafik, harici yöntem çağrıları için hazır. Grafik ve çizdikten sonra çağrı yöntemleriyle etkileşimde bulunmak isterseniz Özellikler: Yok
|
select |
Kullanıcı bir görsel varlığı tıkladığında tetiklenir. Nelerin seçildiğini öğrenmek için Özellikler: Yok
|
Veri Politikası
Tüm kod ve veriler tarayıcıda işlenip oluşturulur. Hiçbir sunucuya veri gönderilmez.