axChart可视化图表知识分享之数据基础

首页 » 可视化 » axChart可视化图表知识分享之数据基础

axChart是用来支持Axure RP设计可视化图表原型的元件,为了方便各同学更好地使用axChart,所以计划分享本系列的可视化图表知识,由于本人经验也有限,希望尽可能对支持axChart的同学有所帮助。

我认为数据可视化设计的核心是“我有什么数据,需要用什么图表做什么?”。而不是先关注图表长什么样子、做更炫酷地图表炫技等等。设计可视化一般的步骤可以归纳为:

(1)准备原始数据,一般是经过清洗、统计后的数据。

(2)明确分析目的,针对不同的用户,确认需要分析数据背后表达的主题。

(3)选择合适的图表,选择正确类型的图表,将数据进行可视化呈现。

因此,正确地认识原始数据是最重要的基础之一。尤其是我们每天都和各种各样的数据打交道,可能往往忽略了去研究和认识数据以及它们之间的细微差异,甚至导致错误地应用数据。

1 数据的类型

数据也就是变量值,最常见的2大类是:分类数据和数值数据。

1.1 分类数据

变量值一般是定性的,表现为互不相容的列表或属性。它又分为有序数据、无序数据。

1.1.1 有序数据

指各数据之间有逻辑顺序或存在着程度上差别,又称为等级变量。如:

用户购买流程(浏览、点击、下单、支付);

学历(小学、初中、高中、大学);

收入水平(低收入、中收入、高收入)。

1.1.2 无序数据

只各数据之间无程度和顺序的差别。如:

性别(男、女);

职业(工人、农民、商人、老师、军人);

开发语言(PHP、C、Java、Python)。

1.2 数值数据

数据一般是可以数数或者测量的,它也可以分类离散型和连续型的数值。

1.2.1 离散型数据

通俗地说是数据只能用自然数或整数单位计算,只能取到的是某些特定的值,一般用计数的方法取得,又叫计数型。如:

每天衣服的销量(10、30、12、34);

每月某园区企业数量(100、500、1000)。

1.2.2 连续型数据

通俗地说在一定区间可以任意取值,一般是连续不断的,只能用测量或者计量的方法取得,又叫计量型。如:

某班级男生身高(可能在160-190之间都有)

旅客等车时长(可能从1分钟-1小时之间的都有)

数值数据变化范围可能极大,因此往往在实际使用时会进行一定的映射转化,变为一种更容易观察的数据范围,这种变化一般有对数变化、指数变化等。不知您能想到什么样的数据场景?

2 数据结构

如何把各种类型的数据组织并记录下来,需要有约定成俗地数据结构。回想一下我们使用Excel制作图表,所使用的数据一般就记录在Excel表格中,这也是最常见的记录数据的结构,即行数据。在数据可视化中,我们往往记录数据的结构不仅仅这一种。

2.1 单一数据

一般就一个变量值的数据,即一个变量对应一个变量值。

如:点击率:10%、完成进度:20%等。

2.2 行数据

即以行的形式记录变量值,每一行就是一个变量值。往往和列配合,一列为一个变量,也就是系列,一般至少2列(列表一般称为变量名)。这也是我们使用得最多的数据结构,基本可以完成大部分的数据分析需求。

2.2.1  两个变量

一般包含1个分类数据和1个数值数据,多用来表示分类对比、趋势变化、流程变化等。如:

示例:某店铺在1月24日各商品的销量记录。

商品 销量
羽绒服 21
夹克 12
棉衣 102
毛裤 26

其中,商品数据是分类数据(无序分类数据),销量数据是数值数据(离散型数值),数据反映了各种商品的销量比较。

示例:某电商产品页转化数据。

用户行为 用户数
浏览 2100
下单 500
支付 430
评价 20

其中,用户行为是分类数据(有序分类数据),用户数数据是数值数据(离散型数值),数据反映了用户购买流程的转化率变化情况。

也可能2个都是数值数据,多用来表示分布,如:

示例:某班级男生的身高、体重分布数据。

身高(cm) 体重(kg)
160 66
161 50
165 55
162 58

其中,身高是数值数据(连续型),体重也是数值数据(连续型),数据可以返回体重/身高的占比,配合肥胖指数可以直观看到该班级男生健康分布情况。

2.2.2 三个变量

一般1个分类数据和2个数值数据,2个数值变量可做对比。如:

示例:某电商商品购买行为,男生与女生的转化情况的数据记录。

用户行为 男性用户数 女性用户数
浏览 2100 2000
下单 500 1300
支付 430 1250
评价 20 12

其中,用户行为为分类数据(有序),男性用户数和女性用户数均为数值数据(离散型),可以对比反应2种性别用户的转化率情况。

也可能3个都是数值数据,多用来在分布的基础上,再进行比较。如:

示例:不同身高体重的运动员跳远成绩的数据记录。

身高(cm) 体重(kg) 跳远(cm)
160 66 302
161 50 410
165 55 390
162 58 450

其中,身高/体重/跳远距离都是数值数据(且还都是连续型),我们可以用身高/体重做点分布,用跳远距离映射点的大小,从而观察到跳远与身高/体重有什么规律。

2.2.3 四个及以上变量

一般1个分类数据和3个数值数据,多用来表示数值变量之间的对比。如:

示例:接着上一个示例,我们再加入性别,继续记录。

性别 身高(cm) 体重(kg) 跳远(cm)
160 66 302
161 50 410
165 55 390
162 58 450

其中,性别是分类数据(无序分类),身高/体重/跳远距离都是数值数据(且还都是连续型),我们可以用身高/体重做点分布,用跳远距离映射点的大小,用2种不同颜色区分男女,从而观察到跳远与性别/身高/体重有什么规律。

总之,行数据可以满足绝大多数的数据记录需求,认真理解各个变量的分类,对数据分析的目的能够更加清晰,应用的图表也就更容易正确。

3 行结构数据

对于某些特定的数据,一般形成了固定化、规范化的数据记录结构,借助行数据进行记录,但变量名一般是固定的、不可修改的。这种数据一般也指定了所使用的图表类型。

3.1 股票日K数据

日期 开盘价 最高价 最低价 收盘价 成交量 成交额

3.2 四分位数据

分类数据 最小值 下四分位 中位数 上四分位数 最大值

3.3 区间数据

分类数据 开始值 结束值

根据实际情况,我们也可以规范自定义的行结构数据,主要是定义好变量名,获取数据,实现我们自己的业务需求。

4 树形数据

除行数据外,树形结构的数据也很常用,顾名思义就像树枝一样,不断分出枝干,经常用在表示上下层级的可视化中。树形结构的数据一般使用json数组格式保存在变量或json文件中。Json数组格式一般形式是以[{},{}]包裹键值对数据,其中设置一个键用于设置子级数据。如:

[
	{
		"name": "电视",
		"value": 382,
		"children": [
			{
				"name": "三星",
				"value": 212
			},
			{
				"name": "创维",
				"value": 39,
				"children": [
					{
						"name": "X系列",
						"value": 19
					},
					{
						"name": "Y系列",
						"value": 19
					}
				]
			},
			{
				"name": "夏普",
				"value": 131,
				"children": [
					{
						"name": "L1系列",
						"value": 100
					},
					{
						"name": "L2系列",
						"value": 31
					}
				]
			}
		]
	},
	{
		"name": "冰箱",
		"value": 235,
		"children": [
			{

			},
			{
				"name": "",
				"value": 000,
				"children": []
			},
			{

			}
		]
	}
]

其中,像name: xxx称为键值对,可以根据自己业务需求设置更多数据的键值对;children键(也可以你自己规定枝干的键)表示枝干数据、下一级数据,如果没有下一级可以不记录该健。

我们也可以用行数据来表示树形数据,大家可以想一想怎样做?

5 GeoJSON数据

指一种特殊的、规范固定的json数据,用于表示地图的边界数据。

因为只有一个根节点,所以最外面不需要[]括起来。

GeoJSON特征合集:

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
      "properties": {"prop0": "value0"}
      },
    { "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
          ]
        },
      "properties": {
        "prop0": "value0",
        "prop1": 0.0
        }
      },
    { "type": "Feature",
       "geometry": {
         "type": "Polygon",
         "coordinates": [
           [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
             [100.0, 1.0], [100.0, 0.0] ]
           ]
       },
       "properties": {
         "prop0": "value0",
         "prop1": {"this": "that"}
         }
       }
     ]
   }

我们不详细讲各个键值对的含义,一般自己写GeoJSON也几乎不可能,在应用到时能知道这个数据结构即可。详细了解可以参看:https://www.oschina.net/translate/geojson-spec

6 关系数据

指一种特殊的、一定规范化的json树形数据,表达各个数据点之间的关系,一般会通过多个json数组来一起完成。比如说graph图需要data数据和link关系数据:

(1)Data数据反映各个数据点

[{ name: '1', x: 10, y: 10, value: 10 }, { name: '2', x: 100, y: 100, value: 20, symbolSize: 20, itemStyle: { color: 'red' } }]

(2)link关系节点数据

[{ source: 'n1', target: 'n2' }, { source: 'n2', target: 'n3' }]

合理规划json数组,可支持更多复杂业务的可视化需求,所以多了解json数组数据结构,对理解复杂图表的数据需求大有好处,建议能仔细揣摩或编写一些简单的json数据尝试一下。

以上是总结的主要数据记录结构,在实际使用时,会有更多类型的数据结构要求,我们需要培养认识数据的习惯,深刻理解数据结构是更好应用可视化图表的基础。

分享到:
赞(3) 生成海报

评论 抢沙发

3 + 6 =


长按图片转发给朋友

axChart1.2.3更新啦
7月10日axChart重大更新,新增地图自动数据更新动效、新增象形图、平行坐标图。
切换注册

登录

忘记密码 ?

切换登录

注册