热力图在可视化设计中的应用


编辑导语:我们在高峰期使用地图时会发现有些道路变成了红色的 , 这就代表那条道路现在是拥堵的情况 , 这也是热力图的作用;本文作者分析了热力图在可视化设计中的应用 , 我们一起来学习一下 。
热力图在可视化设计中的应用
本文插图
假设今天在西湖玩了整整一天 , 在16点打算回家了 , 但是大家也都知道杭州的交通是非常拥堵的 , 不清楚这个点回去的路况是怎么样的?
这个时候就可以借助系统自带地图上的热力显示 , 我们观察西湖至时代广场需要经过路段的颜色可以发现 , 中河高架中有一小段显示黄色 , 复兴大桥有一小段显示红色其余为黄色 , 时代大道显示黄色 , 彩虹快速路等其余路段均显示绿色 。
通过颜色就可以了解到16:18分回家路上经过复兴大桥以及前后路段比较拥堵 , 方便我们合理安排回家路线和时间 。
【热力图在可视化设计中的应用】
热力图在可视化设计中的应用
本文插图
这就是热力图在生活中最为常见的一次应用 , 地图热力图通常通过获取手机基站定位该区域某个时间内的用户数量;用不同颜色区块叠加到地图上来反应用户数量在某个时刻的反映 , 帮助解决人们日常出行道路选择等问题 。
此外 , 热力图还能帮助我们解决很多问题 , 本文想和大家讨论下热力图在可视化设计中的应用
一、什么是热力图
首先我们需要对热力图做一个定义 , 热力图是数据在页面上密度、分布以及变化的体现 , 通过选择不同的颜色来对应不同的数据区间;将数据量大小转化成颜色差异 , 图形化表达了业务场景下的数据差异 , 帮助用户了解真实的数据量分布情况和规律 , 为用户决策提供数据依据 。
1. 页面
首先我们需要讨论什么样的页面可以被热力图所表达?
既然热力图是数据在页面上的体现 , 那么页面必须是一组数据集合的反映 , 才能被热力图图形化表达 , 像是设置页、表单填写页作为一个功能入口的页面是无法用热力图表达的;而“从西湖回时代广场”路线所在页面是反映了16:18分瞬时不同地区人流量的一组数据 , 就可以通过热力图来表达 。
因此我们可以认为只有当页面反映了一个时间内的一组数据集合时 , 才能被热力图表达 。
2. 密度
热力图是数据在页面上密度的体现 , 什么是密度呢?
密度是用来衡量页面上单个位置的数据量 , 通过设置不同的颜色来对应不同数据量的数据 , 帮助用户直观读取某个位置的数据量 。
像“从西湖回到时代广场”页面上这条路线 , 预设了红、黄、绿三种颜色 , 分别对应了不同量级的人流量;假设红颜色对应的数据区间是500-1000 , 黄色对应100-500 , 绿色对应0-100 , 那么A这个位置显示红色就表达了16:18分A位置有500-1000人 。

热力图在可视化设计中的应用
本文插图
3. 分布
热力图是数据在页面上分布的体现 , 怎么样来体现分布呢?
我们已知可以用“密度”来描述单个位置的数据量 , 当掌握不同位置的数据量后 , 就能描述整个页面的数据分布情况;因此 , 分布是用来描述页面上不同位置的数据量的对比差异的
在“从西湖回到时代广场”页面上这条路线上 , 已知A、B、C、D四个不同位置的数据量区间 , 就能了解页面上这条路线的人流量分布情况 , A>B>C=D 。
热力图在可视化设计中的应用
本文插图
4. 变化
变化可以分成两种 , 一种是静态的变化 , 即在同一时刻位置1到位置2的数据变化;另一种是动态的变化 , 即同一位置在不同时刻的数据变化 。


推荐阅读