可视化工具–D3–案例分析
Scatterplot Matrix
实例链接 http://mbostock.github.io/d3/talk/20111116/iris-splom.html
散点矩阵图是通过绘制多变量间的散点图展现各变量间的相关关系,通常用在统计学研究中。
在多变量相关关系的大数据分析中也可以应用。
部分接口:
d3.svg.brush():定义刷子,可以选择一个二维区域
brush.x().y():方向变换,用于拖拽
brush.extent():设置刷子选取范围
brush.clear():清除刷子以选取的范围
brush.empty():判断选取范围是否为空,通常用在brushend中
brush.on():事件监听(类似鼠标事件),有brushstart, brush, brushend三种
brush.event():通过程序触发监听事件
一些基本参数设置:
var size = 140,
padding = 10,
n = 4,
traits = ["sepal length", "sepal width", "petal length", "petal width"];
定义比例尺:
var x = {}, y = {};
traits.forEach(function(trait) {
//数值转换的操作
flowers.forEach(function(d) { d[trait] = +d[trait]; });
//因为散点矩阵的比例尺唯一,因此使用比例尺字典,这里定义多个比例尺
var value = function(d) { return d[trait]; },
domain = [d3.min(flowers, value), d3.max(flowers, value)],
range = [padding / 2, size - padding / 2];
x[trait]=d3.scale.linear().domain(domain).range(range);
y[trait]=d3.scale.linear().domain(domain).range(range.reverse());
});
定义坐标轴:
var axis = d3.svg.axis()
.ticks(5)
.tickSize(size * n);
定义刷子:
var brush = d3.svg.brush()
.on("brushstart", brushstart)
.on("brush", brush)
.on("brushend", brushend);
定义画布:
var svg = d3.select("body").append("svg:svg")
.attr("width", 1280)
.attr("height", 800)
.append("svg:g")
.attr("transform", "translate(359.5,69.5)");
定义与绘制图例:
var legend = svg.selectAll("g.legend")
.data(["setosa", "versicolor", "virginica"])
.enter().append("svg:g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-179," + (i * 20 + 594) + ")"; });
legend.append("svg:circle")
.attr("class", String)
.attr("r", 3);
legend.append("svg:text")
.attr("x", 12)
.attr("dy", ".31em")
.text(function(d) { return "Iris " + d; });
坐标轴绘制:
svg.selectAll("g.x.axis")
.data(traits)
.enter().append("svg:g")
.attr("class", "x axis")
.attr("transform", function(d, i) { return "translate(" + i * size + ",0)"; })
.each(function(d) { d3.select(this).call(axis.scale(x[d]).orient("bottom")); });
svg.selectAll("g.y.axis")
.data(traits)
.enter().append("svg:g")
.attr("class", "y axis")
.attr("transform", function(d, i) { return "translate(0," + i * size + ")"; })
.each(function(d) { d3.select(this).call(axis.scale(y[d]).orient("right")); });
主体(绘制矩阵和散点):
var cell = svg.selectAll("g.cell")
.data(cross(traits, traits))
.enter().append("svg:g")
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.i * size + "," + d.j * size + ")"; })
.each(plot);
矩阵小标题:
cell.filter(function(d) { return d.i == d.j; })
.append("svg:text")
.attr("x", padding)
.attr("y", padding)
.attr("dy", ".71em")
.text(function(d) { return d.x; });
边框和散点绘制(function):
var cell = d3.select(this);
cell.append("svg:rect")
.attr("class", "frame")
.attr("x", padding / 2)
.attr("y", padding / 2)
.attr("width", size - padding)
.attr("height", size - padding);
cell.selectAll("circle")
.data(flowers)
.enter().append("svg:circle")
.attr("class", function(d) { return d.species; })
.attr("cx", function(d) {
return x[p.x](d[p.x]);
})//因为比例尺是一个字典,所以要先读取对应的比例尺,然后在读取数据
.attr("cy", function(d) {
return y[p.y](d[p.y]);
})
.attr("r", 3);
cell.call(brush.x(x[p.x]).y(y[p.y]));
刷子(function):
function brush(p) {
var e = brush.extent();//定义刷子选取范围
svg.selectAll(".cell circle")
.attr("class", function(d) {
return e[0][0] <= d[p.x] && d[p.x] <= e[1][0]&& e[0][1] <= d[p.y] && d[p.y] <= e[1][1]? d.species : null;//判断是够超出范围(限定选择边界)
});
}
function brushstart(p) {
if (brush.data !== p) {
cell.call(brush.clear());
brush.x(x[p.x]).y(y[p.y]).data = p;
}
}
function brushend() {
if (brush.empty())
svg.selectAll(".cell circle")
.attr("class", function(d) {
return d.species;
});
}
定义域分配矩阵编号(function):
function cross(a, b) {
var c = [], n = a.length, m = b.length, i, j;
for (i = -1; ++i < n;)
for (j = -1; ++j < m;)
c.push({x: a[i], i: i, y: b[j], j: j});
return c;
}