本文目录一览：

• 1、初识 D3.js ：打造专属可视化
• 2、数据可视化工具有哪些,越炫酷越好,任务比较急在一个月之内需要完成,有知道的朋友给介绍一下呗。
• 3、深入浅出丨带你看懂数据可视化「美」的历程
• 4、惊艳：近百种数据可视化工具效果展示，总有一款适合你！

初识 D3.js ：打造专属可视化

随着现在自定义可视化的需求日益增长，Highcharts、echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了，这个时候D3的无限定制的能力就脱颖而出。

如果想要通过D3完成可视化，除了对于D3本身API的学习, 关于web标准的HTML, SVG, CSS, Javascript 和 数据可视化的概念以及标准都是需要学习的。这无疑带来了较高的学习门槛，但这也是值得的，因为掌握 D3 后，我们几乎可以实现任何 2d 的可视化需求。

本文通过对D3核心模块分析以及进行具体案例实践的方式，来帮助初学者学习了解D3的绘图思路。

D3的全称是 Data-Driven Documents（数据驱动文档），是基于数据来操作文档的 JavaScript 库，其核心在于使用绘图指令对数据进行转换，在源数据的基础上创建新的可绘制数据， 生成SVG路径以及通过数据和方法在DOM中创建数据可视化元素（如轴）。

相对于Echats等开箱即用的可视化框架来说，D3更接近底层，它可以直接控制原生的SVG元素，并且不直接提供任何一种现成的可视化图表，所有的图表都需我们在它的库里挑选合适的方法构建而成，这也大大提高了它的可视化定制能力。而且D3 没有引入新的图形元素，它遵循了web标准（HTML, CSS, SVG 以及 Canvas ）来展示数据 ，所以它可以不需要依赖其他框架独立运行在现代浏览器中。

在V4版本后，D3的 API 现在已经被拆分成一个个模块，我们可以根据自己的可视化需求进行按需加载。根据泛义可以将D3 API模块分为以下的几大类： DOM操作、数据处理，数据分析转换、地理路径，行为等 。

这里我们主要对 D3-selection 和 D3-scale 模块进行解析：

D3-selection （选择集） 是 D3js的核心模块，主要是用来进行选择元素，设置属性、数据绑定，事件绑定等操作。

选择元素： D3-selection 提供了两种方法来获取目标元素，d3.select()：返回目标元素的第一个节点，d3.selectAll()：返回目标元素的集合，乍一看有点类似原生API 的 querySelector 和 querySelectorAll，但是 d3.select 返回的是一个 selection 对象，querySelector 返回的是一个 NodeList 数组。通过控制台打印的信息，可以看到 selection 下的 groups 存放了所有选择的元素集合，parents 存放了所有选中元素的父节点。

设置属性或者绑定事件： 我们不需要关心 groups 的结构是怎么样的。当调用 selection.attr 或者 selection.style 的时候, selection 中的所有 group 的所有子元素都会被调用，group 存在的唯一影响是: 当我们传参是一个function 的时候，例如 selection.attr('attrName', function(data, i)) 或 selection.on('click', function(data, i)) 时， 传递的 function(data, i) 中, 第二个参数 i 是元素在 group 中的索引而不是在整个 selection 中的索引。

数据绑定： 实际上是给选择的DOM元素的 __data__ 属性赋值，这里提供了3种方式进行数据绑定：

（1）给每一个单独的 DOM 元素调用 selection.datum：d3.select('body').datum(20) 等价于 document.body.__data__ = 20

（2）从父节点中继承来数据, 比如: append , insert , select，子节点会主动继承父节点的数据：

（3） 调用 selection.data() 方法，支持传入装有基础数据类型的数据，也支持传入一个function(parentNode, groupIndex)根据节点索引与数据做映射，data()方法引入了 d3 中非常重要的 join 思想:

绑定 data 到 DOM 元素， 在D3中是通过比较 data 和 DOM 的 key 值来找到对应关系的。 如果我们没有单独设置 key 值，那么默认根据 data 的下标索引来设定，但是当数据顺序发生改变，这个默认下标 key 值 就变得不可靠了，这时我们可以使用 selection.data(data, keyFunction) 中的第二个参数 keyFunction，根据当前的数据返回一个对应的 key 值。通过下面的图例可以看出，不管是有一个还是多个 group（每个group 都是独立的），只要我们保证在任意一个 group 中的 key 值是唯一的，数据一旦发生变化都会反映给对应的 DOM 元素（ update 的过程）：

上面提到的都是data数据和DOM元素数量相同的情况下的数据绑定，那如果data数据和DOM元素数量不相同时，我们来看看 D3 又是如何进行数据绑定的：现在终于可以来介绍 D3-selecion 模块的核心 Join 思想了，这个思想简单来说就是 “不应该告诉D3去怎么创建元素, 而是告诉D3，.selectAll() 得到的 selecion 集合应该和 .data(data) 绑定的数据要怎么一一对应”。

从上图可以看出，在进行 d3.data(data) 数据绑定的时候，会产生三种状态的选择集：

用 Join 的方式来理解意味着，我们要做的事情仅仅是声明 DOM集合和数据集合之间的关系, 并且通过处理三个不同状态的集合 enter、update 、 exit 来描述这种关系。这种方式可以大大简化我们对DOM元素的操作，我们不需要再用 if 和 for 循环的方式来进行复杂的逻辑判断，来得到我们需要得到的元素集合。并且在处理动态数据的时候，可以通过处理这三种状态，轻松的展示实时数据和添加平滑的动态交互效果。

D3-scale （比列尺） 提供多种不同类型的比例尺。经常和 D3-axis 坐标轴模块一起使用。

D3-scale 提供了多种连续性和非连续性的比例尺，总体可以将他们分为三大类：

常用的一些比例尺：

（1）d3-scaleLinear 线性比例尺(连续性输入和连续性输出)

可以看出，调用d3.scaleLinear()可以生成线性比例尺，domain()是输入域，range()是输出域，相当于将domain中的数据集映射到range的数据集中。

使用示例：

映射关系：

（2）d3-scaleTime 时间比例尺(连续性输入和连续性输出)

时间比例尺与线性比例尺类似，只不过输入域变成了一个时间轴。正常我们使用比例尺都是个正序的过程，但是D3也提供了invert()以及invertExtent()方法，我们可以通过输出域中的具体值得出对应输入域的值。

使用示例：

（3）d3.scaleQuantize 量化比例尺(连续性输入和离散性输出)

量化比例尺是将连续的输入域根据输出域被分割为均匀的片段，所以它的输出域是离散的。

使用示例：

映射关系：

（4）d3. scaleThreshold 阈值比例尺(连续性输入和离散性输出)

阈值比例尺可以为一组连续数据指定分割阈值，阈值比例尺默认的 domain：[0.5] 以及默认的 range：[0, 1] ，因此默认的 d3.scaleThreshold() 等价于 Math.round 函数。 阈值比例尺输入域为 N 的话，输出域必须为 N + 1，否则比例尺对某些值可能会返回 undefined，或者输出域多余的值会被忽略。

使用示例：

存在三种映射关系：

a. 当domain和range的数据是 N : N+1

b. 当domain和range的数据是 N : N + 大于1

c. 当domain和range的数据是 N + 大于0 : N

（5）d3.scaleOrdinal 序数比例尺(离散性输入和离散性输出)

与scaleLinear等连续性比例尺不同，序数比例尺的输出域和输入域都是离散的。

使用示例：

存在三种映射关系：

a.当domain和range的数据是一一对应

b.当domain少于range的数据

c.当domain多于range的数据

通过以上的学习，应该对d3是如何操作DOM以及坐标轴的数据映射为相应的可视化表现有了一定的了解，下面我们来实际运用这两个模块，来实现我们常见的可视化图表：柱状图。

（1）首先添加一个SVG元素。

（2）根据我们上面说到 d3.scale 模块以及 d3.axis 模块绘制坐标轴，d3.scaleBand() 叫做序数分段比例尺，类似我们说的 d3.scaleOrdinal() 序数比例尺，但是它支持连续的数值类型的输出域，离散的输入域可以将连续的范围划分为均匀的分段。这里再讲一个细节，在绘制网格的时候，我们并没有额外添加 line 元素来实现，而是通过 d3.axis 坐标轴模块的 axis.ticks() 方法对坐标轴刻度进行了设置，通过 tickSIze() 设置了刻度线长度，来模拟和图表宽度相等的网格线，并且还可以通过 tickFormat() 对Y轴刻度值进行格式化转换。

（3）坐标轴绘制好了后，我们通过数据绑定来绘制与之对应的矩形(rect)元素了。

（4）这个时候柱状图已经基本绘制好了，我们再丰富内容展示，添加标签、标题等提示信息。

（5）最后我们通过给柱子绑定监听事件，实现tooltips的信息浮层交互。

通过对 d3.selection 、d3.scale 以及 d3.axis等模块的学习，我们已经可以绘制出常用的柱状图等图表，我们也可以通过d3提供的其他模块绘制出更加复杂的可视化效果，例如通过 d3-hierarchy(层级模块) 实现层级树图可视化，d3-geo(地理投影) 实现地图数据可视化等，本文讲解的内容还只是D3库的冰山一角。所以等我们掌握了D3后，限制我们实现可视化的不再是技术而是想象力。

数据可视化工具有哪些,越炫酷越好,任务比较急在一个月之内需要完成,有知道的朋友给介绍一下呗。

数据分析之大数据可视化之初级篇--零编程工具

Tableau

Tableau 是一款企业级的大数据可视化工具。Tableau 可以让你轻松创建图形，表格和地图。 它不仅提供了PC桌面版，还提供了服务器解决方案，可以在线生成可视化报告。服务器解决方案可以提供了云托管服务。

Infogram

Infogram的最大优势在于，让可视化信息图表与实时大数据相链接。只须三个简单步骤，可以选择在众多图表，地图，甚至是视频可视化模板中进行选择，支持团队账号。

ChartBlocks

ChartBlocks是一个易于使用在线工具，它无需编码，便能从电子表格，数据库中构建可视化图表。整个过程可以在图表向导的指导下完成。图表是响应式的，并且可以和任何的屏幕尺寸及设备兼容。

Datawrapper

Datawrapper是一款专注于新闻和出版的可视化工具。 Datawrapper非常容易使用，不需要任何编程基础。你只需要上传你的数据，便能轻松地创建和发布图表，甚至是地图。Datawrapper提供了 众多的自定义布局及地图模板。

Plotly

Plotly帮助你在短短几分钟内，从简单的电子表格中开始创建漂亮的图表。如果希望为JavaScript和Python等编程语言提供一个API接口的 话，Plotly是一款非常人性化的工具。

RAW

RAW弥补了很多工具在电子表格和矢量图形(SVG)之间的缺失环节。你的大数据可以来自MicrosoftExcel中，谷歌文档或是一个简单的逗号分 隔的列表。它最厉害的功能是可以很容易地导出可视化结果，因为它和Adobe Illustrator，Sketch 和Inkscape是相容的。

Visual.ly

Visual.ly是一个可视化的内容服务。它提供专门的大数据可视化的服务。如果你想完 全外包可视化文件给第三方。你可以使用非常简化的在线流程：你只需描述你的项目，服务团队将在项目的整个持续时间内和你在一起。

数据可视化之开发展篇--JavaScript库

D3.js

D3.js是最好的数据可视化工具库。D3.js运行在JavaScript上，并使用HTML，CSS和SVG。 D3.js是开源工具，使用数据驱动的方式创建漂亮的网页。 D3.js可实现实时交互。这个库非常强大和前沿，所以它带有没有预置图表也不支持IE9。

Ember Charts

Ember Charts – 顾名思义是一种基于Ember.js框架和使用d3.js的可视化工具。Ember Charts以绘制时间序列图，柱状图，饼图和散点图为主。它非常优易于扩展，有极强的错误处理能力，当你遇到坏数据时，系统也不会崩溃。

NVD3

NVD3运行在d3.js之上, 它可建立可重用的图表组件。该项目的目标是保持所有的图表整洁和可定制性。 NVD3是d3.js之上的简单的接口，保持了d3.js的所有强大功能。 NVD3由Novus Partners前端工程师开发和使其保持了图表技术洞察力。

Google Charts

Google Charts 以HTML5和SVG为基础，充分考虑了跨浏览器的兼容性，并通过VML支持旧版本的IE浏览器。所有您将创建的图表是交互式的，有的还可缩放。 Google Charts非常人性化，有全面的模板库，你可以从中找到所需模板。

FusionCharts

FusionCharts是最全面的JavaScript图表库，包括90个图表和900种地图。FusionCharts可以轻松集成像jQuery库，Angularjs和React框架以及ASP.NET和PHP语言。 FusionCharts支持JSON和XML数据，并提供许多格式图表：PNG，JPEG，SVG和PDF。

Highcharts

Highcharts是一个JavaScript API与jQuery的集成，全球最大的100家公司中有61家正在使用它。图表使用SVG格式，并使用VML支持旧版浏览器。它提供了两个专门的图表类 型：Highstock和Highmaps，并且还配备了一系列的插件。

Chart.js 

对于一个小项目的图表，chart.js是一个很好的选择。开源，只有11KB大小，这使得它快速且易于使用，它支持多种图表类型: 饼图，线性图和雷达图等。

Leaflet

Leafleft 基于Open Street Map数据，使用HTML5 / CSS3绘制互动式可视化图。可以使用他们的扩展插件库添加热点图(heatmaps)和动画标记。 Leaflet 是开源和只有33 KB大小。

Chartist.js

Chartist.js的开发社区一直致力于打败所有其他JavaScript图表库。它使用了Sass的个性化风格，它的SVG输出是响应式的。

N3-charts

N3-charts是一种基于AngularJS框架的工具。它建立在D3.js之上，帮助您创建简单的互动图表。 N3-charts是一种小型化的图表工具，不适用于大型项目。

Sigma JS

Sigma JS 是交互式可视化工具库。由于使用了WebGL技术，可以使用鼠标和触摸的方式来更新和变换图表，同时支持JSON和GEXF两种数据格式。这为它提供了大量的可用互动式插件。Sigma JS 专注于网页格式的网络图可视化，在大数据网络可视化中非常有用。

Polymaps

Polymaps是一款地图可视化一个JavaScript工具库。 Polymaps使用SVG实现从国家到街道一级地理数据的可视化。可以使用CSS格式来修改你的样式。它是创建heatmap热点图的最好的工具之一，创建的所有地图都可以变成动态图。

Processing.js

Processing.js是一个基于可视化编程语言的JavaScript库。作为一种面向Web的JavaScript 库，Processing.js是能够有效进行网页格式图表处理。这使得它成为了一种非常好交换式可视化工具。 Processing.js需要一个兼容HTML5的浏览器来实现这一功能。

深入浅出丨带你看懂数据可视化「美」的历程

深入浅出丨带你看懂数据可视化「美」的历程

古人说：“人不可貌相”，但从古至今，人类却是一群感性动物，容易受到外在表象影响，先感性才理性。

《韩非子》里提到，春秋末期鲁国人澹台灭明，天生异像，“额低口窄，鼻梁低矮，不具大器形貌”，拜孔子为师，孔子没有拒绝，但对他不上心，爱答不理，让他坐冷板凳。于是，他毅然决然地离开孔子，自学成才，独辟蹊径，游历讲学，积极传播儒家学说，并培养出很多人才，深受老百姓爱戴。孔子听闻他的事迹之后，幡然醒悟。

在今天，好看这件事也一样是很重要的。“颜值即正义”，长得好看的人，似乎更容易受到欢迎和优待。

但古人也说过：“相由心生”，从一个人的外表和精神状态可以大概知道这个人的内在状况，相反，一个人的内心思想状态，也会投射到形象外表。

因此，我们要注重自身内在涵养的健康发展，也要学会对外在美的表达与审视。

同样地，好的设计也应该是兼具内容与形式。

信息时代让人们的生活节奏加快，人们每一天都变得匆忙，时间被碎片化，甚至没有多少时间完整看完一段文字。文字的力量是有限的。只有借助可视化，信息才能高效地传播。

数据可视化是数据领域一个重要的分支，目的是“让数据说话”，展现数据之美。好的图表会说话，好的图表可以抓住用户的心。

一、历史篇：人类对世界的认知与表达从图画开始

研究发现，人脑处理图片信息是同步进行的，而处理文字信息则是一步一步循序渐进的，而且一篇文字下来，大部分人只记住了其中的20%；人在看报纸时，99%的文字信息会自动被过滤掉，脑子里只残留了可怜的1%；人脑处理图片的速度是处理文字的6000倍。也就是说，如果一篇6000字的文章需要10分钟看完，而压缩成一张图片则只需要10/6000分钟的时间。

图片可以表达的内容要比文字更丰富，同时也可以给人留下很大的想象空间 ，可以体现真实性（有图有真相），可以让人赏心悦目。

其实，在远古时期，我们遥远的祖先——智人就已经学会画画，基于自己对周边生活环境的认知，将人、鸟、兽、草、木等事物以及狩猎、耕种、出行、征战、搏斗、祭祀甚至男女交媾等日常活动刻画在岩石上、石壁上、洞穴里......到目前为止，欧洲、亚洲、美洲、大洋洲的70多个国家150多个地区发现岩画遗址，而仅非洲和澳洲少数族群目前还存有岩画制作的传统，例如著名的岩画遗址拉斯科洞窟壁画、阿尔塔米拉洞窟壁画、大麦地岩画、拉文特岩画、平图拉斯河手洞壁画、非洲大象岩刻、将军崖岩画等。

岩画学家埃马努埃尔·阿纳蒂在《世界岩画：原初语言》一书中提到：随着智人技术水平的提高、抽象和感知能力的增强，促使了复杂语言和艺术的产生，而岩画正是这种语言的一种记录形式；目前所知的70%岩画都是狩猎采集社会的作品，剩余30%是游牧和农耕时期的作品，在这些岩画的结构中存在着共同的记忆和普遍性的认知模式。岩画是象形文字，是无文字时代的写作，是人类隐没记忆的见证。

可见，人类对世界的认知与表达是从图画开始的。

图1. 远古时代的岩画

人类造出文字之前，还经历过“结绳记事”、“图画记事”等阶段。

但随着社会的发展，人类发生了“农业革命”，不再单纯依靠狩猎为生，制造和使用工具更加娴熟，剩余产品逐渐增加，社会组织逐步成熟。这时，社会组织不断产生大量的信息，除法令条纹外，还必须记录各种交易、税收、商品库存、节假日以及打胜仗的日期等。在此之前，人类虽然可以利用图画记事，但更多的还是用自己的大脑记录信息。随着信息的大量产生，容易产生记忆过载，于是就有了文字。

象形文字是由原始的图画发展而来的。由于社会的发展，加上图画效率低，难以满足社会化需求，于是人们逐渐从图画中抽离出一个个元素，形成象形文字。象形文字是一种最原始的造字方法，纯粹利用图形来作文字使用，而这些文字又与所代表的东西在形状上很相像，图画性质减弱，象征性质增强。苏美尔楔形文字、甲骨文、古埃及象形文字、玛雅文字都是独立地从原始社会最简单的图画和花纹产生出来的。

但象形文字也有很大的局限性，因为有些实体事物和抽象事物是画不出来的，而且写起来很慢又难读懂。

图2. 世界四大古文字

随着社会的进一步发展，文字也得到了很大的发展，在象形文字的基础上逐步分化出“表音”和“表意”两种文字。文字是用来记录和传播语言的，而记录和传播只有两种途径，或“表音”，或“表意”。就汉字来说，其发展脉络大致是：结绳记事—图画文字—象形文字—形意文字—意音文字。

社会的发展，推动了文字的发展，使得人们在对事物的表达上可以更加丰富多样，可以指事、象形、形声、会意、转注、假借。人们对世界的认知和表达在广度和深度上也都有了很大的延伸。反过来，由于更多样化的文字，人们能够更加准确、生动、深刻、灵活地记录下所见所闻和所思所想，加快了知识的传播与传承，推动了社会的大发展。

文字即使再丰富，也有难以突破的局限性。文字需要理解，不能一目了然，对抽象事物及个体的表达，还不够形象、到位。因此，在出现文字之后的时代，许多文献就以图文结合的形式流传下来。例如，在1912年发现的伏尼契手稿中，字母和语言至今无人破解，但其中的植物、天体出浴美女等许多图片，甚至出现了构造精致的精美图案，一目了然，让人惊叹。

图3. 伏尼契手稿

二、发展篇：进入了“百花齐放、百家争鸣”的时代

计算机出现之前，人们已经能够灵活地运用柱形图、线图、饼图等基本图表来展示数据，而且也衍生了很多新型、创意的数据图表。

大家应该都知道南丁格尔（国际上以她的生日命名了护士节），但很多人应该不知道南丁格尔玫瑰图（下图）就是她创造的。在克里米亚战争期间，南丁格尔通过搜集数据，发现很多死亡原因并非是“战死沙场”，而是在战场外感染疾病，或是在战场上受伤，却没有得到适当的护理而致死。为了解释这个原因，降低英国士兵死亡率，她画了这个著名的图表，于1858年递交到维多利亚女王手中。(这么漂亮的图表，想必女王一定很受感动)

图4. 南丁格尔玫瑰图

世界著名的绘图大师米纳德，开创了许多重要的主题绘图技巧，改良了其他技术。他是首个把饼图和地图结合在一起的人，并将流线放入地图中。以下图表是米纳德最广为人知的作品，被EdwardTufte认为是史上最杰出的统计图。它描绘了拿破仑的军队自离开波兰－俄罗斯边界后军力损失的状况，在一张图中通过两个维度呈现了六种维度信息：拿破仑军队人数、行军距离、温度、经纬度、移动方向以及时间－地域关系。

图5. 拿破仑行军图

计算机出现后，特别是互联网的兴起，人类社会以“摩尔定律”的速度，进入一个全新的时代，科学技术也得到了前所未有的革新与发展，同时也给人们带来了很多新思维。

技术的进步，让我们能够采集到比以前多得多的信息，数据规模不断成指数量级的增长，数据的内容和类型也比以前要丰富得多，改变了人们分析和研究世界的方式，也给人们提供了新的可视化素材，推动了数据可视化领域的发展。

与以前相比，数据可视化领域发生了很多的变化，得到了很大的发展。

1. 可视化的表现形式和场景更丰富

在当今信息时代，信息出现了“泛滥”与“过载”，人们每天都受到各种信息的“轰炸”。当我们打开网页或手机APP时，首先进入我们视野的就是各种弹出的广告信息。这些信息从内容到形式，都经过了精心设计。我们走在大街上，映入我们眼球的则是满大街的广告海报，还时常有人站在街边向路人派发传单。我们不仅仅只从书上看到了可视化的图表，还从海报、信息图、PPT、数据产品、大屏等获取到了大量的可视化信息。

图6. 可视化的表现形式

2. 可视化展现方式更多样和灵活

数据图表是最常用的可视化元素。除柱形图、条形图、饼图、环形图、线图、散点图、面积图、雷达图、K线图、地图等基本图表外，现在也出现了更多新式的图表，如山峰图、雷达图、气泡图、热力图、漏斗图、树图、箱形图、瀑布图、河流图、词云图、仪表盘、南丁格尔玫瑰图、旭日图、和弦图、桑基图、3D图，等等。另外，智慧的人们也常常创意性地将各种图表混搭，例如下图，地图和饼图、散点图、柱形图等搭配使用。

图7. 各种图表的混搭

除图表外，对图片和图标的灵活运用，使得可视化更加美观、形象、贴切。

图9. 图标的灵活运用

3. 从静态到动态

由于技术的发展，实时数据采集、实时数据传输以及实时数据计算得以实现，人们终于得以欣赏到数据的灵动之美。以前人们只能看到事后数据形成的分析结果，看到的是数据的过去式，领略的是数据的静态之美。而现在，通过实时计算及数据可视化，人们可以知道“当前时刻发生了什么”，看到了数据的变化，看到了数据的动态之美。

4. 设计上更注重用户体验

由“信息泛滥”引起“信息过载”，从而导致“信息焦虑”。无论是风格、元素、配色、文字、交互上还是细节上，人们的可视化作品都越来越注重用户的视觉体验，希望能让用户一目了然，不多花一点儿时间去理解。在设计风格上，从3D拟物化到简洁扁平化再到拟物扁平化的发展变化，也在不断地为用户“做减法”。

三、原则篇：关于设计的四大原则

“别忘了，你是为读者进行可视化设计。”

——《数据之美：一本书学会可视化设计》

所有的设计细节，都必须经过精心构思，都必须站在用户角度来思考。

颜值高或者打扮好看的人，总能牢牢地吸引别人的目光，相反，衣着邋遢不修边幅的人，却往往是别人瞅一眼就嫌弃。那些聪明的人，必然深谙这样的秘诀：好看的PPT报告，总能在第一时间吸引受众，再加上生动的演讲，就会收到很多好评；广告牌做得越好，就越吸引路人的注意力，越能让路人记住，广告效果也就越好。

当你看到别人的可视化作品时，你是否总觉得不好，但怎么也说不出到底哪些地方不好？如果你熟悉以下基本原则，就算不是一个专业的设计人员，你也可以快速看出哪里出了问题并提出非常中肯的建议。如果你还能熟练运用这些原则，那你的可视化作品将焕然一新，更加专业、好看、有趣，也将收获更多读者的赞赏。

亲密性（分组）

在生活中，几乎每件事都有逻辑，人们也喜欢遵循一定的逻辑去理解世间之事，例如时间先后、空间、因果、总-分-总等逻辑结构。

在做可视化设计的时候，我们所要表达的内容一定不能是一些无序呈现，这样会给读者造成理解上的混乱。我们的可视化作品应当能够遵循多数读者所能理解的思维逻辑，将内容分成几部分按顺序一步一步地表达出来。

相同部分的内容，彼此相关，应当靠近，放在一起。这样阅读起来才能被理解成为同一单元的内容，而不是多个孤立的不相关的内容。不同部分的内容，应当明显地区隔开来，例如上下部分内容之间用一空行隔开或者间距放大。这样有助于组织信息，减少混乱，为读者提供清晰的结构。

图10. 亲密性原则

对齐

在版式布局上，任何元素的摆放，都可能会影响甚至主导用户的视觉流程。因此，任何元素都不能随意摆放，否则会造成混乱，而混乱会令人不适。对齐，使每个元素都与其它元素建立起某种视觉联系。对齐，也让可视化作品更加清晰、精巧、清爽。

对齐，不仅包括左对齐、右对齐、顶端对齐、低端对齐，还包括水平居中、垂直居中、横向分布、纵向分布，等。

图11. 对齐原则

重复/统一

我们都有“先入为主”的“陋习”，当看到与之前不和谐不一致的东西，常感突兀，甚至本能抗拒。因此，在可视化作品中反复使用一些视觉要素，建立上下文之间的联系，增加条理性，保持视觉上的统一。

任何视觉元素都可以在同一作品中重复使用，例如颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。

图12. 重复原则

对比/强调

在做可视化设计时，我们的初心是以图文的形式把所要表达的信息清晰的传递给用户，让用户一目了然，尽量不需要太多思考和理解。为了达到这个目的，我们需要强调重点，弱化次要，避免作品中所有的元素看起来重要程度都是一样的。如果所有的东西都同等重要，那就相当于所有的东西都不重要。

图13. 强调重点，弱化必要

如果你想突出某些信息要点，那就让对应的元素（字体、颜色、大小、线宽、形状、空间等）与其它元素不相同，让它们截然不同，让用户首先能够关注到它们。

图14. 对比原则

表达，力求准确、到位、简洁、易懂

当用户看到我们的可视化作品时，我们最好要保证所表达的信息能被用户正确理解。除使用上面几个原则外，我们还要附加一些辅助信息，例如文字、箭头等。在可视化作品中，文字必不可少，但篇幅要加以控制。

文字的表达，要准确、到位、简洁、易懂，要能引导用户正确地理解图表的意思，要能不引起任何歧义。

图15. 表达，要准确、到位

四、流程篇：要有数据可视化的正确姿势

没有什么比亲手创造美这件事更给人带来成就感了。

当我们满怀激动地开始数据可视化时，请不要马上钻入某个细节里，不要急着考虑用什么酷炫的图表来展现，也不要纠结于用什么颜色、什么字体。我们要有数据可视化的正确打开姿势。

不同形式的数据可视化流程有所不同，这里主要讲重要且相通的部分。

(一) 了解你的需求

关于需求，在实现之前，一定要听清楚做什么，想清楚怎么做，说清楚怎么做。

了解与分析数据可视化需求，主要围绕以下几点来展开：

1. 看什么，即哪些内容需要可视化。

很少需求方能够准确、全面地说出他们真正想要什么。他们只能描述出大概的样子，因此需要不断引导他们以明确真正详细的需求。

· 可视化的目的是什么，用户是谁，在哪里看，什么情况下看，多久看一次；

· 了解数据，看看有哪些指标，哪些指标可以直接取，哪些需要复杂计算，哪些可以实时，哪些只能离线；

· 哪些指标必须展现，哪些指标不展现，哪些指标可展现可不展现；

· 展现的维度有哪些，按时间、部门、地域、指标，看实时数据还是历史数据；

· 通过可视化，期望从中知道哪些信息，等等。

2. 谁看，即用户是谁。

如果面对的是求真务实的老板，那可能需要侧重于内容，追求逻辑的合理性和数据的准确性；如果是来访参观的贵客，那可能为了展示公司实力与形象而追求高大上的图表设计；如果是不懂技术的业务人员，在可视化时可能需要避免过于技术性。

3. 在哪里看，即有哪些可视化形式。

一次性的工作汇报，可使用PPT，如果老板嫌弃做PPT太慢，可以直接用Excel，或者其它工具，如脑图；如果为很多用户提供周期性计算的指标数据，且满足不同条件下的查看，那适合做一款数据产品或者可视化报表；向来访的贵客介绍公司情况时，如果想给客人们提供一种赏心悦目的视觉享受，用大屏可视化数据再合适不过了；如果想给公司各部门同事普及知识、介绍成果、通知活动等，做一张可视化信息图，并在线发布，图文结合，有趣生动，既吸引更多读者关注，提升阅读体验。

4. 什么情况下看。

“第一印象”肯定是重要的。用户“第一眼”感觉不好，当然就没有了然后，就不会有“第二眼”、“第三眼”，也就不会再往下看了。所以，要带给用户“第一眼”足够良好的视觉体验，就要多想想用户会在什么场景下去看你的可视化作品。

例如，打开手机，多数情形下，用户只会根据标题有选择地浏览少量文章，因此，取一个生动、有趣、亮眼的标题，比普通标题更有视觉冲击力，会让你的文章从众多内容中脱颖而出，赢得更多用户点击阅读。

图16. 取一个有吸引力的标题

例如，在企业内部（特别是人多的公司），海报、信息图形式的内容，每天都大量地以邮件地方式群发给各部门人员，或活动通知、或展现成果、或宣传典型，等等。每个员工都“信息过载”，只能阅读少量的信息。

除标题要吸引人外，还需要注意用户打开邮件的实际场景。不少用户打开这种群发邮件时，常常是下面的情况，一堆的收件人，一堆的抄送人，这已经占据了有限电脑屏幕的一部分，剩下的部分就是点击某个邮件时出现的正文内容的部分。因此，在这一区域完整显示出标题（以及内容摘要），才能吸引用户往下看。

图17. 多想想具体的场景

（二）可视化设计

可视化设计是最重要的环节。只有做好这一环节，后面的事情才会变得简单顺畅。

1. 梳逻辑

我们在阅读时，只要遇到稍微难懂的知识，基本上会本能地第一时间选择退缩，不再看下去。之所以觉得难懂，最主要是因为逻辑不清晰给我们带来理解上的困扰。逻辑就像一棵树的树干，如果我们只见树叶不见树干，就会迷失方向。因此，在可视化设计前，一定要站在用户的角度，梳理出清晰的逻辑结构。这一步，想清楚怎么做，很重要，多花点时间也没关系。

对于数据可视化来说，逻辑就是确定各部分的核心内容，以及内容之间的先后次序和关联关系，即讲什么不讲什么，先讲什么后讲什么。

把逻辑设计得简单一些，清晰一些，用户就能越快明白你的“良苦用心”。

2. 定风格

风格营造一种氛围，驱动用户沉浸式阅读。不同的风格，适合不同的用户不同的场景，例如科技、学院、活泼、严肃、可爱，等等。

3. 排版式

版式设计就是关于如何处理信息重点，因为在任何设计中，最重要的信息需要首先被注意到，然后是次要信息。

好的版式就像导盲犬，合理地对内容进行布局，适当地安排版式中的视觉流程，引导用户第一时间看到最需要被关注的部分，暗示用户“先看什么，后看什么”。

一般来说，可视化作品一般包括标题、正文、图表、说明文字等要素。版式就是基于上述提到的几个原则，确定元素之间的层次结构，合理摆放这几个要素。

4. 选图表

不是越酷炫的图表就越适合。这首先要看展现什么数据。某些图表只适合展现相应格式的数据。其次，也需要对展现数据的图表进行个性化定制，包括样式、风格、颜色、字体，使之契合上下文语境，也让图表更有温度。

不要将就而选择默认设置的图表，不要做那个“Mr.差不多”或“Ms.还行”。如果将默认设置的图表放在可视化作品中，总是显得那么突兀和不协调。另外，对默认设置的弃用，可以强迫自己不断精进，不断提升可视化的能力。

5. 调细节

对单个部分的可视化设计，并不能完全保证整体上的和谐一致。因此，回到整体，根据前面提到的几个原则，发现细节问题，对某些细节进行调整，使之整体上保持一致。例如，各部分视觉元素之间保持对齐，如标题、正文、图表等；在配色、字体或其它细节上，各部分要尽量做到统一；各部分之间要有明显的区隔，等等。

（三）指标计算

巧妇难为五米之炊。有数据，才能谈数据可视化。数据的获取、整合、计算，会占用大量的时间。这一部分工作是相对独立的。

但需要注意的是，模拟数据和真实数据是有区别的。根据模拟数据设计的图表，一定要用真实数据展现与验证，验证图表与真实数据的契合程度。例如下图，模拟数据展示的图表中各部门之间存在明显的差异，但改为用真实数据展示时，却“看起来感觉都一样”，这时候就需要调整图表的设置，凸显视觉上的差异。

图18. 用真实数据验证可视化的效果

指标的计算过程，这里略去不讲。

（四）前端开发

数据产品、大屏的可视化实现，还需要前端开发。

理论上来讲，只要设计出的图表，就一定能在前端实现。但这个可能会受到前端开发人员的技术水平和展现工具的限制。所以，可视化设计有时候需要寻求一种关于设计与实现之间的平衡。

可视化设计人员最好事先有所评估，采用复杂图表设计之前最好与开发人员沟通探讨实现的可行性。

五、工具篇：你会用Excel设计图表吗？

Excel是最常用、最基本、最灵活且最应该掌握的图表制作工具。 可以说，大多数图表样式都可以用Excel画出来。如果你认为用Excel画不出来某种样式的图表，有可能是你还未掌握Excel的高阶技巧。

Excel展现的图表是静态的，且支持的数据量比较有限。所以，如果是企业级的动态数据展现，还需要借助专业的大数据可视化工具。

专业可视化工具有很多，大致可分为三类：企业级专业可视化工具、轻量级在线可视化工具、编程式图表工具。

企业级专业可视化工具

ECharts 是国内使用率非常高的开源图表工具，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的 Canvas 类库 ZRender，提供直观、生动、可交互、可高度个性化定制的数据可视化图表。ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

D3.js 是最好的开源数据可视化工具库。D3.js运行在JavaScript上，并使用HTML、CSS和SVG。 D3.js使用数据驱动的方式创建漂亮的网页。 D3.js可实现实时交互。这个JS库将数据以SVG和HTML5格式呈现，所以像IE7和8这样的旧式浏览器不能利用D3.js功能。

Tableau是一款企业级的大数据可视化工具。Tableau 可以让你轻松创建图形，表格和地图。 它不仅提供了PC桌面版，还提供了服务器解决方案，可以让您在线生成可视化报告。服务器解决方案可以提供了云托管服务。

轻量级在线可视化工具

BDP个人版，类似Tableau的在线免费的数据可视化分析工具，不需要破解、不需要下载安装，在线注册后就能一直使用，操作很简单，只需要拖拽。支持几十种图表类型，也支持制作数据地图（自带坐标纠偏）。除可视化之外，BDP还有数据整合、数据处理、数据分析等功能。

百度图说，基于ECharts，在线图表制作工具，采用Excel式的操作方式制作样式丰富的图表，图表自定义的选项很丰富，使数据呈现的方式更加美观个性，易分享传播。

文图主要用在你要出一份包含文字说明的报告时使用，提供几个确定好风格配色的主题供选择，让整个报告风格统一、简洁美观！文图能够良好地适配移动端。但文图的排版不是很好用。

创客贴，在线平面设计工具，简单，快速，轻松完成在线设计，据说是2016最好的在线设计网站。

编程式图表工具

对于掌握编程语言的程序员来说，设计新颖、令人惊艳的数据图表也可以通过代码来实现。

Python有很多具有画图功能的包，如matplotlib、Seaborn、ggplot、Bokeh、pygal、Plotly、Geoplotlib、Gleam、missingno、Leather，等等。

R语言提供了很多数据可视化工具包，例如ggplot2、ggthemes、ggmap、ggiraph、ggstance、GGally、gganimate、ggradar、ggTimeSeries、ggseas、lattice、rgl、ggvis、htmlwidgets、leaflet、dygraphs，等等。

类似提供强大绘图编程功能的语言还有PHP、HTML、JavaScript、CSS等。

六、技巧篇：刻意练习是提升可视化技能的唯一途径

不断练习，不断精进

提升数据可视化技能的唯一途径就是在理解可视化设计原则和方法论的基础上，不断练习，不断精进。

除此之外，还要有点完美主义。

技巧在于平时的积累。多观察，生活中看到好的设计，多想想为什么人家设计那么好，让你忍不住多看几眼。看到不好的设计，多想想到底哪里不好。看到好看的图表，看到别人介绍的小技巧，动手做一做。

技巧太多，这里不做展开细讲。

“去设施倾向”

“这是章北海看到的另一个以前很少有人想象到的现代技术特色——去设施倾向。这种倾向在地球上还只是初露端倪，但‘去设施化’已成为比地球世界更先进的舰队世界的基本结构。这个世界到处都是简洁空荡的，几乎见不到任何设施，只有在需要时，设施才会出现，而且是在任何需要的位置出现。世界在被技术复杂化后，正在重新变得简洁起来，技术被深深地隐藏在现实的后面。”

——《三体》

科幻小说《三体》里面的这段话，给了我们提示。当我们做分析和可视化数据时，如果不用选项框和菜单栏时，应该隐藏起来，用到时才打开。另外，也尽量让所使用的软件最大化。这样可以让内容信息展现在最大的视野区域内，这样有助于让我们从中获取更全面的信息，指导我们下一步做正确的决策。

图19. 限的视野区域，信息最大化

颜色不宜过多，配色要合理

我们在可视化设计时，最好不要使用超过三种以上的主色调。颜色过多，无形中会分散用户的注意力，使得用户无法聚焦。

颜色的搭配要合理。大自然是最好的色彩家，可以借鉴大自然的色彩搭配。另外，如果你第一眼看到别人的设计，感觉很舒服，赏心悦目，那也可以借鉴作品中的色彩搭配。相信你的直觉，至少你的身体不会欺骗你。

图20.颜色不宜过多，配色要合理

图21.从生活和自然中学习配色技巧

惊艳：近百种数据可视化工具效果展示，总有一款适合你！

导读 ：俗话说“巧妇难为无米之炊”。数据时代，没有一款好的数据可视化分析工具，光有团队怎么行？商场如战场，数据是把枪。亚马逊运用大数据为客户推荐商品信息，阿里用大数据成立了小微金融服务集团，而谷歌更是计划用大数据接管世界……不知不觉，数据已经成为我们生活中必不可少的利器。本文收集了各个平台各种行业的数据可视化分析工具，让你不仅大饱眼福，而且还可以让你事半功倍。

一款免费的新型大数据可视化分析工具，操作简单，支持多种数据源，上卷下钻，数据预测，聚类分析，相关性分析，数据联想，决策树，地图，组合图等功能。

Charting Fonts是将符号字体与字体整合（把符号变成字体），创建出漂亮的矢量化图标。

Gephi是进行 社会 图谱数据可视化分析的工具，不但能处理大规模数据集并且Gephi是一个可视化的网络 探索 平台，用于构建动态的、分层的数据图表。

CartoDB是一个不可错过的网站，你可以用CartoDB很轻易就把表格数据和地图关联起来，这方面CartoDB是最优秀的选择。

Google Chart提供了一种非常完美的方式来可视化数据，提供了大量现成的图标类型，从简单的线图表到复杂的分层树地图等。它还内置了动画和用户交互控制。

D3（Data Driven Documents）是支持SVG渲染的另一种JavaScript库。但是D3能够提供大量线性图和条形图之外的复杂图表样式，例如Voronoi图、树形图、圆形集群和单词云等。

Crossfilter既是图表，又是互动图形用户界面的小程序，当你调整一个图表中的输入范围时，其他关联图表的数据也会随之改变

Raphael是创建图表和图形的JavaScript库，与其他库最大的不同是输出格式仅限SVG和VML.

R语言是主要用于统计分析、绘图的语言和操作环境。虽然R主要用于统计分析或者开发统

计相关的软件，但也有用作矩阵计算。其分析速度可比美GNUOctave甚至商业软件MATLAB。

如果你需要制作信息图而不仅仅是数据可视化，Visual.ly是最流行的一个选择。

Weka是一个能根据属性分类和集群大量数据的优秀工具，Weka不但是数据分析的强大工具，还能生成一些简单的图表。

NodeBox是OS X上创建二维图形和可视化的应用程序，你需要了解Python程序，NodeBox与Processing类似，但没有Processing的互动功能。

Processing是数据可视化的招牌工具。你只需要编写一些简单的代码，然后编译成Java。Processing可以在几乎所有平台上运行。

Leaflet是一个开源的JavaScript库，用来开发移动友好地交互地图。

Openlayers可能是所有地图库中可靠性最高的一个。虽然文档注释并不完善。且学习曲线非常陡峭，但是对于特定的任务来说，Openlayers能够提供一些其他地图库都没有的特殊工具。

PolyMaps是一个地图库，主要面向数据可视化用户。PolyMaps在地图风格化方面有独到之处，类似CSS样式表的选择器。

Timeline即时间轴，用户通过这个工具可以一目了然的知道自己在何时做了什么。

jsDraw2DX是一个标准的JavaScript库，用来创建任意类型的SVG交互式图形，可生成包括线、矩形、多边形、椭圆、弧线等图形。

iCharts提供可一个用于创建并呈现引人注目图表的托管解决方案。有许多不同种类的图表可供选择，每种类型都完全可定制，以适合网站的主题。iCharts有交互元素，可以从Google Doc、Excel表单和其他来源中获取数据。

Modest Maps是一个轻量级、可扩展的、可定制的和免费的地图显示类库，这个类库能帮助开发人员在他们自己的项目里能够与地图进行交互。

Many Eyes是一个Web应用程序，用来创建、分享和讨论用户上传图形数据。

Anychart是一个灵活的基于Flash/JavaScript(HTML5)的图表解决方案、跨浏览器、跨平台。除了图表功能外，它还有一款收费的交互式图表和仪表。

Kartograph不需要任何地图提供者像Google Maps，用来建立互动式地图，由两个libraries组成，从空间数据开放格式，利用向量投影的Python library以及post GIS，并将两者结合到SVG和JavaScript library，并把这些SVG资料转变成互动性地图。

Sigma.js是一个开源的轻量级库，用来显示交互式的静态和动态图表。

经常使用开源软件的朋友应该很熟悉ECharts，大家都知道去年春节以及近期央视大规划报道的百度大数据产品，如百度迁徙、百度司南、百度大数据预测等等，这些产品的数据可视化均是通过ECharts来实现的。

Zoho Reports支持丰富的功能帮助不同的用户解决各种个性化需求，支持SQL查询、类四暗自表格界面等。

Quantum GIS(QDIS)是一个用户界面友好、开源代码的GIS客户端程序，支持数据的可视化、管理、编辑与分析和印刷地图的制作。

Tableau Public是一款桌面可视化工具，用户可以创建自己的数据可视化，并将交互性数据可视化发布到网页上。

Paper.js是一个开源向量图表叙述架构，能够在HTML5 Canvas 运作，对于初学者来说它是很容易学习的，其中也有很多专业面向可以提供中阶及高阶使用者。

Dundas Chart处于行业领先地位的NET图表处理控件，于2009年被微软收购，并将图表产品的一部分功能集成到Visual Studio中。

TimeFlow Analytical Timeline是为了暂时性资料的视觉化工具，现在有alpha版本因此有机会可以发现差错，提供以下不同的呈现方式：时间轴、日历、柱状图、表格等。

Gantti是一个开源的PHP类，帮助用户即时生成Gantti图表。使用Gantti创建图表无需使用JavaScript，纯HTML-CSS3实现。图表默认输出非常漂亮，但用户可以自定义样式进行输出（SASS样式表）。

Smoothie Charts是一个十分小的动态流数据图表路。通过推送一个webSocket来显示实时数据流。Smoothie Charts只支持Chorme和Safari浏览器，并且不支持刻印文字或饼图，它很擅长显示流媒体数据。

Flot是一个优秀的线框图表库，支持所有支持canvas的浏览器（目前主流的浏览器如火狐、IE、Chrome等都支持）。

Pizza Pie Charts是个响应式饼图图表，基于Adobe Snap SVG框架，通过HTML标记和CSS来替代JavaScript对象，更容易集成各种先进的技术。

Fusion Charts Suit XT是一款跨平台、跨浏览器的JavaScript图表组件，为你提供令人愉悦的JavaScript图表体验。它是最全面的图表解决方案，包含90+图表类型和众多交互功能，包括3D、各种仪表、工具提示、向下钻取、缩放和滚动等。它拥有完整的文档以及现成的演示，可以帮助你快速创建图表。

Protovis是一个可视化JavaScript图表生成工具。

Arbor.Js提供有效率、以力导向的版面配置演算法，抽象画图表组织以及筛选更新的处理。

Highchart.js是单纯由JavaScript所写的图表资料库，提供简单的方法来增加互动性图表来表达你的网站或网站应用程式。目前它能支援线图、样条函数图。

Circos最初主要用于基因组序列相关数据的可视化，目前已应用于多个领域，例如：影视作品中的人物关系分析，物流公司的订单来源和流向分析等，大多数关系型数据都可以尝试用Circos来可视化。

NodeXLDE 主要功能是社交网络可视化。

BirdEye是Decearative Visual Analytics，它属于一个群体专案，为了要提升设计和广泛的开源资料视觉化发展，并且为了Adobe Flex建视觉分析图库，这个动作以叙述性的资料库为主，让使用者能够建立多元资料视觉化界面来分析以及呈现资讯。

Visualize Free是一个建立在高阶商业后台集游InetScoft开发的视觉化软体免费的视觉分析工具，可从多元变量资料筛选并看其趋势，或是利用简单地点及方法来切割资料或是小范围的资料。

OpenStreetMap是一个世界地图，由像您一样的人们所构筑，可依据开放协议自由使用。

OpenHeatMap简单易用，用户可以用它上传数据、创建地图、交流信息。它可以把数据（如Google Spreadsheet的表单）转化为交互式的地图应用，并在网上分享。

GeoCommons可以使用户构建富交互可视化应用来解决问题，即使他们没有任何传统地图使用经验。你可以将实 社会 化数据或者GeoCommons保存的超5万份开源数据在地图上可视化，创造带交互的可视化分析作品，并将作品嵌入网站、博客或分享到社交网络上。

来源: 悟空智能 科技