Data Visualization and D3.js 笔记(1)

课程地址: https://classroom.udacity.com/courses/ud507

什么是数据可视化？

高效传达一个故事/概念，探索数据的pattern
通过颜色、尺寸、形式在视觉上表示基础数据和storytelling，然后得到一些发现

数据可视化是一种从值到图像的映射，将结构化的数据信息转化为更易理解的视觉图像。

什么是好的数据可视化？[by Cole Nussbaumer]

对内容有透彻的理解，知道谁是观众、他们想得到什么？
数据展示，选择恰当的图像类型
排除无效信息，删除不会为图像增加价值的内容。降低认知负担，突出数据
通过颜色、尺寸、布局等元素吸引观众注意力，让他们知道哪里是重点
故事叙述。好的数据可视化会让本身成为故事或叙述的关键点

数据科学与数据可视化

(by Ben Fry)
这是一个非线性迭代，在过程中会不断回溯前一步骤，或从新数据得到新结果进行合并。

EDA vs. Data Visualization

EDA, Exploratory Data Analysis, is whatever happened between you and your data when you are not trying to proof anything to anyone. But Data Visualization cares about it.

Amscombe 四重奏

Anscombe’s quartet是指四组基本统计特征（均值、方差、相关系数、最优拟合线）一致的数据，由他们绘制出来的图形截然不同。
说明分析数据前先绘制图表的重要性，以及离群值对统计的影响。

Data && Data Types

值数据 Quantitative Data
- 离散
- 连续
分类数据 Categorical Data (表示特性，可以用数值表示，但是没有数学意义)
- 定类数据 Nominal
  - 对数据进行标注和分类的一种方法
- 有序数据 Ordinal
时序数据 Time Series Data
- 经过长时间重复观测得到的数据集合

Visual Encoding

Visual Encoding is mapping data to display elements.

Position
平面内可对x和y两个变量进行编码
人眼对三维很难迅速感知
Retinal Variables 视网膜变量
- For Ordered Data
  - size
  - orientation
  - color saturation
- For Nominal Data
  - color hue
  - shape
  - texture
Animation
not a Visual Encoding, but encodes some information
- time 用帧来代表时间

大专栏 Data Visualization and D3.js 笔记(1)l Encoding">Rankings of Visual Encoding

D3.js

D3: Data Driven Document

Data: csv / json
Driven: 将csv / json 数据与SVG元素结合 (DOM)
Document: HTML, CSS, JS, SVG

DOM 与 HTML

浏览器存储两种Web页面/视图

从服务器返回的初始源

<html>
    <head>
    </head>
    <body>
        <svg>
    </body>
</html>

解析的DOM对象
- DOM 是一个规范，为HTML和XML文档规定了常见的编程接口
- 在页面被加载的时候逐步解析
- 通过JavaScript API访问

将HTML转为DOM

用户发出访问某一URL的请求
浏览器向服务器发送请求
浏览器收到服务器响应，即HTML
浏览器开始处理HTML文件
遇到一个标记，如<html>，浏览器会发出一个token，startTag: html startTag:head meta link
同时会消耗这些token，生成节点对象，并建立联系
DOM树被生成

有趣的图表们

斜率图 Slope Graph

用斜率代表方向和变化量，可以进行group之间的比较

小多组图 Small Multiples

利用相同的布局，可以进行

数据
数据组

之间的比较