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()这个钩子 ...
随机推荐
- 【转载】mysql中timestamp,datetime,int类型的区别与优劣
转载来自souldak,微博:@evagle以下内容整合筛选自互联网: int1. 占用4个字节2. 建立索引之后,查询速度快3. 条件范围搜索可以使用使用between4. 不能使用mysql提供的 ...
- 编写高质量代码改善C#程序的157个建议——建议106：为静态类添加静态构造函数
建议106:为静态类添加静态构造函数 静态类可以拥有构造方法,这就是静态构造方法.静态构造方法与实例构造方法比较有几个自己的特点: 只被执行一次,且在第一次调用类成员之前被运行时执行. 代码无法调用它 ...
- Android-自定义RadioButton
1.控件RadioButton需要用RadioGroup包裹起来,才能使用2.RadioButton必须设置ID才能实现单选功能3.RadioGroup有方向(垂直方向 和 水平方向)默认是垂直方向 ...
- Spring Boot - 杂项
可以使用devtools功能来实现热部署(Hot Swapping),需要加入依赖(如maven):spring-boot-devtools 可以实现修改代码并保存后的自动编译.重启 依赖于Eclip ...
- GridControl中文属性
1 Appearance EmbeddedNavigator 嵌入导航器 (DataBindings) 数据绑定 (Advanced) 高级设置 Tag Text AccessibleDes ...
- 中文 bootstrapValidator
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- 算法 UVA 11729
例2:假设当前小光有n个部下,每个部下需要完成一项任务.第i个部下需要小光花Bi分钟交代任务,然后他会立刻独立地.无间断地执行Ji分钟后完成任务.小光需要选择交代任务的顺序,使得所有任务尽早执行完毕 ...
- linux命令之网络管理命令（上）
1.ifconfig:配置或显示网络接口信息 该命令用于配置网卡IP地址等网络参数或显示当前网络的接口状态,该命令配置网卡信息时必须要以root用户的身份来执行. 参数选项 说明 up 激活指定的网络 ...
- “全栈2019”Java第三十五章：面向对象
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 迫不得已！ ！ 仅仅针对IE浏览器的样式，尤其是IE8及以下
IE10不会起作用,IE9,8,7,6,5都可以 <html> <head> <title>IE打开就是蓝色背景,白色的字体</title> <! ...