개요
Sankey 다이어그램은 값 집합에서 다른 값 집합의 흐름을 묘사하는 데 사용되는 시각화입니다. 연결되는 항목을 노드라고 하고, 연결을 링크라고 합니다. Sankey는 두 도메인(예: 대학 및 전공) 간의 다대다 매핑을 표시하거나 여러 단계를 거치는 여러 경로를 표시하려는 경우에 가장 적합합니다. 예를 들어 Google 애널리틱스에서는 Sankey를 사용하여 트래픽이 웹사이트의 다른 페이지로 이동하는 방식을 보여줍니다.
이 해커의 이름은 샌키 선장의 이름을 딴 것입니다. 증기 기관은 증기 엔진 효율성의 다이어그램을 만들어 열 손실에 비례하는 너비를 사용합니다.
참고: 향후 Google 차트 버전에서 Sankey 차트가 상당 부분 개선될 수 있습니다.
Sankey 다이어그램은 사용자의 브라우저에 적합한 SVG 또는 VML을 사용하여 브라우저에서 렌더링됩니다. Google의 sankey 레이아웃 코드는 D3의 sankey 레이아웃 코드에서 파생됩니다.
참고: Google sankey 차트는 Microsoft Internet Explorer 8 이하 버전에서는 사용할 수 없습니다.
간단한 예
X, Y, Z 세 개의 다른 카테고리에 연결되는 두 개의 카테고리 A와 B가 있다고 가정해 보겠습니다. 이러한 연결 중 일부는 다른 연결보다 더 많습니다. 예를 들어 B는 X에 대한 씬 연결이 있고 Y에 대한 연결이 훨씬 더 깁니다.
링크 중 하나에 마우스를 가져가면 해당 연결이 강조표시됩니다.
Sankey 차트를 만들려면 보낸사람, 받는사람, 가중치 중 하나의 연결에 대한 정보가 포함된 행 집합을 제공합니다. 그런 다음 google.visualization.Sankey() 메서드를 사용하여 차트를 초기화한 후 draw() 메서드를 사용하여 렌더링합니다.
<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>
참고: 데이터 순환을 피하세요. A가 자체에 연결되거나 B에 연결되어 A와 연결된 C에 연결되면 차트가 렌더링되지 않습니다.
다단계 Sankey
여러 수준의 연결을 사용하는 Sankey 차트를 만들 수 있습니다.
Sankey 차트는 필요에 따라 레벨을 추가하여 자동으로 배치합니다. 다음은 위 차트에 대한 전체 코드입니다.
<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>
색상 제어하기
Sankey 차트에는 노드 및 링크에 맞춤 색상을 설정할 수 있는 기능이 있습니다. colors 옵션을 사용하여 노드와 링크에 모두 맞춤 색상 팔레트를 제공할 수 있습니다 (각각 sankey.node.colors 및 sankey.link.colors). colorMode 옵션을 사용하여 다양한 색상 모드를 지정할 수도 있습니다.
색상이 맞춤설정되지 않은 경우 기본적으로 표준 머티리얼 팔레트가 사용됩니다.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
구성 옵션으로 링크, 노드, 라벨의 색상을 제어할 수 있습니다. 여기서는 색조는 동일하지만 밝기는 다른 3가지를 선택합니다.
이러한 옵션은 다음과 같습니다.
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
sankey.link.color.fillOpacity 옵션을 사용하여 링크의 투명도를
제어할 수도 있습니다.
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
링크 주위에 테두리를 만들려면 sankey.link.color.stroke 및 sankey.link.color.strokeWidth 옵션을 사용합니다.
획 색상은 RGB 형식 또는 영어 이름으로 지정할 수 있습니다.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
라벨 맞춤설정하기
sankey 차트의 텍스트는 sankey.node.label.fontName 및 친구를 사용하여 맞춤설정할 수 있습니다.
위 차트에 대한 옵션 스탠자는 다음과 같습니다.
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
sankey.node.labelPadding 옵션을 사용하면 노드를 기준으로 라벨의 위치를 조정할 수 있습니다.
위 차트에서는 라벨과 노드 사이에 30픽셀의 패딩을 추가했습니다.
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
노드 조정
sankey.node.width로 노드의 너비를 제어할 수 있습니다.
위에서는 노드 너비를 2로 설정합니다.
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
sankey.node.nodePadding를 사용하여 노드 간의 거리를 조정할 수 있습니다.
위 차트에서는 sankey.node.nodePadding를 80으로 설정했습니다.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
로드 중
google.charts.load 패키지 이름은 "sankey"입니다.
google.charts.load("current" {packages: ["sankey"]});
시각화의 클래스 이름은 google.visualization.Sankey입니다.
var visualization = new google.visualization.Sankey(container);
데이터 형식
행: 테이블의 각 행은 두 라벨 간의 연결을 나타냅니다. 세 번째 열은 해당 연결의 강도를 나타내며 라벨 사이의 경로 너비에 반영됩니다.
열:
| 0열 | 열 1 | 열 2 | ... | N열 (선택사항) | |
|---|---|---|---|---|---|
| 목적: | 소스 | 대상 | 가치 | ... | 선택적 역할 |
| 데이터 유형: | string | string | 숫자 | ... | |
| 역할: | 도메인 | 도메인 | 데이터 | ... | |
| 열 역할(선택사항): | None |
None |
None |
... |
구성 옵션
| 이름 | |
|---|---|
| forceIFrame |
인라인 프레임 내에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트는 i-frame에서 그려집니다. 유형: 불리언
기본값: false
|
| 높이 |
차트의 높이(픽셀)입니다. 유형: 숫자
기본값: 포함하는 요소의 높이
|
| sankey.iterations |
다단계 sankey를 사용하면 최적의 가독성을 위해 노드를 어디에 배치해야 할지 파악하기 어려울 때가 있습니다. D3 레이아웃 엔진이 다양한 노드 레이아웃을 사용하여 실험하며 유형: 정수
기본값: 32
|
| sankey.link |
노드 간 연결의 속성을 제어합니다. 현재 모든 속성은 색상과 관련이 있습니다.
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'
]
}
}
유형: 객체
기본값: null
|
| sankey.link.colorMode |
노드 간 링크에 대한 색상 지정 모드를 설정합니다. 가능한 값은 다음과 같습니다.
이 옵션은 sankey.link.color를 재정의합니다. 유형: 문자열
기본값: '없음'
|
| sankey.node |
노드의 속성을 제어합니다 (링크 사이의 세로 막대).
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'
]
}
}
유형: 객체
기본값: null
|
| sankey.node.colorMode |
sankey 노드에 대한 색상 지정 모드를 설정합니다. 가능한 값은 다음과 같습니다.
유형: 문자열
기본값: 'unique'
|
| 도움말 |
다양한 도움말 요소를 구성할 구성원이 있는 객체 이 객체의 속성을 지정하려면 아래와 같이 객체 리터럴 표기법을 사용하면 됩니다. {textStyle: {color: '#FF0000'}, showColorCode: true}
유형: 객체
기본값: null
|
| tooltip.isHtml |
true로 설정하면 SVG 렌더링 대신 HTML 렌더링 도움말을 사용합니다. 자세한 내용은 도움말 콘텐츠 맞춤설정을 참조하세요. 참고: 도움말 열 데이터 역할을 통한 HTML 도움말 콘텐츠 맞춤설정은 풍선형 차트 시각화에서 지원되지 않습니다. 유형: 불리언
기본값: false
|
| tooltip.textStyle |
도움말 텍스트 스타일을 지정하는 객체입니다. 이 객체의 형식은 다음과 같습니다.
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| 너비 |
차트의 너비(픽셀)입니다. 유형: 숫자
기본값: 포함하는 요소의 너비
|
방법
| 메서드 | |
|---|---|
draw(data, options) |
차트를 그립니다. 차트는 반환 유형: 없음
|
getBoundingBox(id) |
차트 요소
값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 함수를 호출합니다. 반환 유형: 객체
|
getSelection() |
선택한 차트 항목의 배열을 반환합니다.
선택 가능한 항목은 막대, 범례 항목 및 카테고리입니다.
이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다.
반환 유형: 선택 요소의 배열
|
setSelection() |
지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다.
선택 가능한 항목은 막대, 범례 항목 및 카테고리입니다.
이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다.
반환 유형: 없음
|
clearChart() |
차트를 삭제하고 할당된 모든 리소스를 해제합니다. 반환 유형: 없음
|
이벤트
| 이름 | |
|---|---|
error |
차트를 렌더링하려고 할 때 오류가 발생하면 실행됩니다. 속성: id, message
|
onmouseover |
사용자가 시각적 항목 위로 마우스를 가져가면 실행됩니다. 해당하는 데이터 테이블 요소의 행 및 열 색인을 다시 전달합니다. 막대는 데이터 테이블의 셀, 열의 범례 항목 (행 색인은 null), 행 (카테고리 색인은 null)에 대한 카테고리와 연결됩니다. 속성: 행, 열
|
onmouseout |
사용자가 시각적 요소에서 마우스를 치우면 실행됩니다. 해당하는 데이터 테이블 요소의 행 및 열 색인을 다시 전달합니다. 막대는 데이터 테이블의 셀, 열의 범례 항목 (행 색인은 null), 행 (카테고리 색인은 null)에 대한 카테고리와 연결됩니다. 속성: 행, 열
|
ready |
이제 차트에 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 속성: 없음
|
select |
사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.