可视化框架设计-图表类型

目录

  • 图形标记和图表类型
  • 图表类型(Geom)和图形形状
  • 如何设计图形形状(Shape)
  • 更多

图形标记和图表类型

数据可视化的核心在于可视化编码,而可视化编码由图形标记和视觉通道组成,视觉通道在前面的章节中已经讲解过,本章的内容是介绍图形标记,在可视化设计中我们将常见的图形标记定义成图表类型。

根据图形标记可以代表的数据维度来划分,图形标记分为:

  • 零维,点是常见的零维图形标记,点仅有位置信息
  • 一维,常见的一维图形标记有线
  • 二维,二维平面
  • 三维,常见的立方体、圆柱体都是三维的图形标记

图形标记自由度

前面我们介绍过坐标系,坐标系代表了图形所在的空间维度,而图形空间的自由度是在不改变图形性质的基础下可以自由扩展的维度,自由度 = 空间维度 - 图形标记的维度,那么:

  • 点在二维空间内的自由度是2,就是说可以沿x轴、y轴方向进行扩展
  • 线在二维空间内的自由度是1,也就说线仅能增加宽度,而无法增加长度
  • 面在二维空间内的自由度是0,我们以一个多边形为示例,在不改变代表多边形的数据前提下,我们无法增加多边形的宽度或则高度
  • 面在三维空间的自由度是1,我们可以更改面的厚度

图形标记的自由度与数据能够映射到图形的视觉通道size(大小)相关,这个角度上来讲:

  • 点可以映射两个数据字段字段到点的大小上(当然现实中我们仅仅映射一个)
  • 线可以映射一个数据字段字段到线的宽度
  • 柱状图的矩形可以映射一个数据字段到宽度上
  • 封闭的多边形无法使用数据映射到大小

图表类型

我们根据图形本身的维度和其自由度将图形标记在可视化框架中的实现进行了分类:

  • point(点图),虽然点的自由度是2,但是我们一般只映射一个字段到点的size上,x轴和y轴方向同时扩展大小
  • path(路径图)、line(线图),x轴方向上无序的的线是path,x轴方向有序的线是线图,线图又分为折线图和曲线图
  • area(区域图),填充折线和x轴闭合的区域,构建成为区域图,区域图是二维的,其自由度是0,无法进行size的扩展
  • interval(区间图)、常见的柱状图、玫瑰图、饼图都是区间图,其图形是以y轴方向的长度表示数据的大小,x轴方形可以自由扩展,其自由度是1
  • polygon(多边形),多个点构建的封闭的多边形,自由度是0,无法进行size的扩展
  • heatmap(热力图),热力图使用颜色来代表数据分布,绘制的过程根据数据点在画布上的影响范围进行颜色的设置,其自由度是2,但是我们往往只指定一个常量字段,指定点的影响范围
  • contour(等高线),一种特殊的封闭的线图,可以设置线的粗细,也可以填充其空间变成等高区域图,这是无法进行size 的扩展
  • schema (自定义),无法被上面覆盖的图形标记都放到这个分类下,常见的k线图,箱型图,其自由度与其表达的数据相关

各个图表的细节实现,在后面有各自的章节专门介绍。

图表类型和和图形形状

我们说图表类型是图形标记在可视化框架中的一种实现方式,这是一种非常粗粒度的划分,对于每一种图表类型来说,图形在绘制的时候有不同的形状,视觉通道跟图形属性的映射方式不一样也会生成不同的图形:

  • 点图,可以使用圆点、三角形、正方形、十字符号等表示点
  • 线图,可以有折线、曲线、点线等
  • 多边形,可以是实心的多边形,也可以是空心的仅有边框的多边形

这就产生了我们在前面提到的视觉通道中Shape(图形形状),图形形状决定了各个视觉通道和图形属性的映射,使用边框颜色还是填充颜色、使用点线还是实线,使用平滑线还是折线,都是由图形形状Shape决定的。

Shape是G2中最灵活、内容最丰富的模块,下图是各个图表的shape实现:

geom 类型 shape 类型 解释
point ‘circle‘,‘square‘,‘bowtie‘,‘diamond‘,‘hexagon‘,‘triangle‘,‘triangle-down‘,
‘hollowCircle‘,‘hollowSquare‘,‘hollowBowtie‘,‘hollowDiamond‘,
‘hollowHexagon‘,‘hollowTriangle‘,‘hollowTriangle-down‘,
‘cross‘,‘tick‘,‘plus‘,‘hyphen‘,‘line‘
hollow开头的图形都是空心的
line ‘line‘,‘smooth‘,‘dot‘,‘dash‘,‘dotSmooth‘,‘spline‘ dot :点线,smooth: 平滑线
area ‘area‘,‘smooth‘,‘line‘,‘dotLine‘,‘smoothLine‘,‘dotSmoothLine‘ [area]和[smooth]是填充内容的区域图,其他图表是空心的线图
interval ‘rect‘,‘hollowRect‘,‘line‘,‘tick‘,‘stroke‘ [hollowRect]是空心的矩形, [line]和 [tick] 都是线段,stroke:带边框的矩形
polygon ‘polygon‘,‘hollow‘,‘stroke‘ polygon:多边形、hollow:空心多边形和 stroke:带边框的多边形
schema ‘box‘,‘candle‘ 目前仅支持箱须图、K线图

如何设计Shape

对于每个Shape的实现,我们需要确定以下内容:

  • 支持的视觉通道
  • 映射到各个视觉通道的数据格式
  • 图形对应的数据条数
  • 图形的点的个数

支持的视觉通道

不同的Shape支持的视觉通道不同,以G2实现的视觉通道为例:

  • position(位置),所有的图表类型的Shape都支持这个属性
  • color(颜色), 所有的图表类型的Shape都支持这个属性,但是映射到图形的边框还是填充图形,由各个Shape自己决定
  • size(大小),由上面介绍的图形标记的自由度决定
  • opacity(透明度),跟颜色类似

接收的数据格式

对于G2来说,接收的数据都是标准的JSON数组,单条数据字段的格式支持2种类型:

  • 数值、字符串等标量值
  • 数组,多个标量值构成的数组

所以对于一个Shape来说需要定义好各个视觉通道支持的数据字段格式,下面的示例说明这个问题

柱状图

柱状图是图表类型interval的一个Shape ‘rect’定义的,各个视觉通道支持的数据格式:

  • position 支持3种数据类型:

    • x,y都是单个标量值,如 {name: ‘分类一‘,value: 100}
    • x是单个标量值,y是一个数组 ,如 {name: ‘分类一‘,range: [10, 100]}
    • x是数组,y是单个标量值,例如学生成绩分布 {score: [60,70],count: 90}

  • color 仅支持一个标量值字段
  • size 仅支持数字标量值
  • opacity 支持数字标量值,范围 0-1

各个图形对数据格式的支持,我们在后面章节中一一介绍。

需要的数据条数

数据映射到图形时,数据跟图形的对应关系对于不同的图表类型(数据标记)来说各不相同:

  • point(点图), 点图的数据条数和图形的对应关系,可以是1:1,也可以是1:n。如果对应位置的映射字段x,y都是单个标量,那么就是1:1,如果y是数组,那么就是1:n。

      // 1: 1的数据
      var data = [{month: ‘一月‘, temperature: 10} , {month: ‘二月‘, temperature: 15}]
      // 1: 2的数据
      var data = [{month: ‘一月‘, temperature: [0,10]} , {month: ‘二月‘, temperature: [5,15]}]
    

  • line(线图)和path(路径图),如果对应位置的映射字段x,y都是单个标量多条记录对应一条线,对应关系是n:1。如果y是数组,那么会生成多条记录对应关系是 n: n。同上面point的数据:

  • interval 一条记录生成一个图形,1:1

  • area(区域图), 多条数据生成一个图形,无论对应位置的对应字段的格式如何

  • polygon,一条数据对应一个图形, 1: 1。
  • heatmap,多条记录生成一张图 n: 1
  • contour, 多条记录生成多条等高线 m: n

需要的点的个数

绘制图形时,需要根据当前的数据生成图形的点,然后使用线或者弧连接起来,不同的图形需要点的个数不同:

  • point,点图绘制时只需要一个点即可
  • line,path,绘制折线图/路径图时需要折线图上的多个点
  • area,绘制区域图时,需要代表数据的点与x轴上点
  • interval,绘制柱状图、玫瑰图、饼图时,需要知道四个顶点
  • polygon,绘制多边形时,每个顶点都需要一个点
  • heatmap,绘制热力图时需要多个点
  • contour,绘制等高线时也需要多个点

更多的细节,也会在对应的图表类型章节中介绍。

更多

本章概述介绍了图表类型和图形形状,接下来的章节介绍每一种图表类型,以及其对应的图形形状。在介绍具体的图表类型前,我们先来讲解一下为了使得数据到图形的映射更容易理解,对数据进行的调整,下一章节数据调整。你也可以跳过从最简单的点图开始。

G2: https://g2.alipay.com

时间: 2024-11-02 23:39:36

可视化框架设计-图表类型的相关文章

可视化框架设计-序

数据可视化与G2 目录 目的 什么是数据可视化 数据可视化的阶段 G2的定位和规划 目的 从事数据可视化有2,3年的时间了,发现大多数人对数据可视化的认知就是绘制图表.因此我想写一些可视化框架设计的文章,这些文章,提供了一整套可视化框架的设计思路和实现细节,希望能让大家对可视化有更多的理解,更好的在业务中使用可视化. 什么是数据可视化 数据可视化使用数据和图形技术将信息从数据空间映射到视觉空间,是一门跨越了计算机图形学.数据科学.自然科学和人机交互等领域的交叉学科. 上面的领域模型过于复杂,我们

可视化框架设计-视觉通道

视觉通道 视觉通道简介 数据如何映射到视觉通道 G2视觉通道的设计 更多 视觉通道简介 数据可视化的核心内容是可视化编码,是将数据信息映射成可视化元素的技术.可视化编码由两部分组成:几何标记(图形元素)和视觉通道. 几何标记:可视化中标记通常是一些几何图形元素,例如:点.线.面.体 视觉通道:用于控制几何标记的展示特性,包括标记的位置.大小.形状.方向.色调.饱和度.亮度等 视觉通道的类型 人类对视觉通道的识别有两种基本的感知模式.第一种感知模式得到的信息是关于对象本身的特征和位置等,对应视觉通

框架设计总结

框架设计总结 温昱老师的<一线架构师实现指南>读完好几天了,本书很多大牛都有推荐,自己从头到底一字不漏的看了,很多关键的方法,做了标记,看了多次,是一本介绍构架设计方面很好的书,准备把它做为工具书,在开始中用好其中的方法. 大学学的软件工程,软件设计要从需求分析.可行性分析.概要设计.软件设计.软件开发和测试,说的是一个大的过程,具体到针对一个项目时还是会感觉无从下手:本书提供的ADMEMS方法体系,把这一过程形成方法体系,让框架设计的操作性更强,四个核心主张: 1)       方法体系是大

图表Web组件提供2D和3D图表类型控件Nevron Chart for SharePoint

Nevron Chart for SharePoint是一个先进的图表Web组件,其能为您的SharePoint站点提供一整套的2D和3D图表类型,高度可自定义的轴,先进的数据分析功能,严密的数据集成和无与伦比的视觉效果.其组合了业内领先的Nevron Charting engine for ASP.NET以及Nevron Pivot Data Aggregation engine.这使得用户能在SharePoint环境中直观的完成复杂的透视图表的创建. 此产品属于产品Nevron ShareP

游戏UI框架设计(三) : 窗体的层级管理

游戏UI框架设计(三) ---窗体的层级管理 UI框架中UI窗体的"层级管理",最核心的问题是如何进行窗体的显示管理.窗体(预设)的显示我们前面定义了三种类型: 普通.隐藏其他.反向切换.代码如下: "普通显示"模式允许多个窗体同时显示,这种类型应用最多.例如RPG中的主城界面(见下图). "隐藏其他界面" 模式一般应用于全局性的窗体.我们在开发此类窗体时,为了减少UI渲染压力.提高Unity渲染效率,则设置被覆盖的窗体为"不可见&qu

ChartConlrol二维图表类型

WinForms Controls >Controls > Chart Control > Concepts > Creating Charts > 2D Chart Types The XtraCharts suite provides a wide variety of different 2D chart types (also calledview types) which give you the ability to display data as any of

大型网络游戏服务器的框架设计(一)

服务器是用来处理高并发的请求,同时能够满足扩展的业务逻辑的需求,最重要的是满足三点:并发性,稳定性,扩展性. 经历过两款上线游戏产品,见识到了游戏行业的杂乱无章,虽然和传统软件行业相比,少了那么些规范,但是对个人能力要求还真不比传统软件行业低. 今天开始,陆续利用业余时间将自己设计的一个服务器的框架贴出来,也会包好一些基本的代码,也会用到一些开源库.从最基础的讲起,首先看看一个实时网络游戏服务器的框架: 目前市面上的游戏,总的来说分为两类: 1.弱联网类游戏,像手机上的卡牌类游戏(MT,Dota

游戏UI框架设计(二) : 最简版本设计

最简版本设计 --最简版本设计 为降低难度决定先讲解一个最简版本,阐述UI框架的核心设计理念.这里先定义三个核心功能: 1:UI窗体的自动加载功能. 2:缓存UI窗体. 3:窗体生命周期(状态)管理. UI框架设计主要目的,就是尽可能的完成一些与具体游戏功能逻辑无关的一些底层事务性的功能实现.这些功能最好是自动或者是半自动的实现,无须客户程序(调用框架的程序)过多处理与关心. 对于以上功能,笔者定义了UI框架的相关四个核心类: BaseUIForms    基础UI窗体脚本(父类,其他窗体都继承

NET架构设计、框架设计系列文章总结

NET架构设计.框架设计系列文章总结 从事.NET开发到现在已经有七个年头了.慢慢的可能会很少写.NET文章了.不知不觉竟然走了这么多年,热爱.NET热爱c#.突然想对这一路的经历进行一个总结. 是时候开始下一阶段的旅途,希望这些文章可以在发挥点价值作用. 架构设计: ElasticSearch大数据分布式弹性搜索引擎使用 (推荐) DDD实施经验分享-价值导向.从上往下进行(圈内第一个吃螃蟹DDD实施方案)(推荐) 软件工程-思考项目开发那些事(一)(推荐) SOA架构设计经验分享-架构.职责