A quick example demonstrating the use of "show" event handlers and reshow, which allows you to restyle GeoJSON features dynamically from an external event. In this example, you can use the jQuery UI slider in the top-left corner to resize the points.
Fiachra O'Donoghue fod
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/bin/perl | |
| use strict; | |
| use warnings; | |
| use 5.010; | |
| use CAM::PDF; | |
| use DBI; | |
| use SQL::Abstract; | |
| use List::AllUtils qw(zip); | |
| use Term::ProgressBar 2.00; |
fod
/ d3.scale.flexiclass.js
Created
October 21, 2011 02:02
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| d3.scale.flexiclass = function(class_alg) { | |
| return d3_scale_flexiclass([], [], class_alg); | |
| }; | |
| function d3_scale_flexiclass(domain, range, class_alg) { | |
| var thresholds; | |
| function rescale() { | |
| var geostats_class = new geostats(domain); | |
| var k = 0, |
fod
/ README.mkd
Created
September 21, 2011 02:56
— forked from jasondavies/README.mkd
Resizable Markers
fod
/ index.html
Created
September 19, 2011 21:16
— forked from kforeman/index.html
treemap transitions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <title>Treemap</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> | |
| <script type="text/javascript" src="http://simiantics.net/d3/lib/jquery/jquery.min.js"></script> | |
| <script type="text/javascript" src="http://simiantics.net/d3/lib/jquery-ui/jquery-ui.min.js"></script> | |
| <style type="text/css"> @import url("http://simiantics.net/d3/lib/jquery-ui/jquery-ui.css"); text { font-family: sans-serif; } </style> | |
| <script type="text/javascript" src="http://simiantics.net/treemap_USA.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "cache": { | |
| "name": "Disk", | |
| "path": "stache", | |
| "umask": "0000", | |
| "dirs": "portable" | |
| }, | |
| "layers": { | |
| "eds": { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"); |
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.
fod
/ drag.js
Created
July 11, 2011 15:53
— forked from g2010a/drag.js
Behaviors for D3 Visualization library
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| d3.behavior.drag = function() { | |
| var x = 0, | |
| y = 0, | |
| listeners = [], | |
| dragit | |
| function drag() { | |
| var container = this | |
| .on("mousedown", mousedown) |
fod
/ README.mkd
Created
July 10, 2011 22:25
— forked from RandomEtc/README.mkd
smooth panning and zooming for polymaps
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"); |
NewerOlder