DataVisualization, Chord Diagram
18.05.26
유니스트(UNIST) 산업디자인과 14학번들끼리 포트폴리오 리뷰를 하는 시간을 가지었습니다.
도승헌
관심분야 : UX, Data mining, Data Visualization
개인 포트폴리오 사이트 : http://seungheondoh.com/
1. Project overview
리뷰 프로젝트 :http://sarahmadden.com/chorddiagram.html
이 프로젝트는 Sarah Madden 씨가 함께 웹사이트 업데이트와, 브랜딩 리뉴얼을 진행하시면서 함께 일하던 동료들과의 코워킹 네트워크를 시각화한 프로젝트입니다.
The chord diagram illustrates the relationships between colleagues working on our shared organizational objectives. Explore the networks by objective and by indvidual to see what collaboration looked like in 2014.
2. Relationship visualization
왼쪽 레이아웃의 node는 사람으로, 그리고 node의 컬러를 통해 지역을 나타내고 있습니다. 또한 관계는 자신과 자신의 연결일 때는 node와 같은 컬러로, 그리고 자신과 타인과의 관계는 지역의 성격에 따라 새로운 컬러로 표한 혹 있습니다.
오른쪽 레이아웃의 경우 프로젝트와 관련된 내용이 나오고 있습니다. 1~5에 해당하는 ordinal category data에 sub category를 표현하고, 각 sub category마다 0,1로 표현을 하지 않았을까 생각이 듭니다.
3. One to Many Relationship & Node Characteristic
하나의 노드를 클릭했을 때, 왼쪽 레이아웃은 하나의 노드와 다른 관계들에 대한 표현을, 그리고 오른쪽 레이아웃은 개별 노드의 성격을 표현해 줍니다.
노드를 클릭했을 때,
왼쪽 레이아웃의 관계에 대한 표현에 있어서는 원의 호가 넓을수록 많은 사람들과 협업한다는 의미를 담고 있으며, 컬러를 통해 어느 지역에 사람들이 많이 모여있는지를 볼 수 있습니다. 또한 왼쪽 레이아웃에서 하나의 노드를 클릭했을 때, 그 노드와 관계있는 노드들을 시각화시켜 1:다 관계를 효과적으로 보여줍니다.
노드를 클릭했을 때, 오른쪽 레이아웃에서는 노드의 성격에 대한 시각화를 해주며, category data set의 중복되지 않은 데이터중, 해당 노드에 포함되어있는 성격이 나옵니다.
4. Example
HAROLD 씨는 모든 사람들과 함께 일하며, 또한 모든 프로젝트에 포함되어있는 걸로 보아, 팀 매니저의 성격을 가지고 있을 것으로 판단됩니다.
5. Color
Color의 경우 배경색은 무채색, 그리고 시각화되는 노드와 관계에 있어서 서로 다른 컬러 맵핑이 이루어졌습니다. 하지만, 너무 많은 Hue를 사용하여 너무 많은 색상들을 보게 되었고, 색상의 경우 4개의 지역 카테고리들 간의 관계에서 각각 다른 색이 달라지면서 총 12개의 색상이 사용되었습니다. 943개의 관계에 12가지 색상은 너무 많다는 생각이 들었습니다. 이로 인하여, 전체 이미지를 봤을 때 복잡한 코워킹 네트워크구나 외에는 정보전달에서 좋은 영향을 받지 못한 것 같습니다.
Chord Diagram 프로젝트는 각각 카테고리 데이터들 간의 관계를 보여주기 좋은 것 같습니다. 이번 프로젝트는 오른쪽 패널에서 각각 노드들의 개별 성격을 보여줘서 좋았습니다. 그리고 개별 성격들의 교집합으로 데이터를 시각화해주는 것 역시 괜찮은 방식인 것 같다는 생각이 듭니다.