可视化工具--D3--案例分析--Histogram Chart

直方图是一种很常见的布局方式，有很多直方图分布规则，这里介绍两个案例。
链接分别为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规则来生成数据，显示了不同规则下的直方图分布。