다이어그램과 시각추론

그래프의 점이 움직일 때, 여전히 같은 대상을 가리킬까?

데이터와 화면 요소의 대응을 다룬 D3 논문을 통해 조작형 그림의 정체성 보존을 살펴봅니다. 예쁜 움직임보다 먼저 확인할 연결이 있습니다.

산점도에서 한 점을 눌렀더니 ‘달 관측소’라고 표시되었습니다. 정렬 버튼을 누른 뒤 같은 위치의 점을 다시 눌렀을 때도 달 관측소일까요? 위치가 바뀌는 화면에서는 대상, 값, 표시 요소의 관계를 유지해야 합니다. 움직임이 매끄러워도 다른 대상의 기록을 이어 붙였다면 사용자는 존재하지 않는 변화를 읽게 됩니다.

학술 자료의 내용

연구를 읽는 두 가지 질문

화면 요소와 자료를 어떻게 연결하는가?

보스톡·오기에베츠키·히어의 2011년 논문은 웹 문서의 표준 요소에 자료를 직접 연결하여 시각화를 만드는 D3를 소개합니다. 별도의 숨겨진 표현만 다루는 대신 문서 요소를 검사하고 바꾸는 구조를 제안합니다. 논문의 핵심 방법 중 하나는 새 자료와 기존 표시 요소를 결합하는 연산입니다. 이는 도구 설계 연구이며, 그림 수업의 성적 향상을 측정한 논문은 아닙니다. [1]

들어오는 것·남는 것·나가는 것

자료 결합에서는 새로 표시할 대상, 기존 표시를 갱신할 대상, 사라질 대상을 구분합니다. 순서에 따른 대응도 가능하지만 고유한 키를 사용하면 정렬이나 이동 전후의 대상 정체성을 유지할 수 있습니다. 논문 3.2절은 이 연결과 변화 과정을 설명합니다. 여기서 이어받을 핵심은 특정 프로그램 문법보다 자료와 그림 사이의 대응 관계입니다. [1]

그림으로 생각하기

관측소 이름을 지키며 값만 바꾸기

LTCT의 가상 자료에서 첫날은 별 관측소 8, 달 관측소 5, 숲 관측소 3입니다. 둘째 날 자료는 숲 7, 별 9, 강 4의 순서로 도착합니다. 같은 이름을 식별자로 연결하면 별은 8→9, 숲은 3→7로 갱신됩니다. 달은 둘째 날 자료가 없고, 강은 새로 등장합니다. 값은 설명용 관측 횟수이며 실제 연구 자료가 아닙니다.

첫째 줄끼리 무조건 연결하면 별의 8이 숲의 7로 변한 것처럼 보입니다. 둘째 줄끼리 연결하면 달의 5가 별의 9로 이어집니다. 이런 애니메이션은 서로 다른 대상을 한 대상의 시간 변화처럼 표현합니다. 그림에서는 정렬 순서 대신 이름별 대응을 표로 보여 줍니다.

달의 표시를 없애더라도 ‘관측 횟수 0’이라는 뜻으로 바꾸어서는 안 됩니다. 둘째 날 데이터가 빠진 경우, 관측소가 폐쇄된 경우, 표시 조건에서 제외된 경우는 별도 상태입니다. 실제 도구에서는 이러한 상태를 범례나 설명으로 남겨야 합니다.

별 8에서9, 달5에서 자료없음, 숲3에서7, 강은 새로4가 되는 대상별 대응표.
LTCT 제작 교육용 도식·표. 개념 출처: [1]. 예시·수치·배치는 LTCT가 새로 구성했으며 원문 도표나 사진을 복제하지 않았습니다. 그림 크게 보기 ↗

어디까지 말할 수 있을까요?

  • 고유 키를 사용해도 원자료의 식별자가 잘못되거나 중복되면 연결이 틀릴 수 있습니다. 데이터 품질 검사가 선행되어야 합니다.
  • 논문의 2011년 구현 설명을 현재 라이브러리 사용법으로 그대로 안내하지 않습니다. 이 글은 자료 대응의 개념에 집중합니다.

원문에 근거한 한계와 LTCT의 적용 범위 검토입니다. [1]

배운 내용을 수업에 적용하기

교육 현장과 연결해 보면

표를 정렬한 뒤 그래프의 같은 대상을 찾게 하거나, 잘못 연결된 두 시점의 점을 고치게 하는 조작형 과제를 만들 수 있습니다. 수험자는 위치와 정체성을 구분하여 설명해야 합니다.

화면 검수에서는 고유 식별자 중복, 자료 누락, 새 대상 추가, 정렬 후 선택 유지 여부를 따로 확인하는 것이 좋습니다.

한 번 더 생각하기

둘째 날 달 관측소가 목록에 없으면 관측 횟수를 0으로 그려도 될까요?

생각을 비교할 해설 펼치기

자료가 없다는 사실만으로 0을 단정할 수 없습니다. 수집 실패인지, 대상 제외인지, 실제 0인지 구분할 정보가 필요합니다. 누락을 0으로 그리면 감소 추세라는 새로운 주장을 만들어 버릴 수 있습니다.

원문과 출처 정보

한국어 제목은 이해를 돕기 위한 LTCT 번역입니다. 한글 제목 뒤 괄호에 원제를 함께 표기했습니다. 저자·학술지·원문 버전은 원문 서지정보를 기준으로 확인할 수 있습니다.

  1. 데이터로 구동되는 문서 (D3: Data-Driven Documents)

    Michael Bostock; Vadim Ogievetsky; Jeffrey Heer (2011). IEEE Transactions on Visualization and Computer Graphics · InfoVis.

    자료 성격
    학술 연구논문
    읽은 버전
    2011 학술지판 · 저자 연구실 공개 PDF
    확인 범위
    저자 연구실 서지정보 및 공개 PDF 3.2절의 자료 결합·키·진입·갱신·퇴장 확인
    원문 확인일

이 글은 한국어 해설이며 원문 전문 번역이 아닙니다. 도식과 활동의 제작·재구성 범위는 각 그림과 본문에 표시했습니다. 자료 선정과 출처 기준

출처·개념 네트워크

같은 연구 흐름에서 이어 읽기

같은 원문, 저자·연구 흐름, 공통 개념 태그를 기준으로 연결한 관련 해설입니다.