D3 Examples - Rainflow

Rainflow

Gradient flow example using bilinear interpolation of matrix map of Earth altitudes.

For this example, I computed the gravitational force field from a gradient of a 2-D potential energy function, in this case a bilinearly interpolated matrix map of average altitudes of the Earth at every degree (a 180-by-360 dataset).

This global elevation dataset is included with Matlab and is available by running "Load topo". Their doc page references National Geophysical Data Center, NOAA US Department of Commerce under data announcement 88-MGG-02:

I used the physics engine from the open-source HTML5 game dev kit (built using d3) that I've been working on, available on Github at:

xxxxxxxxxx
 
<!DOCTYPE HTML>
<html style="height:100%;width:100%;">
  <head>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script><!-- https://d3js.org/-->    
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
  </head>
  <body oncontextmenu="return false;" style="border:0;padding:0;margin:0;overflow:hidden;height:100%;width:100%;">
    <div id="game_div" style="margin-left: auto; margin-right: auto; height:100%;width:100%;">
      <svg id="game_svg" style="margin-left:auto; margin-right: auto; display:block;">
        <g id="game_g">
        </g>
      </svg>
    </div>
    <!-- run the game: -->
    <script type="text/javascript" src="rainflow.js"></script><!-- use a single .js file for deployment, run "cake build" to recompile -->
  </body>
</html>
​
​
<!--
​
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="https://underscorejs.org/underscore-min.js"></script><!-- https://coffeescript.org/extras/-->
    <!--
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script><!-- https://d3js.org/-->
<!--    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <style type="text/css">
​
body {
  width: 100%;
  margin: 0;
  padding: 0;
  padding-left: 10px;
  overflow: hidden;
}
​
svg {
  display: block;
  margin:auto;
}
    </style>
  </head>
​
  <body>
    <div id="map" oncontextmenu="return false">
      <svg id="game_svg" width="360px" height="180px">
      </svg>
    </div>
​
<!-- run the game: -->
<!--<script type="text/javascript" src="rainflow.js"></script><!-- use a single .js file for deployment, run "cake build" to recompile -->
<!--<script type="text/javascript">
$(document).ready( function() {
  new Rainflow().start() ; // create and start the visualization
}) ;
</script>
​
</body>
</html>
-->
    