数据可视化：
--尽可能高效传达一个故事或者概念的方法
--使用颜色、尺寸形状等从视觉上最好地呈现出某些基础数据，从而向读者传达信息或者见解
--结合叙述或者故事，让可视化作者与读者分享自己发现的有趣的事情和见解
--mapping values to visuals
利用数据可视化探索数据中的模式，传达最终结果
数据可视化允许我们以不同方式理解和探索数据
book:
the visual display of quantitative information
《用数据讲故事》
高质量的数据可视化的特点：
- 出于探索目的，你得试着理解数据，理解数据揭示的信息
http://www.vizwiz.com/2013/01/alberto-cairo-three-steps-to-become.html
相关经验：
- 对内容背景有透彻的理解
了解用户是谁，他们要知道或者要做什么，之后再真正开始思考如何呈现数据
2.恰当选择图像的类型
思考想让观众如何处理这些信息，何种图表或者视觉类型能让观众轻松、直接地处理信息
3.排除无效信息
习惯去识别并删除那些不会为图像增加信息价值的内容
这么做可以减少认知负担，也让数据显得更突出
4.吸引用户注意力，让他们为你的卖点买单，战略性地把颜色、尺寸和页面布局作为指示指标，让它们对观众说：“嗨，我很重要”
5.最成功的数据可视化案例会让其本身成为故事或者叙述内容的关键点
数据可视化专家 = 设计师+工程师+作家
数据科学全貌
image.png
computer science:
web scraping,log collection,database accesses,building scalable extract transform and load pipeline (extract transform load)
statistics and data mining:
modeling,date mining and exploratory analysis
探索性数据分析和数据可视化之间的区别就像是笔记和演讲之间的区别
EDA 并不试图向任何人证明你对数据做了什么
得到数据：
绘制数据图表(python中的matplotlib/R中的ggplot)
--发现数据图形的模式、趋势和异常值
概括性统计量：均值、方差、相关系数、最优拟合线
数据类型
1.数值数据：具有数值的变量 quantitative data
分为：
1.1 离散变量：可计数的变量 discrete
2.2 连续变量 continuous
2.分类数据 categorical/nominal data
对数据进行标注或分组的一种方式
可以以数值形式表示分类数据，但是这些数值不必具有任何数学意义
3.有序数据 ordered data
--population bins(0-10 million,10-100 million,100-500 million,>500 million)
--class difficulty (beginner,intermediate,advanced)
每一种数据类型都可以进行视觉编码，我们需要根据不同的数据类型选择正确的视觉编码方法
视觉编码
visual encodings
data → display elements
display elements (planar variables,retinal variables)
image.png
position can be good for encoding two variables
image.png
size/orientation/color saturation 很难定量观察差异
时间变量：在可视化图表中各帧移动
image.png
视觉编码的排序
image.png
分解可视化图形
分解可视化图形
facebook募股
facebook募股
双编码：使用两种视觉编码编写同一个变量
在facebook募股的例子中，
size & position y 对变量company value进行编码
color hue & position x对变量year of IPO 进行编码
不透明性opacity 有时不被认为是一种视觉编码
动画在技术上并不是一个视觉编码，但在某种程度上，可以认为它可对一些信息进行编码或改变信息
通过动画传达消息更简单、更高效
可视化技术
在可视化光谱中穿梭
层级由低到高、灵活性由高到低、效率由低到高排列如下：
--webGL,canvas,svg (类似汇编语言)
efficient,performant
flexible
low level
hard to develop with
--D3.js(类似C/C++)
使用的核心技术是开放式网络标准，如下：
javascript
html
svg
css
--NVD3,Dimple.js,Rickshaq(类似python/ruby)
这些是在D3语句块上建立的高级层库
NVD3,Dimple.js ---charting libararies
Rickshaq--有效轻松地显示时间序列和实时数据流/specific type of data
--Raw,Chartio(predefined charts)
Raw:是建立在D3基础上的一个开放源库，通过Raw可以轻松、快速地建立预先定义的图表
Chartio是一款基于web的产品，与tableau类似，可以使你快速、轻松地探索数据，建立dashboard和图表
we now focus on D3.js
详解D3
D3 : Data Driven Documents
Data: 我们努力显示的一些信息，CSV,JSON，或从外部加载，或只是一个JavaScript对象或者变量
Documents
--指网页或Web文档，HTML,CSS, JavaScripts,SVG
--其实是所谓的文档对象模型或者DOM Document Object Model
web浏览器能够存储两个版本的web页面或两个视图
一个是从web服务器返回的初始源
另一个是解析的DOM对象
DOM是一个规范，更像HTML和CSS，为HTML和XML文档规定了常见的编程接口，一旦HTML源从服务器返回web浏览器，便会解析文件，并将其转换成一个能够通过JavaScript以编程方式评估的分层对象
实际上D3将数据和DOM而非HTML源或视觉元素对接，但由于DOM实际上代表并于视觉显示内容相互作用，我们将数据与DOM对接时，D3就指的是DOM的视觉表达，并在DOM的数据基础上创建一个图表
关于D3的小结
- during page load,the DOM get created
- the DOM can be accessed through JavasScript API
- the DOM is specification and hierachical object(层次结构对象)
为什么使用D3
- leverages existing technologies (DOM,CSS,SVG,etc)
可以运用已创建的文档和HTML文档 - separation of concerns
*在服务器段，为复杂的可视化图预先提供HTML和SVG对象，在客户端简单使用JavaScript实现各种互动或者动态，如果你拥有通过D3建立的程式库，通过这样一个步骤，你可以为服务器端提供D3对象，静态图像或者JSON
*D3可视化可以直接在DOM和html上运行，所以可以利用开放网页的所有改进与发展，例如浏览器增强插件，JavaScript加速以及HTML5等新标准
benefits from advances in browser related technologies(JavaScript,HTML5) - 开发人员可以使用他们熟悉的工具运用D3，例如各种调试器，文本编辑器和已有程式库
网友评论