D3_book 11.2 stack
<!-- book :interactive data visualization for the web
11.2 stack 一个堆叠图的例子 --> <!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="../d3.min.js"></script>
<script>
var dataset = [
[
{ x: 0, y: 5 },
{ x: 1, y: 4 },
{ x: 2, y: 2 },
{ x: 3, y: 7 },
{ x: 4, y: 23 }
],
[
{ x: 0, y: 10 },
{ x: 1, y: 12 },
{ x: 2, y: 19 },
{ x: 3, y: 23 },
{ x: 4, y: 17 }
],
[
{ x: 0, y: 22 },
{ x: 1, y: 28 },
{ x: 2, y: 32 },
{ x: 3, y: 35 },
{ x: 4, y: 43 }
]
];
var stack=d3.layout.stack();
stack(dataset); //只有经过这一步，dataset才可以转变堆叠图的数据
var color=d3.scale.category10();
var w=500,h=100;
var xScale=d3.scale.ordinal()
.domain(d3.range(dataset[0].length)) //序数要取[0]
.rangeRoundBands([0,w],0.05)
;
var yScale=d3.scale.linear()
.domain([0,
d3.max(dataset,function(d){
return d3.max(d,function(d){
console.log(d.y0);
console.log(d.y);
return d.y0+d.y;
});
})
])
.range([0,h]) //什么时候为h,0
;
var svg=d3.select('body')
.append('svg')
.attr({
'width':w,
'height':h
})
;
var groups=svg.selectAll('g')
.data(dataset)
.enter()
.append('g')
.style('fill',function(d,i){
return color(i);
})
;
var rects=groups.selectAll('rect')
.data(function(d){return d;})
.enter()
.append('rect')
.attr({
'x':function(d,i){
return xScale(i);
},
'y':function(d){
return yScale(d.y0);
}, // 以x轴底部为基础
// 'y':function(d){
// return h-yScale(d.y+d.y0);
// }, 'width':xScale.rangeBand(),
'height':function(d,i){
return yScale(d.y);
},
})
;
</script> <!-- 以左y轴为基础 -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="../d3.min.js"></script>
<script>
var dataset = [
[
{ x: 0, y: 5 },
{ x: 1, y: 4 },
{ x: 2, y: 2 },
{ x: 3, y: 7 },
{ x: 4, y: 23 }
],
[
{ x: 0, y: 10 },
{ x: 1, y: 12 },
{ x: 2, y: 19 },
{ x: 3, y: 23 },
{ x: 4, y: 17 }
],
[
{ x: 0, y: 22 },
{ x: 1, y: 28 },
{ x: 2, y: 32 },
{ x: 3, y: 35 },
{ x: 4, y: 43 }
]
];
var stack=d3.layout.stack();
stack(dataset); //只有经过这一步，dataset才可以转变堆叠图的数据
var color=d3.scale.category10();
var w=100,h=500;
var yScale=d3.scale.ordinal()
.domain(d3.range(dataset[0].length)) //序数要取[0]
.rangeRoundBands([0,h],0.05)
;
var xScale=d3.scale.linear()
.domain([0,
d3.max(dataset,function(d){
return d3.max(d,function(d){
console.log(d.y0);
console.log(d.y);
return (d.y0+d.y);
});
})
])
.range([0,w]) //什么时候为h,0
;
var svg=d3.select('body')
.append('svg')
.attr({
'width':w,
'height':h
})
;
var groups=svg.selectAll('g')
.data(dataset)
.enter()
.append('g')
.style('fill',function(d,i){
return color(i);
})
;
var rects=groups.selectAll('rect')
.data(function(d){return d;})
.enter()
.append('rect')
.attr({
'y':function(d,i){
return yScale(i);
},
'x':function(d){
return xScale(d.y0);
},
'height':yScale.rangeBand(),
'width':function(d,i){
return xScale(d.y);
},
})
;
</script>
D3_book 11.2 stack的更多相关文章
- tensorflow 基本函数(1.tf.split, 2.tf.concat,3.tf.squeeze, 4.tf.less_equal, 5.tf.where, 6.tf.gather, 7.tf.cast, 8.tf.expand_dims, 9.tf.argmax, 10.tf.reshape， 11.tf.stack， 12tf.less， 13.tf.boolean_mask
1. tf.split(3, group, input) # 拆分函数 3 表示的是在第三个维度上, group表示拆分的次数, input 表示输入的值 import tensorflow ...
- 第11天 Stack Queue
1.Stack package algs4; import java.util.Iterator; import java.util.NoSuchElementException; public cl ...
- 数据结构11: 栈(Stack)的概念和应用及C语言实现
栈,线性表的一种特殊的存储结构.与学习过的线性表的不同之处在于栈只能从表的固定一端对数据进行插入和删除操作,另一端是封死的. 图1 栈结构示意图 由于栈只有一边开口存取数据,称开口的那一端为“栈顶”, ...
- 11/9 <Stack> 155 232 225
155. Min Stack class MinStack { int min = Integer.MAX_VALUE; Stack<Integer> stack = new Stack& ...
- D3_book 11.3 force
<!-- pie example --> <!DOCTYPE html> <meta charset="utf-8"> <style> ...
- D3_book 11.1 pie
<!-- pie example --> <!DOCTYPE html> <meta charset="utf-8"> <style> ...
- Java编程思想(11~17)
[注:此博客旨在从<Java编程思想>这本书的目录结构上来检验自己的Java基础知识,只为笔记之用] 第十一章 持有对象 11.1 泛型和类型安全的容器>eg: List<St ...
- 数据结构：二级指针与Stack的数组实现
[简介] Stack,栈结构,即传统的LIFO,后进先出,常用的实现方法有数组法和链表法两种.如果看过我上一篇文章<数据结构:二级指针与不含表头的单链表>,一定会看到其中的关键在于,利用v ...
- TensorFlow tensor张量拼接concat - split & stack - unstack
TensorFlow提供两种类型的拼接: tf.concat(values, axis, name='concat'):按照指定的已经存在的轴进行拼接 tf.stack(values, axis=0, ...
随机推荐
- PAT 1008 数组元素循环右移问题 (20)（代码）
1008 数组元素循环右移问题 (20)(20 分) 一个数组A中存有N(N>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(M>=0)个位置,即将A中的数据由(A ...
- PAT 1060 爱丁顿数（25）（STL-multiset+思路）
1060 爱丁顿数(25 分) 英国天文学家爱丁顿很喜欢骑车.据说他为了炫耀自己的骑车功力,还定义了一个"爱丁顿数" E ,即满足有 E 天骑车超过 E 英里的最大整数 E.据说爱 ...
- PAT 1032 挖掘机技术哪家强(20)（有测试样例）
1032 挖掘机技术哪家强(20)(20 分) 为了用事实说明挖掘机技术到底哪家强,PAT组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第1行给出不超过10 ...
- BZOJ1227或洛谷2154 [SDOI2009]虔诚的墓主人
BZOJ原题链接 洛谷原题链接 又是扫描线,题解可看大佬的博客(太懒了不想打) #include<cstdio> #include<algorithm> using names ...
- Luogu1070-道路游戏-动态规划
Solution 用对角线的前缀和快速进行转移,复杂度$O(N^3)$, 洛谷神机太快了$N^3$都能过 然而正解是单调队列优化, 能优化到$O(N^2)$,然而我弱得什么都不会 Code #incl ...
- delphi 7 求无码
我们知道delphi很多源码,都是没有提供的,比如BDE,一旦有问题,我们也找不到办法解决,那么那些dcu对应的pas是没有公布的呢?笔者做了个统计. 下面是delphi7 的,如果你的程序有用到没有 ...
- [SoapUI] 在SoapUI中通过Groovy脚本执行window命令杀掉进程
//杀Excel进程 String line def p = "taskkill /F /IM EXCEL.exe".execute() def bri = new Buffere ...
- 【统一异常处理】@ControllerAdvice + @ExceptionHandler 全局处理 Controller 层异常
1.利用springmvc注解对Controller层异常全局处理 对于与数据库相关的 Spring MVC 项目,我们通常会把 事务 配置在 Service层,当数据库操作失败时让 Service ...
- LD_LIBRARY_PATH
LD_LIBRARY_PATH是Linux环境变量名,该环境变量主要用于指定查找共享库(动态链接库)时除了默认路径之外的其他路径. 在linux下可以用export命令来设置这个值,比如 在linux ...
- Django的学习（一）————初入django
一.基本指令 1.项目的建立: Django的项目建立,进入目录,打开cmd输入 django-admin startproject[项目名称],注意如果是在其他文件下把项目设计成资源文件. 2.Ap ...