可视化基础

数据可视化
--尽可能高效传达一个故事或者概念的方法
--使用颜色、尺寸形状等从视觉上最好地呈现出某些基础数据,从而向读者传达信息或者见解
--结合叙述或者故事,让可视化作者与读者分享自己发现的有趣的事情和见解
--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的小结

  • 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,例如各种调试器,文本编辑器和已有程式库
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容

  • 本系列「数据可视化基础」文章共三篇,介绍可视化中最基础、最重要的一些概念、理论。这篇为第三篇,主要介绍视觉编码,另...
    GeekPlux阅读 3,807评论 2 3
  • 本系列「数据可视化基础」文章共三篇,介绍可视化中最基础、最重要的一些概念、理论。这篇为第二篇,主要介绍数据模型,另...
    GeekPlux阅读 1,577评论 0 4
  • 数据可视化参考流程 科学可视化的早期可视化流水线,描述了从数据空间到可视空间的映射,包含串行处理数据的各个阶段: ...
    samYau阅读 1,096评论 0 2
  • 可视化是机器学习与数据挖掘的最后一公里,好的可视化可以让人们对数据结果一目了然。下面介绍一下基本知识和可视化要点。...
    Dorts阅读 736评论 0 1
  • 坚持原创分享第182天 12点,眼睛已经睁不开,但是我的脸还没有洗,由此想到分享还没有写。 脑海中也闪...
    我是一只没有脚的鸟阅读 107评论 0 0