Skip to content

Instantly share code, notes, and snippets.

@christophercliff

christophercliff/index.html

Created August 24, 2011 02:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save christophercliff/1167198 to your computer and use it in GitHub Desktop.
Save christophercliff/1167198 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<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://mbostock.github.com/d3/d3.geom.js"></script>
<script type="text/javascript" src="https://raw.github.com/simplegeo/polymaps/master/polymaps.min.js"></script>
<style type="text/css">
.link { stroke: #ccc; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
</style>
</head>
<body>
<div id="map" style="width:960px;height:500px;"></div>
<script type="text/javascript">
var data = {"type": "FeatureCollection", "features":[
{"type": "Feature", "geometry": {"type":"Point","coordinates":[-71.05253755225374,42.35563913983638]}, "properties": {"_id":"e8141967af9895da3d16138a931a4453","_rev":"1-c05a6e16c137dbe6adb0ce4903646a34","properties":{"neighborhood":"Back Bay"},"_attachments":{"awesome.jpeg":{"content_type":"image/jpeg","revpos":1,"digest":"md5-mG5o0ZZmrOuKFAjrXFCuDg==","length":125540,"stub":true}}}},
{"type": "Feature", "geometry": {"type":"Point","coordinates":[-71.08639492855832,42.3448741546063]}, "properties": {"_id":"e8141967af9895da3d16138a93424a57","_rev":"1-965c87f972a72f7507113e16cf18e3c6","properties":{"neighborhood":"Back Bay"},"_attachments":{"awesome.jpeg":{"content_type":"image/jpeg","revpos":1,"digest":"md5-mG5o0ZZmrOuKFAjrXFCuDg==","length":125540,"stub":true}}}},
{"type": "Feature", "geometry": {"type":"Point","coordinates":[-71.05095504893495,42.35505640229554]}, "properties": {"_id":"e8141967af9895da3d16138a93151c18","_rev":"1-be06d630949b96b13cf36f60793f4431","properties":{"neighborhood":"Back Bay"},"_attachments":{"awesome.jpeg":{"content_type":"image/jpeg","revpos":1,"digest":"md5-PHhnYN2T3wt9eQOXH2689w==","length":105328,"stub":true}}}},
{"type": "Feature", "geometry": {"type":"Point","coordinates":[-71.0517918981476,42.35986085247134]}, "properties": {"_id":"e8141967af9895da3d16138a931312cf","_rev":"1-83a894d045904525918e06a0c5e28acb","properties":{"neighborhood":"Back Bay"},"_attachments":{"awesome.jpeg":{"content_type":"image/jpeg","revpos":1,"digest":"md5-mG5o0ZZmrOuKFAjrXFCuDg==","length":125540,"stub":true}}}},
{"type": "Feature", "geometry": {"type":"Point","coordinates":[-71.0498972585831,42.35566296089346]}, "properties": {"_id":"e8141967af9895da3d16138a93051719","_rev":"1-de015003039e933a271f7e527d818be5","properties":{"neighborhood":"Back Bay"},"_attachments":{"awesome.jpeg":{"content_type":"image/jpeg","revpos":1,"digest":"md5-PHhnYN2T3wt9eQOXH2689w==","length":105328,"stub":true}}}},
{"type": "Feature", "geometry": {"type":"Point","coordinates":[-71.05025231017305,42.35895310908976]}, "properties": {"_id":"e8141967af9895da3d16138a931078b6","_rev":"1-f3716e69206ea0e1f555f63bba09ce1d","properties":{"neighborhood":"Back Bay"},"_attachments":{"awesome.jpeg":{"content_type":"image/jpeg","revpos":1,"digest":"md5-mG5o0ZZmrOuKFAjrXFCuDg==","length":125540,"stub":true}}}},
{"type": "Feature", "geometry": {"type":"Point","coordinates":[-71.0500786487961,42.35781651032094]}, "properties": {"_id":"e8141967af9895da3d16138a93050393","_rev":"1-5bb7c8594ffd2852d3823929f27b72bc","properties":{"neighborhood":"Back Bay"},"_attachments":{"awesome.jpeg":{"content_type":"image/jpeg","revpos":1,"digest":"md5-xl4x9LH1HPWGBSNZGxCHjQ==","length":93820,"stub":true}}}},
{"type": "Feature", "geometry": {"type":"Point","coordinates":[-71.05315709590911,42.35779636641356]}, "properties": {"_id":"cb85d486cf20ced0f52ab53e1f1cf86b","_rev":"1-5464cd377e7dd7d1783837e06aa6d9dd","properties":{"neighborhood":"Back Bay"},"_attachments":{"awesome.jpeg":{"content_type":"image/jpeg","revpos":1,"digest":"md5-PHhnYN2T3wt9eQOXH2689w==","length":105328,"stub":true}}}}]};
var w = 960,
h = 500,
po = org.polymaps,
container = d3.select("#map").append("svg:svg").node(),
url = po.url('http://mt0.googleapis.com/vt?lyrs=t@127,r@158&src=apiv3&hl=en-US&x={X}&y={Y}&z={Z}&s=Gali'),
map = org.polymaps.map(),
layer = po.geoJson(),
force,
nodes;
layer
.features(data.features)
;
map
.center({
lat: 42.35779636641356,
lon: -71.05315709590911
})
.zoom(13)
.container(container)
.add(po.image().url(url))
//.add(po.interact())
.add(layer)
;
force = d3.layout.force()
.nodes(data.features)
.gravity(0)
.charge(0)
.size([w, h])
.start()
;
nodes = d3.select(layer.container())
.selectAll('circle')
.data(data.features)
.call(force.drag)
;
force
.on('tick', function(){
nodes
.attr('transform', function(d, i){
// Offest d.x and d.y with arbitrary values...where's the datum?
return 'translate(' + (3849.77 + d.x) + ', ' + (1334.5 + d.y) + ')';
})
;
})
.stop()
;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment