数据可视化:基本图表

简介:

"数据可视化"可以帮助用户理解数据,一直是热门方向。

图表是"数据可视化"的常用手段,其中又以基本图表----柱状图、折线图、饼图等等----最为常用。

用户非常熟悉这些图表,但如果被问道,它们的特点是什么,最适用怎样的场合(数据集)?恐怕答得上来的人就不多了。

本文是电子书《Data Visualization with JavaScript》第一章的笔记,总结了六种基本图表的特点和适用场合,非常好地回答了上面的问题。

零、序言

进入正题之前,先纠正一种误解。

有人觉得,基本图表太简单、太原始,不高端,不大气,因此追求更复杂的图表。但是,越简单的图表,越容易理解,而快速易懂地理解数据,不正是"数据可视化"的最重要目的和最高追求吗?

所以,请不要小看这些基本图表。因为用户最熟悉它们,所以只要是适用的场合,就应该考虑优先使用。

一、柱状图(Bar Chart)

柱状图是最常见的图表,也最容易解读。

它的适用场合是二维数据集(每个数据点包括两个值x和y),但只有一个维度需要比较。年销售额就是二维数据,"年份"和"销售额"就是它的两个维度,但只需要比较"销售额"这一个维度。

柱状图利用柱子的高度,反映数据的差异。肉眼对高度差异很敏感,辨识效果非常好。柱状图的局限在于只适用中小规模的数据集。

通常来说,柱状图的X轴是时间维,用户习惯性认为存在时间趋势。如果遇到X轴不是时间维的情况,建议用颜色区分每根柱子,改变用户对时间趋势的关注。

上图是英国足球联赛某个年度各队的赢球场数,X轴代表不同球队,Y轴代表赢球数。

二、折线图(Line Chart)数据

折线图适合二维的大数据集,尤其是那些趋势比单个数据点更重要的场合。

它还适合多个二维数据集的比较。

上图是两个二维数据集(大气中二氧化碳浓度,地表平均气温)的折线图。

三、饼图(Pie Chart)

饼图是一种应该避免使用的图表,因为肉眼对面积大小不敏感。

上图中,左侧饼图的五个色块的面积排序,不容易看出来。换成柱状图,就容易多了。

一般情况下,总是应该用柱状图替代饼图。但是有一个例外,就是反映某个部分占整体的比重,比如贫穷人口占总人口的百分比。

四、散点图(Scatter Chart)

散点图适用于三维数据集,但其中只有两维需要比较。

上图是各国的医疗支出与预期寿命,三个维度分别为国家、医疗支出、预期寿命,只有后两个维度需要比较。

为了识别第三维,可以为每个点加上文字标示,或者不同颜色。

五、气泡图(Bubble Chart)

气泡图是散点图的一种变体,通过每个点的面积大小,反映第三维。

上图是卡特里娜飓风的路径,三个维度分别为经度、纬度、强度。点的面积越大,就代表强度越大。因为用户不善于判断面积大小,所以气泡图只适用不要求精确辨识第三维的场合。

如果为气泡加上不同颜色(或文字标签),气泡图就可用来表达四维数据。比如下图就是通过颜色,表示每个点的风力等级。

六、雷达图(Radar Chart)

雷达图适用于多维数据(四维以上),且每个维度必须可以排序(国籍就不可以排序)。但是,它有一个局限,就是数据点最多6个,否则无法辨别,因此适用场合有限。

下面是迈阿密热火队首发的五名篮球选手的数据。除了姓名,每个数据点有五个维度,分别是得分、篮板、助攻、抢断、封盖。

画成雷达图,就是下面这样。

面积越大的数据点,就表示越重要。很显然,勒布朗·詹姆斯(红色区域)是热火队最重要的选手。

需要注意的时候,用户不熟悉雷达图,解读有困难。使用时尽量加上说明,减轻解读负担。

七、总结

图表 维度 注意点
柱状图 二维 只需比较其中一维
折线图 二维 适用于较大的数据集
饼图 二维 只适用反映部分与整体的关系
散点图 二维或三维 有两个维度需要比较
气泡图 三维或四维 其中只有两维能精确辨识
雷达图 四维以上 数据点不超过6个

(完)

目录
相关文章
|
Web App开发 数据可视化 BI
数据可视化D3系列——饼状图
饼状图是数据统计中经常用到的另一类图表,饼图可以直观地显示一个数据系列中各项的大小与各项总和的比例,本文将使用D3上手制作一个简单的饼状图 什么是布局 布局是D3中非常重要的内容,有了布局D3才能画出复杂的矢量图。但布局并不是直接绘制图形,只是将初始数据转换成容易画图的图形语言,画图工具能读懂图形语言来进行绘制。 在绘制饼状图中,例如有一组数据[1, 2, 3],只依靠这些数据是画不出的,需要将这些数据转化为圆形的起始角度和终止角度,第一块的角度区域为[0, π/3],第二块的角度区域为[π/3, π]……绘制工具能根据这些角度值进行绘制。「布局只进行数据转换」 D3还提供其他常用图表的
数据可视化D3系列——饼状图
|
3月前
|
数据可视化
数据可视化第二版-03部分-11章-相关
数据可视化第二版-03部分-11章-相关
|
12天前
|
数据可视化 前端开发 JavaScript
【数据可视化】—大屏数据可视化展示
【数据可视化】—大屏数据可视化展示
|
7月前
|
人工智能 数据可视化 BI
数据可视化(一)
数据可视化(一)
93 0
|
11月前
|
数据可视化
数据可视化平台Datart-创建柱状图
数据可视化平台、Datart
357 0
|
数据采集 数据可视化 BI
28个数据可视化图表的总结和介绍
在这篇文章中,我们将整理我们能看到的所有数据可视化图表。如果你是数据科学初学者,那么本文将是最适合你的。
156 0
28个数据可视化图表的总结和介绍
|
监控 数据可视化 前端开发
数据可视化(一):介绍
数据可视化(一):介绍
数据可视化(一):介绍
|
前端开发 JavaScript 数据可视化
数据可视化——从0-1实现折线图(二)
画XY坐标轴 坐标轴本质上就是两条直线,所以第一步确定坐标原点,然后以坐标原点画出垂直和水平的两条直线。我们设置坐标原点离画布的左内边距和底部内边距,这样我们可以通过画布的高度减去底部内边距得到 原点的y, 然后通过画布的宽度减去左内边距得到x, 有了坐标原点画坐标轴就没什么大问题了。代码如下: //定义坐标轴相对于画布的内边距 this.paddingLeft = 30 // 至少大于绘制文字的宽度 this.paddingBottom = 30 // 至少大于绘制文字的高度 this.origin = new Point2d( this.paddingLeft,
数据可视化——从0-1实现折线图(二)
|
前端开发 数据可视化 JavaScript
数据可视化——从0-1实现折线图(一)
前言 终于又到周末了,上一周的一篇3d文章 带你入门three.js——从0到1实现一个3d可视化地图很开心😺收到了这么多小伙伴的喜欢,这是对我知识输出的肯定。再次感谢大家!这周我又来了,这次给大家分享一下可视化图表比较简单的图表📈但同时我们又不得不学会的 那就是————「折线图」。读完本篇文章你可以学到什么 js实现直线方程 折线图的表达 canvas的一些api灵活的运用 直线折线图 我们先去非常有名的Echarts 官网看一看,他的折线图是什么样子的?如图: 图片 echats折线图 从图中可以得到以下2d图形元素: 直线(两个端点是圆的) 直线(两个端点是直线的) 文字 好
数据可视化——从0-1实现折线图(一)
|
数据可视化
ggpubr|让数据可视化更加优雅(上)
ggpubr是由Alboukadel Kassambara创建的,基于ggplot2的可视化包。主要用于绘制符合出版要求的图形。
203 0
ggpubr|让数据可视化更加优雅(上)