Implementation of Jarke J. van Wijk and Wim A.A. Nuij's smooth and efficient zooming and panning for Polymaps.
Type a place name in the search box, top right, and hit "Go!" to fly there.
| use strict; | |
| use warnings; | |
| use 5.010; | |
| use Geo::ShapeFile::Point comp_includes_m => 0, comp_includes_z => 0; | |
| use Geo::ShapeFile; | |
| ### Requires TZ shapefile from http://efele.net/maps/tz/world/tz_world_mp.zip | |
| ### Limitations: Dog slow & only works if long lat point is over land | |
| ### Pass long and lat as command line args |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <title>Partition - Icicle</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script> | |
| <style type="text/css"> | |
| rect { |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.22.0"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.22.0"></script> | |
| <script type="text/javascript" src="readme.js"></script> | |
| <style type="text/css"> | |
| .node { |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| <title>Chord Diagram</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.22.1"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.22.1"></script> | |
| <style type="text/css"> | |
| body { |
| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | |
| <html> | |
| <head> | |
| <meta http-equiv="cache-control" content="no-cache" /> | |
| <meta http-equiv="pragma" content="no-cache" /> | |
| <meta http-equiv="expires" content="0" /> | |
| <title>Line Chart</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.10.0"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.10.0"></script> | |
| <script type="text/javascript" src="http://omf.mytestbed.net/projects/omf/repository/revisions/master/raw/omf-common/ruby/omf-common/web/tab/graph3/js/line_chart3.js"></script> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Marimekko Chart</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.19.1"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.19.1"></script> | |
| <style type="text/css"> | |
| body { | |
| font: 10px sans-serif; |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.8.4/d3.js"></script> | |
| <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.8.4/d3.geo.js"></script> | |
| <script type="text/javascript" src="https://github.com/simplegeo/polymaps/raw/v2.4.0/polymaps.js"></script> | |
| <script type="text/javascript" src="tiler.js"></script> | |
| <style type="text/css"> | |
| @import url("http://github.com/simplegeo/polymaps/raw/v2.4.0/examples/example.css"); |
Implementation of Jarke J. van Wijk and Wim A.A. Nuij's smooth and efficient zooming and panning for Polymaps.
Type a place name in the search box, top right, and hit "Go!" to fly there.
| d3.behavior.drag = function() { | |
| var x = 0, | |
| y = 0, | |
| listeners = [], | |
| dragit | |
| function drag() { | |
| var container = this | |
| .on("mousedown", mousedown) |
The default display for GeoJSON points in Polymaps is a 4.5px-radius circle. In this example, I show how to create more traditional pin-style markers for points. This is implemented using a “load” event handler which replaces the default circles with custom path elements.
The marker outline is courtesy of Dmitry Baranovskiy; he has graciously provided over 100 free vector icons to choose from. Of course, there’s no requirement to use vector icons. You could replace the circles with image elements instead, if you prefer raster. But the nice thing about vectors is that we can color them dynamically based on the data, as we do here by generating three categorical color gradients.