数据可视化与D3.js

数据可视化

数据可视化是如何把数据更好的展现出来的一个课题，在大数据出现后，它变得更为重要和迫切。

以前使用excel进行柱状图、饼状图、折线图等是最常用的数据可视化手段之一，而在WEB端，使用流行的extjs、fusioncharts、jfreechart，或者相对不太流行的amchart、highcharts、Bootstrap里的charts、jquery的一些插件等等都可以实现饼状图等的展示。

然而我这里说的数据可视化并不是这种传统的、简单的图形，而是更为复杂，能够在有限的空间里展示更多的数据信息，尤其是针对大数据的更好展现。比如treemap1就是一个例子。传统实现树形数据结构的展示都会通过一棵树，比如extjs里的树形组件，而treemap通过一个个矩形，加以不同的切分、不同的颜色实现更多信息的展示。

数据可视化的WEB技术

数据可视化的技术有很多，但这里只讨论WEB端的，所以excel即使它现在或以后能实现多牛叉的数据可视化，本文也先不讨论。

如今流行的WEB数据可视化技术有D3.js和tableau等等很多。D3有非常多的可视化图形，多得都看不过来。具体可见D3-Example。而tableau除了对treemap等的支持外，对地图的支持尤为突出。具体可见tableau-gallery
其实，只要能把数据通过图形化展示，都可以称为数据可视化。但是我这里划分为两类是为了更好的区分老一代数据可视化和在大数据背景下新的数据可视化技术。比如在下面这篇文章中：

30个最好的数据可视化工具推荐

Extjs和d3js都是数据可视化工具。但是我认为，extjs更倾向于js组件库，而数据的图形化只是它的其中一个功能，所以也不太会面面俱到，只提供基本的图形即可。而D3则不同，它是专门针对数据可视化的，除了常见的图形，它更专注于如何更好的进行数据可视化。

下面重点介绍D3的入门使用。

D3.js入门

如何下载

官方网站
在首页下载d3.zip，目前的版本是3.5.5（在d3..js文件的第3行可看见）。解压后只有三个文件：

• d3.js
• d3.min.js
• LICENSE

查看Example

点击首页的上方的Example。根据example里的源文件，可以快速做出一个helloword的例子。如果不使用服务器的情况下，建议使用Firefox浏览器，我亲自测试使用chrome和ie并不成功。

查看中文文档

学习一个新技术，除了源代码（d3.js），文档绝对是最重要的。
Wiki中文链接

第一个例子

我姑且称为helloword吧。其实就是example里的第一个例子-box plots。打开链接：
http://bl.ocks.org/mbostock/4061502#morley.csv
根据里面的说明创建3个文件：

• index.html
• box.js
• morley.csv

直接用火狐（我的版本是Mozilla Firefox35.0.1）打开index.html即可。其他浏览器最好先部署个服务器才能打开。否则会在d3.csv、d3.json等代码行报错：
 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

参考

推荐一个很好的d3.js中文网，基本我遇到的大部分初级问题，都在这里找解答。
- ourd3js

推荐几篇文章：

• 二十大数据可视化工具点评
• 22个免费的数据可视化和分析工具推荐
• d3.js入门文章（之一）
• D3.js 进阶系列 — 1.0 - CSV 表格文件的读取
• d3.js-wiki-CSV

本文出自：ouyida3的csdn博客
2015.5.19

---

1. 如果不知道treemap是什么，可通过D3.js对treemap的一个实现大概看看treemap的模样。 ↩