Project_5. Airbnb 대시보드 (3)

추출한 Raw data를 바탕으로 차트를 제작하였다.

• 배치 먼저 구상해볼까 생각했지만 차트를 만들어서 늘어놓고 퍼즐 맞추는 식으로 끼워 맞추는 것이 조금 더 좋을 것 같았다.

• 지역별 숙소 분포는 지도와 원형차트로, 호스트 증가 추이는 시계열 차트로, 그 외 지표는 모두 막대차트로 제작하였다.

필터를 삽입하였다.

• 기간필터를 우선적으로 넣고 지역, 건물 유형, 방 유형은 드롭다운으로, 요금, 평점은 슬라이더로 넣었다.

• 그리고 측정 가능 기간과 기간 측정 기준을 명시해두었다.

차트 색상을 설정하였다.

• 이번에도 역시 배경이 어두운 색이니 너무 어두운 색상은 피하고, 구분이 명확한 색상이면서 색조합이 보기에 불편하지 않은 색상들로 설정하였다.

대시보드의 사이즈와 차트 배치를 결정하였다.

• 이번에도 저번 프로젝트와 마찬가지로 16:9 비율로 대시보드를 제작하였다.

• 스코어 카드를 어디에 배치할까 고민하였다.

  • 저번과 마찬가지로 좌측 상단에 배치한다면 너무 똑같은 느낌이 될 것이다.

  • 스코어카드를 대시보드 정중앙에 배치하고 나머지 차트로 그 주위를 감싸는 배치도 괜찮을 것 같아서 해당 배치로 결정하였다.

• 최상단에 작게 공간을 비우고 Airbnb의 로고와 필터를 배치하였다.

• 상단부에는 호스트 증가 추이와 숙소 분포를 배치하였다.

• 중단부에는 중앙에 스코어 카드를, 그 양 옆으로 지역별 평점과 평균 요금 차트를 배치하였다.

• 하단부에는 저번과 마찬가지로 Raw Data 테이블을 배치하였다.

Query를 수정하였다.

• 건물 유형의 데이터 중 NULL 값이 존재해서 범례가 NULL로 표기되는 부분이 존재하였다.

• 또한 평점 상위 TOP 1000, BOTTOM 1000을 기준으로 차트를 추가하면 좋을 것 같아서 해당 부분을 추가하여 Query를 수정하였다.
  다만 BOTTOM 1000은 평점이 NULL인 데이터가 1위로 책정되는 것을 방지하고자 따로 Query를 작성하여 NULL값을 제거하였다.

CREATE OR REPLACE TABLE `vaulted-cogency-295111.practice.airbnb_ny_dashboard` AS
SELECT DISTINCT
  Host_Id,
  Host_Since,
  Name,
  Neighbourhood_,
  CASE WHEN Property_Type IS NULL THEN 'Unknown'
  ElSE Property_Type END AS Property_Type,
  Review_Scores_Rating__bin_,
  Room_Type,
  Beds,
  Number_of_Records,
  Number_Of_Reviews,
  Price,
  Review_Scores_Rating,
  Zipcode,
  RANK() OVER(ORDER BY Review_Scores_Rating DESC) AS top_rank
FROM
  `untechbox-sql.airbnb.airbnb_ny`

CREATE OR REPLACE TABLE `vaulted-cogency-295111.practice.airbnb_ny_dashboard_bottom` AS
SELECT
  Host_Id,
  Host_Since,
  Name,
  Neighbourhood_,
  CASE WHEN Property_Type IS NULL THEN 'Unknown'
  ElSE Property_Type END AS Property_Type,
  Review_Scores_Rating__bin_,
  Room_Type,
  Beds,
  Number_of_Records,
  Number_Of_Reviews,
  Price,
  Review_Scores_Rating,
  Zipcode,
  RANK() OVER(ORDER BY Review_Scores_Rating) AS bottom_rank
FROM
  `untechbox-sql.airbnb.airbnb_ny`
WHERE 
  Review_Scores_Rating IS NOT NULL

대시보드 사이즈와 차트 배치를 수정하였다.

• TOP, BOTTOM 1000의 차트를 추가하기 위해서 대시보드의 높이를 늘릴 필요가 있었다.

  • 어차피 높여야 하기에 차트간의 간격을 여유있게 확보하려고 1600*2200 사이즈로 수정하였다.

• 또한 대시보드의 높이가 늘어나면서 스코어 카드가 대시보드의 정중앙이 아닌 어중간한 위치에 배치되었다.

  • 따라서 스코어카드를 중단이 아닌 상단의 중앙에 배치하였다.

• 새롭게 추가한 TOP, BOTTOM 1000의 차트는 최하단의 Raw data 테이블 상단에 배치하였다.