Skip to content

Instantly share code, notes, and snippets.

@ledbettj

ledbettj/index.html

Last active December 25, 2015 02:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ledbettj/6905080 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ledbettj/6905080 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<h3>Rotating map with D3.js using Canvas</h3>
<p><a href="rotatingCanvasCode.html">source code</a></p>
<div id="map"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var diameter = 320,
radius = diameter/2,
velocity = .01,
then = Date.now();
var projection = d3.geo.orthographic()
.scale(radius - 2)
.translate([radius, radius])
.clipAngle(90);
var canvas = d3.select("#map").append("canvas")
.attr("width", diameter)
.attr("height", diameter);
var path = d3.geo.path()
.projection(projection);
d3.json("./world-110m.json", function(error, world) {
var land = topojson.object(world, world.objects.land),
globe = {type: "Sphere"};
d3.timer(function() {
var angle = velocity * (Date.now() - then);
projection.rotate([angle,0,0]);
context = canvas.node().getContext("2d");
context.clearRect(0, 0, diameter, diameter);
context.strokeStyle = '#766951';
context.fillStyle = '#d8ffff';
context.beginPath(), path.context(context)(globe), context.fill();
context.beginPath(), path.context(context)(globe), context.stroke();
context.fillStyle = '#d7c7ad';
context.beginPath(), path.context(context)(land), context.fill();
context.beginPath(), path.context(context)(land), context.stroke();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment