시각화 관련

d3.js

• Observable (opens new window): 최근 (2018년 1월) 릴리즈된 d3용 노트북 서비스 👍
• D3 blocks (opens new window)
• D3 Discovery (opens new window): d3 관련 페이지를 잘 모아놨다.
• The Big List of D3.js Examples (opens new window): 2000여개의 링크를 모아두었다. 깨진 링크가 많지만, 그래도 훑어보기에 유용하다.
• d3.js 책 속 추천목록
  • DataWrapper (opens new window): 최신브라우저에선 인터렉티브, 오래된 브라우저엔 정적 이미지로 표시한다. 저널리스트를 위해서 설계된 서비스.
  • dc.js (opens new window): crossfilter를 이용한 개량된 버전인데, 물건이다.
  • billboard.js (opens new window): naver 개발자가 만든 c3.js 개량버전. 2017년까지는 활발하게 개발했었다. D3.js v4를 지원한다.
• Vega (opens new window)
• Vega-lite (opens new window): d3.js의 원산지였던 IDL의 라이브러리
  • Vega-lite 예제: 월별 강수량 (opens new window): 아래 코드를 이용하여 테스트할 수 있다.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {"url": "https://api.taegon.kr/stations/108/?sy=2016&ey=2016"},
  "mark": "bar",
  "encoding": {
    "x": {"timeUnit": "month", "field": "Date", "type": "ordinal"},
    "y": {"aggregate": "sum", "field": "rainfall", "type": "quantitative"}
  }
}

• xkcd styled chart lib (opens new window)

인포그래픽스

• DataVisProject (opens new window) 👍
• 인포그래픽스.kr (opens new window)
• UW Interactive Data Lab (opens new window)
• 중앙일보 스페셜 콘텐츠 (opens new window): 꽤나 오래 전부터 만들어온 걸 최근에야 발견했다. 중앙일간지여서 그런지 퀄리티가 상당히 좋다. 주제에 따라 주장이 편향되어있는 점이 아쉽지만, 우리나라에서 인포그래픽스를 이용한 양질의 스토리텔링을 주기적으로 뽑아낸다는 점이 북마크한 이유이다.
• kepler.gl (opens new window) powered by Uber 👍 브라우저 상에 바로 자료를 올려서 맵을 만들 수 있고, 서버로 자료를 전송하지 않는다고 한다.
• VIS.GL (opens new window) powered by Uber: 우버가 공개한 시각화 관련 라이브러리
• UBER Moment (opens new window): 우버가 자사 자료를 이용해서 지역별 도착 시간을 지도정보로 제공해준다.
• OEC (The Observatory of Economic Complexity) (opens new window): 공개된 무역데이터를 이용해서 API를 제공하고 시각화를 하고 있다. 👍
• from Data to Viz (opens new window): 데이터 형태별로 그래프 선택법 같은 정보를 잘 정리해두었다. 처음 시작하기에 좋은 홈페이지.
• Flourish (opens new window): 2016년 전세계 해상물류 지도 (opens new window)를 그렸던 그룹 👍
• ResourceTrade.earth (opens new window): 전세계 무역을 잘 시각화한 사이트
• Data Visualization: A practical introduction (opens new window) by Kieran Healy
• How to Choose Colors for Data Visualizations (opens new window)
• The Data Visualisation Catalogue (opens new window)

공공데이터

• Data USA (opens new window)
• 데이지(DAISY) (opens new window) by newsjel.ly
• ODPia (opens new window)

데이터 저널리즘

• SBS 마부작침 (opens new window)
• KBS 데이터룸 (opens new window)
• ProPublica (opens new window)
• TheUpshot, The NY Times (opens new window)

자체 데이터 시각화 툴 보유

• inforgr.am (opens new window)
• Tableau Gallery (opens new window)

콘텐츠 자체제작 및 아카이빙

• Flowingdata (opens new window)
• visualising data (opens new window) 👍
• News Jelly (opens new window)

파이썬 라이브러리

• seaborn (opens new window): R의 ggplot2 수준으로 고퀄 그래프 제공
• Bokeh (opens new window): 인터렉션 그래프 기능 제공
• Python Graph Gallery (opens new window): 파이썬 그래프를 형태별로 예시 제공. 카테고리가 잘 나누어져 있어서, 처음 시작하기에 좋은 페이지이다. 대부분 seaborn이나, matplotlib도 있음.
• Altair (opens new window)

Markdown

• Draw Diagrams With Markdown (opens new window)

ArcGIS Online

• ArcGIS.com (opens new window){:target="_blank"}
• ArcGIS Story Map Gallery (opens new window){:target="_blank"}
• Story Map 1. A Food Matters supplement by IonE (opens new window){:target="_blank"}
• Story Map 2. Mapping Incomes (opens new window){:target="_blank"}
• Story Map 3. From Shore to Sea: Vessel Traffic in the Salish Sea (opens new window){:target="_blank"}

지도

• Creating Leaflet Tiles from Open Data using PostGIS and QGIS (opens new window)
• Create your own map with TileMill and Leaflet (opens new window)
• github.com/mapbox/mbutil (opens new window)
• github.com/phawthorne/online-map-demo (opens new window)
  • demo
• 모두의 지도 (opens new window): 확대 축소시 POI 갯수를 효과적으로 보여준다.

좋은 예제

• Seeing Theory (opens new window){:target="_blank"}
• D3 Graph Theory (opens new window){:target="_blank"}
• 정보는 아름답다 (opens new window): 책으로 발간되었으며, 다양한 inforgraphics를 제공한다.
  • 프로그램별 코드 라인수 (opens new window)
• 월드컵 시간대별 골 (opens new window)
• R2D3 (opens new window): D3로 머신러닝을 설명하는 페이지였는데, 최근에 파트2가 추가되었다. 스토리텔링이 좋다.
• BILLIONS OF BIRDS MIGRATE. WHERE DO THEY GO? (opens new window): 네셔날지오그래픽의 2018년 3월 기사
• How to learn D3.js (opens new window): D3를 잘 정리해두었다. 책을 사볼까 싶은 생각이 든다.
• Fundamentals of Data Visualization (opens new window): 무료로 공개된 자료인데, 아주 훌륭하게 예제가 정리되었다.
• Road to Visualization Expert (keggle) (opens new window)
• Interactive Viz (1) - UFC with Altair (keggle) (opens new window)
• Coronavirus tracked: the latest figures as the pandemic spreads (opens new window): 국가별 COVID-19 확진자 수를 로그스케일로 그려서 비교하고 있다.
• Epidemic Calculator (opens new window): SEIR (Susceptible - Exposed - Infectious - Recovered) 모델을 이용하여 인터렉티브한 감염병 확산수준을 보여주고 있다.
• Why outbreaks like coronavirus spread exponentially, and how to “flatten the curve” (opens new window): 간단한 ABM로 사회적 거리두기 혹은 자가격리의 효과를 시각화하여 보여주고 있다.
• economist: reimaginethegame (opens new window): 축구경기과정에서 관중함성을 시각화한 예시
  • Valentina D'Efilippo (opens new window): 위 웹사이트의 제작자.
• GISTEMP Climate Spiral (opens new window): 기온을 나선형으로 시각화. 팀프로젝트용으로 사용할 수 있겠다.

폰트

폰트 파일 참조

• 비선형 계획 문제의 쌍대정리 예제 (opens new window): 노트북의 폰트를 잘 써서, 책처럼 잘 정리가 된 예. 특히 붉은 색으로 헤드를 쓴, "예제 1", "참고문헌" 등은 매우 인상적이다.

%%html
<link href='https://fonts.googleapis.com/earlyaccess/notosanskr.css' rel='stylesheet' type='text/css'>
<!--https://github.com/kattergil/NotoSerifKR-Web/stargazers-->
<link href='https://cdn.rawgit.com/kattergil/NotoSerifKR-Web/5e08423b/stylesheet/NotoSerif-Web.css' rel='stylesheet' type='text/css'>
<!--https://github.com/Joungkyun/font-d2coding-->
<link href="http://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css" rel="stylesheet" type="text/css">
<style>
    h1 { font-family: 'Noto Sans KR' !important; color:#348ABD !important;   }
    h2 { font-family: 'Noto Sans KR' !important; color:#467821 !important;   }
    h3 { font-family: 'Noto Sans KR' !important; color:#A60628 !important;   }
    h4 { font-family: 'Noto Sans KR' !important; color:#7A68A6 !important;   }

    p:not(.navbar-text) { font-family: 'Noto Serif KR', 'Nanum Myeongjo'; font-size: 12pt; line-height: 200%;  text-indent: 10px; }
    li:not(.dropdown):not(.p-TabBar-tab):not(.p-MenuBar-item):not(.jp-DirListing-item):not(.p-CommandPalette-header):not(.p-CommandPalette-item):not(.jp-RunningSessions-item):not(.p-Menu-item)
            { font-family: 'Noto Serif KR', 'Nanum Myeongjo'; font-size: 12pt; line-height: 200%; }
    table  { font-family: 'Noto Sans KR' !important;  font-size: 11pt !important; }
    li > p  { text-indent: 0px; }
    li > ul { margin-top: 0px !important; }
    sup { font-family: 'Noto Sans KR'; font-size: 9pt; }
    code, pre  { font-family: D2Coding, 'D2 coding' !important; font-size: 12pt !important; line-height: 130% !important;}
    .code-body { font-family: D2Coding, 'D2 coding' !important; font-size: 12pt !important;}
    .ns        { font-family: 'Noto Sans KR'; font-size: 15pt;}
    .summary   {
                   font-family: 'Georgia'; font-size: 12pt; line-height: 200%;
                   border-left:3px solid #D55E00;
                   padding-left:20px;
                   margin-top:10px;
                   margin-left:15px;
               }
    .green { color:#467821 !important; }
    .comment { font-family: 'Noto Sans KR'; font-size: 10pt; }
</style>

블로그/사이트

• MIT 4.032 / 4.033 Design Studio: Information and Visualization Projects (opens new window)
• Irene de la Torre Arenas (opens new window)
• https://haleypark.design/4_032_final_project/ (opens new window)
  • 이준행님이 팔로우하는 2명 중 한명. MIT에서 수업과제로 만든 사이트 같은데, 훌륭하다.
• colorspace: A Toolbox for Manipulating and Assessing Colors and Palettes (opens new window)
  • Achim Zeileis (opens new window)
• Diverging Color Maps for Scientific Visualization (Expanded) (opens new window)
  • Kenneth Moreland (opens new window)
• Fundamentals of Data Visualization (opens new window)
  • github.com/clauswilke/dataviz (opens new window)
• Data Visualization Process에서 생기는 여러가지 문제점 (opens new window)
• Awesome Visualization with Titanic Dataset (opens new window)
• The Ultimate Python Seaborn Tutorial: Gotta Catch ‘Em All (opens new window)
• Jason Davies (opens new window): 개인 블로그. d3로 시각화 예제를 모아두었다.
• How To Think Visually Using Visual Analogies – Infographic (opens new window)
• 색의 속성에 대한 단어들 (opens new window)

노트북 (연습예제)

• 정부혁신1번가 - 정부혁신 홈페이지 분석 (opens new window): 간단하게 seaborn를 이용한 그래프와 워드 클라우드를 사용하고 있다.

Art

• 일본 국립과학박물관, 내부를 3D/VR로 공개 (opens new window)
• A one-take journey through Russia’s iconic Hermitage museum (opens new window) by Apple
• Google Arts & Culture (opens new window)
• Google Arts & Culture - Zoom Views (opens new window): 명화를 초고화질 이미지로 볼 수 있다.
• 하버드대 와이드너 도서관, 내부를 3D/VR로 공개 (opens new window)
• 이집트 가상투어 : 파라오 람세스 6세의 무덤과 피라미드들 (opens new window)
• 루브르 박물관, 소장작품 48만개를 온라인으로 공개 (opens new window)

color palette

• Scientific Journal and Sci-Fi Themed Color Palettes for ggplot2 (opens new window)
• COLORBREWER 2.0 (opens new window)
• colors (opens new window)
• Carbon Design System (opens new window)
• Chroma.js Color Palette Helper (opens new window)
• Leonardo Color (opens new window): Adobe의 컨트라스트 기반 컬러 생성기 오픈소스
• Adobe Color (opens new window)
• paletton (opens new window)
• HSLuv (opens new window)
• carto (opens new window): 기존 팔레트가 맵에 바로 적용되어서 비교하기 쉽다.
• PALETTE GENERATOR (opens new window)
• Happy Hues (opens new window)
• BrandColors (opens new window)
• copaso (opens new window)
• colormind (opens new window)
• Colordot (opens new window)
• Colourcode (opens new window)
• ColorBox (opens new window) by Lyft Design
• Palettte App (opens new window)
• VIZ PALETTE (opens new window) By: Elijah Meeks & Susie Lu
• Color interpolations (opens new window): Trying out different approaches of interpolation using d3 and chroma.js
• Color Tools For Designers 2019 (opens new window)
• encycolorpedia (opens new window): 비슷한 색상 찾기
• OC: Open Color (opens new window)
• Visualizing Every Pantone Color of the Year (opens new window)
• Color Use Guidelines for Mapping and Visualization (opens new window): 2가지 지표를 혼용할 때 사용할 수 있는 색상 매트릭스도 언급
• QUALITATIVE COLOUR SCHEMES (opens new window)
• Bivariate Choropleth Color Generator (opens new window): 두가지 지표를 이용해서 지도에 색을 입힐 때 색 선정.
  • Benjamin Brooke (opens new window)
• colorcet (opens new window): Collection of perceptually accurate colormaps
• HTML Color Picker (opens new window): 흰색/검은색 글자를 두고 배경색을 선택할 때 유용하다.
• Material color tool (opens new window)
• Beautiful colormaps for oceanography: cmocean (opens new window)
• Lightness of Matplotlib colormaps (opens new window)
• 위 링크와 같은 그림을 그려주고, color wheel에서 팔레트를 고를 수 있는 웹사이트가 있었는데, 도저히 찾을 수가 없다. 이틀 밤을 새서 찾았는데, 못 찾았다. 덕분에 이 섹션 리스트가 길어졌다.

Observable

• Graph layout and rendering with Dagre-D3 (opens new window): 데이터를 자신의 다른 노트북을 임포트해서 쓰는 것이 인상적이다.
• All the passes ⚽️ (opens new window): interactive example.

Examples

• River runner (opens new window)
• Mesmerizing Commute Maps Reveal We All Live in Mega-Regions, Not Cities (opens new window)