playing with d3-shape d3.v4

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
 <script src="https://d3js.org/d3.v4.0.0-alpha.4.min.js"></script>
</head>

<h1> FAIL: Despite trying to load d3.v4, the browser is still using 3.5.5</h1>
<p> Let's try making a pie chart with D3.V4 and at the same time understand what's going behind the scenes. But first lets develop our data visualization vocabulary. </p>

<body>
  <script>
//    Let's get the canvas object interface
   var canvas = document.querySelector("canvas"),
       context = canvas.getContext("2d")
   
//    Let's define some visual attributes needed for a circle and make sure our circle is centered.
 
   var width = canvas.width,
       height = canvas.height,
       radius = Math.min(width, height) / 2;
    
    context.translate(width / 2, height / 2);
    
// Now let's get some colors from https://colorbrewer2.org/ and since we're good designers we're going to choose a qualitive color scheme.
    
   var colors = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69'];
    
// Now let's define a mapping for our pie slices.
    
    var arc = d3.arc()
    	.outerRadius(radius - 10)
    	.innerRadius(0)
    	.context(context);
    
//     And since we're good designers we need to setup a map for the pie slice labels
    
    var labelArc = d3.arc()
    	.outerRadius(radius - 40)
   		.innerRadius(radius - 40)
   		.context(context)
    
 //     But this is great but we need angles to define pie slices. For that we'll use d3.pie. But the language here is a bit misleading. Is this really a pie? Nope, you pass it data and returns angles. Maybe it should have been called pieAngles? In any case let's use it. But there's a catch here. We need to tell this function how to access the data. We do this with something that is an accessor function.
    
    var pie = d3.pie()
    	.sort(null)
    	.value(function(d){ return d.populations; });
    
    var draw = function(error, data){
      if(error) throw error;
      
      console.log("hello console");
      
//       Let's get our angles
      var thetas = pie(data);
      
//       And for each data point we need to do something, namely draw our slices. And recall since we're using the canvas object we need to use the canvas interface to draw
      
      thetas.forEach( function(d, i){
        context.beginPath();
        arc(d);
        context.fillStyle = colors[i];
        context.fill();
      })
      
//       But it also may be nice to add a stroke to visually seperate each slice
      
      context.beginPath();
      thetas.forEach(arc);
      context.strokeStyle = "White";
      context.stroke();
      
//       We should alse give our text some labels some color
      
      context.textAlign = "center";
      context.textBaseline = "middle";
      context.fillStyle = "White";
      
      thetas.forEach(function(d){
        var c = labelArc.centroid(d);
        context.fillText(d.data.age, c[0], c[1]);
      })
      
      
    }
    
    var parseData = function(d){
      d.population = +d.population;
      return d}
    
    
    // Now let's get our data.
    
    d3.requestTsv("data.tsv", parseData(data), draw(error,data));

</script>
</body>

https://d3js.org/d3.v4.0.0-alpha.4.min.js