수백 개의 카테고리에 걸쳐 왜곡된 데이터를 시각화하는 방법은 무엇입니까? 나는 이것을 도울 수 있는 새로운 차트 형식을 실험하고 있습니다. 저는 그것을 "포장된 바"라고 부릅니다. 정렬된 막대 차트와 트리맵의 합성입니다. 다음은 최근 S&P 500 시가 총액 데이터가 포함된 막대 차트의 모습입니다.
파란색 "기본" 막대와 축은 시가 총액 기준으로 가장 큰 12개 회사를 보여주는 규칙적인 정렬된 막대 차트를 형성합니다. 각 회색 "보조" 막대는 다른 회사 중 하나를 나타냅니다. 공간이 허용하는 경우 일부 보조 철근에 레이블을 지정할 수 있지만 주요 목적은 기본 철근에 대한 컨텍스트를 제공하는 것입니다. 아이디어는 지원하는 것입니다 포커스+컨텍스트 데이터 시각화 원칙.
우리는 2차 카테고리가 몇 개인지, 전체 크기가 얼마인지, 크기가 어떻게 분포되어 있는지 대략적으로 알 수 있습니다. 그리고 그것들은 기본 막대와 같은 축척에 있기 때문에 축에 걸쳐 있는 길이에서 일부 값을 추정할 수도 있습니다. 동적 디스플레이에서 범주 레이블 및 보조 범주에 대한 값은 호버 레이블을 통해 액세스할 수 있습니다.
오른쪽 가장자리가 항상 고르게 나오지는 않지만 더 큰 보조 막대를 먼저 왼쪽에서 오른쪽으로 배치하면 일반적으로 꽤 잘 작동합니다.
예
때때로 값이 너무 기울어져 보조 채우기가 기본 막대를 초과하지 않습니다. 명목 GDP로 세계 경제를 도표화할 때 그렇습니다. 이 포장된 막대 차트는 192개 세계 경제 중 상위 7개 국가를 강조 표시합니다. (완전히 똑같지는 않다. G7 , 그런데).
네 가지 주요 범주만 선택하면 미국 경제가 세계 명목 GDP의 약 4분의 1이라는 사실을 강조합니다.
2차 범주의 합계가 1차 막대와 동일한 척도에 맞는 경우 이와 같이 별도의 막대로 묶을 수 있습니다.
경제학이 왜곡된 데이터의 유일한 출처는 아닙니다. 다음은 니카르디핀 약물 시험 데이터의 부작용 수입니다.
막대의 크기는 발생 횟수를 나타내고 색상은 평균 심각도를 나타냅니다. 2차 색상은 여전히 1차 범주에 초점을 맞추기 위해 흐려지지만 진정한 색상 표현이 중요한 경우에는 2차 색상이 필요하지 않습니다.
이 길을 걷기 시작한 데이터 세트는 뉴욕시에 등록된 개 이름 모음이었습니다. 다음은 16,000개 이상의 이름 중 상위 25개를 강조한 제 창작물입니다.
다른 포장된 막대 예제와 달리 보조 범주는 특정 개 이름 조회를 지원하기 위해 알파벳순으로 행별로 배치되었습니다(호버 레이블의 도움으로). 이 배열의 단점은 오른쪽 가장자리가 눈에 띄게 덜 균일하다는 것입니다.
(트리맵과 달리) 실제 x축을 갖는 것의 장점은 전체 모집단에 대한 총합을 추정할 수 있다는 것입니다. 이 경우 25개의 행이 있고 각 행은 개수 축에서 4,000개가 조금 넘습니다. 25 x 4,000+ = 100,000+에서 개의 수를 추정할 수 있습니다.
니카르디핀의 예는 막대에 연속적인 색상 스케일을 사용하는 것을 보여주었습니다. 범주형 색상을 사용하면 페이딩이 색상 해석을 복잡하게 만들 가능성이 줄어듭니다. 이 개 이름 보기에서 나는 "y" 소리로 끝나는 이름에 주황색을 사용했습니다.
변형
저는 여러 변형을 실험해 왔으며 위의 예에서 그 중 많은 것을 보여줍니다. 묶음 막대 차트를 구성할 때 다음 옵션 중에서 선택할 수 있습니다.
몇 행입니까? 좋은 일반 기본값이 있습니까? 10과 같은 반올림 수를 사용하면 곱셈 트릭을 적용하여 총합을 쉽게 얻을 수 있지만 종횡비가 더 중요할 수 있습니다.
보조 막대를 크기별로 왼쪽에서 오른쪽으로 배치하시겠습니까? 아니면 행별로 알파벳순으로 배치하시겠습니까? 크기 기준 왼쪽에서 오른쪽은 행에 관계없이 각 보조 막대의 왼쪽 가장자리 위치가 크기 기준 정렬 순서에 해당함을 의미합니다. 막대가 클수록 왼쪽으로 더 멀리 있습니다. 어떤 의미에서는 크기가 정렬된 기본 막대와 일치하고 오른쪽 가장자리가 더 깔끔하다는 이점이 있습니다. 그리고 같은 크기를 함께 유지하면 분포를 이해하는 데 유용할 수 있습니다. 행별 알파벳은 대화형 디스플레이에서 특정 범주를 찾는 데 더 유용합니다. 보조 막대는 알파벳 순으로 왼쪽에서 오른쪽으로 배치됩니다. 이내에 맨 위 행부터 시작하여 각 행.
보조 막대의 착색? 나는 임의의 회색, 바랜 색상 및 실제 색상을 시도했습니다. 회색을 무작위로 지정하면 구분선이 필요하지 않습니다(회색 연속 복제 방지).
기본 막대의 라벨링? 차트 영역 외부의 축에 레이블을 배치하면 막대 내에서 맞추는 제약을 피할 수 있습니다. 그러나 막대 안에 기본 레이블을 넣으면 누적 막대 차트와 구분하는 데 도움이 되며 공간 효율성이 높아집니다.
보조 철근의 라벨링? 나는 처음에 자신을 강조하기 위해 2차 레이블을 사용하지 않는 것을 선호했습니다. 문맥 역할이지만 레이블이 몇 개 있으면 무슨 일이 일어나고 있는지 잘 모르는 새로운 시청자에게 큰 도움이 될 것 같습니다.
보조 철근을 위한 별도의 스택? "기타" 스택은 데이터가 너무 치우쳐서 모든 2차 값의 합이 1차 막대와 동일한 척도에 있을 때 실현 가능합니다.
보조 막대의 전체 또는 일부를 하나의 견고한 "기타" 영역으로 병합하시겠습니까? 그렇게 하면 컨텍스트 측면의 대부분을 유지하고 오른쪽 가장자리를 매끄럽게 만들고 디스플레이의 노이즈를 줄일 수 있습니다. 그러나 보조 크기의 카디널리티 및 분포에 대한 일부 정보를 포기합니다.
대안
묶음 막대는 범주가 많은 편향된 데이터를 시각화하는 다른 방법과 비교하여 어떤가요?
- 에 비해 막대 차트 상위 범주 중 포장된 막대 차트는 나머지 범주의 컨텍스트를 얻습니다. 주요 단점은 보조 막대가 차트를 더 크게 만들고(또는 기본 막대가 축소) 레이블이나 주석에 사용될 수 있는 공간을 차지한다는 것입니다.
- 에 비해 트리맵 , 패킹된 막대는 일반적으로 더 정확한 데이터 표현(축의 막대 길이 대 축이 없는 영역)을 갖지만 더 큰 이점은 눈에 띄는 레이블과 축 정렬 크기를 갖는 기본 범주를 볼 수 있다는 것입니다. 그러나 트리맵은 중첩 및 진정한 공간 채우기(들쭉날쭉한 오른쪽 가장자리 없음)를 지원합니다. 그리고 작은 값은 1x12 픽셀 막대보다 3x4 픽셀 직사각형을 더 쉽게 볼 수 있다는 점에서 트리맵에 더 잘 표현될 수 있습니다. 묶음 막대의 축은 정확도를 제공하지만 공간을 차지하므로 트리맵을 공간 효율적으로 만듭니다.
- 에 비해 포장된 거품 (에서와 같이 원래 개 이름 거품 차트 ), 패킹된 막대는 스캐닝을 위한 더 규칙적인 배치와 데이터 값을 나타내는 원 영역에 비해 길이의 지각적 이점이 있습니다. 그러나 트리맵과 마찬가지로 작은 값은 거품으로 더 쉽게 식별할 수 있습니다(4픽셀 직경의 원 대 1x12픽셀 막대).
- 에 비해 1차원 산점도 , 묶음 막대는 기본 범주와 누적 합계의 의미에 대해 눈에 띄게 정렬된 레이블을 추가합니다. 산점도는 모든 값에 대해 정확한 위치 인코딩을 사용하고 다른 변수에 사용할 수 있는 크기 채널을 유지하는 이점이 있습니다. 그러나 과잉 공격은 지터나 닷징으로 대응해야 하며, 이는 매우 왜곡된 데이터에서 문제가 될 수 있습니다.
- 에 비해 포장된 바 , 막대를 여러 열로 재구성하는 묶음 막대는 공간 효율성이 높아 더 많은 범주(100개가 아닌 1,000개)를 지원하고 묶음 막대는 전체 면적에 대한 감각을 더합니다. 래핑된 바 보다 정확한 판독을 지원합니다. "중고등 학년" 기준이 정렬되어 있기 때문에 막대 값이 표시되고 래핑된 막대는 일반 막대 차트처럼 보이기 때문에 학습 곡선이 더 낮아야 합니다.
단점
포장된 막대의 주요 비판은 다음과 유사하다는 것입니다. 누적 막대 , 이것은 각 행의 막대가 서로 관련이 있다고 믿게 합니다. 잠재적인 혼란을 줄이기 위해 누적 막대 차트의 경우 스택 사이의 간격을 일반적인 것보다 작게 만들었지만 제거할 수 있는지 확실하지 않습니다. 나는 이점이 그 장애물을 능가하기를 바랍니다.
다른 단점은 대부분 위에 나열된 옵션의 선택으로 해결할 수 있는 절충안입니다. 예를 들어, 임의의 회색이 너무 산만해 보이는 경우 보조 막대를 다른 방식으로 색칠하거나 의도적으로 단순화하기 위해 함께 병합할 수 있습니다.
주석이 달린 가이드
이 다음 사진은 당신을 위한 것이 아닙니다. 사진만 보고 글 훑어보신 분들을 위한 글입니다.
JMP에서 사용해 보세요
이 노력은 아직 실험적이지만, 필자는 포장된 막대 차트의 가장 간단한 변형을 만들기 위한 JSL 스크립트를 첨부했습니다. JMP . 먼저 데이터에 패킹 로직을 적용하고 합성 행 번호와 색상 변수를 생성하여 작동합니다. 그런 다음 그래프 빌더에서 채워진 막대형 차트의 색상과 배열을 사용하여 일반 누적 막대형 차트를 만듭니다.
어떻게 생각해?
묶음 막대가 특정 유형의 데이터에 유용할 수 있다고 생각하지만 객관적이기에는 너무 관련되어 있다는 것을 깨달았습니다. 그래서 저는 이 노력의 모든 측면(레이아웃, 용어, 레이블, 색상 등)에 대한 피드백을 찾고 있습니다. 그리고 이 디스플레이의 이점을 얻을 수 있는 데이터가 있으면 알려주세요. 제 프로토타입을 사용하여 시도해 볼 수 있습니다. .나는 트윗 더 많은 예; 당신이 관심이 있다면, 체크 아웃 성별로 개 이름 그리고 제품 부상 수 . 다른 차트 플랫폼에서 묶음 막대 차트를 생성하려는 경우에도 좋습니다.
봐주셔서 감사합니다!
2017년 8월 업데이트 : 첨부된 JMP 스크립트 외에 이제 Excel 추가 기능과 묶음 막대 차트를 만들기 위한 d3.js 스크립트가 있습니다. 그들은에서 찾을 수 있습니다 Packedbars github 영역 . 추가 기능은 Excel dataviz 전문가와의 협업을 통해 수행되었으며, 존 펠티에 . 포장된 바 포스터가 승인되었습니다. IEEE VIS 10월 회의. 포스터 제출은 25초 미리보기 동영상 ; 오디오 대신 캡션이 있는 애니메이션 GIF 버전이 첨부되어 있습니다.
고마워, 마크. 파레토 이야기를 하자면, 최근에 값이 늘어남에 따라 포장된 막대와 파레토를 비교하는 애니메이션 gif를 만들었습니다.
잔:
Kaiser Fung이 귀하의 아이디어를 확장한 것 같습니다. 막대 밀도 도표.
막대는 해석하기 쉽습니다. 패킹된 폴리곤을 사용하면 패킹된 막대 차트에서 은색 부분이 될 영역을 표시할 수 있습니다. 막대 밀도 플롯에서 아직 판매되고 있는지 모르겠습니다 ...
ps. 지난 달 위의 비밀 내용을 분석하고 발표하기 위해 포장 막대를 사용했습니다. 표준 파레토보다 훨씬 잘 작동했습니다!
반갑습니다, Mark -- 감사합니다! 그리고 실제 데이터로 사용해 주셔서 감사합니다. 파레토 응용 프로그램과 주문형 세부 정보 측면을 알게되어 기쁩니다.
내가 사용할 수 있는 익명의 "비밀 항목"이 있으면 함께 전달하십시오. 실용적인 예가 있는 것이 항상 좋습니다.
나는 차트 갤러리를 트윗하고 있습니다.
불행히도 JMP 13에서는 막대 간격을 쉽게 제어할 수 없습니다. 실제로 효과를 얻으려면 몇 가지 트릭이 있지만 그렇지 않으면 스크립트는 꽉 찬 막대 모양을 근사화할 뿐입니다.
잔:
시원한! 나는 그것을 몇 번 실행했고 그것이 파레토 플롯에 대한 훌륭한 대안임을 발견했습니다. 나는 개선을 제조하는 일을 하고 있다. 우리는 올바른 일을 할 수 있도록 돕기 위해 상위 10위 차트를 많이 사용합니다. 현재 파레토 플랫폼에서는 상위 10개를 보려면 마지막(n-10) 원인을 결합해야 합니다. (n-10) 원인의 세부 사항은 묻힙니다. 포장된 막대는 트리맵의 요구에 따라 세부 정보가 포함된 멋진 파레토를 제공합니다.
막대 너비/간격을 어떻게 제어합니까? 내 막대 사이에는 수직 간격이 있습니다.
이 게시물을 통해 흥미로운 반응이 진행되었습니다. 
내 초기 반응은 "이것은 정말 새로운 것이 아닙니다. 우리는 ... 오, 잠깐, 아니, 그것은 다릅니다 ..."를 몇 번 연속으로했습니다.
나는 이 기술이 크고 정렬된 데이터 세트에 대해 많은 잠재력을 가지고 있다고 생각합니다. 내가 보기에 이 기술이 가지고 있는 모든 결점은 이미 트리맵에 내재되어 있으며 이 기술은 이러한 결점을 개선하는 것 같습니다.
처음에는 혼란의 가능성이 높다고 생각합니다. 청중이 이것과 트리맵 또는 이것과 누적 막대의 차이점을 이해하도록 하는 것은 경우에 따라 어려울 수 있습니다.
하지만 탐색할 가치가 충분하다고 생각하며 표준 트리맵보다 이 형식으로 데이터를 *많이* 표시할 것입니다.
잘 하셨어요.
