score:1

Accepted answer

I recommend you read this article. It is a great explanation how histogram was changed in d3v4 compared to d3v3.

You should rewrite your code this way:

var w = 952,
  h = 476,
  x = d3.scaleLinear().domain([30, 110]).range([0, w]),
  bins = d3.histogram().domain(x.domain()).thresholds(x.ticks(30))(data),
  max = d3.max(bins, function(d) { return d.y; }),
  y = d3.scaleLinear().domain([0, .1]).range([0, h]),
  yForHistogram = d3.scaleLinear()
  .domain([0, d3.max(bins, function(d) { return d.length; })])
  .range([h, 0]),
  kde = science.stats.kde().sample(data);

var vis = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var bars = vis.selectAll("g.bar")
  .data(bins)
  .enter().append("g")
  .attr("class", "bar")
  .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + yForHistogram(d.length) + ")"; });

bars.append("rect")
  .attr("fill", "steelblue")
  .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
  .attr("height", function(d) {
    return h - yForHistogram(d.length);
  });
...

Check my fork of JSBin that you mentioned. It works with d3v4.


Related Query

More Query from same tag