D3.js绘制平行坐标图
参照：https://syntagmatic.github.io/parallel-coordinates/ 和 https://github.com/syntagmatic/parallel-coordinates
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原始数据平行坐标图</title>
<link rel="stylesheet" type="text/css" href="static/css/d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
/* parcoords */
#nutrients {
position: fixed;
bottom: 4px;
height: 180px;
width: 98%;
padding: 8px 1% 0;
border-top: 1px solid #d0d0d0;
}
#nutrients text {
font-size: 10px;
}
/* data table styles */
#grid {
position: fixed;
bottom: 192px;
width: 100%;
height: 160px;
overflow: auto;
border-top: 1px solid #d0d0d0;
}
.row, .header {
clear: left;
font-size: 10px;
line-height: 16px;
height: 16px;
width: 2000px;
padding: 0 16px;
}
.row:nth-child(odd) {
background: rgba(0, 0, 0, 0.05);
}
.header {
font-weight: bold;
}
.cell {
float: left;
overflow: hidden;
white-space: nowrap;
width: 100px;
height: 18px;
}
.col-0 {
width: 180px;
}
</style>
<script src="static/js/d3.min.js"></script>
<script src="static/js/d3.parcoords.js"></script>
<script src="static/js/divgrid.js"></script>
<script src="static/js/underscore.js"></script>
<script src="static/js/scatterplot.js"></script>
</head>
<body>
<div id="nutrients" class="parcoords"></div>
<svg id="scatter"></svg>
<div id="grid"></div>
<script id="brushing">
var parcoords = d3.parcoords()("#nutrients");
var transparency = d3.scale.pow()
.exponent(0.15)
.range([1, 0.12]);
var colorList = ["#a50026", "#d73027", "#f46d43", "#fdae61", "#fee090", "#ffffbf", "#e0f3f8", "#abd9e9", "#74add1", "#4575b4", "#313695", "#67001f", "#b2182b", "#d6604d", "#f4a582", "#fddbc7", "#ffffff", "#e0e0e0", "#bababa", "#878787", "#4d4d4d", "#1a1a1a", "#40004b", "#762a83", "#9970ab", "#c2a5cf", "#e7d4e8", "#f7f7f7", "#d9f0d3", "#a6dba0", "#5aae61", "#1b7837", "#00441b"];
var scatter = scatterplot()
.key(function (d) {
return d.name
})
.width(document.body.clientHeight - 350)
.height(document.body.clientHeight - 350);
// load csv file and create the chart
d3.csv('data/nutrients.csv', function (data) {
var colorMap = {};
_(data).chain()
.pluck('group')
.uniq()
.each(function (d, i) {
colorMap[d] = colorList.length > i ? colorList[i] : "black";
});
var color = function (d) {
return colorMap[d.group];
};
transparency.domain([1, data.length]);
parcoords
.data(data)
.hideAxis(["name"])
.alpha(transparency(data.length))
.color(color)
.composite("darken")
.margin({top: 24, left: 140, bottom: 12, right: 0})
.mode("queue")
.render()
.brushMode("1D-axes"); // enable brushing
scatter.data(data)("#scatter");
// create data table, row hover highlighting
var grid = d3.divgrid();
d3.select("#grid")
.datum(data.slice(0, 10))
.call(grid)
.selectAll(".row")
.on({
"mouseover": function (d) {
parcoords.highlight([d])
},
"mouseout": parcoords.unhighlight
});
// update data table on brush event
parcoords.on("brush", function (d) {
parcoords.alpha(transparency(d.length));
scatter.show(d);
d3.select("#grid")
.datum(d.slice(0, 30))
.call(grid)
.selectAll(".row")
.on({
"mouseover": function (d) {
parcoords.highlight([d])
},
"mouseout": parcoords.unhighlight
});
});
window.onresize = function () {
parcoords.width(document.body.clientWidth);
parcoords.resize();
scatter
.width(document.body.clientHeight - 350)
.height(document.body.clientHeight - 350)
.update();
};
});
</script>
</body>
</html>
效果截图：
D3.js绘制平行坐标图的更多相关文章
- 利用d3.js绘制雷达图
利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...
- [js]d3.js绘制拓扑树
echart也支持拓扑树了 所需的json数据格式: children嵌套 vis.js也支持绘制拓扑树 数据格式: nodes: {id, label, title} edges: {from, t ...
- 利用d3.js绘制中国地图
d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...
- d3.js 绘制极坐标图(polar plot)
0.引言 在极坐标系中,任意位置可由一个夹角和一段相对原点(极点)的距离表示.也就是说,我们可以用 (angle,r) 来表示极坐标系中的点. 1.数据 假设我们有如下数据集[ [10, 0.2], ...
- d3.js 绘制北京市地铁线路状况图(部分)
地铁线路图的可视化一直都是路网公司的重点,今天来和大家一起绘制线路图.先上图. 点击线路按钮,显示相应的线路.点击线路图下面的站间按钮(图上未显示),上报站间故障. 首先就是制作json文件,这个文件 ...
- D3.js绘制 颜色:RGB、HSL和插值 (V3版本)
颜色和插值 计算机中的颜色,常用的标准有RGB和HSL. RGB:色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加来得到额各式各样的颜色.三个通道的值得范围都 ...
- R和Tableau平行坐标图
R平行坐标图 library(lattice)data(iris)parallelplot( ~ iris[1:4], iris, groups = Species, horizontal.a ...
- iOS绘制坐标图，折线图-Swift
坐标图,经常会在各种各样的App中使用,最常用的一种坐标图就是折线图,根据给定的点绘制出对应的坐标图是最基本的需求.由于本人的项目需要使用折线图,第一反应就是搜索已经存在的解决方案,因为这种需求应该很 ...
- D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图
首先需要下载安装d3.js : yarn add d3 然后在组建中引入 : import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子 ...
随机推荐
- jQuary总结5:传递一个dom对象
1 传递一个dom对象 //html <div></div> <p id="p"></p> //js var p = documen ...
- java IO通过字节流，字符流 读出写入
一:通过字节流操作数据的写入,读出 /** * 通过字节流写入和读出 * @param args */ public static String filePath = "G:" + ...
- 12306GT多线程、分流免费抢票工具使用心德
大事记背景 我相信很多远游他乡的朋友每逢佳节都会遇到一个难题,就是购票难,这个难题有多难呢?经常在12306官网购票的小伙伴应该知道每个地方的放票时间是不一样的,但是逢年过节的那几天即使你在放票几分钟 ...
- 利用APT实现Android编译时注解
摘要: 一.APT概述 我们在前面的java注解详解一文中已经讲过,可以在运行时利用反射机制运行处理注解.其实,我们还可以在编译时处理注解,这就是不得不说官方为我们提供的注解处理工具APT (Anno ...
- 【微服务架构】SpringCloud之Ribbon(四)
一:Ribbon是什么? Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡算法,将Netflix的中间层服务连接在一起.Ribbon客户端组件提供一系列完善的配置项如连接 ...
- MongoDB 主从复制 的设置
今天我们主要讨论mongodb的部署技术. 我们知道sql server能够做到读写分离,双机热备份和集群部署,当然mongodb也能做到,实际应用中我们不希望数据库采用单点部署, 如果碰到数据库宕机 ...
- rabbitmqBat常用指令
激活 RabbitMQ's Management Pluginrabbitmq-plugins.bat enable rabbitmq_management 查看已有用户及用户的角色rabbitmqc ...
- TSQL--NESTED LOOPS JOIN
算法:遍历外表,将遍历出结果依次在内标中匹配查找 --如果内表无索引,则扫描内表 foreach(row r1 in outerTable) { foreach(row r2 in innerTabl ...
- Magicodes.NET框架之路[转]
插件式框架 响应式布局以及前后端对移动设备的支持 便捷的业务代码生成,比如CRUD生成,并且表单支持根据不同数据类型或特性生成相应的展示组件. 从框架到插件包括代码生成模板均走开源路线,便于理解和定制 ...
- ie8在win7系统下怎么安装或重装？[转载]
(一)对于已卸载了IE8的用户 因为微软并没有提供用于Windows 7系统的IE8独立安装包,Windows 7用户是无法通过下载安装包的方法来重装IE8的,而是默认将IE8的安装程序集成在Wind ...