可视化工具--D3--案例分析--Scatterplot Matrix
来源:互联网 发布:微企源码 编辑:程序博客网 时间:2024/06/06 09:20
可视化工具–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; }
阅读全文
0 0
- 可视化工具--D3--案例分析--Scatterplot Matrix
- 可视化工具--D3--案例分析--Chord Diagram
- 可视化工具--D3--案例分析--Histogram Chart
- 用d3做Scatterplot Matrix的图
- 可视化工具--D3--案例分析--Reingold Tilford Tree
- 可视化工具--D3--案例分析--Day/Hour Heatmap
- D3可视化
- 数据可视化工具分析
- 可视化工具–D3–比例尺的使用(quantitative)
- 可视化工具–D3–比例尺的使用(ordinal)
- 可视化工具–D3–颜色的使用
- 可视化工具–D3–坐标轴的使用
- 可视化数据分析(一) 基于Javascript的D3实践学习
- d3可视化新动态
- D3数据库可视化
- 可视化库 D3.js
- 可视化日志分析工具 glTail
- 可视化数据包分析工具-CapAnalysis
- 如何录制iPhone手机上的视频
- KETTLE集群的配置及调用
- IP-route管理路由
- 60分钟内从零起步驾驭Hive实战学习笔记
- Android Studio如何取消与SVN的关联
- 可视化工具--D3--案例分析--Scatterplot Matrix
- 码农学freeRTOS
- To became
- 多进程DP 总结
- 欢迎使用CSDN-markdown编辑器
- android Error:Error: File path too long on Windows, keep below 240 characters
- 4种委托的区别
- cocos2d开发编译Android工程"找不到 org.apache.http.*"
- 安装SUSE11+oracle12c