D3 Examples - Context Sensitive Label Visibility

Context Sensitive Label Visibility

This was developed at the Washington Post as a prototype for an illustration about the devastating effects of U.S. nuclear testing carried out around the Marshall Islands. The purpose of this prototype was to demonstrate a means for showing geographic information what would otherise require many "small multiples" in a more dense, interactive, and perhaps intuitive way.

The use of context-senstive label placement that attempts to avoid cluttering the view with unecessary details was one of the most valuable design exercises involved in creating this graphic prototype.

SVG rendering is not performant enough for smooth mouse interaction of the 3D globe. The author's 2011 Mac Book Air, for example, manages a mere 11 frames per second as it performs the main update loop. Performance could be improved with more thoughtful managment of D3 4.0 selections as well as canvas rendering using the new D3 4.0 semantics for drawing paths.

N.B. Hex binning was performed using longitude and latitude: this produces a distortion in the binning of tests. See annulus sampling.

xxxxxxxxxx
 
<!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>
​
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
  <div id="fps">FPS: <span>?</span></div>
  <div id="map">
    <svg width=960 height=960 id="nuclear-testing">
      <defs><radialGradient id="globe_highlight" cx="75%" cy="25%"><stop offset="5%" stop-color="#fff" stop-opacity="0.6"></stop><stop offset="100%" stop-color="#b5b5b5" stop-opacity="0.2"></stop></radialGradient></defs>
      <radialGradient id="globe_shading" cx="55%" cy="45%"><stop offset="30%" stop-color="#fff" stop-opacity="0"></stop><stop offset="100%" stop-color="#505962" stop-opacity="0.3"></stop></radialGradient>
    </svg>
  </div>
</body>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="hexbin.js"></script>
<script src="app.js"></script>
​
    