Leaflet and Popup with D3 by ThomasG77

index.html

<!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>
   <style>
      .leaflet-popup-content {
        width: auto !important;
      }
   </style>
    
</head>
<body>
<div id="mapid" style="width: 960px; height: 500px;"></div>
<script>
var features = { "type":"featureCollection", features: [
  {
    "type":"Feature",
    "properties":{data:[10,12,16,20,25,30],title:"Injuries Due to Swan Bite by Month"},
    "geometry":{
      "type":"Polygon",
        "coordinates":[[[-0.1398611068725586,51.50203767899114],[-0.13994693756103516,51.50142324743368],[-0.13887405395507812,51.50051494213073],[-0.13063430786132812,51.501369818211096],[-0.1299905776977539,51.50144996202149],[-0.12973308563232422,51.50281238523426],[-0.12921810150146484,51.503400084633526],[-0.12926101684570312,51.504014489537944],[-0.12943267822265625,51.504575460694184],[-0.1295614242553711,51.50502957514356],[-0.13084888458251953,51.505724094371274],[-0.1398611068725586,51.50203767899114]]]
    }
  },
  {
    "type": "Feature",
    "properties": {data:[100,112,130,200,210,190],title:"Some Statistic"},
	"geometry": {
      "type": "Polygon",
      "coordinates": [[[-0.14938831329345703,51.503132949482534],[-0.1494741439819336,51.502625388381375],[-0.14200687408447266,51.502358248689035],[-0.14127731323242188,51.502732243819835],[-0.1403331756591797,51.50281238523426],[-0.13956069946289062,51.50251853269236],[-0.13441085815429688,51.504869299972306],[-0.1347970962524414,51.50510971251776],[-0.13956069946289062,51.50329323076107],[-0.14265060424804688,51.506739141893],[-0.14664173126220703,51.50468231156],[-0.14732837677001953,51.504148054725356],[-0.14938831329345703,51.503132949482534]]]
   }
  }
]};

var mymap = L.map('mapid').setView([51.5, -0.14], 14);

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

L.geoJSON(features)
  .addTo(mymap)
  .bindPopup(chart);

var parties = [
  'Party 1', 'Party 2', 'Party 3',
  'Party 4', 'Party 5', 'Last party'
];

var colorParties = [
  'red', 'green', 'yellow',
  'blue', 'orange', '#ff00ff'
];

function chart(d) {
  var feature = d.feature;
  var data = feature.properties.data;
  
  var width = 300;
  var height = 80;
  var margin = {left:20,right:15,top:40,bottom:60};
   
  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 y = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) { return d; }) ])
    .range([height,0]);
    
  var yAxis = d3.axisLeft()
    .ticks(4)
    .scale(y);
  g.append("g").call(yAxis);
    
  var x = d3.scaleBand()
    .domain(d3.range(6))
    .range([0,width]);
    
  var xAxis = d3.axisBottom()
    .scale(x)
    .tickFormat(function(d) { return parties[d]; });
    
  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
      .attr("text-anchor","end")
      .attr("transform","rotate(-90)translate(-12,-15)")
    
  var rects = g.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("y",height)
    .attr("height",0)
    .attr("width", x.bandwidth()-2 )
    .attr("x", function(d,i) { return x(i); })
    .attr("fill",function(d,i) { return colorParties[i]; })
    .transition()
    .attr("height", function(d) { return height-y(d); })
    .attr("y", function(d) { return y(d); })
    .duration(1000);
    
  var title = svg.append("text")
    .style("font-size", "20px")
    .text(feature.properties.title)
    .attr("x", width/2 + margin.left)
    .attr("y", 30)
    .attr("text-anchor","middle");
    
  return div.node();
    
}    

    
</script>



</body>
</html>