危险化学品【转载】那些优秀之数码可视化是怎么落实之?在及时首文章你恐怕会见找到办法

今以企业来看数据可视化的职能,很直观很酷炫。正好之后的活或者会见涉及到这块内容,就翻了翻看相关材料。这篇文章或比较清晰明了之。
转载地址:https://zhuanlan.zhihu.com/p/20366289
作者:Xhinking

Apple Pencil 刚刚上市没几上就是叫 iFixit
拆解,以供人们玩其理想的内部工程设计。没错,当我们相见最精密与魔法一样的事物时,好奇心总会驱使我们去探讨它背后的原理。
于数据可视化来说更是如此。
日前在知乎看到一个问题:”圈锯齿数据可视图是什么做下的?”,其中提到的可视化图有自网易勤读新闻《中国凶险化学品事故多作地遍布》,如下图所示:

危险化学品 1

就则数新闻被之可视化数据图本身并无复杂,在品尝重制后自以为好整理一下思路,分享给大家看做参照,希望能对逆向可视化案例有些助。
通过本文可以了解及:

  1. 逆向一个可视化案例的大致步骤;
  2. 接近”圆形锯齿”数据可视化图是怎么实现之;
  3. 重多的接近之数据可视化的设计。

首先步:分析原始数据
数码是可视化背后的中流砥柱,逆向可视化与自零构建而视化的率先步一样:从原数据下手。不同之是在逆向时我们看的凡数量经过图形映射、加工、修饰后的结尾结果,而原来数据隐藏于纷繁复杂的视觉效果中。抛开华丽的可视化效果,从中找到数据、分析数据是咱们的重要性工作。
此例的数据结构比较简单,从图备受可方便的整理出来,如下表所示:

危险化学品 2

聊可视化案例之本来面目数据可能会见比较复杂,不能够从图被十分有益之整理出来,可由此品种介绍中多少来源来探寻原始数据。

故数据包含了 31 独省、直辖市、自治区以 2007 年到 2011
年的事故频繁及死人数,数据中并无尽怪层次的逻辑关系,只是单纯的数值。
剖析原始数据及其结构可以辅助我们还原可视化作者最初拿到多少常常的面貌,帮助我们再度好地研究设计者的想法,理解设计思路,为开展下一样步之图样分析做准备。
亚步:分析图
图是可视化中的机要要素,也是咱尽关心的片。分析可视化中的图可以打过多角度来进展,我们得以先由整体入手,利用更尝试解答以下几独问题:

  • 前面是否见了类似的可视化案例?
  • 案例是否属某种常见的可视化形式?
  • 案例是否是某种可视化形式之演进变化形式或某个几乎种可视化形式之构成?

每当本例中,“圆形锯齿数据可视化图”其实只是用作是以雷达图(Radar
Chart)基础之上的改形式。雷达图有那么些号或接近形式,例如星状图(Star
plot)、蛛网图(Spider
chart)等等(它们有只一起之特性就是根据极坐标系的)。

危险化学品 3

咱俩今天盼的多数可视化案例都是自某种基础的可视化方法演进而来,借鉴经典可视化方法,并在那个基础之上进行更新。
如果得以通过图形大致确定可视化的形式,就得依靠一些专有工具快速做出相似原型。
我们还可以采用更加通用、更不行层次的方来分析:将可视化划分也歧之零件和层。Leland
Wilkinson 在 《The Grammar of
Graphics》**遭逢论述了一如既往种植描述统计图形的语法,把图片拆分为一些交互独立、可组装的模块元素。例如下图的例子,将坐标系看做一个组件,在匪改外图形元素的情事下,仅仅经过修改不同的坐标系我们即便能够得到不同之统计图:

危险化学品 4

图语法的出现让咱们发矣更为契合描述可视化图形的措施。R 语言中有名的
ggplot2 图形包就是 Hadley Wickham 基于此理论而建立之,其名字被的 “gg”
指的就是 Grammar of Graphics。
Nathan Yau 在 《Data
Points》中呢介绍了类似的方,将可视化组件分为:视觉暗示(几哪特点)、坐标系、标尺、背景信息。视觉暗示包含位置、长度、角度、方向、形状、面积、体积、饱和度、色调,如下图所示:

危险化学品 5

坐标系包含常见的直角坐标系(笛卡尔坐标系)、极坐标系(根据夹角和距离原点距离定位)、地理坐标系当。将不同之视觉暗示和不同之坐标系相组合,会生出非常多种不同的可视化效果。《Data
Points》书中之当即幅图很好的显示了可视化组件进行重组的无敌表现力(点击查阅大图):

危险化学品 6

据悉图形语法,数据可视化可以当是由不同组件构成的例外图层叠加复合而成。就比如
PhotoShop
中之图层一样,复杂的视觉效果可以拆分成不同几乎哪特点、不同坐标系、不同标尺所做图层的结。我们经常会面看出多繁杂的可视化案例,当无从下手时,分类拆分成各种基础零部件和图层是一个要命好的不二法门。
回来案例,我们将全方位图拆分为以下几单因素:

  • 看望、地区文字标签
  • 死亡人数、事故频数值标签
  • 去世人口折线
  • 事故频繁面积图
  • 事反复刻度标尺(白色)
  • 极坐标

遂,我们虽拿走了一个支行展开的可视化图:

危险化学品 7

大小便分结构后,我们来看了一个由于多层基础元素结合的构造:折线、文字标签、数字标签。这里的折线图和面积图其实本质上是广的折线图和面积图,只不过由直角坐标系变成了不过坐标系,从而形成了锯齿状的完整图片。
其三步:深入挖潜幕后技术
经地方的剖析我们实际就好透过一些家伙制造出类似可视化效果。但是作为可视化硬核玩家的卿切莫克止步于这个,应该深入地了解再底层的贯彻方式。我们得翻开源工具的源代码,例如我们好从
d3-plugin
的型代码中发觉部分可视化的求实贯彻方式。还足以找寻与案例系的博客或者论文等等。
连无是颇具的可视化方法背后都发一个苛的算法,大部分可视化技术以的可能不过是片基础数学知识。
在逆向时,可以先用问题转化为一个概括的型,例如在本例中,我们好将问题简化为“如何以
n 个点都匀的排于一个半径为 r
的圆上”。通过三角函数可以十分便宜之缓解者问题,如下图所示:

危险化学品 8

如果弱人数折线的数据点坐标即为半径为 r + scale(death)
圆形上相应的点。同理,事故频繁之数据点坐标即为半径为 r + scale(accdient)
圆形上相应的触及,如下图所示:

危险化学品 9

第四步:实施
开展到此处,难道你免思量亲身落实转可视化效果也?有矣数据、分析了结构、深入了解了幕后的法则,具体实施将会见转换得很简短,可以因要求选择符合自己之家伙。我在此处选择运用
d3.js
粗略的兑现了一晃,仅供参考。
第五步:可读性优化
在面的解析面临我们兴许漏掉了一部分细节:针对可读性进行优化。可读性会一直影响可视化内容之成色,混乱的水彩、重叠的价签都见面大大降低可读性。在逆向可视化案例时,我们应小心发现同积聚对可读性优化的办法,以还好地利用到温馨的案例中错过。
在中国危化事故可视化图中,我们得以视为加强可读性,做了以下几点调整:

  • 处在圆形下一半局部的探视、地区文字并没像及半片段的文一样靠为圆心,而是违反圆心。保证了下半部分字的可读性;
  • 事反复及死去人数数值标签而过度接近则用调标签位置,以免重叠。

增长可读性的干活可能并无充满乐趣甚至是痛苦的:不断的手动调整参数、硬编码数值、破坏已发出代码和统筹等等。但是为了还好的经验,这片工作是坏值得的。不考虑可读性,仅仅追求视觉效果并无长。
等等,还无结束
于就了端的步骤之后,我们可考虑什么来改进之可视化,让它们换得更好。数据是否发值得深挖的地方?是否好呈现更多重复好玩之音讯?设计及是不是已好全面?
每当本例我们可看部分题材:城市在圈子的布及并没有啊规律性,能否进行一下排序或者再次上加有数量维度,例如按照总人口排序或者用各省市仍
GDP 在圈子上排序是否就可以看出危化事故及经济水平的涉及等等。
小结
时至今日,我们的逆向的同可以画上句号了。总结一下咱走过的手续:

危险化学品 10

透过地方的步子,我们基本上可以回复一个可视化内容之发生路径,也从中学到了多学问。在求学资源比较少之可视化领域,深入地逆向自己喜欢的可视化作品,不失为一种好的习方式。
当观一个可视化作品时,我们应有像庖丁一样:目无全『牛』,看到可视化背后的数、组件、图层、几何模型,看到重复多的数码可视化的美。
更多案例
下是一对以及《中国危化品事故统计》类似之可视化案例,形式达到与《中国危化品事故统计》十分近乎,在统筹与多少的纵深达产生重多值得学习之地方。
Weather
radials**
是一个有关市温度及降水的消息图。整个圆形代表一个城池,圆形中围绕圆心的柱状图表示一致年被每天的嵩温度及最低温度。浅蓝色的圈子代表降水量。

危险化学品 11

有人据此 D3.js 实现了接近的花色,New York 2015 Historical Weather
Data**。

危险化学品 12

[Weather Eindhoven

2014**](https://link.jianshu.com?t=https://link.zhihu.com/?target=https%3A//www.behance.net/gallery/22539163/Weather-Eindhoven-2014)

下为是一个关于城市气候的可视化案例。埃因霍温位于荷兰南,气候属于暖温带气候。降水在埃以霍温非常大,全年平均降水量为
776
mm。图备受圆心部分是温度分布,红色表示针对许日期的万丈气温,白色代表最低气温。外侧绿色柱状图表示降水量,最外由线连接的触及代表风力。

危险化学品 13

Brain
dance**
是一个关于人脑对音乐反应的可视化项目。该图记录了内同样位志愿者在视听
kleemar**
为该型非常制作的相同首音乐时之脑电波。这篇音乐的流年吧 2 分 14
秒(134秒),可以见见任何圆形按每秒中给细分为134秒。主要记录了 Focus
(专注)和 Flow (放松) 两组指标的变迁数据,制作出了拖欠品种。

危险化学品 14

Quantified self data
visualization**
下面是故 Nodebox 实现之一个有关睡眠的自我量化信息图。整个圆形代表 8
小时之推介睡眠时,每个颜色代表一个人,靠近圆形代表重度睡眠(sonno
profondo),圆形外表示轻度睡眠(sonno
lieve)。每根线结尾部分的虚线代表睡眠不足(sonno perso)的年月。

危险化学品 15

(正文完)
系书目:
《The Grammar of
Graphics》

  • Leland Wilkinson
    《Data
    Points》
  • Nathan Yau
    中文版《数据的美:一本书学会可视化设计》
    有关链接:
    知乎提问:圆形锯齿数据可视化图是何等做下的?
    网易数读:中国危急化学品事故多作地遍布**
    d3-plugin –
    Github
    下 d3.js 重制的案例 –
    CodePen
admin

网站地图xml地图