A histogram shows history representation of the distribution of numerical data. It is an estimate of the probability distribution of a continuous variable (quantitative variable).

Histogram extends [Chart With Color Groups](Chart With Color Groups).

#Demo Online demo

Sample usage

Histogram is created using an ODCD3.Histogram function:

var placeholderSelector = "#plot";
var data = [ ... ]; // array of arrays/objects 
var config = { //optional config object
    ...
};

var plot = new ODCD3.Histogram(placeholderSelector, data, config);  

#Configuration

The ODCD3.Histogram function takes 3 parameters:

1. selector for plot placeholder element - d3.select compatible (string or node)
2. data to plot (array of numbers; array of arrays / objects)
3. optional config object

Configuration object properties (not inherited from [Chart With Color Groups](Chart With Color Groups)):

• x - X axis configuration object:
  • title - axis title, default: ''
  • key - object property name or array index with X axis value, default: 0
  • value - X value accessor function, may be used to override default accessor:

  
        function (d, key) {
           Utils.isNumber(d) ? d : parseFloat(d[key])
        }
  

  • ticks - ticks number
• y - Y axis configuration object:
  • title - axis title, default: ''
• groups - groups configuration object:
  • key - object property name or array index with grouping variable, default: 1
• frequency - specifies the meaning of the generated bins’ y-values. If frequency is true, which is the default, the y-value represents the count of elements in the bin. If false, it represents the probability of a random element in the sample population being in that bin