Pixymaps (Scrolling)

<!DOCTYPE html>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="pixymaps.min.js"></script>
<style>

body {
  font: 10px sans-serif;
}

#container {
  width: 960px;
  height: 500px;
  overflow: hidden;
}

</style>
<div id="container">
  <canvas id="map"></canvas>
</div>
<script>

var canvas = d3.select("#map"),
    context = canvas.node().getContext("2d");

var w = 960,
    h = 500,
    lon = -122.41948,
    lat = 37.76487;

var project = d3.geo.mercator()
    .scale(1 / (2 * Math.PI))
    .translate([.5, .5]);

var view = pixymaps.view()
    .size([w, h])
    .center(project([lon, lat]))
    .zoom(12);

var image = pixymaps.image()
    .view(view)
    .url(pixymaps.url("https://{S}tile.cloudmade.com"
    + "/1a1b06b230af4efdbb989ea99e9841af" // https://cloudmade.com/register
    + "/999/256/{Z}/{X}/{Y}.png")
    .hosts(["a.", "b.", "c.", ""]))
    .render(canvas.node());

var speed = 0,
    acceleration = -.05;

d3.timer(function() {
  speed = Math.max(-5, speed + acceleration);
  view.panBy([speed, 0]);
  image.render(canvas.node());
});

</script>

https://d3js.org/d3.v3.min.js