Skip to content

Instantly share code, notes, and snippets.

@Andrew-Reid

Andrew-Reid/index.html

Last active February 22, 2020 14:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Andrew-Reid/11602fac1ea66c2a6d7f78067b2deddb to your computer and use it in GitHub Desktop.
Save Andrew-Reid/11602fac1ea66c2a6d7f78067b2deddb to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet and Popup with D3
Raw
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,30,29,13,10,7,6],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,170,160,150,140,110,100],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);
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:40};
var parse = d3.timeParse("%m");
var format = d3.timeFormat("%b");
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(12))
.range([0,width]);
var xAxis = d3.axisBottom()
.scale(x)
.tickFormat(function(d) { return format(parse(d+1)); });
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","steelblue")
.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment