US Foreign Military Bases

Quick visualisation using D3.js to show location of US Foreign Military bases and facilities. Data from David Vine

Current Issues

Some bases too clustered to discern from one another (See Germany or Italy)
Slow, maybe change to canvas instead of svg
Set US flag as marker instead, very slow as svg pattern though
Minor Issue: Country titles are not present in this TopoJSON

Special thanks to fil for helping me properly project the points.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <script src="https://unpkg.com/versor"></script>
  <script src="https://unpkg.com/d3-inertia"></script>

main {
      width: 25vw;
      margin: 0 auto;
      padding: 5vw;
      max-width: 50em;
    }

circle:hover {
      stroke: #002147;
    }

.container {
      display: flex; /* or inline-flex */
    }

.world {
      cursor: move; /* fallback if grab cursor is unsupported */
      cursor: grab;
      cursor: -moz-grab;
      cursor: -webkit-grab;
    }

</style>
</head>

<linearGradient id="gradBlue" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#005C99;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#0099FF;stop-opacity:1" />
        </linearGradient>

</svg>

<h2>Click on a US Flag!</h2>
      <p id="notes">

</p>

<p>Data from David Vine"s research for <a href="https://www.davidvine.net/base-nation.html" target="_blank">Base Nation book</a></p>
    </main>

</div>

var title = d3.select("h1");
var notesP = d3.select("#notes");
var notes = d3.select("h2");

var width = 960,
    height = 700,
    margin = { top: 10, right: 10, bottom: 10, left: 10 },    
    originalScale = height / 2.0,
    scale = originalScale,
    translation = [width / 2, height / 2],
    scaleChange,
    rotation;
 
var svg = d3.select("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.top + ", " + margin.left + ")");

var sphere = {type: "Sphere"};

var graticule = d3.geoGraticule();

var projection = d3.geoOrthographic()
    .scale(scale) 
    .translate(translation)
    .clipAngle(90);

var path = d3.geoPath()
    .projection(projection);

d3.queue()
  .defer(d3.csv, "bases.csv")
  .defer(d3.csv, "lilypads.csv")
  .defer(d3.csv, "usfunded.csv")
  .defer(d3.json, "https://unpkg.com/world-atlas@1/world/110m.json")
  .await(load);

function load(error, bases, lilypads, usfunded, world,) {
  if (error) throw error;

var countries = topojson.feature(world, world.objects.countries).features;
      grid = graticule();

svg.append("g")
   .attr("id", "globegroup")
    .append("path")
      .datum(sphere)
      .attr("class", "world")
      .attr("id", "sphere")
      .attr("fill", "url(#gradBlue)")
      .attr("stroke", "#ccc")
      .attr("stroke-width", 1)
      .attr("z-index", 100);

svg.selectAll(".grid")
      .data([grid])
      .enter()
    .append("path")
      .classed("world", true)
      .classed("grid", true)
      .attr("fill", "none")
      .attr("stroke", "#ffd")
      .attr("stroke-width", 1);

svg.selectAll(".country")
      .data(countries)
    .enter().insert("path")
      .attr("class", "countries")
      .attr("class", "world")      
      .attr("id", function (d) { return d.id; })
      .attr("fill", "#ccc")
      .attr("stroke", "#fff")
      .append("title")
        .text(function(d) { console.log(d);  }); //return countrycodesDict[d.id];

svg.selectAll(".lilypad")
    .data(lilypads)
    .enter().append("circle")
      .attr("fill", "red")
      .attr("r", 4)
      .append("title")
        .text(function(d) { return "Lilypad: " + d.name });

svg.selectAll(".usfunded")
    .data(usfunded)
    .enter().append("circle")
      .attr("fill", "red")
      .attr("r", 2.5)
      .append("title")
        .text(function(d) { return "US Funded: " + d.name });

svg.selectAll(".base")
    .data(bases)
    .enter().append("circle")
      .attr("stroke", "red")
      .attr("fill", "#fff")
      .attr("r", 5.5)
      .append("title")
        .text(function(d) { return "Base: " + d.name });

svg.select("#USA")
      .attr("stroke", "#000")  
      .attr("stroke-width", 2);

svg.selectAll("circle")
    .on("click", function(d) {
        title.html(d.name + ", " + d.country);
        notes.html("Notes");
        notesP.html(d.notes);

})
  
  reproject();
  
  // Zoom and pan set-up

var zoom = d3.zoom()
    .scaleExtent([0.5, 4])
    .on("zoom", zoomed)

d3.select("svg").call(zoom);

var previousScaleFactor = 1;

function zoomed() {
    var dx = d3.event.sourceEvent.movementX;
    var dy = d3.event.sourceEvent.movementY;

var event = d3.event.sourceEvent.type;
    
    if (event === "wheel") {
      
      scaleFactor = d3.event.transform.k; 
      scaleChange = scaleFactor - previousScaleFactor;
      scale = scale + scaleChange * originalScale;
      projection.scale(scale);
      previousScaleFactor = scaleFactor;

}
    
    reproject();
  
  } // zoomed()

} // load()

d3.geoInertiaDrag(svg, reproject);
  
  function reproject() {
    var c = projection.rotate().slice(0,2).map(d => -d)
    d3.selectAll("circle")
      .attr("transform", function(d) { return "translate(" + projection([d.lon,d.lat]) + ")";})
    .attr("opacity", function(d){
      // clipAngle(90)
      return d3.geoDistance([+d.lon,+d.lat], c) < Math.PI/2 ? 1 : 0;
    })
    d3.selectAll(".world")
      .attr("d", path);
  }
  
</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js

https://unpkg.com/versor

https://unpkg.com/d3-inertia