如何实现数据可视化?

  • 回答 (6)
  • 关注 (0)
  • 查看 (305)

数据可视化, 特别是基于Web的数据可视化的时代已经到来了。类似JavaScript的可视化库如D3.js, Raphaël, 以及Paper.js, 以及最新浏览器所支持的如Canvas和SVG, 以及使得那些过去只能由计算机专家和专业设计人员开发的复杂的可视化变得越来越简单了。

无聊至极无聊至极提问于
DEA林晨曦老司机回答于

以下示例是做一份数据的可视化图表,一步步的来看下我们如何获取数据,以及如何进行可视化的展示。

在上章内容中,提到了关于【数据可视化迭代过程】的步骤,这也能看出整个过程包含的步骤,大致有:1. 确定主题 - 2.数据获得 - 3.图表选择(表达)- 4图表绘制。

当然了我们也可以看到可视化是要一个不断迭代的过程,步骤之间都需要多次的迭代修改的。

确定主题

这肯定是第一步了,在做数据可视化的时候,首先你要明了你要做什么,想要从数据获中取什么信息,有了目标才能明确的往下做。

那我们这次还是来做关于空气质量PM2.5的数据展示,了解历年来PM2.5的实际情况和发展趋势。

数据获得

对于全国空气质量的数据,最权威的来源肯定是来自于中国环境监测总站(http://www.cnemc.cn/) 的数据提供。但是监测总站的API提供的并不是很详细,还有很多第三方也提供类似的API接口,比如PM25.in(http://pm25.in/) ,在API说明上做的很详细,他们的数据每日更新。所以这次我们选择PM25这个网站来获取数据源。

我们可以看到PM25提供的内容是相当多,包括PM2.5、AQI、PM10、CO、NO2、O3等等。我们只需要PM2.5的数据,所以我们把其他不需要的数据都可以去除掉,同时把Json的数据转换为CSV的数据格式,这里转换数据只是为了下一步处理方便,我这边是选用Processing来做数据可视化处理的。如果你用D3.js,Echart来做的话,Json可能会更方便点。

图表选择(表达)

对于很多人(非设计师)来说数据可能容易获取,但是像要把数据转换成合适的图表进行表达反而非常困难的。因为同样的数据,用不同的图表进行展示出来,得到的效果是完全不一样的。在平时我们可能用到最多的就是通过Excel来做的图表,在Excel2010的版本里面,提供了10类共53个图表,还提供了什么数据透视图,自定义图表等等,总之种类非常多。不过尽管图表种类繁多,但其基本类型只有以下几种:

  • 曲线图:用来反映随时间变化的趋势;
  • 柱形图:用来反映分类项目之间的比较,也可以用来反映时间趋势;
  • 条形图:用来反映分类项目之间的比较;
  • 散点图:用来反映相关性或分布关系;
  • 饼图:用来反映构成,即部分占总体的比例;
  • 地图:用来反映区域之间的分类比较;

那知道了基础图表的类型,如何去做图表的选择呢?国外专家Andrew Abela他将图表展示的关系分为4 类:比较、分布、构成、联系。然后根据这个分类和数据的状况给出了对应的图表类型建议。当我们不确定使用什么类型的图表的时候,可以参考下这个图。

图表绘制

俗话说【不会撸码的交互不是好的数据可视化设计师】,虽然现在市面上有各式各样的可视化的方法和工具,但坦白来说【这些可视化工具都是大坑!!!】,要想做好可视化的表现,最好的方式还是需要掌握一门编程语言,只有这样你才能最合适的表达清楚出你想传达出来的数据信息。

这里给各位想跳入数据可视化这个大坑的设计师们(编程大佬请无视),推荐一下Processing这个创意编程语言。

Processing是美国麻省理工学院媒体实验室旗下美学与运算小组创造出来的(就是搞设计的人做出来的编程语言),非常容易上手,代码逻辑也很简单,几段代码就能做出十分出现效果的展示,下图就是Processing的界面。

不过Processing没有代码提示的功能的,用起来还是十分痛苦的,经常是因为一个单词写错了,而造成程序报错。不过后来我发现到Subilme Text能支持Processing的编译环境,而且能提供代码提示功能,简直是发现新大陆一样,从此Processing用起来再也不费劲了。欢迎大家一起入坑Processing一起学习。

确定用Processing来实现后,我们继续来做PM2.5的可视化展示。国家环保部将空气质量分为六个等级,分别用绿、黄、橙、红、紫、褐六个颜色来标注,对于着优、良、轻度污染、中度污染、重度污染和严重污染六个空气质量。我们要展示历年来PM2.5的实际情况和发展趋势,就可以把每天的空气质量转换一个个不同颜色的小方格,通过颜色的区别来展示当天的PM2.5情况。

先在纸上画一个简单的草图。已年为划分,下面用小方格展示该年内每天的空气质量是什么等级,把当天的PM2.5数值转换对应的颜色值。

确定方式后,开始撸代码,代码很简单的,我大概编写了40来行就完成了,代码逻辑很简单就是先导入数据,然后判断当前数据的值是多少,根据不同的值赋予小方块不同的颜色。

实现之后,看起来就是这样子的。日期时间轴是按照1月到12月排列的,通过上面的图示我们可以比较清楚的看到污染程度比较高的时间是集中在开头和结尾,就是1-2月,11-12月之间,也就是每年冬天就是PM2.5污染程度高的时间。

我们继续把成都历史的数据可视化后来看下。我们发现12年之前成都空气质量都还不错的,在14年的时候,就没有小绿格了,可见14年成都空气质量有多差劲,15年、16年后慢慢的开始有点好转。我们在把北京,上海和深圳的天气拔来看看。

第一列是成都08-16年的空气质量,第二列是北京的,第三列是上海的,第四列是深圳的。可见深圳的空气质量完爆成都、北京和上海。几乎全是小绿格,真是宜居好地方。而帝都北京空气质量是这四个城市中最差的。其中14年都是上述几个城市空气质量最差的一年,而也是这一年央视记者柴静从央视辞职出去开始拍摄雾霾的深度调查,在第二年2015年2月28号推出纪录片《穹顶之下》,引发了公众的一片哗然,全民开始关注雾霾,政府部门也开始着手治理雾霾,15年、16年开始有所好转。

Lonely永夜回答于

上图就是我们需要爬取的一条内容。有了爬取网站,确定了爬取内容。接下来就开始对数据开始爬取。怎么爬取呢?代码大神通常会推选用Python来做数据的爬取。

说好的零代码呢。这时候就要给大家推荐第一款数据挖掘的工具了 - 【造数】https://zaoshu.io 对于简单的数据爬取足够用的工具,简单的了解,10分钟就能上手。

下面我们就开始进行数据的爬取。

第一步:输入需要爬取的网站地址,然后点击【开始爬取】。

第二步:设置爬取规则。点击【开发爬取】后,会进入这个界面,在这个页面进行爬取规则的制定(就是选择出我们需要获取的内容),只需点击我们想要的内容即可,下图绿色区域就是我们需要的内容,然后点击【完成创建】。

第三步:执行下载数据。这步就可以下载数据了,只需三步造数就能得到想要的数据,而不需要各种配置。

下图就是下载下来的原始数据,大致是这样的,全部汇总在一个Excel表中。在这里有菜谱名称,网站地址,和所需原料。当然不是所有内容都是我们需要用的,这时候就需要对原始数据进行清理,删除,汇总等处理。

因为数据量不大,对于原始数据的处理,我们直接选用Excel来做了。

单个菜谱的原料是全部汇总在一个单元格中的,所以首先我们需要把原料分解到单个单元中去。原料是按照【、】来间隔的,那我们直接用【文本分列】直接处理就可以了。通过【文本分列】我们把原料分解到单个单元中,如下图所示。

文本分列后,把它聚合到一起,然后用【数据透视】即可统计出来每个原料的个数出来。再通过简单的降序排序,我们就能得到最终我们需要的数据了。

problemQuants回答于

真实数据是不可替代的

对一个数据集进行清洗和格式化已经很繁琐了,如果你需要设计一个基于多个数据集的可视化呢? 比如你需要把公司不同部门的数据进行可视化, 而这些部门各自有各自的数据库, 而且你也没有时间手工把每个数据集进行清洗。这时候, 人们的第一想法可能是抓一些Demo的数据来进行可视化。 而且你的可视化库里可能就有一些标准的样本数据。

很不幸, 真实数据不可替代。 Demo数据一般遵循正态分布而且数据量有限。 是为了展示可视化用的。 而一个看上去完美的柱状图,并不能帮助你解决那些数据缺失,异常数据或者现实中的真实问题。 如果你过度依赖Demo数据, 当你用真实数据时, 你就会发现你的数据可视化设计并不能真正满足你的数据分析或者数据表现的需求。

工具及处理方式

1)如果你无法访问整个数据集, 不妨先试试从真实数据集中随机取些样本数据。

2)保留无效或者缺失数据, 如果你的数据集在可视化前不准备进行数据清洗,那么也不要清洗样本数据。

3)真实数据集也许过大。 在你使用样本数据时,在生成最终的可视化图前,等比例调整样本数据规模。

还要注意细节的地方

如上图, 当你水平排列数据标识时, 数据标识会看不清,如果旋转90度, 数据标识是看清楚了, 不过又浪费了很大一块空间。 选择一个合适的数据标识格式对有些可视化来说是个解决方案,不过也不是对所有方案都适用。

设计数据标识, 注释或者横轴纵轴通常都是在初始可视化后才考虑的。不过这些元素对可视化来说非常重要, 而且可能会很困难或者需要大量时间才能把它们做好。 特别是在你无法事先预知你的数据的情况下。

在设计你的可视化的时候, 你需要留出相当部分的空间以便你可能需要添加标识只用,通常要在你的图周围留出相对较大的空间。 横纵轴上的标识要保证它们不相互覆盖而且可读。 如果必要的话, 可以将标识进行旋转来增加可读性。 如果有一块空间标识过于集中,而你又需要这些标识可读, 你可以让考虑把标识离它们所指的元素远一些, 然后用连接线把标识和元素连起来。 另外一种方式就是把标识整合成一个组, 用标识工具提示的方式来进行可视化。如果标识的文字过长, 可以考虑进行缩写或者把超出的文字剪掉等方式。

类似的, 对图的注释也需要事先计划好。最简单的方式就是在可视化中保留一部分区域来方便添加注释。 不过, 这样意味着你的图所占的部分就会减小。 为了保留空间, 把注释放在图上的空白部分。 或者把注释做成可拖拽,这样用户可以把注释移开来看注释遮盖的部分。

工具及处理方式

1)在设计时把数据标识, 数据轴及注释的空间在图上留好。

2)对数据标识, 定义最大字符数, 超出部分需要裁掉。把相近的标识组合在一起, 在用户点到时再显示。

3)对长注释, 可以考虑用滚动或者展开的方式。

4)无论如何, 不要忽视这些元素。 数据标识在你专注图形设计的时候,可能不是你的最主要考虑, 不过它们对可视化的用户来说非常重要。

墨莫末沫陌魔回答于

使用柱状图往往更好

和柱状图比起来, 气泡图可以在同样的空间表现更多地数据,饼图可以更清晰地表现整体和局部的关系, 树状图能够更好地表现分层的结构。然而, 这些图在简单明了方面都无法与柱状图相比。

在考虑数据可视化设计方案时, 我们要问自己的第一个问题就是:“这个方案比柱状图好吗?” 如果你需要在一个单一维度上可视化一个可量化的数据集,那么很少有别的方式能比得上柱状图。类似的, 时间序列最好表现为线状图, 而散点图一般用来表现两个线性度量的相关性。 在数据可视化设计中, 使用这些从18世纪以来就一直在使用的图风险最低。而柱状图对于进行数据比较的可视化来说是最佳方式。 因为我们人眼最习惯的比较方式就是将两个东西并排比较。

关于柱状图优先, 其实揭示了数据可视化中一个最大的秘密, 那就是, 那些最酷的可视化往往用处反而最小。最求新奇以及美观的可视化往往带来一个问题,那就是数据的可理解问题。 很多柱状图的替代图迫使人们用他们并不擅长的方式进行比较, 如比较面积, 角度, 色彩, 或者透明度等。这些比较, 说好听的, 是增加了比较的难度,说的严重一些, 可能会对数据进行扭曲, 导致使用者得出错误的结论。

工具及处理方式

1)不要轻易抛弃那些传统的可视化方式, 如果这些方式能够表现你的数据。 先试试柱状图或者线状图, 如果你的数据真的需要其他的再考虑其他图。

2)理解其他形式的图的表现优势, 比如, 气泡图支持更多地数据范围, 饼图支持局部全局的对比, 树状图能够支持分层结构等等。

3)柱状图是可视化最容易的图形之一, 你可以手工编写一段HTML代码, 仅仅使用CSS或者很少量的JavaScript, 或者从Excel里面的一个公式, 就可以生成一个有效的柱状图来。

逆鳞若光天津大学硕士在读 深度学习 尤文死忠回答于

大部分的数据可视化的教程, 都会让你轻松地从一个原始数据集开始。无论你是学习基本的柱状图还是力导向的网络图, 你的数据都是干净的,经过整理的数据。 这些完美的JSON或者CSV文件就像电视里的厨艺节目中的灶台那样干净整洁。而实际上, 当你在处理现实中的真正的数据是, 你80%的时间得用来搜寻, 获取, 载入, 清洗以及转换你的数据。

这样的过程, 有时候可以用自动化的工具来完成。 不过, 差不多任何需要针对两个以上的数据集进行清洗的工作总会需要或多或少的人工的工作。有很多工具能够把XLS文件转化为XML的格式或者把时间戳转换为其他日期格式。但是, 要想把一个公司的内部使用的销售类型与竞争对手进行比对,或者对输入错误进行检查, 或者对不同的Encoding或者OCR产生出来的文字进行检查时,就只能靠手工来处理了。

工具及处理方式

1)在数据可视化项目中给数据清洗留出足够的时间, 特别是在需要处理多个数据源,需要手工录入或者OCR数据, 进行不同类别的配比, 或者需要处理一些非标准格式时, 需要留出更多的时间。

2)GoogleRefine (编者:需要翻墙)是一个很好的数据清洗工具, 尽管在有些地方, 特别是处理非表格化数据时有些不足。 此外, 还有一些数据清洗专用的工具如Data Wranger 和 Mr. Data Converter。 不过,很多的数据清洗工作仍然需要你熟悉脚本语言如Python或者需要你在Excel里进行一些手工工作。记得把你的脚本存档, 你以后肯定用得上。

3)用简单的一些散点图或者直方图来发现一些超正常范围的错误数据。

弯起嘴角笑在路上回答于

数据可视化不是分析

数据可视化可以产生一些分析结果, 不过需要指出的是,可视化是一个辅助分析的工具, 而不是数据分析的替代, 它也不是统计的替代: 你的图形可能揭示了一些数据差异或者数据的相关性。 不过, 要得出存在这些差异和相关性的可靠结论,还需要运用统计的方法。 要对你的数据真正了解, 需要分析的技能, 以及专业的知识。 不要指望可视化能够给你这些。 因此, 在进行可视化项目的时候, 要调整客户或者你的CEO的期望值。

工具及处理方式

1)除非你就是数据分析师, 你对数据可视化得出的结论不要轻易下判断。如果需要进行结论, 最好找一个统计师或者专业人士一起验证后再给结论。

2)一些细小的设计改变, 比如调色板的变化,对某个变量的可视化方式等, 都可能改变可视化得出的结论。 如果你用可视化进行分析, 一定要试试多种可视化方式, 而不要依赖于一种方式。

3)StephenFew的 书“Now You See It”里面介绍了利用可视化进行商业分析的方式, 包括对开发者如何设计可供分析使用的可视化工具的一些建议,读者可以参考。

数据可视化不只是编程

现在大量的可视化编程库和教程使得普通的人员在进行基于Web的可视化中, 也可以设计出高质量的可视化产品。 然而, 要想真正设计一个能够提供深入见解, 或者能够清楚表达的可视化产品,除了编程之外, 还需要很多其他的技能。 比如图像设计, 数据分析, 交互设计, 以及对人们认知的了解等待。 这些技能, 是那些可视化编程库提供不了的。(参考本站文章:数据可视化是科学,也是艺术)

不过, 好消息是,如果你坚持采用一些数据可视化的基本原则的话。

你也不需要对这些技能了解太多。对于初学者来说,需要坚持一些最基本的原则, 比如, 尽量使用柱状图, 不要把圆半径设置按线性比例设定(编者: 在面积比较时会给用户错误理解), 设计要简单(不要用3D, 少用动画, 不要用阴影)等。 按照一些好的可视化样本, 初学者也可以创造出好的可视化作品来。

扫码关注云+社区