d3indepth/.block

## .block
license: gpl-3.0
height: 420
border: no

## README.md

      
    Raw
  

              README.md
            
          
    d3.geoInterpolate example.
From D3 in Depth book by Peter Cook.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Geo interpolator</title>
</head>

<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}
</style>

<body>
  <div id="content">
    <canvas width="800" height="400"></canvas>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

  <script>
var geojson = {}

var context = d3.select('#content canvas')
  .node()
  .getContext('2d');

var projection = d3.geoOrthographic()
  .scale(500)
  .rotate([30, -45]);

var geoGenerator = d3.geoPath()
  .projection(projection)
  .pointRadius(4)
  .context(context);

var londonLonLat = [0.1278, 51.5074];
var newYorkLonLat = [-74.0059, 40.7128];
var geoInterpolator = d3.geoInterpolate(londonLonLat, newYorkLonLat);
var u = 0;

function update() {
  context.clearRect(0, 0, 800, 600);

  context.lineWidth = 0.5;
  context.strokeStyle = '#333';

  context.beginPath();
  geoGenerator({type: 'FeatureCollection', features: geojson.features})
  context.stroke();

  // Graticule
  var graticule = d3.geoGraticule();
  context.beginPath();
  context.strokeStyle = '#ccc';
  geoGenerator(graticule());
  context.stroke();

  // London - New York
  context.beginPath();
  context.strokeStyle = 'red';
  geoGenerator({type: 'Feature', geometry: {type: 'LineString', coordinates: [londonLonLat, newYorkLonLat]}});
  context.stroke();

  // Point
  context.beginPath();
  context.fillStyle = 'red';
  geoGenerator({type: 'Feature', geometry: {type: 'Point', coordinates: geoInterpolator(u)}});
  context.fill();

  u += 0.01
  if(u > 1) u = 0
}


// REQUEST DATA
d3.json('https://gist.githubusercontent.com/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7/raw/c58cede8dab4673c91a3db702d50f7447b373d98/ne_110m_land.json', function(err, json) {
  geojson = json;
  window.setInterval(update, 50);
  // update(json);
})

  </script>
</body>
</html>

## ne_110m_land.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ne_110m_land.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>Geo interpolator</title>
	</head>

	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 14px;
	color: #333;
	}
	</style>

	<body>
	<div id="content">
	<canvas width="800" height="400"></canvas>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

	<script>
	var geojson = {}

	var context = d3.select('#content canvas')
	.node()
	.getContext('2d');

	var projection = d3.geoOrthographic()
	.scale(500)
	.rotate([30, -45]);

	var geoGenerator = d3.geoPath()
	.projection(projection)
	.pointRadius(4)
	.context(context);

	var londonLonLat = [0.1278, 51.5074];
	var newYorkLonLat = [-74.0059, 40.7128];
	var geoInterpolator = d3.geoInterpolate(londonLonLat, newYorkLonLat);
	var u = 0;

	function update() {
	context.clearRect(0, 0, 800, 600);

	context.lineWidth = 0.5;
	context.strokeStyle = '#333';

	context.beginPath();
	geoGenerator({type: 'FeatureCollection', features: geojson.features})
	context.stroke();

	// Graticule
	var graticule = d3.geoGraticule();
	context.beginPath();
	context.strokeStyle = '#ccc';
	geoGenerator(graticule());
	context.stroke();

	// London - New York
	context.beginPath();
	context.strokeStyle = 'red';
	geoGenerator({type: 'Feature', geometry: {type: 'LineString', coordinates: [londonLonLat, newYorkLonLat]}});
	context.stroke();

	// Point
	context.beginPath();
	context.fillStyle = 'red';
	geoGenerator({type: 'Feature', geometry: {type: 'Point', coordinates: geoInterpolator(u)}});
	context.fill();

	u += 0.01
	if(u > 1) u = 0
	}



	// REQUEST DATA
	d3.json('https://gist.githubusercontent.com/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7/raw/c58cede8dab4673c91a3db702d50f7447b373d98/ne_110m_land.json', function(err, json) {
	geojson = json;
	window.setInterval(update, 50);
	// update(json);
	})

	</script>
	</body>
	</html>