Mapswarm leaflet

Teaswarm on a map! Tiles by Stamen Design. This is a variation of Teaswarm and Song Tea and Ceramics Map. Adding a bit of Beeswarm force layout jitter to reveal otherwise hidden points. Setting the collision higher and removing overlap entirely throws off the lat/long information too much. Circles are sized according to the number of teas taken from each location. Location data is imperfect. Specificity was preserved where possible. For example, some teas are just reported as being from Guangdong, while others are from a more specific place, like Chaozhou, Guangdong.

Open in a new window to see the full thing.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  <style>
    #map {
      height: 700px;
      width: 1260px;
    }
    .teaname {
      font-weight: normal;
      font-size: 16px;
    }
    .location {
      font-size: 16px;
      font-weight: bold;
    }
    .company {
     font-weight: bold;
     font-size: 16px; 
     color: "#525252";
     text-decoration: underline;
    }
  </style>
</head>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.js"></script>
<script type="text/javascript" src="https://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script src="https://d3js.org/d3.v4.0.0-alpha.35.min.js"></script>
<script>

var teaKeys = ["song", "redblossom"];

var r = d3.scaleLinear()
  .range([15000, 25000]);

var color = d3.scaleOrdinal()
    .domain(teaKeys)
    .range(["#6a3d9a", "#e31a1c"]);

var companyName = { "song": "song tea", "redblossom": "red blossom tea" };

var layer = new L.StamenTileLayer("toner");
var map = new L.Map("map", {
  center: new L.LatLng(26.4, 115.09), //center: new L.LatLng(28.4, 111.09), //whole map on 15 inch screen
  zoom: 6,
  touchZoom: false,
  scrollWheelZoom: false
});
map.addLayer(layer);

var tea_data = {}, remaining = 2;
d3.csv("song.csv", function(data) {
  tea_data.song = data;
  if (!--remaining) draw();
});

d3.csv("redblossom.csv", function(data) {
  tea_data.redblossom = data;
  if (!--remaining) draw();
});

r.domain([r_domain.min, r_domain.max]);

// loop again to plot points with radius scaled as a function of the number of teas from that area
  d3.keys(tea_data).forEach(function(company) {
    tea_data[company].forEach(function(tea) {
      if (m[company][tea.location]) { 
        m[company][tea.location]._popup._content += "<div class='teaname'>" + tea.name + "</div>";
      }
      else { // draw this circle and plot the tea name on the map
        m[company][tea.location] = L.circle([tea.latitude, tea.longitude], r(n[company][tea.location]), 
                                   { fillColor: color(company),
                                     fillOpacity: 0.8, 
                                     color: "black",
                                     weight: 1,
                                     opacity: 1
                                   })
          .bindPopup("<div class='company'>" + companyName[company] + "</div>" +
                      "<div class='location'>" + tea.location.split("_").join(", ") + 
                      "</div>" + "<div class='teaname'>" + tea.name + "</div>")
          //.addTo(map) // uncomment this and comment out the section below to check out the difference without the force layout
      }
    });

var simulation = d3.forceSimulation(tea_data[company])
      .force("x", d3.forceX(function(d) { return d.latitude; }).strength(1))
      .force("y", d3.forceY(function(d) { return d.longitude; }).strength(1))
      .force("collide", d3.forceCollide(.2))
      .stop();

for (var i = 0; i < 120; ++i) simulation.tick();

tea_data[company].forEach(function(tea) {
      m[company][tea.location]
        .setLatLng([tea.x, tea.y]) 
        .addTo(map);
    });
  });
}
//d3.select(self.frameElement).style("height", "700px").style("width", "1260px");
</script>

Modified http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js to a secure url

Modified http://maps.stamen.com/js/tile.stamen.js?v1.3.0 to a secure url

https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js

https://maps.stamen.com/js/tile.stamen.js?v1.3.0

https://d3js.org/d3.v4.0.0-alpha.35.min.js