Skip to content

Instantly share code, notes, and snippets.

@animateddata

animateddata/README.md

Last active August 2, 2017 09:18
Show Gist options
  • Save animateddata/1f6522d3fcec29c01e7f4a5894e1fd94 to your computer and use it in GitHub Desktop.
Save animateddata/1f6522d3fcec29c01e7f4a5894e1fd94 to your computer and use it in GitHub Desktop.
Download ZIP
Ball of string
Raw
README.md

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

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Ball of string</title>
</head>
<style>
body {
background-color: #39474F;
}
</style>
<body>
<canvas id="content"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var context = document.getElementById('content').getContext('2d');
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);
var geojson = {type: 'Feature', geometry: {type: 'LineString', coordinates: []}};
function rndLon() {return -180 + Math.random() * 360;}
function rndLat() {return -90 + Math.random() * 180;}
function addPoint() {geojson.geometry.coordinates.push([rndLon(), rndLat()])}
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment