Table of Contents

D3 - Histogram

About

Data Visualisation - Histogram (Frequency distribution) in D3.

Usage

Histogram function building

Instantiation

var histogram = d3
  .histogram()

The properties of an histogram function

Accessor

A callback function to return the data to bins from the raw data (data passed to the histogram function). Parameters are:

Example: histogram.value - specify how to get the data from the data variable (ie a value accessor). Example 

var histogram = d3
  .histogram()
  .value(function(d) {
    return d.price;
  })

Thresholds

Thresholds specify how values are divided into bins (also known as breaks)

Thresholds (breaks) are defined via:

The generated histogram will have thresholds.length + 1 bins. 

histogram.thresholds([count])
histogram.thresholds([thresholds])

The default is the (Sturges’ formula)

Domain

Any threshold values outside the domain are ignored.

Call

var bins = histogram(data);

Return values

The first bin.x0 is always equal to the minimum domain value, and the last bin.x1 is always equal to the maximum domain value.

Example

Usage

Basic

data = [1,2,3,4,5,6,7,8,9];

var histogram = d3.histogram().thresholds([0,6]);
var bins = histogram(data);
console.log(bins)
Rendered by WebCode

With an axis

with a scale 

data = [1,2,3,4,5,6,7,8,9];

var x = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 300]);
  
var histogram = d3.histogram()
    .domain(x.domain())
    .thresholds(x.ticks(4));

var bins = histogram(data);
console.log(bins)
Rendered by WebCode

Complete graphic example

data = [1,2,3,8,7,4,9,8,7,3,4,5,2,1,9,7,8,4,0,2,3,8,7,6];
min = d3.min(data);
max = d3.max(data);
domain = [min,max];

var margin = { top: 30, right: 30, bottom: 30, left: 50 },
  width = 460 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// The number of bins 
Nbin = 10;

var x = d3
  .scaleLinear()
  .domain(domain) 
  .range([0, width]); 

var histogram = d3
  .histogram()
  .domain(x.domain()) // then the domain of the graphic
  .thresholds(x.ticks(Nbin)); // then the numbers of bins

// And apply this function to data to get the bins
var bins = histogram(data);

// Add the svg element to the body and set the dimensions and margins of the graph
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 + ")");

svg
  .append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

var y = d3
  .scaleLinear()
  .range([height, 0])
  .domain([
    0,
    d3.max(bins, function(d) {
      return d.length;
    })
  ]); 

svg.append("g").call(d3.axisLeft(y));

svg
  .selectAll("rect")
  .data(bins)
  .enter()
  .append("rect")
  .attr("x", 1)
  .attr("transform", function(d) {
    return "translate(" + x(d.x0) + "," + y(d.length) + ")";
  })
  .attr("width", function(d) {
    return x(d.x1) - x(d.x0) - 1;
  })
  .attr("height", function(d) {
    return height - y(d.length);
  })
  .style("fill", "#69b3a2");
Rendered by WebCode

Documentation / Reference