ThomasG77/index.html

## 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('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: '&copy; <a href="http://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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: '© <a href="http://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>