데이터 시각화 <1-10>
~레퍼런스 정리~
001. 우울증 보고서 - 뉴스젤리
http://project.newsjel.ly/depressed/
1) Scrolling
웹 페이지 간 이동 없이 하나의 페이지 안에서 콘텐츠를 소비할 수 있다. 주로 스토리텔링을 목적으로 하는 콘텐츠에서 자주 사용하는 포맷.
2) Parallex Scrolling
패럴랙스 스크롤링은 마치 2차원의 화면인 것처럼 느끼게 해서 '깊이'를 느낄 수 있게 만든다.
Fast Company의 Eric Jaffe는 배경과 전경 이미지가 다른 속도로 움직일 때 사용자가 애니메이션 같은 느낌, 혹은 고조된 인터랙티브 경험을 할 수 있다고 했다.
RATATATTOO(http://www.ratatattoo.it/): 제임스 본드 기사랑 비슷한 느낌. 꼴라주? 독신으로 살겠다...?
장점: Purdue university 패럴랙스 스크롤링 스터디에 참여한 학생에 의하면 스토리텔링 패러다임의 변화가 생겼고, 방문자 체류시간이 상승했다고.
단점: 한 페이지 패럴랙스 스크롤링 페이지는 SEO-friendly하지 않다.(->꼭 한 페이지여야 할 필요 없음)유저가 헤맬 수 있다. 로딩 시간. 모바일 친화적이지 않음.
3) Navigation bar
분량이 꽤 길어서 4가지 파트로 분류했다. 좌측에 조그마한 원으로 어디 즈음 와있는지 표시해주었음.
한 파트 당 원 하나인데, 각 파트가 좀 긴 감이 있어서 동그라미가 너무 가만히 있으니까 지루한 감이 있었다. 차라리 (셀레브처럼)진행 바를 네 개로 분리해서 넣었으면 좋았을 것 같음.
002. 머신러닝 개요
http://www.r2d3.us/visual-intro-to-machine-learning-part-1/
1) 개인적으로 만들고 싶었던 콘텐츠인데 영어라 그런가(아니야!!!ㅠ)이해하기 좀 어렵네...
2) Adding nuance -> Drawing boundaries
Adding nuance에서 봤던 산포도가 그대로 유지되고, 그 위에 boundaries가 표현되어서 연결성.
3) And now, Machine learning -> Finding better boundaries
텍스트가 좌측 -> 우측으로 바뀌었다.
따로 파트 소제목 없이 텍스트 위치만으로 구분할 수 있을 듯. 다만 네비 바가 있었다면 덜 헷갈렸을 것 같다.
003. 1,000 times gold - WP
https://www.washingtonpost.com/graphics/sports/olympics/the-1000-medals-of-the-united-states/
1) 금메달 1,000개를 주제로 만들어진 뉴스
제일 처음에 1,000개의 금메달(금색 동그라미)이 표시된다.
스크롤을 하면 분야별, 성별, 연도별로 원들이 흩어져서 보기 쉽게 구별된다.
2) 추가 정보
각각 종류별에서 특이 사항에 컬러 테두리를 넣어서 마우스 오버하면 추가 정보를 확인할 수 있게 했다.
다만 추가 정보가 조금 빈약한 느낌이 있다. 링크를 넣어두긴 했는데 좌측에 깔지 말고 마우스 오버하면 뜨는 창에 더 많은 정보를 넣었더라면 좋았을 듯.
3) 환공포증 있는 사람은 어떻게 보지...
004. How the Recession Reshaped the Economy, in 255 Charts - NYT
1) 경제 대공황 때 산업별 직업 및 종사자 수가 어떻게 변했는지 보여주는 뉴스
오일 파워 최고!!!
네일 산업도 (갑자기)엄청나게 흥하는데 왜 그랬을까?
작은 사치가 흥했다는 표시 같은데, 플로리스트는 바닥을 친다.
꽃이 주로 선물용이라고 가정한다면... 연애하는 사람은 없고... 싱글 사치 최고!
2) Color
증감을 컬러로 확연히 구분되게 만들어서 보기 쉬웠다.
3) 마우스 오버 + 툴팁
역시나 마우스 오버를 하면 x축을 연도로 둔 그래프가 툴팁 형태로 나온다.
특이했던 건 그 위에 또 마우스를 올리면 숫자 정보까지 볼 수 있게 만든 점(빛공해 지도 볼 때 첨 봤는데 재미있는 요소인듯)
4) 스몰 멀티플즈
마지막에 산업 별로 스몰 멀티플즈 형식으로 요약, 보기 편했음
005. The Best and Worst Places to Grow Up: How Your Area Compares - NYT
1) 빈곤 가정의 양육비를 지역별로 비교한 뉴스
2) Color
지역을 색깔별로 구분해서 보기 편하다.
근데 -면 양육비 절감했다는 뜻 아닌가? 절감했는데 왜 빨간색이지...
3) Filter
지도 상단에 성별/소득분위별 필터링이 가능하도록 버튼을 만들어두었다.
4) 갑자기 화면 밑에 뜸. 요렇게 귀여운 구독 요청도 있나!
006. Ebola spreads slower, kills more than other diseases - WP
http://www.washingtonpost.com/wp-srv/special/health/how-ebola-spreads/
1) 전염병 감염률, 감염속도, 치사율 비교 뉴스
감염 속도를 어떻게 표현하나 했는데 위에 DAY바를 움직이면 네모네모가 주르륵 늘어난다. 신박!
2) 인포그래픽(?)
Chicken pox 감염자 수를 강조하기 위해! 두둥
007. Among the Oscar Contenders, a Host of Connections - NYT
1) 아카데미 수상자 네트워크
구글 퓨전 테이블이 네트워크 만들 때 쓰는 툴이라고 들었던 것 같은데, 써볼 날이 오려나...
저렇게 시각화하지 않았으면 누구는 누구랑, 그 누구는 또 다른 누구랑... 줄줄이 태그해놨을텐데 절레.
008부터는 information is beautiful awards 수상작
https://www.informationisbeautifulawards.com/awards/2017
008. The way you draw circles - Quartz
https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/
1) 사용하는 언어와 도형을 그리는 습관 사이의 상관관계(신기해!)
2) 인풋->아웃풋
직접 동그라미를 그리고, 그린 것들의 결과를 하단에서 보여준다.
NYT에서 발행했던 과잉진압 뉴스에서도 과잉진압 정도를 체크하고 바로 결과를 보여주는 게 인상적이었다.
009. The Rhythm of Food - GNL
1) 키워드 검색량 시각화
음식 키워드 검색을 시점별로 어떻게 하느냐?
2) 차트
보통은 꺾은선, 막대 그래프로 나타내는데 원형 그래프를 사용하고, x축(?)을 두 가지 사용했다. (연도별, 월별)
원래 쓰던 방식대로라면 따로따로 봤어야했는데 한 번에 보니 편하기도 하고, 신기하기도 하고.
010. Data Sketches(데이터 시각화 콘텐츠 제작 과정)
1) 설계부터 스케치, 작업 과정까지 다 들어있는 이것은 꿀링크!
두 명이서 한거라던데, 뉴스랩 커뮤니케이션할 때 참고할만한 자료가 될 듯.
콘텐츠가 꽤 되는데, 시간 남을 때 하나씩 봐야지.
2) 진행 과정
카드캡터체리가 제일 위에 있길래 클릭해봤다.
첫 주는 데이터 수집, 둘째 주는 스케치, 셋넷째 주는 코딩.
전문용어가 많아서 자세히 읽지는 못했다. 수학 용어가 많이 나왔다. 수학 공부해야지...
등장인물 관계도, 만화에서의 비중 등등을 다뤘다. 인물도 관계도 너무 복잡해서 누가 볼까 했는데 강철의 연금술사로 했으면 내가 봤을 것 같다.
