2 of 34

변화와 확산을 통해 빠르게 퍼져나가는

세상의 정보를

진실되게 디자인하자

인디고

INformation + DEsign + GO

3 of 34

데이터 분석 디자인 전문기업

2021년 세워진 스타트업 신생회사

4 of 34

넷플렉스 전략대시보드 꾸준히 개발진행중에서

여러 논의 끝에 주제 변경

Intro 처음 주제

5 of 34

넷플릭스 데이터를 분석하여 소비자에게 장르추천을 해주고

투자자에게는 앞으로 흥할 장르를 예측해주는 전략 대시보드

기획 및 구현 목표

6 of 34

정보+디자인 적인 측면에서 넷플렉스 전략 대시보드는

사기업 특성상 공개 데이터셋이 현저하게 부족

주제 변경 이유

7 of 34

공공데이터를 사용하면서 사업의 미래 예측의 도움이 되는

분석 대시보드는 무엇이 있을까?

연장선

8 of 34

분석 대시보드구성

서울시 상권지구

9 of 34

사용데이터

11 of 34

선정 배경

코로나 19전후의 상권상황에 대해 사람들이

쉽게 이해할 수 있는 대시 보드의 필요성을 느낌

데이터

서울특별시 공공데이터 우리마을 가게 상권분석 데이터(종류별)

위 데이터 바탕으로 2021년도 4월까지의 데이터 셋 중

2020년 하반기까지 이용하여 진행하기로 결정

의의

지역구별 상권상황을 쉽게 확인할 수 있어,

어느 곳에 창업&투자를 해야할 지 전체적으로 파악할 수 있음

배경과 기대효과

12 of 34

전체적 제공 프로세스

: 사업을 시작하려는 사람

13 of 34

사용데이터 기획

상권지역변화지표 (상권축소, 상권정체, 상권활발, 상권확장)

지역 상권 현황을 파악하기 위해

상권구별 상존 인구수

그 지역에 실제 사람이 얼마나 있는지 : 상권활발도 파악

연차별 생존율

상점이 해당 지역에서 오래 버티는지 : 경쟁 환경

환산 임대료

그 지역 임대가 얼마나 나오는지 : 주변 분석

14 of 34

대시보드 초안 데이터 디자인 방향

15 of 34

상권 지역 변화 지표 - 색깔 스케일 조정 / Scatter Plot과 같이 설계

17 of 34

색상을 통일

18 of 34

상권분석 시각화 대시보드

HTML + Javascript + D3.js + 로컬 웹서버

사용 툴

서울시 구별 상존인구수

막대차트로

구별 상존인구수

Hover 시 인구수 확인

연

동

사용 d3.js 라이브러리

지오 맵핑으로

구별 활발도 구현

분기별

환산임대료

서울시 구별 상권지역

변화지표

5년 상권

연차별

생존률

분기별 라벨링

막대차트로 구현

선그래프

19 of 34

구현데모영상

20 of 34

1.상존인구

마우스 호버시

사용기법: 막대그래프+마우스를 올리면 상세 내용 설명

인구가 많은 순으로 나열

인구가 많다는 것 = 가게에 올 손님이 많다는 것

나열하는 막대그래프의 효과 : 쉽게 다른 지역구와 비교 가능

구현그래프분석

21 of 34

지역구별로 상권 변화를 나눠서 해당 지역의 상권상황을 시각화

지도 효과 : 해당 지역의 위치를 보여줌으로서 쉽게 지도로 이해할 수 있고,

간단한 최소 색으로 라벨링 해 나타내 간단하게 상권지역정보를 제공할 수 있다.

구현그래프분석

2.상권 지역 변화지표

마우스 호버시

사용기법: 지도+마우스를 올리면 상세 내용 설명

22 of 34

상권현황 구별색과 통일하여

“해당 구역의 상권현황과 그 구역 생존률”을 같이 볼 수 있다

선그래프 효과 : 생존률을 같이 나열했기 때문에 어느 구역

생존률이 높은지 확인이 가능하다.

+ 단순히 생존률이 높다고 상권이 발전하는 것이 아니라는 것도 보여준다.

구현그래프분석

마우스 호버시

3. 연차별 생존률

사용기법: 선그래프+마우스올리면 상세 내용 확인 가능

23 of 34

막대그래프 효과 : 분기별로 환산임대료가 어떻게 변화했는지

버튼을 누르면서 확인할 수 있다.

분기별로 환산 임대료가 크게 달라지지 않았다

구현그래프분석

사용기법: 막대그래프+라벨링으로 분기별 금액 파악가능

버튼 클릭시

4. 분기별 환산 임대료

24 of 34

코드 분석 svg1

데이터 출력 및 툴팁 적용

오브젝트 생성 및 데이터 소팅

25 of 34

코드 분석 svg1 툴팁막대그래프

툴팁생성정의

그래프생성 애니매이션

Y축 생성

X축 생성

라인 끝에 달린 호버시

활성화 되는 원

26 of 34

코드 분석 svg2 구별그래프

지오 맵 기본 색 정의 및 생성

Rect 생성

27 of 34

코드 분석 svg2

마우스 오버시 색정의

주석 생성

주석 세팅

28 of 34

코드 분석 svg3 년간데이터

데이터 라인 ‘종로’ 생성

X축, Y축 생성

29 of 34

코드 분석 svg4 분기별데이터

X축, Y축 생성

버튼 클릭시 데이터 출력

30 of 34

하면서 맞닿은 한계

코드별 연동

대시보드 연동

코드 디자인

시간분배

31 of 34

향후 이어가고 싶은 과제

지역구별

더 많은 정보 수용 가능한

대시보드

지역의

모든 정보가

연동 되는

환경 구축

디자인적으로

가시성 높은

코드 연구

1 of 34

2 of 34

3 of 34

4 of 34

5 of 34

6 of 34

7 of 34

8 of 34

9 of 34

10 of 34

11 of 34

12 of 34

13 of 34

14 of 34

15 of 34

16 of 34

17 of 34

18 of 34

19 of 34

20 of 34

21 of 34

22 of 34

23 of 34

24 of 34

25 of 34

26 of 34

27 of 34

28 of 34

29 of 34

30 of 34

31 of 34

32 of 34

33 of 34

34 of 34