흐름 다이어그램

  1. 개요
  2. 간단한 예
  3. 멀티레벨 흐름
  4. 색상 관리
  5. 글꼴 맞춤설정
  6. 노드 조정
  7. 로드 중
  8. 데이터 형식
  9. 구성 옵션
  10. 메서드
  11. 이벤트
  12. 데이터 정책

개요

흐름 다이어그램은 한 값 집합에서 다른 값 집합으로의 흐름을 나타내는 데 사용되는 시각화입니다. 연결되는 항목을 노드라고 하고 연결을 링크라고 합니다. 흐름은 두 도메인 (예: 대학 및 전공) 간의 다대다 매핑 또는 일련의 단계를 통한 여러 경로 (예: 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 레이아웃 엔진은 다양한 노드 레이아웃을 실험하며 sankey.iterations가 시도되면 중지됩니다. 이 숫자가 클수록 복잡한 흐름의 레이아웃이 더 좋지만 비용이 발생합니다. 즉, 흐름 렌더링 시간이 더 오래 걸립니다. 반대로 이 숫자가 짧을수록 차트가 더 빨리 렌더링됩니다.

유형: 정수
기본값: 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

노드 간 링크의 색상 모드를 설정합니다. 가능한 값은 다음과 같습니다.

  • 'source' - 소스 노드의 색상은 모든 타겟 노드 링크에 사용됩니다.
  • 'target' - 타겟 노드의 색상은 소스 노드 링크에 사용됩니다.
  • 'gradient' - 소스와 타겟 노드 간의 링크는 소스 노드 색상에서 타겟 노드 색상까지의 그라데이션으로 색상이 지정됩니다.
  • 'none' - 기본 옵션입니다. 링크 색상은 기본값 (또는 sankey.link.color.fill 및 sankey.link.color.fillOpacity 옵션에서 지정한 색상)으로 설정됩니다.

이 옵션은 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' - 각 노드에 고유한 색상이 지정됩니다.
유형: 문자열
기본값: '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은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
너비

차트의 너비입니다(단위: 픽셀).

유형: 숫자
기본값: 포함하는 요소의 너비

메서드

메서드
draw(data, options)

차트를 그립니다. 차트에서는 ready 이벤트가 실행된 후에만 추가 메서드 호출을 허용합니다. Extended description.

반환 유형: 없음
getBoundingBox(id)

차트 요소 id의 왼쪽, 상단, 너비, 높이를 포함하는 객체를 반환합니다. id의 형식은 아직 문서화되지 않았지만 (이벤트 핸들러의 반환 값임) 다음은 몇 가지 예입니다.

var cli = chart.getChartLayoutInterface();

차트 영역의 높이
cli.getBoundingBox('chartarea').height
막대 또는 열 차트의 첫 번째 계열에서 세 번째 막대의 너비
cli.getBoundingBox('bar#0#2').width
원형 차트 다섯 번째 웨지의 경계 상자
cli.getBoundingBox('slice#4')
세로형 (예: 열) 차트 차트 데이터 경계 상자:
cli.getBoundingBox('vAxis#0#gridline')
가로 (예: 막대) 차트 차트 데이터 경계 상자:
cli.getBoundingBox('hAxis#0#gridline')

값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 객체
getSelection()

선택된 차트 항목의 배열을 반환합니다. 선택 가능한 개체는 막대, 범례 항목 및 카테고리입니다. 이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 선택 요소의 배열
setSelection()

지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다. 선택 가능한 개체는 막대, 범례 항목 및 카테고리입니다. 이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 없음
clearChart()

차트를 지우고 할당된 리소스를 모두 해제합니다.

반환 유형: 없음

이벤트

이름
error

차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다.

속성: ID, 메시지
onmouseover

사용자가 시각적 항목 위로 마우스를 가져가면 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다. 막대는 데이터 테이블의 셀과 연관시키고, 범례 항목은 열 (행 색인은 null), 범주는 행에 연결 (열 색인은 null임)을 상호 연관시킵니다.

속성: 행, 열
onmouseout

사용자가 시각적 항목에서 마우스 멀어질 때 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다. 막대는 데이터 테이블의 셀과 연관시키고, 범례 항목은 열 (행 색인은 null), 범주는 행에 연결 (열 색인은 null임)을 상호 연관시킵니다.

속성: 행, 열
ready

차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트의 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다.

속성: 없음
select

사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 getSelection()를 호출하세요.

속성: 없음

데이터 정책

브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.