Data Visualization and D3.js



Udacity

Computer Science:
Intro to Statistics
Statistics
Intro to Theoretical Computer Science
Interactive 3D Graphics
Data Visualization:
Data Visualization and D3.js
Data Visualization
Data Visualization in Tableau
Data Analysis and Visualization
Data Analysis with R
Machine Learning:
Machine Learning, Lesson 2 - Decision Trees
Introduction to Machine Learning Course, Lesson 4 - Decision Trees
Intro to Artificial Intelligence
Artificial Intelligence
Intel® Edge AI Fundamentals with OpenVINO™
Intro to Deep Learning with PyTorch
Intro to Machine Learning with PyTorch
JavaScript:
JavaScript Design Patterns
Browser Rendering Optimization
JavaScript Promises
Intro to JavaScript
Intro to HTML and CSS
ES6 - JavaScript Improved
Intro to AJAX


Data Visualization and D3.js



Lesson 1 Visualization Fundamentals

Visual Encoding


Graphical perception – learn the fundamentals first


UK Temperature History


Lesson 2 D3 Building Blocks

Welcome to Gapminder Tools!


Data Enter Update Elements Exit
Thinking with Joins, Mike Bostock
How Selections Work


Lesson 3 Problem Set Visualization Fundamentals

.
.


Lesson 4 Design Principles

DATA LOOKS BETTER NAKED


Data Visualization: Visualization Types LibGuides at Duke University
A layered grammar of graphics
A layered grammar of graphics (PDF)
Graph Selection Matrix (PDF)
Selecting the Right Graph for Your Message (PDF)


Charles Joseph Minard
A Tour through the Visualization Zoo
色輪、調色盤產生器 | Adobe Color


Lesson 5 Dimple.js

.
.


Lesson 6 Problem Set Chart Types and Axes

.
.


Lesson 7 Narrative Structures

Narrative Visualization: Telling Stories with Data (PDF)
.


Lesson 8 Animation and Interaction


Mike Bostock, Let’s Make a Map
How to convert Shapefiles to GeoJSON
Ogre
mapshaper.org


Choropleth map is a type of thematic map in which a set of pre-defined areas is colored or patterned in proportion to a statistical variable that represents an aggregate summary of a geographic characteristic within each area
階級区分図は国境や行政区など調査区域が明確であり、統計数値ごとに色調が異なっていることから等値線図と対照的である。地域ごとの違いが明確に可視化できることから、選挙の際に利用されることが多い。


Cartogram
示意地圖,又稱比較統計地圖,是將地圖根據統計數據變形的得到示意圖,通常是將各個地理單位的面積擴大或縮小,來表示有關數據的數值。


https://bost.ocks.org/mike/example/
June 9, 2013, Mike Bostock, For Example
Rotating Orthographic
Rotating Orthographic (raw)


Let’s Make a Bubble Map


Lesson 9 Final Project

.
.



Interactive, Scrolling Visualisation with D3.js

How I Created an Interactive, Scrolling Visualisation with D3.js, and how you can too
Visualisation
Code (Github Repo)
.
An Interactive Visualization of Every Line in Hamilton
How the Recession Reshaped the Economy, in 255 Charts - The New York Times
A visual introduction to machine learning
The Water We Eat - Discover how much WATER we EAT every day
The Dawn Wall: El Capitan’s Most Unwelcoming Route - The New York Times
Scrolling In Data Visualization
.

Interactive Data Visualization for the Web, 2nd Edition
alignedleft
alignedleft d3-book-2e
O'Reilly Media
Scott Murray
• D3 Tutorials 英文 , 中文
• 程式碼下載: github
 

Interactive Data Lab
 
stanford vis group
 

Visualization Analysis and Design
Figures
All Lecture Slides
 

Handwriting with a Neural Net
Four Experiments in Handwriting with a Neural Network
github
 

大トロ 「Handwriting Generation Demo in TensorFlow」
 

「竈門禰豆子」
「かまどねずこ」
「Kamado Nezuko」
 

A visual introduction to machine learning
Gestalt Principles for Data Visualization
 

「playground」
「playground」 github
 
 
California
Centerline Labeling
 
 
 
 
 
 

Fernanda Viégas
Fernanda Viégas talks
Visualization for Machine Learning

Geodetic Velocities Visualization
Interactive Visualization of GPS Time Series Tracks
Machine Learning Visualization
 
 

資料視覺化!D3入門到實戰 :: 第 11 屆 iT 邦幫忙鐵人賽
Amazon Web Services
 
 
政府資料開放平臺 | 政府資料開放平臺
 

DeepSVG: A Hierarchical Generative Network for Vector Graphics Animation
github
 

PyTorch3D
Deform a source mesh to form a target mesh using 3D loss functions.
 

• Arvind Satyanarayan
Introduction to D3
MIT Visualization Group
6.894 : Interactive Data Visualization
 

SVG 完整教學 31 天 - OXXO.STUDIO
 

Inkscape
 

Data Visualization using Python for Machine Learning and Data Science
 

parallax scrolling website
parallax-scrolling-demo.zip
 

「HTML Color Names」
「Shades」
「Mixer」
 

「將政府預算視覺化」
全球即時地震視覺化
資料視覺化
Treemap customization
 

The Bézier Game
The Bezier Game - Walkthrough
MASTER the Pen Tool with the Bézier Game
Bezier curves
How to Pronounce "Bezier Curve"
 

 

 

 

 

 

「」
「」
「」