How to use the d3-array.histogram function in d3-array

[
        new MixedObject(40, new Date(2016, 3, 1)),
        new MixedObject(50, new Date(2016, 9, 30)),
    ]
);

// -----------------------------------------------------------------------------
// Test Histogram
// -----------------------------------------------------------------------------

const tScale = scaleTime();

// Create histogram generator ==================================================

let defaultHistogram: d3Array.HistogramGenerator;
defaultHistogram = d3Array.histogram();

let testHistogram: d3Array.HistogramGenerator;
testHistogram = d3Array.histogram();

// Configure histogram generator ===============================================

// value(...) ------------------------------------------------------------------

testHistogram = testHistogram.value((d, i, data) => {
    const datum: MixedObject = d; // d is of type MixedObject
    const index: number = i; // i is number
    const array: MixedObject[] = data; // data is of type MixedObject[]
    return datum.date;
});

let valueAccessorFn: (d: MixedObject, i: number, data: MixedObject[]) => Date;

const width = Math.floor(dimensions.width) - chartMargin;
    const height = Math.floor(dimensions.height) - chartMargin;

    const startDate = events[0].start;
    const endDate = events[events.length - 1].end;

    const margin = 26;

    const scaleX = scaleTime().domain([startDate, endDate]).range([margin, width - margin]).nice();
    const scaleY = scaleLinear().domain([0, 1]).range([height - margin, margin]).nice();

    const histogramScale = scaleTime().domain([startDate, endDate]).nice(timeDay);
    const histogramTicks = histogramScale.ticks(timeDay, 1);

    const calculateHistogram = histogram().value(prop('start')).domain(scaleX.domain()).thresholds(histogramTicks);

    const eventsHistogram = calculateHistogram(events);

    const focusHistogram = eventsHistogram
      // .slice(1, eventsHistogram.length - 1)
      .slice(1)
      .map(bin => {
        const durationTotal = bin.reduce((acc, { duration }) => acc + duration, 0);
        const durationBin = bin.length > 0 ? bin[bin.length - 1].end.getTime() - bin[0].start.getTime() : 0;

        return {
          start: bin.x0,
          end: bin.x1,
          durationTotal,
          durationPercent: durationTotal / (8 * 60 * 60 * 1000),
          durationBin,

export function histogramConstruct(domain, mappedValue, bins) {
  return d3Histogram()
    .thresholds(ticks(domain[0], domain[1], bins))
    .domain(domain)(mappedValue)
    .map(bin => ({
      count: bin.length,
      x0: bin.x0,
      x1: bin.x1
    }));
}
/**

const Chart = ({ width, height, project, currencySymbol }) => {
  const margin = 26;

  const timeScale = spreadToTimeScale(project);

  const endDate = new Date(project.end);
  endDate.setDate(endDate.getDate() + 1);

  const scaleX = scaleTime().domain([project.start, endDate]).range([margin, width - margin]).nice();
  const ticks = scaleX.ticks(timeScale, 1);

  const calculateHistogram = histogram().value(prop('start')).domain(scaleX.domain()).thresholds(ticks);

  const bins = calculateHistogram(project.events.filter(event => !event.isMarker)).map(bin => ({
    ...bin,
    duration: bin.reduce((acc, event) => acc + event.duration, 0)
  }));

  const scaleY = scaleLinear()
    .domain([0, Math.max(...bins.map(prop('duration')))])
    .range([height - margin, margin])
    .nice();

  const calculatePath = area()
    .x((d, i) => scaleX(i === 0 ? d.x0 : d.x1))
    .y(d => scaleY(d.duration))
    .curve(curveStepAfter);

} else if (!continuousDomain) {
      const ordinals = this.xScale.domain();
      thresholds = ordinals.map(value => this.xScale(value)) as number[];
      thresholds.push(this.xScale(_.last(ordinals) as string) + (this.xScale as ScaleBand).bandwidth());
    }
    const pkg = this.inputPortMap.in.getSubsetPackage();

    const values = pkg.getItemIndices().map(itemIndex => {
      const value = dataset.getCellForScale(itemIndex, this.column as number);
      return {
        value: this.xScale(value),
        index: itemIndex,
      };
    });

    this.valueBins = histogram()
      .value(d => d.value)
      .domain(range as [number, number])
      .thresholds(thresholds)(values);
  }

doShow() {
        this.x = scaleLinear();
        this.y = scaleSqrt();
        this.tooltip = new PopoverView({position: 'right'});

        this.setupViewport();

        this.x.range([0, this.width]);
        this.y.range([this.height, 0], 1);

        const maxDuration = max(this.data, d => d.value);
        this.x.domain([0, Math.max(maxDuration, 10)]).nice();

        const bins = histogram()
            .value(d => d.value)
            .domain(this.x.domain())
            .thresholds(this.x.ticks())(this.data)
            .map(bin => ({
                x0: bin.x0,
                x1: bin.x1,
                y: bin.length,
                testResults: bin
            }));

        const maxY = max(bins, d => d.y);
        this.y.domain([0, maxY]).nice();

        this.makeBottomAxis({
            scale: this.x,
            tickFormat: time => duration(time, 1)

export function stackedHistogramFromNodes(nodes, timeSpan) {
  const includedDates = getIncludedDates(timeSpan)
  const histFunc = histogram()
    .value(d => new Date(d.applied_date))
    .thresholds(includedDates)
    .domain(getHistDomain(timeSpan));
  return [].concat(...nodes
    .map(node => histFunc(node.selectedActiveValues)
      .slice(0, -1)
      .map(d => ({
        key: node.key,
        count: d.length,
        binStartDate: d.x0,
        values: d || [],
        color: node.color,
        othered: node.othered,
        heritage: node.heritage,
      }))
    )