数据结构可视化网站()

一、信息可视化整理

无论数据总量和复杂程度如何，数据间的关系大多可分为三类：比较/构成/分布&联系。

基于分类/时间的数据对比，通常需用到比较型图表。比较条目较少时，如5个地区收件量的对比，可选用柱状图表示。

条形图当条目较多，如大于12条，移动端上的柱状图会显得拥挤不堪，更适合用条形图。一般数据条目不超过 30条，否则易带来视觉和记忆负担。柱形图还有许多丰富的应用。例如堆积柱形图，瀑布图，横向条形图，横轴正负图等。

看趋势–折线图当X轴为连续数值（如时间）且注重变化趋势时，则适用折线图。

扩大差异–南丁格尔玫瑰图。由于扇形的半径和面积是平方的关系，南丁格尔玫瑰图会将数值之间的差异放大，适合对比大小相近的数值。玫瑰图也适于表示周期/时间概念，比如星期、月份。依然建议数据量不超过 30条，超出可考虑条形图。

当比较正反两类甚至更多维度的数据时，可试尝试双向条形图。用颜色区分大区，空心/实心区分收件量和派件量，既能整体比较大区，又能详细对比地区的情况。

打怪升级，再加点难度。在双向图上再增加一个维度，如下表，比较 5个地区的利润及相应的收入和成本。请先思考一下，再下滑看推荐图表。

通过图形一眼就能看出深圳区的利润低于广州区，即使它的收入高于广州区，但成本相对来说高于广州区。

目标达成–子弹图考察指标的达成情况，如收入达标情况及所处区间（优、良、差）。

子弹图，因为像子弹射后带出的轨道。相较于仪表盘，它能够在狭小的空间中表达丰富的数据信息，在信息传递上有更大的效能优势。

若还要比较4个季度的收入情况，只需用不同颜色区分。如下图，一眼便知第二季度表现较好，而第一季度则不佳。

性能–雷达图。多维的性能数据，如综合评价，常用雷达图表示。在游戏中看到它比较多。它在商务、财务领域应用较大，适合用在固定的框架内表达某种已知的结果。常见于经营状况，财务健康程度。

指标得分接近圆心，说明处于较差状态，应分析改进；指标得分接近外边线，说明处于理想状态。比如我对企业财务进行分析，划分出六大类：销售、市场、研发、客服、技术、管理。通过雷达图绘制出预算和实际开销的维度对比，会很清晰。如下图：

以上就是“比较”类的常用图表，归纳如下：

一个整体被分成几个部分。这类情况会用到构成型图表，如五大区的收件量占比、公司利润的来源构成等。

单层–饼状图

第1关中，对比5个地区的收件量时用到了柱状图。若看占比情况，饼状图更合适。饼图是有缺陷的，它擅长表达某一占比较大的类别。但是不擅长对比。30%和35%在饼图上凭肉眼是难以分辨出区别的。当类别过多，也不适宜在饼图上表达。

如果变成 17个地区，会怎样？饼图分类一般不超过 9个，超过建议用条形图展示。

除饼图外，环形图（甜甜圈图）亦可表示占比，其差异是将饼图的中间区域挖空，在空心区域显示文本信息，比如标题，优势是其空间利用率更高。

分层–环形图、旭日图

对于管理层而言，需先把握大局和重点。比如大区负责人需一眼看到重点地区及重点分部的情况（如下图），如何展示？

这个叫旭日图，逐层下钻看数据，大区的重点地区及相应分部的构成情况一目了然。

累计趋势–堆叠面积图

看数值构成随时间变化的案例：第一大区（包含四个重点地区）近四年收入构成的趋势要如何可视化？

推荐方案是堆叠面积图，可以展现分量（地区）对于总量（大区）的贡献，并显示总量（大区）的变化过程。需要说明的是，地区收入的起点并非从 y=0开始，而是在下面的地区基础上逐层叠加，最后组成一个整体。

面积图最佳设计指南：波动较大的类别放在最上面、使用透明色、不要超过4个类别，y轴从0开始，不要用面积图展示离散数据，只有连续数据有中间值。

累计比较–堆叠柱状图

如果将上图X轴的标签文字（即年份）和图例（即地区）互换（如下图A），用来看每个地区近四年的收入构成，用哪个图更合适？

堆叠面积图 A方案和堆叠柱状图 B方案都可以表现累加值。差别在于，堆叠面积图的 x轴是连续数据（如时间），堆叠柱状图的 x轴是分类数据。此案例中的 x轴是非连续的分类数据，因此用 B方案更适合。

累计增减–瀑布图

若想表达两个数据点间数量的演变过程，可使用瀑布图。开始的一个值，在经过不断的加减后，得到一个值。瀑布图将这个过程图示化，常用来展现财务分析中的收支情况。

通过分布&联系型图表能看到数据的分布情况，进而找到某些联系，如相关性、异常值和数据集群。

两个变量–散点图

仍以业务为例，下图为全国网点的单票成本/收入分布情况。

单单这样看，可能看不出什么，如果加两条平均线就不一样了。

加了平均线，就知道哪些网点高于平均线，哪些低于平均线。但网点那么多，总不能逐个点击查看是哪个大区的，给散点加上颜色后，就很有意义了。

通过此图，可以看出哪些大区单票利润较低，急需提升，比如广泛聚集于右下角的第四大区，单票收入低于平均线，单票成本却高于平均线。

三个变量–气泡图

大家都知道，网点总利润除了和单票利润有关，还和体量（即收件量）有关，用散点的面积大小表示收件量，就变成了气泡图。

一切和空间属性有关的分析都可以用到地理图。比如各地区销量，或者某商业区域店铺密集度等。气泡图与地图结合可演变为热力图。通过热力图，能看到哪些网点收派件量较多，需进行资源调配。

地理图一定需要用到坐标维度。可以是经纬度、也可以是地域名称（上海市、北京市）。坐标粒度即能细到具体某条街道，也能宽到世界各国范围。POI是很重要的要素。POI是“Point of Information”的缩写，可以翻译成信息点，每个POI包含四方面信息，名称、类别、经度纬度、附近的酒店饭店商铺等信息。借助POI，才能按地理维度展现数据

最佳设计指南：一、使用细的地图轮廓线；选择合适的配色；少用填充图案；选择合适的数据区间。

用户行为分析，将浏览、点击、访问页面的操作以高亮的可视化形式表现。下图就是用户在Google搜索结果的点击行为。

总结：当我们拿到数据后，先提炼关键信息，明确数据关系及主题，再选择合适的图表进行可视化。

好的可视化是会讲故事的，它向我们揭示了数据背后的规律。对可视化的使用认知或许来源于下面这张图。虽然结构清晰，但它只针对Excel图表，不够丰富。

数据分析中经常会提及维度。维度是观察数据的角度和对数据的描述。我们可以说地区是一种维度，这个维度包含上海北京这些城市。也可以认为销售额是一个维度，里面有各类销售数据。维度可以用时间、数值表示，也可以用文本，文本常作为类别。数据分析的本质是各种维度的组合

维度主要是三大类的数据结构：文本、时间、数值。地区的上海、北京就是文本维度（也可以称为类别维度），销售额度就是数值维度，时间就是世界

数值维度可以通过其他维度加工计算得出，例如按地区维度，count出有多少是上海的，有多少是北京的。维度可以互相转换。比如年龄原本是数值型的维度，但是可以通过对年龄的划分，将其分类为小孩、青年、老年三个年龄段，此时就转换为文本维度。

1.箱线图

箱线图一般人了解的不多，它能准确地反映数据维度的离散（最大数、最小数、中位数、四分数）情况。凡是离散的数据都适用箱线图。

下图就是箱线图的典型应用。线的上下两端表示某组数据的最大值和最小值。箱的上下两端表示这组数据中排在前25%位置和75%位置的数值。箱中间的横线表示中位数。

2.关系图

展现事物相关性和关联性的图表，比如社交关系链、品牌传播、或者某种信息的流动。

有一条微博，现在想研究它的传播链：它是经由哪几个大V分享扩散开来，大V前又有谁分享过等，以此为基础可以绘制出一幅发散的网状图，分析病毒营销的过程。关系图依赖大量的数据，它本身没有维度的概念。

3.矩形树图

上文说过，柱形图不适合表达过多类目（比如上百）的数据，那应该怎么办?矩形树图出现了。它直观地以面积表示数值，以颜色表示类目。

下图中各颜色系代表各个类目维度，类目维度下又有多个二级类目。如果用柱形图表达，简直是灾难。用矩形树图则轻轻松松。

电子商务、产品销售等涉及大量品类的分析，都可以用到矩形树图。

4.桑基图

比较冷门的图表，它常表示信息的变化和流动状态。

5.0漏斗图

大名鼎鼎的转化率可视化，它适用在固定流程的转化分析，你也可以认为它是桑基图的简化版。转化率也可以用几组数字表示，不一定做成漏斗图。

可读性**

图表的首要功能是解释，而不是设计，尤其大部分图表都会落入到过度设计的陷阱。

客观性

数据的解读因为每个人的观点和视角不同，可以呈现诸多的结果。这也是我们常说统计学会撒谎的原因。

下图是一张销售额柱形图，看来销售额没有啥特大变化嘛。

换另外一种图表展示。就看到了变化的增长趋势。

实际上两张图表的数据没有任何差异，为什么呢？区别只在坐标轴。第一张图的Y坐标轴起始为0，第二张图起始是2.45。第二张是截取了部分的柱形图。

统一性

如果图表整体颜色是冷色调，那么就不要再加入暖色。

如果图表文字是雅黑，就不要再加入宋体。

如果某地区数据，用了柱形图对比，其他地区也遵循柱形图样式。

如果某图表，女性使用红色，男性使用蓝色，那么这一规范应该在所有图表体现。除了颜色，其他设计元素同理。

如果有多张图表，图表元素应该统一，如标题、坐标轴刻度、坐标轴位置等。

用户为啥会有「将数据转化成图表」的需求？

最终的答案一定是回归到企业管理的「第一性原理」——开源节流。企业需要数据去分析如何才能节省更多钱，如何才能赚更多钱。未来的 BI的产品不能将自己定位为「工具」，而是应该定位为「服务」。

1.0从流程来看，探索性可视化是这样的：

此类可视化集中在图表的微观功能上，像辅助线、预警、各种图表类型等。

2.0解释性可视化需求

一般集中在完成了数据探索，并且形成一定数据洞察后的 story-telling场景。大家在网上看到的一些「一张图搞懂 XXX」、「一张图了解 XXX」就属于解释性可视化。

此类集中在整体的图表可视化上，比如将多个图表组合起来，制作成一份报告或者故事版，所以会提供类似标题编辑器、排版编辑器等功能。目前市面上的 BI产品，像网易有数、BDP、Tableau、PowerBI都是采取这种模式

1.这种偏业务型的产品框架，并不太适合国内市场。

因为这类产品面向的用户基本上是专业用户（数据分析师），而忽略了一个事实——大部分中国企业并没有设立专门的数据分析岗位。有能力配备数据分析师的企业一般都是中大型企业，他们付费能力可能比较强，但是也意味着用户量会较少。

专业用户对应的是数据分析师，而半专业用户则对应的是类似财务、销售、HR等，在业务上专业但数据分析上不专业的用户。这类用户的日常工作一般集中在解释性可视化上面，比如年终总结、年度规划、每月汇报中都需要利用到数据可视化。这类用户的流程是这样的：

[图片上传失败...(image-e6e0b4-1556103840929)]

用户导入数据，无需太复杂的操作，即可直接生成图表。存在问题：

可视化的理解：信息可视化就是用图形正确的表现复杂的信息和逻辑关系，

•通过图片特有的美观和趣味性，吸引读者•通过最优表现形式，使内容更易懂

•拉近读者与产品的距离，提升品牌认知度

作品一：安全产品首页展示

创作灵感：从需求文档中看到这些子产品名字有御前卫、八卦阵、御城河……当时就觉得非常有意思，脑海中立刻浮现出一个古城的画面，古城周围有士兵、有八卦阵、有御城河等。跟视觉设计师表达这个想法后大家一拍即合，最终产出了这个方案。中间的城楼最开始是红色的，有点太抢眼，为了避免喧宾夺主又体现出数据被保护的感觉，就把它改成了这种半透明的、很数据化的虚拟感觉。

作品二：产品结构图

创作灵感：通过竞品分析发现国内外同行在这方面都非常下功夫，所以我们也要力求用一张图来把产品结构和关系描述清楚。下篇文章会讲具体的设计过程。

作品三：使用流程示意图

创作灵感：产品经理给出的这个图很严谨，但是对于用户来说理解起来比较困难，因此先用线框图把它简化为单向的流程图，但这样又不够美观和直观。心灵手巧的视觉设计师经过图形的美化，巧妙解决了这个问题。

修改中（局部）：

改良后：

作品四：方案描述示意图

也是先梳理信息逻辑，用更易懂的方式去表现，再通过视觉设计师美化。

改良图：

把一件事情做好，首先要知道做好的标准是什么。把这些失败的作品放到一起，就可以大概得出失败的原因是什么，而好的标准又是什么。

[图片上传失败...(image-cf4898-1556103840928)]

从表现形式的角度“信息图表”作为视觉工具应包括以下六类：图表、图解、图形、表格、地图、列表。

按照形式特点我们常把图表分为关系流程图、叙事插图型、树型结构图、时间分布类及空间解构类五种类型。

1、关系流程类图表

2、叙事插图型图表

叙事性图表就是强调时间维度，并随着时间的推移，信息也不断有变化的图表。

3、树状结构示意图

把繁复的数据通过分支梳理的方式表达清楚。运用分组，每组再次分类的主体框架表示主从结构。

4、时间表述类示意图

时间表述类示意图只要以时间轴为中心加入文字数据即可。从设计的角度来看，将主题融入图形设计中，挑选重要事件点解读，就可以使画面精美，加深理解力度。

5、空间结构类示意图

运用设计语言把繁杂结构模型化、虚拟化是空间结构示意图存在的意义

这个流程需要协作完成，数据需要筛选和整理，精准是首要条件，其次是梳理。找出出主线逻辑，筛选次要内容从而进行精心的设计。

1、基础图形创意

柱状图和饼状图是最常用的两种基础图形，但是简单的几何形态很难给人设计感。对基础图形的创意来突出设计主题，就可以取得一举多得、事半功倍的效果

上面图片中左右的内容是完全一致的，但右图即使读者不详细关注也可心领神会。

2、高吸引度与视觉亮点

从传统网页到社交微博，用户对信息的浏览速度也越来越快，高吸引度便是最宝贵的财富点。

3、画面简洁明了

4.象征图示

在设计的上要注重保持风格的统一，这样才能让人视觉连贯、赏心悦目。

1、饼图顺序不当

饼图是一种非常简单的可视化工具，但他们却常常过于复杂。份额应该直观排序，而且不要超过5个细分。有两种排序方法都可以让你的读者迅速抓取最多的重要信息

方法一：将份额最大的那部分放在12点方向，逆时针放置第二大份额的部分，以此类推。

方法二：最大部分放在12点，然后顺时针放置

2、在线状图中使用虚线

虚线会让人分心，而是用实线搭配合适的颜色更容易彼此区分

3、数据摆放不直观

你的内容应该符合逻辑并于直观的方式引导读者阅读数据。对类目进行按字母，次数或数值大小进行排序

4、数据模糊化

确保数据不会因为设计而丢失或被覆盖。例如在面积图中使用透明效果来确保用户可以看到全部数据

5、耗费读者更多的精力

要通过辅助的图形元素来使数据更易于理解，比如在散点图中增加趋势线

6、错误呈现数据

确保任何呈现都是准确的，比如，气泡图的大小应该跟数值一样，不要随便标注

7、在热图中使用不同颜色

一些颜色比其他颜色突出，赋予了数据不必要的重元素。反而你应该使用单一颜色，然后通过颜色的深浅来表达

8、柱状过宽或过窄

柱子与柱子之间的间隔最好调整为宽的1/2

9、数据对比困难

对比是呈现差异的有效方式，但如果你的读者不易对比时，效果就大打折扣了。确保数据的呈现方式一致，可以让你的读者对比

10、使用三维图

尽管这些图看来让人振奋，但3D图也容易分散预期和扰乱数据，坚持2D是王道

数值可视化的本质就是用各种视觉属性来表达数据值的大小。视觉属性有这么几类：位置、长短、面积、颜色。对应视觉设计的点，线、面和色值。

其可视化的核心思想在于根据上下文用拟物的方式，将其与我们现世界中数值的事物联系在一起。

如果是奔跑的速度15km/h，那么可以画一个运动员跑步的图来表达这个数字。如果是奔跑的速度70km/h，那么就可以画一只猎豹奔跑，通过模糊的背景来表达奔跑的速度快。如果要描述山的高度5km，就可以画以座耸入云霄的山，给人一种高山的直观形象，更多的创意设计都可以围绕想象展开

汽车行驶的速度，分为慢速、中等和超速，如下左图所示。在表达评价信息时，你需要根据背景展开联想。比如说：降水量50毫米，我们可能想象到的就是用一个试管接了50毫米深的水。

一维表格如下图所示，数据表格中只有一行或者一列数据。我们需要对数据可视化的目标进行分析，跟进目标可将数据分为以下几类:

•强调绝对数值的数据；

•强调趋势的数据；

•百分比数据；

•不同类型的数据。

3.1.1柱状图

收入10000元的就是收入5000元的2倍，GDP一万亿就是五千亿的两倍，这种数据称之为等比数据。柱状图的阅读者一般视觉会被柱子本身所吸引，不会去注意纵轴的起点，用户往往会默认柱子的长度代表绝对数值的大小。所以柱状图的纵轴的起点必须从零开始。

3.1.2直方图

直方图数据本质的区别在于表达连续的区间上数量的分布。统计学中，直方图的纵轴要求是计数数据，也就是说，直方图是用于统计某个区间内的对象个数。

3.1.3柱状图变式：条形图

条形图还有一个很大的排版优势，能将文字和条形在一侧显示，能够对分类附加说明。在中国，如果不是因为排版的原因，请慎用这种横向的条形图。

3.1.4柱状图变式：计数条形图

3.1.5柱状图变式：径向柱状图、径向条形图、螺旋图

为了适应排版的区域，或者增加图形的趣味性，会对柱形图进行扭曲变形。

3.1.6柱形图变式：用拟物代替柱子

在平面设计，海报宣传页面中，一般会添加拟物的元素，使得数据的表达更加生动。其基本的思路都是围绕着数据主体展开联想，用拟物的对象代替柱子。

示例1：如果描述的是足球相关的内容，那么可以用踢球的形象代替柱子。

示例2：如果描述的是星体相关的内容，那么可以用星体的形象代替柱子。

示例3：如果描述的是男女差异，那么可以用男女的形象代替柱子。

示例4：如果是抽烟相关的数据，正好用烟头的形状代替柱子。

示例5：如果是山的高度，那么可以用山的形态。

3.1.7柱形图变式：按某些维度展开重组设计

上一节中，用拟物代替柱子的思路仍然是在柱状图的框架下的。但是很多时候，甚至可以抛开柱状图的束缚，根据关键词展开联想。在联想的过程中，我们只需要记住第一章中提到的数据可视化的本质：通过位置、长短、大小、颜色四个视觉元素来表示数据大小。

示例2：城市和省份PM2.5值（假设数据）

这种数据只能以地点为关键词展开，以地图的方式呈现。

PM2.5是一个没有形象的概念，所以可视化的时候，不太可能在PM2.5上面展开。那么这种数据只能以地点为关键词展开，以地图的方式呈现。

省份在地图上本身就是一个形状大小固定的面，可以通过颜色热力图来表示数值（下图，左）。

示例3：各网站访问量

例4：迁徙地图

单个城市的迁徙图的数据原型仍然是一维数组。以地图为维度展开设计时，需要表达的是各个城市与北京的连线。连线的长短信息已经被城市到北京的距离所用，于是只能用连线的颜色来表示数值。

3.2强调趋势的数据

3.2.2折线图的变式：曲线图

3.2.3折线图的变式：均线图

3.2.4折线图的变式：面积图

3.2.5折线图的变式：股指走势图

一般来说，百分比的数据使用饼图（或环形图）的方式表达，这是最常规的。

环形图与饼图不同点在于环形图可以将主题与图更好地融合。

3.3.2饼图变式：将饼形转化成对象拟物形态。

示例一：如果是描述人体的成分，那么可视化可以围绕人形展开，将饼的形状变成人的形状。

示例二：如果你想描述各类行业人群占比，那么你可以考虑画出100个人，各类行业的人用不用样式的图形，如左下图所示；而当你想描述各类枪杀案件枪支的来源，下右图所示。

STEP1：确定表意正确

“正确”是信息图最基本的要求，所以这里首先要确保信息图的内容是正确的。

对于业务比较复杂难理解的产品，可以让产品经理先根据自己的理解画一个图，设计师和产品经理进行沟通，确认双方的理解是一致的。

《淘宝技术这十年》里有一句话说的好“好的架构图充满美感”。淘宝工程师用十年的时间证明了这件事。而其实不仅是技术架构图，好的流程图、结构图、信息图等都充满美感。

怎样优化信息图的表达形式呢？如果是一个逻辑比较复杂的结构图，可以这样：

虽然逻辑没有错误，但是箭头有交叉，看起来不美

二、三维图形可视化制作技术

（一）OpenGL

OpenGL（Open Graphics Libaray）由SGI公司为其图形工作站开发的可以独立于窗口操作和硬件环境的图形开发系统。其目的是将用户从具体的硬件和操作系统中解放出来。用此系统可以不去理解这些系统的结构和指令系统，只要按规定的格式书写应用程序就可以在任何支持该语言的硬件平台上执行。由于OpenGL的高度可重用性，已经有几十家大公司表示接受OpenGL作为标准软件接口，目前加入OpenGL ARB（OpenGL体系结构审查委员会）的成员有SGI公司、HP公司、MicroSoft公司、Intel公司、IBM公司、SUN公司、DEC公司、AT&T公司的Unix软件实验室等。在该组织的努力下，OpenGL已经成为高性能图形和交互式视景处理的工业标准，能够在Windows95/98、Windows NT、Windows 2K、Macos、Beos、OS/2以及Unix上应用。OpenGL的实质是作为图形硬件的软件接口，是一组三维的API函数。

1.OpenGL的主要功能

（1）建模。不但有简单的点线面还提供了复杂的三维物体（球、锥等）以及复杂的曲线曲面（Bezier、Nurbs等）绘制函数。

（2）变换。主要包括基本变换（平移、旋转等）和投影变换（平行、透视投影等）。

（3）颜色模式设置。RGBA模式、ColorIndex颜色索引。

（4）光照和材质设置。OpenGL光有辐射光、环境光、漫反射光、镜面光；材质是用光反射率来表示的。场景中物体最终反映到人眼的颜色是光的RGB分量和材质的RGB分量叠加形成的。

（5）纹理映射。主要表达物体表面的细节。

（6）位图显示和图像增强。图像功能除了基本的复制和图像像素读写外，还提供融合（Blending）、反走样（Antialiasing）、雾化（Fog）等特殊的图像处理效果。

（7）双缓冲（Double Buffering）动画。双缓冲即前台缓冲和后台缓冲。后台计算场景、产生画面，前台显示后台已经计算好的画面。

（8）交互技术。主要是提供三种工作模式：绘图模式、选择模式和反馈模式。绘图模式完成场景的绘制，可以借助物体的几何参数及运动控制参数、场景的观察参数、光照参数和材质参数、纹理参数、OpenGL函数的众多常量控制参数、时间参数等和Windows对话框、菜单、外部设备等构成实时交互的程序系统。在选择模式下，则可以对物体进行命名，选择命名的物体，控制对命名的物体的绘制。而反馈模式则给程序设计提供了程序运行的信息，这些信息也可反馈给用户，告诉用户程序的运行状况和监视程序的运行进程。

（9）其他。利用OpenGL还能实现深度暗示（Depth Cue）、运动模糊（Motion Blur）等特殊效果。

2.OpenGL的基本原理

OpenGL是一个硬件发生器的软件接口，其主要目的是将二维、三维物体绘制到一个帧缓冲里，它包括几百个图形函数。开发者主要利用这些函数来建立三维模型和进行三维实时交互。

（1）图元操作和指令。OpenGL能够从多种可选择的模式画图元，而且一种模式的设置一般不会影响其他模式的设置，无论发生深墨情况，指令总是被顺序处理，也就是说，一个图元必须完全画完之后，后继图元才能影响帧存。

（2）图形控制。OpenGL提供诸如变换矩阵、光照、反走样方法、像素操作等参数来控制二维和三维图形的绘制。它并不提供一个描述或建立复杂几何物体的手段。OpenGL提供的是怎样画复杂物体的机制而非描绘复杂物体本身的面面俱到的工具。即OpenGL是过程性的而非描述性的。

（3）执行模式。OpenGL命令的解释模式是客户/服务器模式的，即由客户发布命令，命令由OpenGL服务器（解释器）来处理，服务器可以运行在相同的或不同的计算机上，基于这一点，OpenGL是网络透明的。

地下水三维可视化系统开发与应用

3.OpenGL的命令语法与状态

基于OpenGL标准开发的微机应用程序必须在32位Windows平台下，如Windows98/NT环境，运行时所需的动态连接库为OpenGL32.DLL、Glu32.DLL。OpenGL包含100多个库函数，这些函数按一定的格式来命名。

（1）核心函数115个，每个函数以gl开头，这些函数是最基本的，可以运行在任何工作平台上。这些函数创建二维和三维几何形体，设置视点，建立视觉体，设置颜色及材质，建立灯光，进行纹理映射，反走样，处理融合，雾化场景等，它们可以接受不同的参数，因而可派生300多个函数。

（2）OpenGL实用库函数以glu开头，共43个。这些函数基于OpenGL核心函数，主要提供对辅助函数的支持，并且执行了核心OpenGL函数的交互，因而是比核心函数更高一层的函数，也更有通用性。可以运行在任何OpenGL工作平台上。

（3）辅助库函数，共31个。以aux开头，它们是一类特殊的OpenGL函数，是帮助初学者尽快进入OpenGL编程而做简单练习用的。因此并不能在所有平台上运行。但Windows98/NT支持它们。

（4）Windows专用库函数，以wgl开头。主要是连接OpenGL和Windows窗口系统的，用它们可以管理着色描述表及显示列表，扩展功能，管理字体位图等。

（5）Win32 API函数，共6个，用于处理像素格式及缓冲。

（6）OpenGL结构，共4个。

4.OpenGL图形操作步骤

步骤1：设置像素格式：主要包括建立OpenGL绘制风格、颜色模式、颜色位数、深度位数等；

步骤2：建立模型：建立三维模型；

步骤3：舞台布景：如何把景物放置在三维空间的适当位置，设置三维透视视觉体以观察场景；

步骤4：效果处理：设置物体的材质（颜色、光学性能及纹理映射等）加入光照及光照条件；

步骤5：光栅化：把景物及其颜色信息转化为可在计算机上显示的像素信息。

（二）VRML

1.VRML简介

VRML是英文Virtual Reality Modeling Language——虚拟现实造型语言的缩写。其最初的名字叫Virtual Reality Makeup Language。名字是由第一届WWW（1994，日内瓦）大会上，由Tim Berners Lee和Dave Raggett所组织的一个名为Bird-of-a-Feather（BOF）小组提出的。后来Makeup改为Modeling。VRML和HTML是紧密相连的，是HTML在3D领域的模拟和扩展。由于VRML在Internet具有良好的模拟性和交互性，因而显示出强大的生命力。

VRML是一种3D交换格式，它定义了当今3D应用中的绝大多数常见概念，诸如变换层级、光源、视点、几何、动画、雾、材质属性和纹理映射等。VRML的基本目标是确保能够成为一种有效的3D文件交换格式。

VRML是HTML的3D模型。它把交互式三维能力带入了万维网，即VRML是一种可以发布3D网页的跨平台语言。事实上，三维提供了一种更自然的体验方式，例如游戏、工程和科学可视化、教育和建筑。诸如此类的典型项目仅靠基于网页的文本和图像是不够的，而需要增强交互性、动态效果连续感以及用户的参与探索，这正是VRML的目标。

VRML提供的技术能够把三维、二维、文本和多媒体集成为统一的整体。当把这些媒体类型和脚本描述语言（scripting language）以及因特网的功能结合在一起时，就可能产生一种全新的交互式应用。VRML在支持经典二维桌面模型的同时，把它扩展到更广阔的时空背景中。

VRML是赛博空间（cyber space）的基础。赛博空间的概念是由科幻作家William Gibson提出的。虽然VRML没有为真正的用户仿真定义必要的网络和数据库协议，但是应该看到VRML迅速发展的步伐。作为标准，它必须保持简单性和可实现性，并在此前提下鼓励前沿性的试验和扩展。

2.VRML的基本工作原理及其特性

（1）用文本信息描述三维场景。在Internet网上传输，在本地机上由VRML的浏览器解释生成三维场景，解释生成的标准规范即是VRML规范。正是基于VRML的这种工作机制，才使其可能在网络应用中有很快的发展。当初VRML的设计者们考虑的也正是文本描述的信息在网络上的传输比图形文件迅速，所以他们避开在网络上直接传输图形文件而改用传输图形文件的文本描述信息，把复杂的处理任务交给本地机从而减轻了网路的负荷。

（2）统分结合模式。VRML的访问方式基于C/S模式，其中服务器提供VRML文件，客户通过网络下载希望访问的文件，并通过本地平台的浏览器（Viewer）对该文件描述的VR世界进行访问，即VRML文件包含了VR世界的逻辑结构信息，浏览器根据这些信息实现许多VR功能。这种由服务器提供统一的描述信息，客户机各自建立VR世界的访问方式被称为统分结合模式，也是VRML的基本概念。由于浏览器是本地平台提供的，从而实现了VR的平台无关性。

（3）基于ASCII码的低带宽可行性。VRML像HTML一样，用ASCII文本格式来描述世界和链接，保证在各种平台上通用，同时也降低了数据量，从而在低带宽的网络上也可以实现。

（4）实时3D着色引擎。传统的VR中使用的实时3D着色引擎在VRML中得到了更好的体现。这一特性把VR的建模与实时访问更明确地隔离开来，也是VR不同于三维建模和动画的地方。后者预先着色，因而不能提供交互性。VRML提供了6+1个自由度，即三个方向的移动和旋转，以及和其他3D空间的超链接（Anchor）。

（5）可扩充性。VRML作为一种标准，不可能满足所有应用的需要。有的应用希望交互性更强，有的希望画面质量更高，有的希望VR世界更复杂。这些要求往往是相互制约的，同时又受到用户平台硬件性能的制约，因而VRML是可扩充的，即可以根据需要定义自己的对象及其属性，并通过Java语言等方式使浏览器可以解释这种对象及其行为。

（三）X3D

X3D（Extensible 3D——可扩展3D）是一个软件标准，定义了如何在多媒体中整合基于网络传播的交互三维内容。X3D将可以在不同的硬件设备中使用，并可用于不同的应用领域中。比如工程设计、科学可视化、多媒体再现、娱乐、教育、网页、共享虚拟世界等方面。X3D也致力于建立一个3D图形与多媒体的统一的交换格式。X3D是VRML的继承。VRML（Virtual Reality Modeling Language-虚拟现实建模语言）是原来的网络3D图形的ISO标准（ISO/IEC 14772）。X3D相对VRML有了改进，提供了以下的新特性：更先进的应用程序界面，新添的数据编码格式，严格的一致性，组件化结构（用来允许模块化的支持标准的各部分）。

1.X3D设计目标

X3D确立了以下的设计目标：

（1）分离数据编码和运行时间结构；

（2）支持大量的数据编码格式，包括XML（Extensible Markup Language）；

（3）增加新的绘图对象、行为对象、交互对象；

（4）给3D场景提供可选的应用程序界面（APIs）；

（5）定义规格的子集“概貌（Profiles）”以适合不同的市场需要；

（6）允许在不同层次（1evels）的服务上都能实现X3D规格；

（7）尽可能添加完善规格中行为的定义或描述。

2.X3D特性

为了满足工程设计、科学可视化、多媒体再现、娱乐、教育、网页、共享虚拟世界等方面使用的需要，X3D添加了以下的新特性：

（1）3D图形：多边形化几何体、参数化几何体、变换层级、光照、材质、多通道/多进程纹理帖图；

（2）2D图形：在3D变换层级中显示文本、2D矢量、平面图形；

（3）动画：计时器和插值器驱动的连续动画；人性化动画和变形；

（4）空间化的音频和视频：在场景几何体上映射视听源；

（5）用户交互：基于鼠标的选取和拖曳；键盘输入；

（6）导航：摄像机；用户在3D场景中的移动；碰撞、接近和可见性检测；

（7）用户定义对象：通过创建用户定义的数据类型，可以扩展浏览器的功能；

（8）脚本：通过程序或脚本语言，可以动态地改变场景；

（9）网络：可以用网络上的资源组成一个单一的X3D场景；可以通过超链接对象连接到其他场景或网络上的其他资源；

（10）物理模拟：人性化动画；地理化数据集；分布交互模拟（Distributed Interactive Simulation-DIS）协议整合。

（四）Java 3D

Java 3D用其自己定义的场景图和观察模式等技术构造了3D的上层结构，实现了在Java平台使用三维技术。Java 3D API是Sun定义的用于实现3D显示的接口。3D技术是底层的显示技术，Java 3D提供了基于Java的上层接口。Java 3D把OpenGL和DirectX这些底层技术包装在Java接口中。这种全新的设计使3D技术变得不再繁琐并且可以加入到J2SE、J2EE的整套架构，这些特性保证了Java 3D技术强大的扩展性。Java 3D建立在Java2（Java1.2）基础之上，Java语言的简单性使Java 3D的推广有了可能。Java 3D是在OpenGL的基础上发展起来的，可以说是Java语言在三维图形领域的扩展，其实质是一组API即应用程序接口。利用Java 3D所提供的API就可以编写出一些诸如三维动画、远程三维教学软件、三维辅助设计分析和模拟软件，以及三维游戏等。它实现了以下三维功能：

（1）生成简单或复杂的形体（也可以调用现有的三维形体）；

（2）使形体具有颜色、透明效果、贴图；

（3）在三维环境中生成灯光、移动灯光；

（4）具有行为的处理判断能力（键盘、鼠标、定时等）；

（5）生成雾、背景、声音；

（6）使形体变形、移动、生成三维动画；

（7）编写非常复杂的应用程序，用于各种领域如VR（虚拟现实）。

1.Java 3D的数据结构

Java 3D的数据结构和OpenGL的数据结构一样，采用的是场景图的数据结构，但Java 3D根据Java语言的特点。Java 3D的场景图是DAG（Directed-acyclic Graph），其特点是具有方向的不对称性。Java 3D的场景图由Java 3D的运行环境直接转变成具有三维显示效果的显示内存数据，从而在计算机上显示出三维效果，显示内存中不断接收Java 3D的运行最新结果，从而产生三维动画。

2.、Java 3D（API）中的类

Java 3D是根据OpenGL的三维图形库及VRML的基础上开发出来的一个API，里面包含了几乎所有编写Java交互式三维应用程序所需的最基本的类（类方法）、接口。主要存放在程序包Javax.media.j3d中，这些是Java 3D的核心类。另外，还有提供一个有助于快速编程的应用类型的包（Utility包）com.sun.j3d.utils（可或缺，主要是能大大地提高程序的编写效率）。除了核心类和Utility包之外，还有：

（1）Java.awt（主要是定义一个显示用的窗口）；

（2）Javax.vecmath（主要是处理定义的矢量计算所用的类，今后核心类）；

（3）Java 3D的类根据作用可分为Node、NodeComponent，其中Node又分为Group及Leaf两个子类。

（五）IDL

1.IDL简介

IDL（Interactive Data Language）是美国RSI公司（Research System Inc）的产品，它集可视、交互分析、大型商业开发为一体，为用户提供了完善、灵活、有效的开发环境。IDL的主要特性包括：

（1）高级图像处理、交互式二维和三维图形技术、面向对象的编程方式、OpenGL图形加速、跨平台图形用户界面工具包、可连接ODBC兼容数据库及多种程序连接工具等。

（2）IDL是完全面向矩阵的，因此具有处理较大规模数据的能力。IDL可以读取或输出有格式或无格式的数据类型，支持通用文本及图像数据，并且支持在NASA，TPT，NOAA等机构中大量使用的HDF，CDF及netCDF等科学数据格式及医学扫描设备的标准格式DICOM格式。IDL还支持字符、字节、16位整型、长整型、浮点、双精度、复数等多种数据类型。能够处理大于2Gb的数据文件。IDL采用OpenGL技术，支持OpenGL软件或硬件加速，可加速交互式的2D及3D数据分析、图像处理及可视化。可以实现曲面的旋转和飞行；用多光源进行阴影或照明处理；可观察体（Volume）内部复杂的细节；一旦创建对象后，可从各个不同的视角对对象进行可视分析。

（3）IDL具有图像处理软件包，例如感兴趣区（ROI）分析及一整套图像分析工具、地图投影及转换软件包，宜于GIS的开发。

（4）IDL带有数学分析和统计软件包，提供科学计算模型。可进行曲线和曲面拟合分析、多维网格化和插值、线性和非线性系统等分析。

（5）用IDL DataMiner可快速访问、查询并管理与ODBC兼容的数据库，支持Oracle，Informix，Sybase，MS SQL等数据库。可以创建、删除、查询表格，执行任意的SQL命令。

（6）IDL可以通过ActiveX控件将IDL应用开发集成到与COM兼容的环境中。用Vi-sual Basic，Visual C++等访问IDL，还可以通过动态连接库方式从IDL调用C，Fortran程序或从其他语言调用IDL。

（7）用IDL GUIBuilder可以开发跨平台的用户图形界面（GUI），用户可以拖放式建立图形用户界面GUI，灵活、快速地产生应用程序的界面。

（8）IDL为用户提供了一些可视数据分析的解决方案，早在1982年NASA的火星飞越航空器的开发就使用了IDL软件。

2.IDL的编程方式

IDL有两种编程方式，一是利用IDL平台的GUIBuilder进行编程，这种方式的特点是所见即所得，使用IDL自身所具有的控件进行编程和界面设置，但使用灵活性不够；另一种是利用IDL平台的集成开发环境的组件编程技术，这种方式的特点是较为灵活，而且功能较强，可以随着编程者的意愿进行设置。另外在IDL中有批处理文件语句，即在命令行中直接输入命令语句来进行数据的读入和输出，以及进行属性设置和处理。此外，IDL提供IDLDRAW WIDGET控件，可进行基于COM技术的开发。

3.IDL的应用领域

由于其强大的功能和独特的特点，IDL语言可以应用地球科学（包括气象、水文、海洋、土壤、地质、地下水等）、医学影像、图像处理、GIS系统、软件开发、大学教学、实验室、测试技术、天文、航空航天、信号处理、防御工程、数学统计及分析、环境工程等很多领域，IDL语言都可以得到广泛的应用。目前应用IDL语言，已经开发出了ENVI，IMAGIS，RiverTools，医学等成熟产品。具体的应用实例也非常多，如在2000年澳大利亚悉尼奥运会综合预报系统、美国国家环境卫星数据和信息服务中心的厄尔尼诺现象分析等工作中得到了成功的应用。

北京市勘察设计研究院应用IDL语言，已开发了真三维地质分析系统AutoDig，能够直接对简单的地质数据，或其他带层次性的数据实现科学的、完整的三维建模；同时也提供真三维显示功能，不仅能对三维体实现任意的旋转、放大、缩小，而且也能实现交互式的真三维切割功能。

（六）小结

三维图形技术是随着计算机软硬件技术的发展而发展变化的，其鼻祖是SGI公司推出的OpenGL三维图形库。OpenGL是业界最为流行也是支持最广泛的一个底层3D技术，几乎所有的显卡厂商都在底层实现了对OpenGL的支持和优化。OpenGL同时也定义了一系列接口用于编程实现三维应用程序，但是这些接口使用C（C++）语言实现并且很复杂。掌握针对OpenGL的编程技术需要花费大量时间精力。

Java 3D是在OpenGL的基础上发展起来的，可以说是Java语言在三维图形领域的扩展，其实质是一组API即应用程序接口。

Direct3D是Microsoft公司推出的三维图形编程API，它主要应用于三维游戏的编程。众多优秀的三维游戏都是由这个接口实现的。与OpenGL一样，Direct3D的实现主要使用C++语言。

VRML2.0（VRML97）自1997年12月正式成为国际标准之后，在网络上得到了广泛的应用，这是一种比BASIC，JAVASCRIPT等还要简单的语言。现已发展为X3D。脚本化的语句可以编写三维动画片、三维游戏、计算机三维辅助教学。它最大的优势在于可以嵌在网页中显示。

美国RSI公司（Research System Inc）研制和开发的最新可视软件IDL（Interactive Data Language）交互式数据语言，是进行数据分析、可视化和跨平台应用开发的较佳选择，它集可视、交互分析、大型商业开发为一体，为用户提供了完善、灵活、有效的开发环境。三维技术的比较见表1-2。

表1-2三维技术对比

三、数据可视化属于数据结构嘛

数据可视化是指将数据以图形、图表或其他形式的可视化方式呈现出来的过程。它的主要目的是使数据更加直观、易于理解，方便人们快速获取信息和洞察数据内在规律。

数据可视化并不属于数据结构的范畴，而是一种数据分析和呈现的方法。数据结构是指在计算机中存储和组织数据的方式，是计算机科学的一个基础理论，与数据可视化没有直接关系。

常见的数据结构包括数组、链表、栈、队列、树、图等。它们的选择和使用会影响程序的效率和空间占用，是计算机科学中的重要内容。