생키 다이어그램(Sankey Diagram)은 자금, 에너지 등의 다양한 흐름과 흐름의 양을 서로 비율로써 도식화해 주는 데이터 시각화 방법입니다. '샌키'라는 이름은 아일랜드의 선장이자 엔지니어인 매튜 생키의 이름을 따서 지어졌습니다. 1898년에 그가 증기 기관의 에너지 효율을 보여주는 도표를 그렸는데, 이것이 사상 최초의 에너지 흐름 다이어그램이라고 불리어집니다.
생키 다이어그램은 선 또는 화살표 ('링크')로 연결되는 '노드'들로 구성됩니다. 생키 차트에서 선(線)의 폭(幅)은 원천에서 대상, 또는 조달에서 운용 등 소스(source)에서 대상(target)으로의 흐름(flow) 양(量)에 따라 달라집니다. 즉, 수량이 클수록 선의 폭이 넓고 두꺼워집니다.
생키 다이어그램은 과학, 특히 물리학에서 인기가 있습니다. 이들은 종종 에너지(유용하고 낭비되는 출력과 함께 입력) 및 기타 자원의 이동을 시각화하는 데 사용됩니다. 또한 생키 다이어그램은 다양한 프로세스와 프로세스의 상태를 보여주는 데도 유용합니다.
비교, 분포, 비율 등을 분석/표현할 때 생키 다이어그램이 사용될 수 있습니다.
Sankey Diagram의 데이터 구성 및 JS 작성 흐름
생키 다이어그램의 데이터는 3가지 값이 한 세트를 구성합니다.
즉, 측정값 1개 + 차원 2개 (하나는 source category, 다른 하나는 target category)
데이터 구성 및 준비가 끝났으면, 다이어그램을 작성합니다.
저는 두 가지 방법을 사용하는데, 하나는 아이패드나 아이폰에서 'Sankey Finance Diagram'이라는 무료앱을 사용하는 것이고, 다른 하나는 자바 스크립트를 작성하여 html 페이지로 만드는 것입니다.
자바 스크립트로 Sankey Diagram을 작성하는 법을 말씀드립니다.
기본적인 흐름은 다음의 4단계입니다.
1. html 페이지를 만듭니다. (나중에 이 페이지를 구글 크롬 브라우저로 열어 다이어그램을 실행합니다.)
2. 필수적인 script들을 추가합니다. (생키 다이어그램은 코어와 생키 2개 스크립트)
3. 데이터를 정의하여 하드 코딩해 넣거나, 별도의 로딩 부분을 추가합니다.
4. 기타 필요한 JS code를 입력/수정합니다.
그리고 저장하여 실행하면 됩니다.
Sankey Diagram html 및 JS(Java Script) 작성 예시
상세 내용을 위해서는 아래를 펼쳐 보세요.
<html>
<head>
<title>JavaScript Sankey Diagram</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-sankey.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// add data 'from, to, weight'의 데이터 세트로 구성됩니다.
const data = [
{from: "First Class", to: "Child", value: 6},
{from: "Second Class", to: "Child", value: 24},
{from: "Third Class", to: "Child", value: 79},
{from: "Crew", to: "Child", value: 0},
{from: "First Class", to: "Adult", value: 319},
{from: "Second Class", to: "Adult", value: 261},
{from: "Third Class", to: "Adult", value: 627},
{from: "Crew", to: "Adult", value: 885},
{from: "Child", to: "Female", value: 45},
{from: "Child", to: "Male", value: 64},
{from: "Adult", to: "Female", value: 425},
{from: "Adult", to: "Male", value: 1667},
{from: "Female", to: "Survived", value: 344},
{from: "Female", to: "Perished", value: 126},
{from: "Male", to: "Survived", value: 367},
{from: "Male", to: "Perished", value: 1364}
];
// create a sankey diagram instance
let chart = anychart.sankey();
// load the data to the sankey diagram instance
chart.data(data);
// set the chart's padding
chart.padding(20, 40);
// configure a custom color palette. 순서가 의미 있습니다.
chart.palette([
"#f5dc50",
"#e1a03c",
"#c87d5a",
"#fff0c8",
"#aa96b4",
"#6e5a7d",
"#e19196",
"#419bd2",
"#46afaa",
"#5a5050"
]);
// customize the nodes: 노드를 customize합니다.
// set the width
chart.nodeWidth("40%");
// set the padding
chart.nodePadding(30);
// customize the labels
chart.node().normal().labels().fontSize(14);
chart.node().labels().useHtml(true);
chart
.node()
.labels()
.format("<span style='font-weight:bold'>{%name}</span><br>{%value}");
// customize the links
chart.flow({
normal: {
fill: function () {
return anychart.color.lighten(this.sourceColor, 0.5) + " " + 0.3;
}
},
hovered: {
fill: function () {
return this.sourceColor + " " + 0.8;
}
}
});
// add a title and customize it
// 간단한 방법은 'chart.title('Titanic Survivors');'로도 할 수 있습니다.
chart
.title()
.enabled(true)
.useHtml(true)
.text(
'<span style = "color: #2b2b2b; font-size:20px;">Titanic Survivors</span>' +
'<br/><span style="color:#00bfa5; font-size: 16px;">(by gender, age, ticket class)</span>'
);
// set the chart container id
chart.container("container");
// draw the chart
chart.draw();
});
</script>
</body>
</html>
아래 첨부 파일은 이상의 내용을 실행할 수 있는 html 파일입니다.
다른 예시를 위해서는 다음 링크를 열어 보세요. (다음)
Sankey Diagram | AnyChart Gallery
Sankey Diagram Samples | Sankey Diagram Gallery | AnyChart
www.anychart.com
더 상세한 기능을 추가하거나 설명을 위해서는 다음 링크를 열어 보세요. (다음)
Sankey Diagram | Basic Charts | AnyChart Documentation
A Sankey diagram, or chart, named after Captain Matthew Sankey, is a flow diagram that shows nodes linked by flows, the quantity of each flow being
docs.anychart.com
'Management > 일 잘하기' 카테고리의 다른 글
| 시스템 장애의 유형 DU vs. DL (0) | 2023.03.09 |
|---|---|
| 맥북에서 사라진 메뉴를 복원하는 방법 (0) | 2023.02.08 |
| 우리말에서 동사와 형용사 구별하기 (0) | 2023.01.20 |
| 사이시옷 (0) | 2023.01.08 |
| 핍박받은 자 vs. 핍박받는 자 - 동사/형용사의 활용 (0) | 2023.01.08 |
| 우리말 띄어쓰기 (0) | 2022.12.12 |
