Context Sensitive Label Visibility

forked from bmershon's block: Context Sensitive Label Visibility

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
    min-height: 960px;
  }

#fps {
    position: absolute;
    margin: 20px
  }

.noclicks {
    pointer-events:none;
  }

svg {
    top: 0;
    position: absolute;
    cursor: move;
  }

.spike {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
  }

.sphere {
    fill: #f3efe7;
    fill-opacity: 1;
    stroke: none;
    stroke-width: 1px;
  }

.graticule {
    fill: none;
    stroke: #000F24;
    stroke-width: 0.2px;
    stroke-dasharray: 2,2;
  }

path.country {
    fill: none;
    stroke: #5e5e5e;
    stroke-width: .3px;
    fill-opacity: 0.8;
  }

path.land {
    fill: #dad3c7;
    stroke-width: .2px;
    stroke: #798d94;
  }

path#CHN {
    fill: #de8b57;
  }

path#USA {
    fill: #6b6483;
  }

path#FRA {
    fill: #ac769d;
  }

path#PAK {
    fill: #6c8969;
  }

path#RUS {
    fill: #c15e50;
  }

path#IND {
    fill: #fdc576;
  }

path#GBR {
    fill: #cad15f;
  }

path#PRK {
    fill: #31061e;
  }

/* The countries who conducted tests*/
  .label-countries {
    font-family: FranklinITCProLight,FranklinITCStdLight,Helvetica,Arial,sans-serif;
    fill: #000F24;
    font-style: normal;
    text-anchor: middle;
  }

/* Blurbs about areas affected*/
  .blurb {
    pointer-events: none;
    fill: #000F24;
    text-anchor: middle;
    font-style: italic;
    font-family: FranklinITCProLight,FranklinITCStdLight,Helvetica,Arial,sans-serif;
  }

/* Dots to represent tests */
  .event {
    pointer-events: none;
    fill: none;
    stroke: #000000;
    stroke-width: 2px;
    stroke-dasharray: 5, 5;
  }

/* Dots to represent tests */
  .hexagon {
    stroke: #222222;
    stroke-width: 1px;
  }

/* Specific dot styling */
  #China {
    fill: #de8b57;
  }

#US {
    fill: #6b6483;
  }

#France {
    fill: #ac769d;
  }

#Pakistan {
    fill: #6c8969;
  }

#USSR {
    fill: #c15e50;
  }

#India {
    fill: #fdc576;
  }

#UK {
    fill: #7bd52c;
  }

#PRK {
    fill: #31061e;
  }

</style>

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js

https://d3js.org/queue.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js