【 D3.js 进阶系列 — 5.0 】 直方图
来源:互联网 发布:windows sdk 8.1下载 编辑:程序博客网 时间:2024/04/27 23:38
直方图用于描述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据。
假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],现在把10~20的数值范围分为5段,即:
10~12, 12~14, 14~16, 16~18, 18~20
那么数组 a 的各数值都落在这几段区域的哪一部分呢?经过计算,可以知道,这5段分别具有的元素个数为:
3, 2, 1, 0 , 2
将这个用图形展示出来的,就是直方图。好了,开始制作吧~
1. 数据
首先生成随机数据:
var rand = d3.random.normal(0,25);var dataset = [];for(var i=0;i<100;i++){dataset.push( rand() );}
d3.random.normal 生成一个函数,这个函数能够按正态(高斯)分布随机生成数值。要传入两个参数,第一个是位置参数,第二个是尺寸参数。关于正态分布的定义,可参见维基百科。将这个函数赋值给 rand 之后,接下来只要用 rand() 即可生成随机数。
2. 布局(数据转换)
接下来,要将上述数据进行转换,即确定一个区间和分隔数之后,另数组的数值落在各区域里。先定义一个布局:
var bin_num = 15;var histogram = d3.layout.histogram().range([-50,50]) .bins(bin_num).frequency(true);
- d3.layout.histogram: 直方图的布局
- range: 区间的范围
- bins: 分隔数
- frequency: 若值为 true,则统计的是个数;若值为 false,则统计的是概率
接下来即可转换数据:
var data = histogram(dataset);
来看看转换前后的数据有什么分别吧。转换前:
转换后:
可以看到,转换后的数组,长度即分隔数,每一个区间内有落到此区间的数值(图中的0,1,2,...),数值的个数(length),还有三个参数:
- x: 区间的起始位置
- dx: 区间的宽度
- y: 落到此区间的数值的数量(如果 frequency 为 true);落到此区间的概率(如果 frequency 为 false)
3. 绘制
绘制之前,需要定义一个比例尺,因为通常我们需要让转换后的 y 在希望的范围内伸缩。
var max_height = 400;var rect_step = 30;var heights = [];for(var i=0;i<data.length;i++){heights.push( data[i].y );}var yScale = d3.scale.linear().domain([d3.min(heights),d3.max(heights)]).range([0,max_height]);
最后,绘制图形:
//绘制图形var graphics = svg.append("g").attr("transform","translate(30,20)");//绘制矩形graphics.selectAll("rect").data(data).enter().append("rect").attr("x",function(d,i){return i * rect_step; }).attr("y", function(d,i){return max_height - yScale(d.y);}).attr("width", function(d,i){return rect_step - 2; }).attr("height", function(d){return yScale(d.y);}).attr("fill","steelblue");//绘制坐标轴的直线graphics.append("line").attr("stroke","black").attr("stroke-width","1px").attr("x1",0).attr("y1",max_height).attr("x2",data.length * rect_step).attr("y2",max_height);//绘制坐标轴的分隔符直线graphics.selectAll(".linetick").data(data).enter().append("line").attr("stroke","black").attr("stroke-width","1px").attr("x1",function(d,i){return i * rect_step + rect_step/2;}).attr("y1",max_height).attr("x2",function(d,i){return i * rect_step + rect_step/2;}).attr("y2",max_height + 5);//绘制文字graphics.selectAll("text").data(data).enter().append("text").attr("font-size","10px").attr("x",function(d,i){return i * rect_step; }).attr("y", function(d,i){return max_height;}).attr("dx",rect_step/2 - 8).attr("dy","15px").text(function(d){return Math.floor(d.x);});
4. 结果
结果图即本文开头的图片。
完整代码请点击下面的链接后,单击右键后再“查看源代码”:
http://www.ourd3js.com/demo/J-5.0/histogram.html
文档信息
- 版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)
- 发表日期:2014 年 12 月 17 日
- 更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
- 备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
1 0
- 【 D3.js 进阶系列 — 5.0 】 直方图
- 【 D3.js 进阶系列 】 进阶总结
- 【 D3.js 进阶系列 — 2.2 】 力学图的参数
- 【 D3.js 进阶系列 — 3.0 】 分区图
- 【 D3.js 进阶系列 — 3.1 】 圆形分区图
- 【 D3.js 进阶系列 — 3.2 】 分区图的函数
- 【 D3.js 进阶系列 — 4.0 】 绘制箭头
- 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽
- 【 D3.js 高级系列 — 5.0 】 颜色
- d3.js画一个直方图
- 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
- 【 D3.js 进阶系列 — 1.1 】 其他表格文件的读取
- 【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法
- 【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图
- 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定
- 【 D3.js 进阶系列 — 6.0 】 拖拽的应用(Drag)
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
- 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
- HDOJ 题目3465 Life is a Line(树状数组求逆序对,第二种写法)
- FFMPEG中的时间问题
- 源码分析Hadoop FileInputFormat如何分片
- IOS XMPP的实践
- c++02
- 【 D3.js 进阶系列 — 5.0 】 直方图
- Mysql 数据文件类型解析
- Log4J学习【三十三】错误处理之ErrorHandler
- 文件编译
- 80端口被NT kernel & System 占用pid 4
- Android 在OnCreate()中获取控件高度与宽度
- Log4J学习【三十四】错误处理之FallbackErrorHandler
- Spring框架中获得DataSource对象的方法
- 装箱和拆箱 (判断两个类型转换是否构成装箱或拆箱,要看它们是否存在继承关系)