可视化工具--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规则来生成数据,显示了不同规则下的直方图分布。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值