可视化基础

2018-02-09  本文已影响0人  esskeetit

数据可视化：
--尽可能高效传达一个故事或者概念的方法
--使用颜色、尺寸形状等从视觉上最好地呈现出某些基础数据，从而向读者传达信息或者见解
--结合叙述或者故事，让可视化作者与读者分享自己发现的有趣的事情和见解
--mapping values to visuals
利用数据可视化探索数据中的模式，传达最终结果
数据可视化允许我们以不同方式理解和探索数据
book:
the visual display of quantitative information
《用数据讲故事》

高质量的数据可视化的特点：

相关经验：

  1. 对内容背景有透彻的理解
    了解用户是谁，他们要知道或者要做什么，之后再真正开始思考如何呈现数据
    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 有时不被认为是一种视觉编码

动画在技术上并不是一个视觉编码，但在某种程度上，可以认为它可对一些信息进行编码或改变信息
通过动画传达消息更简单、更高效

可视化技术

HTML5 Canvas

WebGL

SVG（可缩放向量图形）

D3.js

NVD3

Dimple.js

Rickshaw

Chartio

RAW

在可视化光谱中穿梭
层级由低到高、灵活性由高到低、效率由低到高排列如下：
--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的小结

为什么使用D3

上一篇下一篇

猜你喜欢

热点阅读