개요
흐름 다이어그램은 한 값 집합에서 다른 값 집합으로의 흐름을 나타내는 데 사용되는 시각화입니다. 연결되는 항목을 노드라고 하고 연결을 링크라고 합니다. 흐름은 두 도메인 (예: 대학 및 전공) 간의 다대다 매핑 또는 일련의 단계를 통한 여러 경로 (예: Google 애널리틱스는 흐름)를 사용하여 페이지에서 웹사이트의 다른 페이지로 트래픽이 이동하는 방식을 표시하려는 경우에 사용하는 것이 가장 좋습니다.
생키 선장은 열 손실에 비례하는 너비를 갖는 화살표를 사용하여 증기 엔진 효율 다이어그램을 작성한 생키 선장의 이름을 따서 명명했습니다.
참고: 흐름 차트는 향후 Google 차트 출시에서 상당 부분 수정될 수 있습니다.
흐름 다이어그램은 SVG 또는 VML 중 사용자의 브라우저에 적합한 것을 사용하여 브라우저에서 렌더링됩니다. Google의 흐름 레이아웃 코드는 D3의 흐름 레이아웃 코드에서 파생됩니다.
참고: Microsoft Internet Explorer 8 이하 버전에서는 Google 흐름 차트를 사용할 수 없습니다.
간단한 예
3개의 다른 카테고리 X, Y, Z에 연결되는 두 개의 카테고리 A와 B가 있다고 가정해 보겠습니다. 이러한 연결 중 일부는 다른 연결보다 무겁습니다 예를 들어 B는 X에 대한 씬 연결과 Y에 대한 연결이 훨씬 두꺼워집니다.
링크 중 하나 위로 마우스를 가져가 연결을 강조 표시합니다.
흐름 차트를 만들려면 보낸사람, 대상, 가중치 등 하나의 연결에 대한 정보가 포함된 행 집합을 제공합니다. 그런 다음 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를 연결하면 차트가 렌더링되지 않습니다.
다중 흐름 흐름
여러 수준의 연결로 흐름 차트를 만들 수 있습니다.
흐름 차트는 필요에 따라 수준을 추가하여 자동으로 배치합니다. 다음은 위 차트의 전체 코드입니다.
<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>
색상 제어
흐름 차트에는 노드 및 링크의 맞춤 색상을 설정할 수 있는 기능이 있습니다. 노드와 링크 모두 colors
옵션 (각각 sankey.node.colors
및 sankey.link.colors
)을 사용하여 맞춤 색상 팔레트를 지정할 수 있습니다. colorMode
옵션을 사용하여 다양한 색상 모드를 지정할 수도 있습니다.
색상을 맞춤설정하지 않으면 표준 Material 팔레트가 기본값으로 설정됩니다.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f', '#cab2d6', '#ffff99', '#1f78b4', '#33a02c']; var options = { height: 400, sankey: { node: { colors: colors }, link: { colorMode: 'gradient', colors: colors } } };
구성 옵션을 사용하여 링크, 노드, 라벨의 색상을 제어할 수 있습니다. 여기서는 색조는 동일하지만 밝기가 다른 세 가지 색상을 선택합니다.
옵션은 다음과 같습니다.
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.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열 (선택사항) | |
---|---|---|---|---|---|
목적: | 소스 | 대상 | 값 | ... | 역할(선택사항) |
데이터 유형: | 문자열 | 문자열 | 숫자 | ... | |
역할: | 도메인 | 도메인 | 데이터 | ... | |
열 역할(선택사항): | None |
None |
None |
... |
구성 옵션
이름 | |
---|---|
forceIFrame |
인라인 프레임 안에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트가 i-프레임으로 그려집니다. 유형: 불리언
기본값: false
|
키 |
차트의 높이입니다(단위: 픽셀). 유형: 숫자
기본값: 포함하는 요소의 높이
|
sankey.iterations |
다중 수준 흐름 키를 사용하면 최적의 가독성을 위해 노드를 어디에 배치해야 할지 명확하지 않을 때가 있습니다. 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를 재정의합니다. 유형: 문자열
기본값: 'none'
|
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 |
흐름 노드의 색상 모드를 설정합니다. 가능한 값은 다음과 같습니다.
유형: 문자열
기본값: '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, 메시지
|
onmouseover |
사용자가 시각적 항목 위로 마우스를 가져가면 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다. 막대는 데이터 테이블의 셀과 연관시키고, 범례 항목은 열 (행 색인은 null), 범주는 행에 연결 (열 색인은 null임)을 상호 연관시킵니다. 속성: 행, 열
|
onmouseout |
사용자가 시각적 항목에서 마우스 멀어질 때 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다. 막대는 데이터 테이블의 셀과 연관시키고, 범례 항목은 열 (행 색인은 null), 범주는 행에 연결 (열 색인은 null임)을 상호 연관시킵니다. 속성: 행, 열
|
ready |
차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 속성: 없음
|
select |
사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.