awesomelist.md

Keyword

awesome list data visualization

상황 / 궁금증

• 2019.11.21 데이터에 맞는 시각화는 어떻게 해야할까? 데이터를 가설을 확인하기 위한 것 이상의 역할을 할 수 있을까? 시각화 하는 tool을 익히는 것말고 어떻게 여러 데이터 보는 프로젝트를 할 수 있을까?
• 2017년 컨트리뷰톤 음악분석 프로젝트에서 데이터시각화를 맡게 되면서 새롭게 시각화를 스터디했던 자료)를 정리 / NohYujeong님과 즐겁게 작업했다
  • 이 프로젝트를 하면서 목표를 향해 팀과 함께 협업하는 재미와 사이드프로젝트의 짜릿함을 배울 수 있어서 즐겁게 작업했다.
    • 같이 공부하는 재미를 깨달았고, 회사 끝나고 일주일에 세 번씩 만나면서도 즐겁게 프로젝트를 할 수 있었다. 프로젝트 진행 과정에서도 어떻게 조율하면서 구현해 낼 것인가(재미로 하는 프로젝트이다보니)를 고민하게 되었다. 이때 이후로 본격적으로 회사 외부에서도 스터디, 사이드프로젝트 작업 등 일을 벌리기 시작했다.
    • 이때 github에 정리하면서 프로젝트와 학습을 어떻게 결합시키면서 같이 병행할지, 학습 콘텐츠를 어떻게 찾고 정리하는지 의식하면서 작업을 하는 계기가 되었다.
    • 멘토분들이 비즈니스 관점에서 멘토링 해주고 부드럽게 큰 틀을 잡아주면서 가이드를 해주는 모습을 보고 많이 배웠다.

정리

• Visual Vocabulary- Finantial Times / 한글번역 by 널채움 /tableau version : There are so many ways to visualise data – how do we know which one to pick?
• Data Visualisation Resources by The Data Visualisation Catalogue
• seeing data: Seeing Data is a group of research projects which aim to understand the place of data visualisations (like those in the examples below) in society.

---

Ver.2018

• This collection of links are D3.js Tutorial for Beginner(D3.js is JavaScript library for manipulating documents based on data). This will not cover any statistics or modelling, and this will not stray outside the JavaScript or SVG we need for the visualizations. Let's practice D3.js together! 😎

What is data visualization + MOOC

What Is Data Visualization?

• First of all, You can see this data visualization project. Just know what is data visualization.

• Explore Github Topic 'Data visualization'! 😎

• The beauty of data visualization - David McCandless (:tv:Video)

• The Art of Data Storytelling with Isaac Reyes (:tv:Video)

• Making data mean more through storytelling | Ben Wellington | TEDxBroadway (:tv:Video)

• Harvard i-lab | Data Visualization for Non-Programmers (:tv:Video)

• 데이터 시각화란 무엇인가 (What is data visualization)Sey Min at TEDxBusan (:tv:Video)

• 데이터 시각화(Data visualization) - blog.ab180

• Designing Data Visualizations with Noah Iliinsky (:tv:Video)

• Introduction to Data Visualization (:tv:Video) / 📕pdf

MOOC

• Data Visualization-University of Illinois at Urbana-Champaign | Coursera
• Data Analysis and Visualization | Udacity
• Data Visualization | FreeCodeCamp

D3 reference

• https://github.com/d3/d3/wiki
• https://github.com/d3/d3/wiki/API-Reference
• https://bost.ocks.org/mike/

D3.js Tutorial

• https://github.com/d3/d3/wiki/tutorials

• Getting Started with D3.js (:tv:Video)with livedemo / 📕 slide

• Data Visualization and D3 by David Chouinard (:tv:Video)

• https://square.github.io/intro-to-d3/

• Introduction to D3 (:tv:Video)

• D3.js Tutorials: Part 1 - An Introduction to D3.js (Data Driven Documents) (:tv:Video)

• D3.js tutorial - 1 - Introduction (:tv:Video)

• d3-js-step-by-step by zeroviscosity (github) / Site

• workshop materials for introduction to d3.js(github)

• Data Visualization Course - D3.js Visualization | Udacity

Based on / Using D3.js

• Redefined chart library built with React and D3
• Create word clouds in JavaScript / Github
• Re-usable, easy interface JavaScript chart library based on D3 v4+ / Github
• Interactive Data Visualization with D3.js, DC.js, Python, and MongoDB (Blog post) / Source (Github)
• d3 tooltips
• Event drop by marmelab / Github : A time based / event series interactive visualization using d3.js
• A music frequency visualizer using D3.js - Live Demo / Github
• CodeFlower Source code visualization / Github
• ArchitectureTree / Github : Draw and share your software architecture without diagramming software. Uses d3.js and Angular.js.

D3 Book

• Getting_started_with_D3 by Mike Dewar / Translationum-Kor 자바스크립트와 SVG로 쉽게 만드는 웹 기반 데이터 비주얼라이제이션 D3
• d3.js - Interactive Data Visualization for the Web by Scott Murray / Translationum-Kor D3.js : 쉽고 빠른 인터랙티브 데이터 시각화
• D3.js in Action / Translationum-Kor D3.js 인 액션
• Data Visualization with d3.js by Swizec Teller / Translationum-Kor d3.js를 이용한 데이터 시각화 -자바스크립트로 눈에 띄는 차트 만들기
• Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript / Translationum-Kor D3를 이용한 시각적 스토리텔링
• Data Visualization with D3.js Cookbook / Translationum-Kor 다양한 레시피로 보는 D3.js 쿡북 - 웹 기반 상호작용이 가능한 강력한 데이터 시각화

D3.js Gallery /Example

• https://github.com/d3/d3/wiki/Gallery
• http://christopheviau.com/d3list/index.html

Portfolio

• Beatles schedule chart
• D3.js portfolio by hemanthnair

Article

• government-data-applications-vizualisations
• best-data-visualization-projects-of-2016
• 10-best-data-visualization-projects-of-2015
• 16-creative-data-visualization-techniques-to-showcase-your-numbers
• interactive-infographics-a-new-view-of-statistics-visualization

Example

• heatmatrix

Tips

• Google search keyword : d3 + portfolio / datavisualization + best / data visualization + uk / Circular Infographics + d3.js
• 주피터(Jupyter) 노트북과 자바스크립트 환경 이해하기 - 주피터 위에서 D3.js를 활용한 시각화
• Run D3 in a IJavascript notebook
• Data Sucks, Says Who? 16 Creative Data Visualization Techniques To Showcase Your Numbers

For Fun

Live Coding (Basic)

• "The Future of Data Visualization" - Jeffrey Heer (Strata + Hadoop 2015) (:tv:Video)
• Visualizing Data with D3.js-LIVE- by Siraj Raval (:tv:Video)
• Data Visualization with D3 by Michael Menz (:tv:Video)
• Data Visualization keynote with Alberto Cairo (:tv:Video)
• The Best Way to Visualize a Dataset Easily (:tv:Video)

About Big data

• Analyzing and modeling complex and big data | Professor Maria Fasli | TEDxUniversityofEssex (:tv:Video)
• How Big Data Can Influence Decisions That Actually Matter | Prukalpa Sankar | TEDxGateway (:tv:Video)