Skip to content

Instantly share code, notes, and snippets.

@christophercliff

christophercliff/index.html

Created August 24, 2011 02:51
Download ZIP

Revisions

  1. christophercliff created this gist Aug 24, 2011.
    85 changes: 85 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,85 @@
    <!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>