sabman · July 28, 2024 10:55 · Feb 22, 2020 · Feb 22, 2020 · May 8, 2018 · May 8, 2018
diff --git a/index.html b/index.html
@@ -53,6 +53,11 @@
   '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;
@@ -100,7 +105,7 @@
     .attr("height",0)
     .attr("width", x.bandwidth()-2 )
     .attr("x", function(d,i) { return x(i); })
-    .attr("fill","steelblue")
+    .attr("fill",function(d,i) { return colorParties[i]; })
     .transition()
     .attr("height", function(d) { return height-y(d); })
     .attr("y", function(d) { return y(d); })

diff --git a/index.html b/index.html
@@ -21,15 +21,15 @@
 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"},
+    "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,170,160,150,140,110,100],title:"Some Statistic"},
+    "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]]]
@@ -47,16 +47,19 @@
 L.geoJSON(features)
   .addTo(mymap)
   .bindPopup(chart);
-
+
+var parties = [
+  'Party 1', 'Party 2', 'Party 3',
+  'Party 4', 'Party 5', 'Last party'
+];
+
 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 margin = {left:20,right:15,top:40,bottom:60};
 
   var div = d3.create("div")
   var svg = div.append("svg")
@@ -75,12 +78,12 @@
   g.append("g").call(yAxis);
 
   var x = d3.scaleBand()
-    .domain(d3.range(12))
+    .domain(d3.range(6))
     .range([0,width]);
 
   var xAxis = d3.axisBottom()
     .scale(x)
-    .tickFormat(function(d) { return format(parse(d+1)); });
+    .tickFormat(function(d) { return parties[d]; });
 
   g.append("g")
       .attr("transform", "translate(0," + height + ")")

diff --git a/index.html b/index.html
@@ -39,15 +39,11 @@
 
 var mymap = L.map('mapid').setView([51.5, -0.14], 14);
 
-L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
-  maxZoom: 18,
-  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
-    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
-    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-  id: 'mapbox.streets'
+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);

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -0,0 +1,127 @@
+<!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/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
+   <script src="https://unpkg.com/[email protected]/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('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+  maxZoom: 18,
+  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
+    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+  id: 'mapbox.streets'
+}).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>