Skip to content

Instantly share code, notes, and snippets.

@johan

johan/index.html

Forked from johan/dnd.js
Created November 25, 2011 00:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save johan/1392560 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save johan/1392560 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. johan revised this gist Nov 25, 2011. 2 changed files with 37 additions and 2 deletions.
    7 changes: 6 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -34,6 +34,8 @@
    #header div {
    font-size: 12px;
    }

    .tip { color: #999; }
    </style>
    </head>
    <body>
    @@ -47,7 +49,10 @@
    <option value="orthographic" selected>orthographic</option>
    <option value="stereographic">stereographic</option>
    </select></div>
    <div class="hint">drag to rotate the origin</div>
    <div class="tip">drag to rotate the origin</div>
    <div><label for="animate">animate:</label>
    <input id="animate" type="checkbox" checked>
    </div>
    </div>
    </div>
    <script src="vis.js"></script>
    32 changes: 31 additions & 1 deletion vis.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    var feature;
    var feature // eventually: all svg paths (countries) of the world
    , toggle; // animation on/off control

    var projection = d3.geo.azimuthal()
    .scale(380)
    @@ -36,22 +37,51 @@ d3.json("world-countries.json", function(collection) {

    feature.append("svg:title")
    .text(function(d) { return d.properties.name; });

    startAnimation();
    d3.select('#animate').on('click', function () {
    if (done) startAnimation(); else stopAnimation();
    });
    });

    function stopAnimation() {
    done = true;
    d3.select('#animate').node().checked = false;
    }

    function startAnimation() {
    done = false;
    d3.timer(function() {
    var origin = projection.origin();
    origin = [origin[0] + .18, origin[1] + .06];
    projection.origin(origin);
    circle.origin(origin);
    refresh();
    return done;
    });
    }

    function animationState() {
    return 'animation: '+ (done ? 'off' : 'on');
    }

    d3.select(window)
    .on("mousemove", mousemove)
    .on("mouseup", mouseup);

    d3.select("select").on("change", function() {
    stopAnimation();
    projection.mode(this.value).scale(scale[this.value]);
    refresh(750);
    });

    var m0
    , o0
    , done
    ;

    function mousedown() {
    stopAnimation();
    m0 = [d3.event.pageX, d3.event.pageY];
    o0 = projection.origin();
    d3.event.preventDefault();
  2. johan revised this gist Nov 24, 2011. 1 changed file with 5 additions and 2 deletions.
    7 changes: 5 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,20 +31,23 @@
    width: auto;
    }

    #header div {
    font-size: 12px;
    }
    </style>
    </head>
    <body>
    <div id="body">
    <div id="header">
    d3.geo.azimuthal
    <div class="hint">drag to rotate the origin</div>
    <div><select>
    <div><label for="proj">Projection: </label><select id="proj">
    <option value="equalarea">equalarea</option>
    <option value="equidistant">equidistant</option>
    <option value="gnomonic">gnomonic</option>
    <option value="orthographic" selected>orthographic</option>
    <option value="stereographic">stereographic</option>
    </select></div>
    <div class="hint">drag to rotate the origin</div>
    </div>
    </div>
    <script src="vis.js"></script>
  3. johan revised this gist Nov 24, 2011. 2 changed files with 13 additions and 5 deletions.
    12 changes: 10 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,14 +2,15 @@
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>d3.js Spinny Globe from Mike Bostock's SVG Open 2011 keynote</title>
    <script src="http://mbostock.github.com/d3/d3.js"></script>
    <script src="http://mbostock.github.com/d3/d3.geo.js"></script>
    <link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/style.css"/>
    <link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/colorbrewer/colorbrewer.css"/>
    <style type="text/css">

    svg {
    width: 1280px;
    width: 800px;
    height: 800px;
    pointer-events: all;
    }
    @@ -23,11 +24,18 @@
    stroke: #fff;
    }

    #header {
    top: 7px;
    left: 685px;
    text-align: right;
    width: auto;
    }

    </style>
    </head>
    <body>
    <div id="body">
    <div id="footer">
    <div id="header">
    d3.geo.azimuthal
    <div class="hint">drag to rotate the origin</div>
    <div><select>
    6 changes: 3 additions & 3 deletions vis.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ var projection = d3.geo.azimuthal()
    .scale(380)
    .origin([-71.03,42.37])
    .mode("orthographic")
    .translate([640, 400]);
    .translate([400, 400]);

    var circle = d3.geo.greatCircle()
    .origin(projection.origin());
    @@ -22,11 +22,11 @@ var path = d3.geo.path()
    .projection(projection);

    var svg = d3.select("#body").append("svg:svg")
    .attr("width", 1280)
    .attr("width", 800)
    .attr("height", 800)
    .on("mousedown", mousedown);

    if (frameElement) restyle({ width: 1280, height: 800, marginLeft: -160 });
    if (frameElement) frameElement.style.height = '800px';

    d3.json("world-countries.json", function(collection) {
    feature = svg.selectAll("path")
  4. johan revised this gist Nov 24, 2011. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions vis.js
    View file
    Original file line number Diff line number Diff line change
    @@ -26,6 +26,8 @@ var svg = d3.select("#body").append("svg:svg")
    .attr("height", 800)
    .on("mousedown", mousedown);

    if (frameElement) restyle({ width: 1280, height: 800, marginLeft: -160 });

    d3.json("world-countries.json", function(collection) {
    feature = svg.selectAll("path")
    .data(collection.features)
    @@ -79,3 +81,8 @@ function refresh(duration) {
    function clip(d) {
    return path(circle.clip(d));
    }

    function reframe(css) {
    for (var name in css)
    frameElement.style[name] = css[name] + 'px';
    }
  5. johan created this gist Nov 24, 2011.
    44 changes: 44 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script src="http://mbostock.github.com/d3/d3.js"></script>
    <script src="http://mbostock.github.com/d3/d3.geo.js"></script>
    <link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/style.css"/>
    <link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/colorbrewer/colorbrewer.css"/>
    <style type="text/css">

    svg {
    width: 1280px;
    height: 800px;
    pointer-events: all;
    }

    circle {
    fill: #dbe4f0;
    }

    path {
    fill: #aaa;
    stroke: #fff;
    }

    </style>
    </head>
    <body>
    <div id="body">
    <div id="footer">
    d3.geo.azimuthal
    <div class="hint">drag to rotate the origin</div>
    <div><select>
    <option value="equalarea">equalarea</option>
    <option value="equidistant">equidistant</option>
    <option value="gnomonic">gnomonic</option>
    <option value="orthographic" selected>orthographic</option>
    <option value="stereographic">stereographic</option>
    </select></div>
    </div>
    </div>
    <script src="vis.js"></script>
    </body>
    </html>
    81 changes: 81 additions & 0 deletions vis.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,81 @@
    var feature;

    var projection = d3.geo.azimuthal()
    .scale(380)
    .origin([-71.03,42.37])
    .mode("orthographic")
    .translate([640, 400]);

    var circle = d3.geo.greatCircle()
    .origin(projection.origin());

    // TODO fix d3.geo.azimuthal to be consistent with scale
    var scale =
    { orthographic: 380
    , stereographic: 380
    , gnomonic: 380
    , equidistant: 380 / Math.PI * 2
    , equalarea: 380 / Math.SQRT2
    };

    var path = d3.geo.path()
    .projection(projection);

    var svg = d3.select("#body").append("svg:svg")
    .attr("width", 1280)
    .attr("height", 800)
    .on("mousedown", mousedown);

    d3.json("world-countries.json", function(collection) {
    feature = svg.selectAll("path")
    .data(collection.features)
    .enter().append("svg:path")
    .attr("d", clip);

    feature.append("svg:title")
    .text(function(d) { return d.properties.name; });
    });

    d3.select(window)
    .on("mousemove", mousemove)
    .on("mouseup", mouseup);

    d3.select("select").on("change", function() {
    projection.mode(this.value).scale(scale[this.value]);
    refresh(750);
    });

    var m0
    , o0
    ;

    function mousedown() {
    m0 = [d3.event.pageX, d3.event.pageY];
    o0 = projection.origin();
    d3.event.preventDefault();
    }

    function mousemove() {
    if (m0) {
    var m1 = [d3.event.pageX, d3.event.pageY]
    , o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8];
    projection.origin(o1);
    circle.origin(o1);
    refresh();
    }
    }

    function mouseup() {
    if (m0) {
    mousemove();
    m0 = null;
    }
    }

    function refresh(duration) {
    (duration ? feature.transition().duration(duration) : feature).attr("d", clip);
    }

    function clip(d) {
    return path(circle.clip(d));
    }
    179 changes: 179 additions & 0 deletions world-countries.json
    View file
    179 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.