Skip to content

Notes on DV/IG

이곳은 다양한 데이터 시각화(data visualization, DV)와 인포그래픽(infographics, IG) 사례를 간단히 모아두는 곳입니다. 제가 주로 트위터(@akaiving)에 올린 글을 요약 정리할 예정입니다. 번호는 최근 순입니다. 현재 8월 이후에 올린 트윗들을 우선 정리 중이며 그 이전 트윗은 차차 추가할 예정입니다.

  1. [interactive, sound, HTML5] 지난 25년간 한국 신용등급 변화를 시각과 청각 정보로 결합 표현한 연합뉴스 미디어랩 사례 ― 데이터의 공감각 표현으로는 국내 언론 최초 시도. 그 배경도 별도로 상세히 기술. # 2011.11.29
  2. [interactive, differences, words, HTML5] 검색어를 입력하면 해당 단어가 구약·신약 성서와 코란에서 얼마나 언급되었는지 비교할 수 있게 만든 인터랙티브 데이터 시각화 사례. HTML5와 플래시 버전으로 각각 제작했다는 것도 주목할 만한 듯. # 2011.11.03
  3. [interactive, map, science] 950년에 알았던 우주와 2011년에 알고 있는 우주의 모습을 비교할 수 있는 인터랙티브 인포그래픽 # 2011.11.03
  4. [interactive, network, graph] 구글 플러스의 글들이 어떻게 퍼지는지 인터랙티브 그래프 구조로 시각화해서 보여주는 구글+ Ripples. 참고할 만한 Ripples 10선. # 2011.10.28
  5. [interactive, map, differences] 오늘 서울시장 보궐선거 개·득표 현황을 인터랙티브 지도와 함께 볼 수 있는 연합뉴스 미디어랩 사이트. 후보자별 구 단위 개·득표 현황을 보기 편함. # 2011.10.26
  6. [interactive, differences] 10·26 서울시장 보궐선거의 투표율을 2010년 지방선거, 지난 무상급식 투표와 비교한 ‘다음(Daum)’ 페이지. 인터랙티브 그래프를 사용, 이용자가 직접 비교하며 살펴볼 수 있는 데이터 시각화는 유희성 또한 제공하는 장점이 있음. # 2011.10.26
  7. [interactive, map, differences] 10·26 서울시장 보궐선거 실시간 투표율을 인터랙티브 지도를 통해 구 단위로 볼 수 있는 연합뉴스 미디어랩 사이트. 선거 관련 다른 정보도 함께 볼 수 있음. # 2011.10.26
  8. [interactive, timeline] 맥도날드 역사 인터랙티브 인포그래픽. 마치 파일 철을 뒤지는 느낌으로 맥도날드 역사를 볼 수 있음. # 2011.10.25
  9. [interactive, relationships, network] 현재 유럽 경제 위기 상황을 한눈에 파악할 수 있도록 제작한 NYT 인터랙티브 인포그래픽. 6가지 주제로 네트워크 형태 시각화를 했고, 유럽 위기가 미국과 어떤 연관이 있는지도 설명함. # 2011.10.24
  10. [lnteractive, map, proportions] 헤리티지 재단에서 만든 중국의 해외 투자 현황 인터랙티브 데이터 지도. 상세한 내용을 담은 데이터 내려받기도 제공. 중국이 참 무서운 나라라는 걸 다시 한번 실감. # 2011.10.19
  11. [differences] 투표자들은 키 큰 사람이 더 좋은 리더십을 가지고 있다고 생각한다는 가디언 기사와 그에 연동한 데이터 시각화. 이렇게 실제 사진으로 양적 관계를 표현하는 건 위험하나, 이 경우 직관적으로 비교할 수 있다는 장점은 있음. # 2011.10.19
  12. [language, tool] 고품질 그래프, 차트, 다이어그램 등을 작성할 수 있는 그래픽 스크립트 언어 Graphics Layout Engine(GLE). PGF/tikZ에 비해 구문이 더 직관적이고 간단한 GUI 환경도 제공. 예제 모음 # 2011.10.17
  13. [wordpress, math formulas/graphics, tool] 워드프레스용 LaTeX 플러그인 QuickLaTeX ― LaTeX 구문을 훌륭히 지원함과 동시에 tikZ/PGF 패키지까지 지원, 워드프레스 본문에 훌륭한 그래픽을 삽입할 수 있음. # 2011.10.17 또한, QuickLaTeX 플러그인을 워드프레스 없이 웹상에서 사용할 수 있는 곳. 다른 도구 없이 웹 페이지에 수식·공식을 삽입할 때 이용하면 좋을 듯. # 2011.10.17
  14. [data, open data] 아마존(AWS)에 올려진 공개 데이터 세트. 가짓수는 많지 않지만, 분야별로 수십GB에서 수TB까지 공개 데이터가 정리되어 있음. (빅) 데이터 분석 연습이나 테스트를 위해 사용해도 좋을 듯. # 2011.10.16
  15. [network, basic] 가독성을 높이는 데이터 시각화 1: 네트워크와 베이글 ― 내년 국회의원 선거 출마를 앞둔 백만표 씨가 오후 간식으로 먹은 베이글은 데이터 시각화와 어떤 관계가 있을까요? # 2011.10.15
  16. [tool, javascript, interactive] 인터렉티브 데이터 시각화를 할 수 있는 자바스크립트 라이브러리 d3.js의 구글 그룹스. d3.js에 대한 다양한 정보와 문제 해결 힌트를 얻을 수 있음. # 2011.10.11
  17. [scatter, time, patterns, differences] 노벨상 수여가 시작된 1901년부터 올해까지 부문별 수상 국가 현황을 한 눈에 볼 수 있는 ‘포브스’지의 데이터 시각화. 점, 선, 색 등 그래픽의 가장 기본적인 요소만으로 이야기를 충분히 전달하는 좋은 사례. 관련 기사 전체 보기 # 2011.10.10
  18. [motion] COLUMN FIVE에서 제작한 ‘데이터 시각화의 힘‘ 모션 그래픽. 1분 40초의 짧은 시간 동안 데이터 시각화가 어떤 가치를 지녔는지 깔끔하게 보여줌. # 2011.10.07
  19. [text, mosaic] #thankyousteve 태그가 붙은 트윗 4.5 시간 분량을 모아 스티브 잡스의 추모 사진을 만든 @miguelrios(트위터 정보디자인 담당)의 데이터 시각화. # 2011.10.07.
  20. [timeline] 스티브 잡스 관련 사진을 배경으로 사용, 그의 일대기를 타임라인 형식으로 만든 WSJ의 인포그래픽. # 2011.10.06
  21. [timeline] 2009년 1월 22일 처음 만들어졌던, 애플의 굵직한 역사를 담은 NYT의 인포그래픽. 오늘, 애플 설립 내용 다음으로 가장 굵직한 애플의 역사 한 장면을 추가했구나. # 2011.10.06
  22. [line, patterns, science] 이번에 사이언스에 실린, 트위터 메시지 분석을 통한 감정 리듬 연구 결과 http://t.co/xkhOhDe0 를 보도한 두 신문의 데이터 시각화 비교. NYT vs. WP # 2011.09.30.
  23. [differences] 세계 몇몇 나라에는 커피의 날이 있습니다. 9월 12일(코스타리카), 9월 19일(아일랜드), 9월 29일(미국), 10월 1일(일본) 등. 미국의 커피의 날 맞이 인포그래픽 한 편. # 2011.09.30
  24. [differences] “정크 푸드가 정말로 쌀까?”라는 기사에 실린 NYT의 인포그래픽. 우리나라도 요즘 햄버거 세트 값이 상당히 비싼 편이죠. 곰곰이 생각해 볼 문제. # 2011.09.26
  25. [differences] 뉴스위크 이번 호(9.26)에 실린 여성이 살기 좋은 나라 인포그래픽 중 일부. 1위는 아이슬란드. 다음 쪽엔 20위까지 나와 있는데, 아시아 국가 중에선 필리핀이 유일. # 2011.09.25
  26. [design, programming, language] (그래픽) 디자인을 하는 사람이 왜 프로그래밍 언어를 다뤄야 할까요? 이 글을 통해 그 이유를 생각해 볼 수 있습니다. 데이터 시각화 작업을 염두에 두는 분이라면 꼭 읽어보시기를 권해 드립니다. # 2011.09.23
  27. [patterns, mosaic, interactive] Wallpaper* 창간호부터 15년을 이어오는 동안, 의미 있는 인물이라고 생각되는 150인을 대상으로 만든 인터랙티브 인포그래픽. # 2011.09.21
  28. [diffrences] 세상에서 가장 큰 사진 창고는 어디일까요? 바로 페이스북입니다. 페이스북과 플리커, 인스타그램, 그리고 미 의회 도서관을 비교한 간단한 인포그래픽을 통해 그 차이를 살펴보세요. # 2011.09.17
  29. [differences, patters, interative] 분야별 미국의 디자인 관련 인물 50명을 도시한 인터랙티브 인포그래픽. Thinker와 maker로 분류한 것이 재밌네요. # 2011.09.15 Tufte를 설명하는 문구에 ‘godfather’, ‘bible’과 같은 단어를 썼는데, 정말 아깝지 않은 표현인 듯합니다. # 2011.09.15
  30. [text, patterns, differences] 911에 대한 2001년 9월 11일 당시와 현재의 감정을 한 단어로 표현, 어떤 차이가 있는지 보여주는 인포그래픽. 연령, 성별, 지역을 선택해 볼 수 있으며, 직접 이용자 자신도 단어를 추가할 수 있음. # 2011.09.11
  31. [patterns, timeline, interative] 911 10주년 USA Today의 인터랙티브 인포그래픽. 911 이후 십 년 동안 정치, 경제, 사회 등이 어떤 영향을 받았는지 살필 수 있음. 페이스북과 연동, 자신과 911의 관계도 볼 수 있게 함. # 2011.09.11
  32. [proportions, diffrences] ‘이코노미스트’지 9월 10일 자에 실린 세계 실업률과 고용률 현황 인포그래픽. 美 국방성의 고용 인원 규모도 대단하고, 맥도날드의 고용 인원 규모 역시 생각보다 크네요. # 2011.09.09
  33. [timeline, multimedia, story] 9·11사태 당일, 네 개 항공기의 교신 내용을 오디오와 결합해 구성한 NYT의 인터랙티브 인포그래픽. 교신 오디오 – 스크립트 – 항로 궤적으로 효과적으로 융합한 구성이 돋보임. # 2011.09.08
  34. [statistics, differences] 스포츠 통계 자료를 바탕으로 인포그래픽을 만드는 전문 업체 infojocks. 포스터 판매 메뉴에 가면 infojocks에서 만든인포그래픽을 참고할 수 있습니다. # 2011.09.07
  35. [big data] 구글의 데이터 처리 능력과 데이터 시각화 기술을 잘 결합해서 어떻게 사용할 수 있는지 보여주는 서비스, google correlate. 자세한 설명(pdf) # 2011.09.05
  36. [interactive, timeline, differences] 크롬 3주년을 기념하는 웹의 주요 기술 및 브라우저 진화 인터랙티브 인포그래픽. 일전에 소개한 웹 브라우저 진화 인포그래픽과 비교해서 보면 정보 조직 방법의 차이를 알 수 있음. # 2011.09.02
  37. [timeline, differences, line, R] 마이클 잭슨의 빌보드 차트 순위와 다른 뮤지션과의 비교 인포그래픽. 당시 NYT에서 이 인포그래픽을 잭슨 사망 후 몇 시간에 내에 만들 수 있던 비법은 바로 R을 사용한 것이었다고 함. # 2011.09.01
  38. [python, library, programming] 과학 계산·데이터 시각화에 필요한 Numpy, Scipy, Matplotlib 등의 파이썬 라이브러리를 한 번에 설치하게 도와주는 쉘 스크립트(Mac OS X 용) # 2011.09.01
  39. [service] 링크드인(LinkedIn)의 데이터를 이용, 자신의 프로필을 인포그래픽 형태로 변환해 주는 서비스 Vizualize.me와 활용 . #
  40. [text, stroy] 스티브 잡스의 십계명. 잡스의 머리에서 나온 모습으로 표현한 인포그래픽이 재밌습니다. # 2011.08.31
  41. [sotry, differences, proportios] 소셜 미디어로 살펴본 미국의 정체성 인포그래픽. 효율적인 그리드 구조, 간결한 색의 사용, 잘 구성된 이야기 등이 눈에 띕니다. # 2011.08.29
  42. [line, patterns, ads] 보트가 그려놓은 포말을 월간 보트 판매 수익 데이터로 시각화한 IBM 기업 이미지 광고 # 2011.08.28
  43. [bar, list, timeline, story] 허리케인 아이린 영향권에 있는 도시들의 현재 풍속과 최근 한 시간 강우량을 보여주는 NYT의 인터랙티브 인포그래픽. 최근 48시간 사이의 풍속과 강우량 그래프도 함께 보여줍니다. # 2011.08.28
  44. [story, motion] 작은 공룡 모형을 이용해 만든 귀여운 공룡 동영상 인포그래픽. 역시 재료보단 콘텐츠를 어떻게 표현하느냐의 문제가 중요하단 걸 다시 한번 느낍니다. 2011.08.27
  45. [interactive, map, timeline] 미국 북동부 해안을 따라 북상 중인 허리케인 아이린(Irene)의 경로 추적 지도. 경로뿐만 아니라 인공위성 사진, 강도, 풍속 등을 유기적으로 조합한 인터랙티브 인포그래픽. NYT 제작. # 2011.08.27
  46. [interactive, map, timeline] 2005년 ‘카트리나’부터 현재의 ‘아이린’까지 허리케인의 경로 정보를 표현한 WSJ의 인터팩티브 인포그래픽. # 2011.08.27
  47. [proportions] 삼부작으로 된 영화들의 만족도를 나타낸 인포그래픽. 다른 작품들은 대체로 수긍 가능한데, ‘매트릭스’에 대한 평은 좀 의아하네요. 개인 취향으로만 구성한 것이라 그런 듯. # 2011.8.26
  48. [list] ‘뉴스위크’지 이번 호(8/22)에 실린 오바마 대통령 독서 목록 인포그래픽. # 2011.08.20
  49. [report, pattern] 미국인들의 활동별 하루 중 사용 시간 WSJ 인포그래픽의 자료인 미국 노동통계국(BLS) 보고서. 인포그래픽보다 더 상세한 결과가 담겨 있음. 2003년 자료부터 제공. # 2011.08.20
  50. [diffrences] 구글과 모토로라 비교 인포그래픽 # 2011.08.17
  51. [diffrences, proportions, flowchart, interactive] 美 에너지정보청(EIA) 데이터를 이용, 미국의 에너지 자원별 소비와 손실량을 표현한 인터랙티브 인포그래픽. 기반이 된 LLNL의 플로우 차트와 비교해 보는 것도 좋을 듯. # 2011.08.17
  52. [process] S’mores 좋아하시는 분들이 재밌게 보실 인포그래픽. 가열 시간에 따른 마시멜로 굽기 정도를 표현한 그래프가 가장 눈에 들어옵니다. # 2011.08.16
  53. [report, politics] 2025년까지 미국 내 판매 자동차들의 연비를 갤런당 54.5마일까지 높이겠다는 백악관의 새 연료절약표준 보고서(pdf). 인포그래픽을 이용, 전체 내용을 요약한 표지가 인상적. 전체 틀을 잡고 보고서 읽기 편리. # 2011.08.05
  54. [number, typography, story] 50번째 생일(8월 4일)을 맞이한 美 오바마 대통령. 그의 대한 여러 정보를 숫자로 표현한 뉴스위크의 인포그래픽. 숫자를 이용해 리듬감 있게 구성한 레이아웃, 절제된 색 사용 등이 눈에 띕니다. # 2011.08.04
  55. [timeline, flowchart] 미국 부채 한도 합의 이후의 과정을 설명한 NYT의 인터랙티브 인포그래픽. 첫 화면에 인터랙티브 형식으로 배치. # 2011.08.02
  56. [diffrences, patterns] 세계 각국의 로켓을 크기 순으로 정렬한 인포그래픽. 새턴 5호와 N1의 크기를 보니, 냉전 시대 우주 탐사에 대한 미국과 구소련의 경쟁 구도도 그려볼 수 있을 듯하네요. # 2011.08.02
  57. [timeline] 휴대전화 해킹 스캔들과 관련, 루퍼트 머독의 최측근인 레베카 브룩스를 다룬 ‘뉴스위크’ 7월 25일 자에 실린 인포그래픽. 두 쪽을 효율적으로 사용. # 2011.08.02
  58. [contest] 지난번에 소개했던 데이터 시각화 컨테스트의 결과가 발표되었네요. 같은 데이터를 두고 서로 다른 관점과 방법으로 표현한 시각화 결과를 비교해 볼 수 있습니다. # 2011.08.02
  59. [motion, ads] 데이터 시각화를 이용한 IBM의 프로모션 동영상. 일상의 여러 순간에서 나오는 데이터를 시각화한 영상이 멋집니다. ‘Code artistry’라는 표현이 공감됨. 오길비에서 기획. # 2011.08.01