可视化工具--D3--案例分析--Scatterplot Matrix

可视化工具–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;}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！