数据可视化Data-Driven Documents
http://alignedleft.com/tutorials/d3/
D3简介
D3全称：Data-Driven Documents
D3是一个很神奇的基于Javascript的在网页上实现数据可视化的工具。作者是原可视化工具Protovis开发小组的成员Mike Bostock，现Protovis已经不再更新，Mike Bostock将主要精力转向以Protovis为基础的D3，更好的支持大数据处理和动态交互。已发布到V2版本，作者也提供V3版本，但尚未正式发布。
掌握D3的基础：
1、熟悉 HTML，DOM，CSS；
2、有那么一点点的编程经历；
3、知道什么是 jQuery，至少要了解Javascript；
4、愿意去学习CSV、SVG、JSON、正则表达式等知识点；
5、为了更好的理解，可以补充一些XML、XHML、HTML5、AJAX等等，清楚其中的区别；
6、你需要有热情，并愿意做出优秀的、交互式可视化图形。
开发工具：不是必需的！
基于D3的开发不需要特别的开发工具，用系统自带的记事本就可以（不推荐使用写字板），如果为了可视方便，可以使用Notepad++或者Editplus，推荐WebStorm。
调试：Chrome 和 Firefox 都自带Javascript调试功能。
为了本地开发方便，可以装个本地server。
简单的开始
准备工作
参考项目目录：
/
d3/
d3.v2.js
d3.v2.min.js
index.html
其中d3.v2.min.js是压缩版，更小，推荐网站发布时使用。
简单的布局：
上例只是内嵌形式，也可以将D3代码写在单独的 .js 文件中。
添加元素
我们在START区域内写入：
d3.select("body").append("p").text("New paragraph!");
结果看到我们没有写标签
，但是出现了一个段落。
解析：
d3代表D3对象；
d3的select()方法通过使用CSS选择器的语法来选择DOM元素(如body)，并且选择的是第一个匹配的元素，使用 selectAll() 可以返回所有匹配元素。
append()方法是在所选择元素内的末尾加上元素(如p)，也即追加；
text()方法写入元素内容。
D3语法
D3的语法被称为
链语法( chain syntax )，通过添加链节点可以在一行代码内实现多个操作。如上例可以写作：
d3.select("body")
.append("p")
.text("New paragraph!");
结果是一样的。那么为了读写方便，推荐使用这种方式，除非需要压缩代码。
由于一个方法的输出类型往往是后一个方法的输入类型，因此链中的方法是
按顺序排列的。
数据绑定及其使用
数据绑定：
数据绑定是为了给选择的元素附加一个数值，以便后面使用，根据这个数值的大小可以自由控制元素的呈现形式。
START：
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
绑定方法：selection
.data() data()参数是绑定的数据。
有时候数据数量可能多于所选元素数量，这时候就需要使用
.enter()方法来检查数量是否相等，如果不等，enter()会创建一个新的
元素占位符(placeholder)，然后把占位符的引用提交给链的下一环节。
.append()方法获取enter()方法创建的元素占位符后，将新的p元素添加到DOM。
上述数据可以在Chrome Console输入console.log(d3.selectAll("p"))看到。
数据使用：
把上述代码最后一行改为：
.text(function(d) { return d; });
上句匿名函数 function(d) 的参数d就是绑定的数值。具体的返回值，可以在匿名函数内写控制代码。
Drawing divs
这一节通过设置div来生成bar，首先设置div的class：
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override this later */
margin-right: 2px; //设定bar的间隔
background-color: teal;
}
数据绑定：
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar");
.style("height", function(d) {
return 5*d + "px";
});
返回5个不同高度的bar。
随机数据的生成：
var dataset = []; //Initialize empty array
for (var i = 0; i < 25; i++) { //Loop 25 times
var newNumber = Math.round(Math.random() * 30); // 0-30
dataset = dataset.concat(newNumber); //添加数组元素
}
Javascript的String和Array都有concat方法，分别连接字符串和添加数组元素。
Drawing SVGs
使用append() 和attr()来画SVG：
START：
//Width and height
var w = 500;
var h = 50;
//Data
var dataset = [ 5, 10, 15, 20, 25 ];
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circles.attr("cx", function(d, i) {
return (i * 50) + 25;
})
.attr("cy", h/2)
.attr("r", function(d) {
return d;
})
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", function(d) {
return d/2;
});
数据类型
D3的输入数据非常灵活。
数组Array：使用[ ]包括，逗号隔开，for()循环常用。
对象Objects：使用{ }包括，不同值对用逗号隔开。
var fruit = {
kind: "grape",
color: "red",
quantity: 12,
tasty: true
};
引用单个值时使用点标记( dot notation)，例如：fruit.kind
数组+对象（Arrays + Objects）：可以灵活使用，互相包含，根据需求设定。但记住数组使用[ ]，对象使用{ }。
JSON：与Objects的区别是属性名称都用{ }包括起来：
var jsonFruit = {
"kind": "grape",
"color": "red",
"quantity": 12,
"tasty": true
};
GeoJSON：用于存储地理信息数据，是JSON对象的格式化。GeoJSON对象也是JSON对象，所有的JSON对象都是Javascript对象。
GeoJSON 在地理空间上存储点坐标（经纬度坐标系），也可以在形状或其它空间特性上存储。经度在前，纬度在后。具体示例见JSON之GeoJSON。
D3数据格式化
d3.format(specifier)：通过指定说明符specifier返回一个新的格式化函数，这个新的格式化函数只能输入一个参数值，然后返回说明符specifier指定的格式。
specifier形式： [*sign*][0][*width*][,][.*precision*][*type*]
sing：+ 表示正负数都可用新函数，- 表示只能负数用，空格只能用于正数。
width：定义字段宽度。
.*precision：参数指定精确到几位小数
type： e(使用Javascript当中的Number.toExponential方法), g(Number.toPrecision), f(Number.toFixed), d(Number.toString), r(同f，但约等于设定的有效位), %(同f，但转成百分率形式), p(同r，但是转成%表示), s(同f，但附加一个单位符号)。
示例：
var zero = d3.format("04d");
zero(2); // "0002"
zero(123); // "0123"
d3.round(x[, n])：将x约等于到包含n位小数的值。
d3.requote(string)：返回String的引用，使得String可以作为字符串面量嵌入到正则表达式中。
制作柱状图/条形图（使用一维数据）
通过svg和通过div画柱状图的区别是：svg坐标原点在左上角，画自下而上的chart表需要坐标倒置（使用缩放功能更简单，见后文）。
填充颜色： .attr("fill", "teal");
Labels：添加标签。
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", function(d) {
return h - (d * 4) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
制作散点图（使用二维数据）
示例：
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0];
})
.attr("cy", function(d) {
return d[1];
})
.attr("r", 5);
上面的d是一个两个值的数组，分别是xy坐标。
小结
通过上面简单的示例可以看出，
D3的核心内容就是加载数据、创建元素、用数据驱动元素属性，到这里就可以理解
D3是数据驱动文档的含义。
D3高级教程
Scales缩放
由于数据直接当作图像px值来用，有时候尺寸、位置并不完全合适，需要使用缩放功能。d3自带scales方法 d3.scale，可以根据需要指定参数。缩放的概念类似于标准化。
输入域（input domain）是指输入数据值的域。输出范围(output range)域是待定输出值的范围，通常就用来显示数据。
线性缩放：
var xscale = d3.scale.linear()
.domain([100, 500])
.range([10, 350]);
然后就可以给xscale()指定参数，返回缩放后的值：
xscale(100); //Returns 10
xscale()既是一个函数，又是一个带有自己方法的对象。
通常要处理的数据比较多，domain需要
使用min()方法和max()方法确定最小值和最大值。
x轴缩放：
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([0, w]);
y轴缩放：
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([0, h]);
然后将d分别作为xScale和yScale的参数来进行缩放返回新值。
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
缩放还有一个非常有用的功能就是解决SVG的坐标系问题：
.range([h, 0]);
添加一个边界变量可以避免图形跑到边界以外：
var padding = 20;
.range([padding, w - padding]);
.range([h - padding, padding]);
线性缩放的其它方法：
d3.scale.linear() 还有一些其它很有用的方法：
nice()：自动将任何range()的参数向两边取简化值，避免参数有很长的小数。
rangeRound()：作为range()的替代，将所有的输出值约等于整数。
clamp()：如果一个新的输入数据输出后超出了边界，使用clamp(true)可以将超出边界的值显示在距离最近的边界。
其它缩放类型：
数学缩放（线性缩放也是数学缩放）
identity: identity缩放是线性缩放的特殊类型，实现 1:1 的缩放，其方法都是恒等函数，只在偶尔处理像素坐标时有用。
quantize: quantize缩放是linear缩放的变体，输入的域是连续的，使用离散的range，输入数据被分割成不同的片段，也即是分类，如群体按设定的年龄段分类。
quantile: 也是linear缩放的变体，无论输入数据什么分布，都会被映射成离散值。
pow指数缩放: pow缩放与线性缩放相似，区别是pow缩放首先对输入数据进行指数变换，相当于 y = mx^k + b，其中k是.exponent()的指定参数，默认为1，所以默认情况下也是数值 1:1 的缩放。
sqrt: sqrt缩放是pow缩放的特殊类型，默认是平方根缩放。
d3.scale.pow().exponent(.5)
通过exponent()方法指定指数。
log对数缩放: log缩放与linear缩放相似，区别是log缩放首先对输入数据进行对数变换，相当于 y = m log(*x*) + b 。
threshold缩放：阈值缩放与quantize缩放类似，不过允许将任意的子集映射到离散的range。
Ordinal缩放：
ordinal: 输入域是离散的，比如名字或类别。
categorical colors: 输出颜色值。
Axes坐标轴
axes用来和scales缩放协作以丰富图形的内容。axes可以创建SVG的元素，包括线、标签、小标记等等。
axes的缩放参照前面缩放的xScale或yScale：
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
.ticks(5);
然后调用xAxis函数在图中创建线条和标签，使用
call()将上个链节点的selection作为其方法的应用对象：
svg.append("g") \\g不是必须的，只为产生一个标签方便链操作
.call(xAxis);
坐标轴标尺的确定由
ticks()方法实现，但其参数只是参考，D3会根据参考调整合适的标尺个数。
tickFormat()方法更好的控制坐标轴显示，首先要用到
d3.format()格式化方法。将刻度值转变成小数点后保留1位的百分率形式：
var formatAsPercentage = d3.format(".1%");
xAxis.tickFormat(formatAsPercentage);
加载外部文档
d3.xhr(url[, mime], callback)：使用XMLHttpRequest请求资源。
d3.text(url[, mime], callback) ：读取文本文件。
d3.json(url, callback)：读JSON文件。
d3.html(url, callback)：读HTML文件。
d3.xml(url[, mime], callback)：读xml文件。
d3.csv(url, callback)：读逗号分隔的.csv文件。
d3.tsv(url, callback)：读tab键分隔的tsv文件。