大屏数据可视化设计与实践

2020 年 7 月 27 日

大屏数据可视化设计与实践


步入大数据时代,各行业对数据价值的重视程度与日俱增。要想把数据价值发挥出来,需要对数据进行采集、融合、分析、数据可视化,而数据可视化是数据价值的最直观体现,已成为日常办公、应急处理、指挥调度、战略决策等场景下必不可少的一部分。


近年来,大屏广泛应用在交易大厅、展览中心、管控中心、数字展厅等,把一些关键数据集中展示在一块巨形屏幕上,使数据绚丽、震撼的呈现,给业务人员更好的视觉体验。


一、基本概念


1. 什么是数据可视化


把相对复杂、抽象的数据通过可视的方式以人们更易理解的图形展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的价值,企业和政府使用数据智能更好的开展业务。


2. 什么是大屏数据可视化


大屏数据可视化是以大屏为主要展示载体进行数据的可视化呈现。


“大面积、炫酷动效、丰富色彩”,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。


利用面积大、超高分辨率、可展示信息多的特点,比如各行业的业务展示监控、风险预警、信息指挥调度、企业展厅、展览展示、电力电网、能源矿产、健康医疗、工厂制造、法院政务、银行金融、军队、智慧城市、汽车行业等,在不同的行业都得到了广泛的应用。


二、大屏可视化设计流程


大屏可视化需要大屏配套硬件和软件紧密匹配设计,才能呈现出完美的效果。常规的设计流程如下图所示。



1. 梳理业务指标


业务指标是对一组或者一系列数据的提炼。基于不同的业务、不同的主题会有不同的数据展示需求,需要了解实际的业务,结合现有的数据,平时用户是怎么用这些数据的、关心哪些数据、数据对接的条件是否满足等。


以税收主题为例,这里的关键指标有:各税种实时税收、海关税收占总税收百分比、企业纳税人税额占比、各行业税收额占比等等。


2. 可视化映射


可视化映射是整个数据可视化的核心,是指将定义好的指标信息映射成可视化元素的过程。同一个指标的数据,从不同维度分析就有不同结果。


可视化映射,在创建之前我们需要定义空间基质,然后考虑在基质中布置的图形元素,最后我们将使用图形属性来向用户传达业务的意义。



上图展示了数据分析常用的 4 个维度,可以引导我们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。


联系:数据之间的相关性;


分布:指标里的数据主要集中在什么范围、表现出怎样的规律;


比较:数据之间存在何种差异、差异主要体现在哪些方面;


构成:指标里的数据都由哪几部分组成、每部分占比如何。


上图例举的示例图表多用于传统设计,在大屏数据可视化中经常需要对地理信息进行展现,常以 2D 或 3D 方式对 GIS 空间进行呈现。


在对 GIS 地图的表现中,通常会加入丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等,所以对大屏硬件,如拼接处理器、图形工作站等设备的性能会有要求,硬件配置不够的情况下可能出现卡顿甚至崩溃的情况,需要在设计之初进行整体评估。


3. 确定大屏尺寸及分辨率


大屏的设计需要了解大屏的硬件属性,常见的是拼接屏,包括 LCD 拼接屏、DLP 纯数字显示拼接屏、LED 小间距拼接屏等。


大屏幕是由若干单体屏拼接组成,拼接的越多,物理分辨率越大。下图为北京百分点信息科技有限公司(以下简称:百分点)展厅大屏效果图,由 48 块 55 寸 LCD 拼接屏组成,拼缝 0.88mm,物理分辨率 23040*4320px。



图形工作站和拼接处理器是大屏硬件应用中的重要组成部分。


图形工作站作为内容信号源,能够输出高清分辨率图像给到大屏,通过它的高性能显卡特性,自定义分辨率,实现与物理大屏的等比例输出或者是点对点输出。


拼接处理器,负责将一个完整的信号画面划分为数个等分部分,分配给同样数量的画面显示单元,通过多个画面显示单元组成信号图像显示屏。



4. 页面布局


在进行大屏布局设计时,需在大屏整体分辨率上切分出不同的区域,根据业务指标的重要程度,将不同的指标以可视化形式呈现在不同区域,做到主次分明,突出重点。


布局设计主要根据梳理好的业务指标进行,核心业务指标安排在中间位置较大区域,其余的指标按优先级依次在核心指标周围展开。一般把有关联关系的指标在同一区域展现,这样更有助于观看者的理解。



5. UI 设计


在 UI 设计中,UI 整体风格一般用深色调,如黑色背景,蓝色或绿色的配色方案,让信息更好的聚焦,深色调看上去更柔和舒服不刺眼,也会较省电。


UI 设计效果图完成后,可先投屏到大屏上模拟真实效果,保证在大屏屏幕的颜色、效果呈现符合设计要求。


下图是百分点某大屏项目的 UI 设计图。



6. 可视化开发


开发阶段,开发工程师根据产品原型图、UI 效果图、详细设计文档,选择合适的开发环境、开发工具、开发语言等,统一每个模块、页面的命名规范。


在可视化开发过程中通常会使用到以下图表库。



7. 现场调试、交付


大屏项目涉及到现场调试,确保每个环节运行正常,包括图站的融屏、网络、软件部署、大屏图像显示是否完整、控制端通信是否正常,并根据现场出现的问题做及时调整。


三、百分点可视化系统设计亮点


1. 智能控制


在智能展厅的建设中,除了大屏,还要有灯光、幕布、音响、电子沙盘等各种设备的配合才能完美体现震撼效果。百分点集成所有智能设备,通过 Pad 控制端,实现对其控制,形成物联网模式,方便用户根据不同场景进行智能控制。


当来访观看大屏时,可以通过控制端关闭展厅所有灯光,让观看者聚焦大屏;当观看结束后,可通过控制端快速打开展厅所有灯光,实现了对展厅不同场景下的组合灯光智能控制。



我们将所有智能硬件的控制协议,统一封装成控制层,提供接口服务,供上层应用调用。



2. 电子沙盘与大屏互动


电子沙盘是一套基于地图的大数据探索交互式设备,具有便携移动、触摸操作、可折叠屏幕、智能语音等特点。沙盘可叠加多种维度的业务要素,通过多业务要素的多层叠加最终实现帮助用户做出科学准确的决策。此系统可用于会议、业务部署、汇报工作、业务指挥等多种场景下。



百分点自主研发的电子沙盘投屏功能,通过手势操作,实现沙盘与大盘的联动,增强与场景的交互体验。根据用户在电子沙盘上手指滑动的方向,可计算出该内容在大屏上投屏的位置。以下视频完整展示了沙盘和大屏的甩屏功能。


http://mpvideo.qpic.cn/0b782maacaaa6qafhqifjvpvbu6dahjqaaia.f10002.mp4?dis_k=f87d35929c284b637b7b4aa5339d1d10&dis_t=1595395342


3. 自定义大屏使用场景


为了满足大屏在不同场景下的需求,我们实现了大屏内容的灵活布局,可自定义场景,比如视频会议模式、演唱会模式等。



四、成功案例介绍


1. 智慧应急


应急指挥大厅是城市安全框架建设的重要组成部分,是政府实施协调、指挥、调度的重要机构和场所,是反映一个城市应急和危机管理水平的标志也是城市危机管理的重要支撑设施。


通过“大应急”数据中台,建立信息互联、互通机制,对大数据信息进行分析与应用,支撑多部门异地会商、业务协同、联动指挥,从而实现自应急响应启动、到结束、再到灾后重建整个过程的业务协同支持。



2. 生态环境


该项目为某市环监局大屏可视化定制化项目,通过建立生态环境数据智能平台,建立大数据全景数据库,围绕数据采集整合加工、数据交互与共享、数据挖掘与应用、安全与运维服务四大体系,结合人工智能新一代信息技术,沉淀生态环境数据资产,支撑生态环境统筹规划、发展及防治等工作。



3. 公共安全


凭借丰富的大数据和人工智能技术实践,百分点向海外国家和政府提供多域融合协同智慧系统解决方案、网络安全解决方案、音视频治安防控解决方案、社会舆论管理解决方案、国家大数据中心解决方案等,帮助海外国家实现国家治理现代化和智慧化。


大屏展示端建立了数据源专题、目标管控、重点人员、网络舆情、情报服务等模块并且提供 7*24 小时的数据更新,同时该系统能够自动从海量数据中快速识别出有用线索,通过一系列专业软件对情报线索进行分析、整编、研判,输出战略、战役、战术级情报产品,为公共安全相关部门提供强大的事前预警、事中辅助以及事后追溯能力。



4. 税务大屏


该大屏为海外某国家政府的税务项目,全方位展示了全国税务税收、海关税收、石油税收、纳税人等各业务维度的综合态势,共计 20 多个主题、100 多个指标,为分析决策提供有效支持。



五、结语


数据可视化以直观、高度视觉冲击力的方式向受众揭示数据背后隐藏的规律,传达数据价值。大屏可视化在智慧城市、人口空间规划、公共服务等领域越来越多地发挥了积极的作用,更宏观、直观、智能地展示业务场景,让数据智能推动社会进步。


http://mpvideo.qpic.cn/0b78hyaaeaaaimahxuyfjbpvapwdai7aaaqa.f10002.mp4?dis_k=91a8c8ea0d9370a140a154851eb5af96&dis_t=1595395957


参考资料


[1] Stephen Few, Visual BussinessIntelligence


[2] Julie Steele、Noah Iliinsky,数据可视化之美


[3] BYMD,大屏数据可视化设计指南


2020 年 7 月 27 日 10:032741

评论

发布
暂无评论
发现更多内容

redis持久化RDB与AOF

wjchenge

redis

Vim使用总结

JDoe

vim

程序员的晚餐 | 6 月 2 日 红烧鸡爪的味道

清远

美食

运维日志里隐藏的安全危机,你知道怎么挖吗?听听专家怎么说

secisland

态势感知 关联分析 SOC

原创 | 使用JUnit、AssertJ和Mockito编写单元测试和实践TDD (十五)编写测试-断言\假设\使测试失效

编程道与术

Java 编程 TDD 单元测试 JUnit

奈学大数据开发工程师分享787个技术,快来收割

奈学教育

大数据

安全做到首位 统信UOS后激勃发

统小信uos

网络安全 操作系统

Hive底层执行引擎的深度剖析(免费)

奈学教育

大数据 hive

LeetCode | 1. Two Sum 两数之和

Puran

Python C# 算法 LeetCode arts

坚持ARTS-week2

王钰淇

ARTS 打卡计划

架构演变之路:为何要搞微服务架构?

arthinking

Kubernetes 微服务 dubbo SpringCloud

收藏!如何有效实施devops?

DevOps 运维 持续集成 开发 自动化测试

霸榜18年,作者连续20年获得微软MVP,这本SQL书凭什么成为畅销经典

图灵社区

数据库 SQL语法 sql查询

Docker 搭建 Postgres + pgAdmin 环境

姜雨生

Docker DevOps postgres

SpringBatch系列入门之Tasklet

稻草鸟人

spring SpringBatch 批处理

ARTS打卡week#1

对方正在输入…

ARTS 打卡计划

原创 | 使用JUnit、AssertJ和Mockito编写单元测试和实践TDD (十四)编写测试-显示名

编程道与术

Java 编程 TDD 单元测试 JUnit

美国黑客曝出政府惊天内幕,看区块链如何解决!

CECBC区块链专委会

CECBC 区块链技术 民生 不可篡改 信息公开

一文入门JVM虚拟机

Simon郎

深入理解JVM

路漫漫其修远兮

无心水

【vue-openlayers】弹窗

学习委员

html Vue 前端 openlayers ol

『PyTorch』使用指定GPU的方法

kraken0

人工智能 学习 图像识别

我们是活着,而不是活过

小天同学

个人感想 生活,随想 随笔杂谈 日常思考

分布式事务 - 理论模型

Java收录阁

分布式事务

谈谈控制感(13):为什么是旁观者清?

史方远

读书笔记 个人成长 心理学 随笔杂谈

面试题:教你如何吃透RocketMQ

奈学教育

架构 RocketMQ 架构设计

手机是21世纪最成功的毒品

Neco.W

学习 提升效率 工作

【译】业务转型是什么?

涛哥

业务中台 数字化转型

初识 LeetCode

Puran

LeetCode arts

同一浏览器只允许登录一个账号

brave heart

Vue 前端

洞悉MySQL底层架构:游走在缓冲与磁盘之间

arthinking

MySQL 数据库 MVCC

大屏数据可视化设计与实践-InfoQ