Getting an error| Using a template on D3.js v3 to v5

Getting an error| Using a template on D3.js v3 to v5
0

#1

I am using this as a template:

I am currently using the latest version of D3 and therefore I had to update it the the newest version.
What do you think it’s the problem? How do I debug this?
.call(log,“body”)
I using D3.js in combination with React.
I am guessing it’s a problem that it is related to the data or it’s related to the version used by D3 so I have to change some commands being used.

    draw(){

     var margin = {top: 20, right: 40, bottom: 30, left: 20},
   width = 960 - margin.left - margin.right,
   height = 500 - margin.top - margin.bottom,
   barWidth = Math.floor(width / 19) - 1;

var x = d3.scaleLinear()
   .range([barWidth / 2, width - barWidth / 2]);

var y = d3.scaleLinear()
   .range([height, 0]);

var yAxis = d3.axisLeft()
   .scale(y)
   .tickSize(-width)
   .tickFormat(function(d) { return Math.round(d / 1e6) + "M"; });

// An SVG element with a bottom-right origin.
var svg = d3.select(".ct-chart").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 + ")");

// A sliding container to hold the bars by birthyear.
var birthyears = svg.append("g")
   .attr("class", "birthyears");

// A label for the current year.
var title = svg.append("text")
   .attr("class", "title")
   .attr("dy", ".71em")
   .text(2000);

d3.csv(population)
  .then(function(data) {

     // Convert strings to numbers.
data.forEach(function(d) {
   d.people = +d.people;
   d.year = +d.year;
   d.age = +d.age;
 });


 // Compute the extent of the data set in age and years.
 var age1 = d3.max(data, function(d) { return d.age; }),
     year0 = d3.min(data, function(d) { return d.year; }),
     year1 = d3.max(data, function(d) { return d.year; }),
     year = year1;

 // Update the scale domains.
 x.domain([year1 - age1, year1]);
 y.domain([0, d3.max(data, function(d) { return d.people; })]);

 // Produce a map from year and birthyear to [male, female].
 data = d3.nest()
     .key(function(d) { return d.year; })
     .key(function(d) { return d.year - d.age; })
.rollup(function(v) { return v.map(function(d) { return d.people; }); })
      .map(data);

  // Add an axis to show the population values.
  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + width + ",0)")
      .call(yAxis)
    .selectAll("g")
    .filter(function(value) { return !value; })
      .classed("zero", true);

  // Add labeled rects for each birthyear (so that no enter or exit is required).
  var birthyear = birthyears.selectAll(".birthyear")
      .data(d3.range(year0 - age1, year1 + 1, 5))
    .enter().append("g")
      .attr("class", "birthyear")
      .attr("transform", function(birthyear) { return "translate(" + x(birthyear) + ",0)"; });

  birthyear.selectAll("rect")

//    
      .data(function(birthyear) return data[year][birthyear] || [0, 0]; })
    .enter().append("rect")
      .attr("x", -barWidth / 2)
      .attr("width", barWidth)
      .attr("y", y)
      .attr("height", function(value) { return height - y(value); });

  // Add labels to show birthyear.
  birthyear.append("text")
      .attr("y", height - 4)
      .text(function(birthyear) { return birthyear; });

  // Add labels to show age (separate; not animated).
  svg.selectAll(".age")
      .data(d3.range(0, age1 + 1, 5))
    .enter().append("text")
      .attr("class", "age")
      .attr("x", function(age) { return x(year - age); })
      .attr("y", height + 4)
      .attr("dy", ".71em")
      .text(function(age) { return age; });

  // Allow the arrow keys to change the displayed year.
  window.focus();
  d3.select(window).on("keydown", function() {
    switch (d3.event.keyCode) {
      case 37: year = Math.max(year0, year - 10); break;
      case 39: year = Math.min(year1, year + 10); break;
    }
    update();
  });

  function update() {
    if (!(year in data)) return;
    title.text(year);

    birthyears.transition()
        .duration(750)
        .attr("transform", "translate(" + (x(year1) - x(year)) + ",0)");

    birthyear.selectAll("rect")
        .data(function(birthyear) { return data[year][birthyear] || [0, 0]; })
      .transition()
        .duration(750)
        .attr("y", y)
        .attr("height", function(value) { return height - y(value); });
  }
});

        }

#2

Instead of using return data[year][birthyear]
I had to use something like this: .data(function(birthyear) {return data.get(year).get(birthyear) || [0, 0]; })

Because it was a map.