D3 Examples - smooth panning and zooming for polymaps

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://github.com/simplegeo/polymaps/raw/v2.2.0/polymaps.js"></script>
    <script type="text/javascript" src="fly.js"></script>    
    <style type="text/css">
​
html, body {
  width: 100%; height: 100%;
}
​
body {
  margin: 0;
  background: #E5E0D9;
}
​
svg {
  width: 100%;
  height: 100%;
}
​
#copy {
  position: absolute;
  left: 0;
  bottom: 4px;
  padding-left: 5px;
  font: 9px sans-serif;
  color: #fff;
  cursor: default;
}
​
#copy a {
  color: #fff;
}
​
.compass .back {
  fill: #eee;
  fill-opacity: .8;
}
​
.compass .fore {
  stroke: #999;
  stroke-width: 1.5px;
}
​
.compass rect.back.fore {
  fill: #999;
  fill-opacity: .3;
  stroke: #eee;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
​
.compass .direction {
  fill: none;
}
​
.compass .chevron {
  fill: none;
  stroke: #999;
  stroke-width: 5px;
}
​
.compass .zoom .chevron {
  stroke-width: 4px;
}
​
.compass .active .chevron, .compass .chevron.active {
  stroke: #fff;
}
​
.compass.active .active .direction {
  fill: #999;
}
​
​
.compass .chevron, .compass .fore {
  stroke: #666;
}
​
#map {
  background: #132328;
}
​
#logo {
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
​
#copy {
  width: 33%;
  color: #ccc;
  pointer-events: none;
}
​
input {
    position: absolute;
    right: 60px;
    top: 10px;
}
​
button {
    position: absolute;
    right: 10px;
    width: 45px;
    top: 10px;
}
​
    </style>
  </head>
  <body id="map">
    <script type="text/javascript" src="map.js"></script>
    <div id="copy"></div>
    <img id="logo"/>
    <form id="search"><input type="search" size="32" name="q" placeholder="type a place name..." disabled/><button type="submit" name="submit" disabled>Go!</button></form>
  </body>
</html>
​
    