[vizable] 3주차 과제 - 태블로 필사 (radial line bar chart 그리기)

https://public.tableau.com/ko-kr/gallery/what-are-you-watching-netflix?tab=viz-of-the-day&type=viz-of-the-day 

갤러리 | Tableau Public

 

오늘은 태블로 퍼블릭에 올라와 있는 " What are you watching on Netflix" 태블로를 필사해보고자 한다

 

일단 이 태블로의 목적은 나이, 성별, 시청률, 콘텐츠의 종류(넷플릭스 오리지널을 english와 non-english로 나누는 경우)에 따라 넷플릭스에서 현재 인기있는 콘텐츠를 시청자 그룹별로 분석하기 위함이다

 

메인 데이터는 시청률이다

1. 성별과 나이를 각각 그룹핑하여 시청률 누적 순위를 구하고

2. *이게 핵심임* 보다 짧은 시간 내 더 높은 시청 수를 기록한 프로그램을 시각화했다 (2분 이상 본 것만 해당)

3. 개시 한달 만에 시청률 누적 순위가 높은 영화 상위 10개를 영어/비영어로 나누어 집계

 

* 아쉬운 점

1. 나였다면 가장 핵심이었던 2번의 시간적/누적count 단위를 통일했을 듯.

3번에서 이미 개시 1달만에 높은 시청률 기록한 순위를 보여줬으므로

1 million 달성 기간을 시각화했다면 더 판단하기 쉬웠을 것 같다

거기에 추가적으로 지금처럼 총 조회수를 위에 더하고!

두께 조정이 되는지는 해봐야 알겠으나 좀 두껍게 했어도 보기 좋았을 것 같다

2. 색상 조화가 너무 안 좋음. 안보임

특히 3번의 경우 1등 이외엔 아예 보이지 않는다

넷플릭스 색에 맞추느라 진한 빨강을 쓴 것 같은데, 차라리 톤을 높여서 튀는 빨간색을 했다면 보기 편했을 것 같다

 

* 배우고 싶은 부분

역시나 2번이다. 일단 그래프를 두개 겹쳐서 위의 동그라미를 넣어서 시각적으로도 깔끔하고, 해당 동그라미의 크기가 전체 시청 수를 나타내는 것도 좋다

+ gender 부분 그래프를 어떻게 그린 건지 모르겠음. 추가적인 의미를 담았다기보단 시각적으로 예쁘다

 

> 실습

이런건 radial comet chart 라고 한다

솔직히 말해 딱 봤을 때 바로 따라하기는 어려운 수준이어서 ,,, 유튜브에 radial comet chart tutorial을 검색해

해당 데이터로 먼저 radial line graph를 실습해보았다!

 

참고한 영상은 이것이다

https://youtu.be/8d4UMZImX-o

 

 

https://www.thedataschool.co.uk/tim-ryan/creating-a-radial-bar-chart-in-tableau

The Data School - Creating a Radial Bar Chart In Tableau

해당 게시글을 참고해도 된다 (수식 복붙 가능)

 

[데이터]

 

앞선 netflix 데이터의 해당 데이터를 내보내기함

Radial Comet Chart_전체 데이터.csv

0.06MB

데이터 내보내기를 했을 때 보니 radial chart에서 꼭 필요한 angle이나 x,y 값들이 이미 계산된 상태로 내보내진 걸 확인할 수 있었다..^_^ 하지만 이 부분도 실습할 예정이고 오히려 처음 하다보면 혼란이 생길 것 같아 모두 숨기기 처리 해주었다. title, type, numbers of viewers 정도만 쓸 것 같은데 나머지는 그냥 혹시 몰라 넣어두었다 

 

all you really need at minimum is an excel sheet with column for your value (intensity of the line) and a unique identifier

=> 즉 해당 그래프를 만들기 위해서는 고유 값( 여기서는 title)이 있는 변수와, line이 될 값 (여기서는 numbers of viewers)만 있으면 어떤 데이터를 쓰든 상관 없다

 

[절차]

1. 유니언을 만들어야 함

radial 차트는 두 점이 하나의 라인으로 연결된 형태임

그러므로 태블로 내에서 구현하기 위해서는 두개의 분리된 점을 same set of data 위에 넣어야 한다

그런데 이렇게 유니언으로 만들어주면 다시 숨겨놨던 변수들이 나온다... 그래서 다시 숨겨줘야 함

=> 유니언이 성공적으로 되면 시트명이 담긴 테이블이 새로 생긴다

2. 

1. path order
2. radial inner/radial outer
3. radial field
4. radial angle
5. radial normalised length
6. radial X
7. radial Y

이들의 값을 구해줘야 한다,,

 

3. 

path order의 계산된 필드를 작성한다

 

IIF([테이블 이름]="Radial Comet Chart_전체 데이터.csv", 0,1)

 

-> 해당 필드를 dimensions 위에 넣는다

 

4.

매개변수를 작성한다

 

radial inner, 값 0.5

값은 중요하지 않다. 해당 값에 따라 안쪽의 공백 크기가 정해짐

 

radial outer, 값 1

 

5. 

각 line을 그려주기 위해

radial field 라는 계산된 필드를 작성한다

 

[numer of viewers] 처럼

line을 그리고자 하는 핵심 measures를 그대로 써주면 된다

 

6.

radial angle을 자동으로 계산해주는 계산된 필드를 작성한다

식은 그대로 복붙해도 됨

 

(INDEX()-1)*(1/WINDOW_COUNT(COUNT([radial field])))*2*PI()

 

7. 

radial normalised length 또한 자동 계산해주는 계산된 필드를 작성한다

( lengths for the lines and tell how far away from the centre of the circle tableau should plot the inner and outer points => 안쪽의 원 모양 공백에서부터 라인이 얼마나 떨어져 있는지를 측정하기 위한 계산식이다) 그니까 정규화한다는 것임

[radial inner]+ IIF(ATTR([path order])=0,0, SUM([radial field])/WINDOW_MAX(SUM([radial field]))* ([radial outer]-[radial inner]))

 

8.

x, y 값을 계산된 필드로 작성한다

 

radial x

[radial normalised length]*cos([radial angle])

 

radial y

[radial normalised length]*sin([radial angle])

 

9. 

이제 다 만들어둔 x를 열에, y를 행에 둔다

- path order를 마크(라인)-경로에 둔다

 

=> 여기서 line이 나와야 하는데 점이 나오는 오류가 있다면?

 

내가 구하고자 하는 line인 [number of viewers]를 세부정보에 올리고, 고유 index 값인 [Title]도 세부정보로 올린다

number of viewers는 측정값(합계), 연속형

title은 차원

path order는 차원, 불연속형이다

 

이후 열과 행에 올라와 있는 x, y 위에 마우스 오른쪽 버튼을 눌러 "다음을 사용하여 계산-'title'(인덱스 값)을 선택하면 나옴

 

 

 

 

오류 해결 방법

 

라인이 아닌 점이 나오는 문제는 역시 union이 잘 되지 않아서 path order가 안먹어서 였음. 바꿔줄 건 union의 형태 뿐이다

 

이유는 모르겠지만 union 시 정상적으로 될 경우 

이렇게 테이블 이름이 두개로 나옴. 안 된 경우에는 행은 2배로 중복되어 나왔는데 테이블 명이 똑같았음 ㅠ

 

union은 일단 데이터 원본 탭에서 해당 테이블을 더블클릭한다음 (테이블 앞에 파란 선이 나오는 상태로 만들기) 옆 파일에 동일한 이름의 테이블을 아까 클릭한 테이블 위에 높으면 밑에 '유니온으로 테이블 끌기'가 나온다. 그 위에 드래그앤 드롭 해줄 경우 그 파란 선이 있는 테이블 명 뒤에 '+'가 생김. 그 상태여야만 이 radial 그래프를 그릴 수 있다. 

 

 

[응용]

기존 넷플릭스 대시보드에 존재했던 [Line size]라는 필드를 활용하여 두께와 색을 넣었다

아무래도 작아지면서 커지는 라인을 구현하기 위해서 만들어 둔 필드같다

 

연도별 필드를 계산해서 빼준 후 색상에 넣고, 간격이 넓어진 만큼 해당 공간을 활용하기 위해 레이블을 넣었다

number 기준으로 최댓값만 넣어보려 했으나, 자꾸 레이블이 두개가 넣어져서 그냥 모든 영화에 레이블 넣음..^^;

솔직히 보기엔 구림.

 

superstore 데이터로 sales를 구현했다

색상에 order date(연속형)을 넣어서 진할수록 최근이다

아까의 데이터와 달리, 값이 많기 때문에 간격이 무척 촘촘하다

자동적으로 각도 및 길이를 조정하는 형태의 수식을 작성했기 때문에 간격은 임의로 수정할 수 없는 듯 하다

그러므로 데이터의 양에 따라 형태가 달라짐에 유의해야 한다

 

-- 

다른 데이터

이렇게 안쪽에 겹칠 수도 있다

diamond price data의 경우 막상 만들고 보니 다 만 얼마로 미세한 차이여서 유의미해 보이지 않았다

그래서 단순하게 계산된 필드 만들어서 -10000 해줬더니 묘하게 그래프가 눌렸음 ㅎ 날짜를 넣고 싶었는데 생각보다 까다로움. 연구해봐야 할 듯

 

--

느낀점

 

일단 방사형 데이터의 특징은 보기가 예쁨

전체 대시보드의 가운데에 뭔가 강조하고 싶은 데이터가 있을 때 사용하면 좋을 것 같음

 

극단값을 알기 좋음

튀는 값이 눈에 바로 띄기 때문에, 레이블을 활용하여 크기가 평균보다 훨씬 높은 값들을 잡아내기 좋음

극단값이 몇개나 있는지 알기도 좋음

다만 전체적인 분포를 알고 싶으면 도넛을 쓰는 게 훨씬 나을듯 (비중같은)

값의 크기가 비슷할 경우에도 미학적으로 메리트가 없으며, 알아보기도 힘들다

 

추가적으로는 간격이나 두께, 색으로만 데이터를 확장시킬 수 있다

넷플릭스의 경우 라인의 두께를 조정하여 위에 헤드를 얹어 혜성 모양으로 만들었는데

이를 위해서는 date와 같은 연속형 데이터에 대해 계산필드를 써야 한다

또 지금은 두 원의 크기가 같은데, 왜 comet은 원의 크기가 달라지는가 미스테리다

더 알아보아야 할듯