Leaflet and Popup with D3.js 2

<!DOCTYPE html>
<html>
<head>
  <title>Leaflet with D3 popups</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
    
</head>
<body>
<div id="mapid" style="width: 960px; height: 500px;"></div>
<script>
var mymap = L.map('mapid').setView([51.5, -0.14], 14);

L.tileLayer('https://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(mymap);

var popup = L.popup();

function click(e) {
  var width = 200;
  var height = 200;
  var margin = {left: 10, top: 10, right: 6, bottom: 10};

var div = d3.create("div");
  
  var svg = div.append("svg")
    .attr("width",width+margin.left+margin.right)
	.attr("height",height+margin.top+margin.bottom);
  
  var g = svg.append("g")
    .attr("transform","translate("+[margin.left,margin.top]+")");
	
  var colors = d3.scaleLinear().domain([0,99]).range(["yellow","steelblue"]);

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js

https://unpkg.com/leaflet@1.3.1/dist/leaflet.js