Ball of string

Random [lon, lat] points are added to a GeoJSON LineString feature and rendered to canvas. The projection is rotated on each animation frame.

Peter Cook

forked from animateddata's block: Ball of string

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Ball of string</title>
</head>
<style>
body {
  background-color: #39474F;
}
</style>
<body>
  <canvas id="content"></canvas>

var width = window.innerWidth;
var height = window.innerHeight;
var size = d3.min([width, height]);

d3.select('#content')
  .attr('width', width + 'px')
  .attr('height', height + 'px');

context.lineWidth = 0.4;
context.strokeStyle = 'rgba(255, 255, 255, 0.6)';

var projection = d3.geoOrthographic()
  .scale(0.45 * size)
  .translate([0.5 * width, 0.5 * height]);

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

function update(t) {
  if(geojson.geometry.coordinates.length < 6000)
    addPoint();

projection.rotate([t / 1000]);

context.clearRect(0, 0, width, height);
  context.beginPath();
  geoGenerator(geojson);
  context.stroke();

window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

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

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