可视化大猩猩通过本文主要向大家介绍了可视化工具,d3-js等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
链接分别为Histogram：[ https://bl.ocks.org/mbostock/3048450]
和Histogram using pareto distribution：[ http://bl.ocks.org/curran/11301130 ]
Histogram：
/*随机生成数据*/
var data = d3.range(1000)
.map(d3.randomBates(10));
/*格式化数据（用于lable文字）*/
var formatCount = d3.format(",.0f");
/*生成画布与属性*/
var svg = d3.select("svg"),
margin = {top: 10, right: 30, bottom: 30, left: 30},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/*定义横坐标比例尺*/
var x = d3.scaleLinear()
.rangeRound([0, width]);
/*生成直方图布局*/
var bins = d3.histogram()
.domain(x.domain())
.thresholds(x.ticks(20))
(data);
/*纵轴比例尺*/
var y = d3.scaleLinear()
.domain([0, d3.max(bins, function(d) { return d.length; })])
.range([height, 0]);
/*绑定bar数据*/
var bar = g.selectAll(".bar")
.data(bins)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; });
/*添加bar*/
bar.append("rect")
.attr("x", 1)
.attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
.attr("height", function(d) { return height - y(d.length); });
/*添加bar上文字*/
bar.append("text")
.attr("dy", ".75em")
.attr("y", 6)
.attr("x", (x(bins[0].x1) - x(bins[0].x0)) / 2)
.attr("text-anchor", "middle")
.text(function(d) { return formatCount(d.length); });
/*添加坐标轴*/
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
这是一个最简单的直方图布局，没有设置额外规则，这一个案例使用的d3.v3。
Histogram using pareto distribution：
/*定义pareto规则*/
function pareto(alpha){
return function(){
return 1 / Math.pow(Math.random(), 1 / alpha);
};
}
/*格式化数据*/
var formatCount = d3.format(",.0f");
/*定义画布属性*/
var margin = {top: 10, right: 30, bottom: 30, left: 30},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
/*定义x轴比例尺*/
var x = d3.scale.linear()
.domain([0, 5])
.range([0, width]);
/*用Pareto distribution生成一组随机值*/
var values = d3.range(1000).map(pareto(1)).filter(function(d){
/*删除域之外的值*/
return d <= x.domain()[1];
});
/*生成直方图(20个块)*/
var data = d3.layout.histogram()
.bins(x.ticks(20))
(values);
/*定义y轴比例尺*/
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.y; })])
.range([height, 0]);
/*定义坐标轴（x）*/
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
/*添加画布*/
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/*定义bar与绑定数据*/
var bar = svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
/*添加bar*/
bar.append("rect")
.attr("x", 1)
.attr("width", x(data[0].dx) - 1)
.attr("height", function(d) { return height - y(d.y); });
/*添加文字标签*/
bar.append("text")
.attr("dy", ".75em")
.attr("y", 6)
.attr("x", x(data[0].dx) / 2)
.attr("text-anchor", "middle")
.text(function(d) { return formatCount(d.y); });
/*添加坐标轴（x）*/
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
这一个案例使用的是d3.v3，博主习惯使用v3版本，想改成v4的，不过感觉两个版本对比写一下可能会更好。同时这个案例使用了Pareto规则来生成数据，显示了不同规则下的直方图分布。