那个可以的多少可视化是怎么落实的危险化学品

今日在合作社来看数据可视化的法力,很直观很酷炫。正好之后的成品可能会提到到这块内容,就查了查相关资料。那篇小说如故相比较清晰明了的。
转载地址: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

坐标系包罗常见的直角坐标系(笛Carl坐标系)、极坐标系(按照夹角和距原点距离定位)、地理坐标系等。将不一样的视觉暗示与分歧的坐标系相组合,会发出很各样差其余可视化效果。《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》

admin

网站地图xml地图