Skip to content

Instantly share code, notes, and snippets.

@jeremybuis

jeremybuis/README.md

Last active December 16, 2015 08:39
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. jeremybuis revised this gist Apr 17, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ### A new spinny map for the masses
  2. jeremybuis revised this gist Apr 17, 2013. 1 changed file with 66 additions and 73 deletions.
    139 changes: 66 additions & 73 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -56,7 +56,9 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>
    function map() {

    console.log('drawing like a bauss');

    var width = 800;
    var height = 800;

    @@ -97,9 +99,6 @@

    var projection = projections.orthographic;

    // var circle = d3.geo.circle()
    // .origin(projection.center());

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

    @@ -113,8 +112,6 @@
    }

    d3.json("/jeremybuis/raw/5406962/world-50m.json", function(error, world) {
    // d3.json("http://bl.ocks.org/mbostock/raw/4090846/world-50m.json", function(error, world) {
    // var collection = topojson.object(world, world.objects.subunits).geometries;
    var collection = topojson.feature(world, world.objects.subunits).features;

    feature = svg.selectAll("path")
    @@ -135,85 +132,81 @@
    });
    });

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

    function startAnimation() {
    done = false;
    d3.timer(function() {
    var origin = projection.center();
    var rotation = projection.rotate();
    rotation = [rotation[0] + 0.18, rotation[1] + 0.06];
    projection.rotate(rotation);
    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 = projections[this.value];
    path.projection(projection);
    // projection.mode(this.value).scale(scale[this.value]);
    refresh(750);
    });

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

    function mousedown() {
    stopAnimation();
    function startAnimation() {
    done = false;
    d3.timer(function() {
    var origin = projection.center();
    var rotation = projection.rotate();
    rotation = [rotation[0] + 0.18, rotation[1] + 0.06];
    projection.rotate(rotation);
    refresh();
    return done;
    });
    }

    m0 = [d3.event.pageX, d3.event.pageY];
    o0 = projection.rotate();
    function animationState() {
    return 'animation: '+ (done ? 'off' : 'on');
    }

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

    d3.select("select").on("change", function() {
    stopAnimation();

    projection = projections[this.value];
    path.projection(projection);
    // projection.mode(this.value).scale(scale[this.value]);
    refresh(750);
    });

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

    function mousedown() {
    stopAnimation();

    m0 = [d3.event.pageX, d3.event.pageY];
    o0 = projection.rotate();

    d3.event.preventDefault();
    }
    }

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

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

    function clip(d) {
    return path(d);
    }
    function mouseup() {
    if (m0) {
    mousemove();
    m0 = null;
    }
    }

    function reframe(css) {
    for (var name in css) {
    frameElement.style[name] = css[name] + 'px';
    function refresh(duration) {
    (duration ? feature.transition().duration(duration) : feature).attr("d", clip);
    }
    }

    }
    function clip(d) {
    return path(d);
    }

    map();
    function reframe(css) {
    for (var name in css) {
    frameElement.style[name] = css[name] + 'px';
    }
    }
    </script>

    </body>
  3. jeremybuis renamed this gist Apr 17, 2013. 1 changed file with 5 additions and 14 deletions.
    19 changes: 5 additions & 14 deletions spinny.html → index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,9 @@
    <!doctype html>
    <html class="no-js" lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>title</title>
    <meta name="viewport" content="width=device-width">

    <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"/>
    <meta charset="utf-8">

    <style>
    svg {
    <style>
    svg {
    width: 800px;
    height: 800px;
    pointer-events: all;
    @@ -37,11 +30,9 @@
    }

    .tip { color: #999; }
    </style>
    </style>

    </head>
    <body>

    <div id="container">
    </div>

    @@ -65,7 +56,7 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>
    function map() {
    function map() {
    var width = 800;
    var height = 800;

  4. jeremybuis revised this gist Apr 17, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion spinny.html
    View file
    Original file line number Diff line number Diff line change
    @@ -121,7 +121,7 @@
    frameElement.style.height = '800px';
    }

    d3.json("world-50m.json", function(error, world) {
    d3.json("/jeremybuis/raw/5406962/world-50m.json", function(error, world) {
    // d3.json("http://bl.ocks.org/mbostock/raw/4090846/world-50m.json", function(error, world) {
    // var collection = topojson.object(world, world.objects.subunits).geometries;
    var collection = topojson.feature(world, world.objects.subunits).features;
  5. jeremybuis revised this gist Apr 17, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions spinny.html
    View file
    Original file line number Diff line number Diff line change
    @@ -62,6 +62,8 @@
    </div>
    </div>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>
    function map() {
    var width = 800;
  6. jeremybuis revised this gist Apr 17, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions spinny.html
    View file
    Original file line number Diff line number Diff line change
    @@ -219,6 +219,8 @@
    }

    }

    map();
    </script>

    </body>
  7. jeremybuis revised this gist Apr 17, 2013. 3 changed files with 159 additions and 157 deletions.
    159 changes: 158 additions & 1 deletion spinny.html
    View file
    Original file line number Diff line number Diff line change
    @@ -62,7 +62,164 @@
    </div>
    </div>

    <script src="vis.js"></script>
    <script>
    function map() {
    var width = 800;
    var height = 800;

    var feature, // eventually: all svg paths (countries) of the world
    toggle; // animation on/off control

    var scale = {
    orthographic: 380,
    stereographic: 380,
    gnomonic: 380,
    azimuthalEquidistant: 380 / Math.PI * 2,
    azimuthalEqualArea: 380 / Math.SQRT2
    };

    var clipAngle = {
    orthographic: 90,
    stereographic: 90,
    gnomonic: 80,
    azimuthalEquidistant: 90,
    azimuthalEqualArea: 90
    };

    // var clipAngle = {
    // orthographic: 90,
    // stereographic: 170,
    // gnomonic: 80,
    // azimuthalEquidistant: 180 - 1e-3,
    // azimuthalEqualArea: 180 - 1e-3
    // };

    var projections = {
    orthographic: d3.geo.orthographic().translate([width/2, height/2]).scale(scale.orthographic).clipAngle(clipAngle.orthographic),
    stereographic: d3.geo.stereographic().translate([width/2, height/2]).scale(scale.stereographic).clipAngle(clipAngle.stereographic),
    gnomonic: d3.geo.gnomonic().translate([width/2, height/2]).scale(scale.gnomonic).clipAngle(clipAngle.gnomonic),
    azimuthalEquidistant: d3.geo.azimuthalEquidistant().translate([width/2, height/2]).scale(scale.azimuthalEquidistant).clipAngle(clipAngle.azimuthalEquidistant),
    azimuthalEqualArea: d3.geo.azimuthalEqualArea().translate([width/2, height/2]).scale(scale.azimuthalEqualArea).clipAngle(clipAngle.azimuthalEqualArea)
    };

    var projection = projections.orthographic;

    // var circle = d3.geo.circle()
    // .origin(projection.center());

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

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

    if (frameElement) {
    frameElement.style.height = '800px';
    }

    d3.json("world-50m.json", function(error, world) {
    // d3.json("http://bl.ocks.org/mbostock/raw/4090846/world-50m.json", function(error, world) {
    // var collection = topojson.object(world, world.objects.subunits).geometries;
    var collection = topojson.feature(world, world.objects.subunits).features;

    feature = svg.selectAll("path")
    .data(collection)
    .enter().append("svg:path")
    .attr("d", clip);

    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.center();
    var rotation = projection.rotate();
    rotation = [rotation[0] + 0.18, rotation[1] + 0.06];
    projection.rotate(rotation);
    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 = projections[this.value];
    path.projection(projection);
    // 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.rotate();

    d3.event.preventDefault();
    }

    function mousemove() {
    if (m0) {
    var m1 = [d3.event.pageX, d3.event.pageY],
    // o1 = [-1 * (o0[0] + (m0[0] - m1[0]) / 8), -1 * (o0[1] + (m1[1] - m0[1]) / 8)];
    o1 = [(o0[0] + (m0[0] - m1[0]) / 8), (o0[1] + (m1[1] - m0[1]) / 8)];
    projection.rotate(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(d);
    }

    function reframe(css) {
    for (var name in css) {
    frameElement.style[name] = css[name] + 'px';
    }
    }

    }
    </script>

    </body>
    </html>
    156 changes: 0 additions & 156 deletions vis.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,156 +0,0 @@
    function map() {
    var width = 800;
    var height = 800;

    var feature, // eventually: all svg paths (countries) of the world
    toggle; // animation on/off control

    var scale = {
    orthographic: 380,
    stereographic: 380,
    gnomonic: 380,
    azimuthalEquidistant: 380 / Math.PI * 2,
    azimuthalEqualArea: 380 / Math.SQRT2
    };

    var clipAngle = {
    orthographic: 90,
    stereographic: 90,
    gnomonic: 80,
    azimuthalEquidistant: 90,
    azimuthalEqualArea: 90
    };

    // var clipAngle = {
    // orthographic: 90,
    // stereographic: 170,
    // gnomonic: 80,
    // azimuthalEquidistant: 180 - 1e-3,
    // azimuthalEqualArea: 180 - 1e-3
    // };

    var projections = {
    orthographic: d3.geo.orthographic().translate([width/2, height/2]).scale(scale.orthographic).clipAngle(clipAngle.orthographic),
    stereographic: d3.geo.stereographic().translate([width/2, height/2]).scale(scale.stereographic).clipAngle(clipAngle.stereographic),
    gnomonic: d3.geo.gnomonic().translate([width/2, height/2]).scale(scale.gnomonic).clipAngle(clipAngle.gnomonic),
    azimuthalEquidistant: d3.geo.azimuthalEquidistant().translate([width/2, height/2]).scale(scale.azimuthalEquidistant).clipAngle(clipAngle.azimuthalEquidistant),
    azimuthalEqualArea: d3.geo.azimuthalEqualArea().translate([width/2, height/2]).scale(scale.azimuthalEqualArea).clipAngle(clipAngle.azimuthalEqualArea)
    };

    var projection = projections.orthographic;

    // var circle = d3.geo.circle()
    // .origin(projection.center());

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

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

    if (frameElement) {
    frameElement.style.height = '800px';
    }

    d3.json("world-50m.json", function(error, world) {
    // d3.json("http://bl.ocks.org/mbostock/raw/4090846/world-50m.json", function(error, world) {
    // var collection = topojson.object(world, world.objects.subunits).geometries;
    var collection = topojson.feature(world, world.objects.subunits).features;

    feature = svg.selectAll("path")
    .data(collection)
    .enter().append("svg:path")
    .attr("d", clip);

    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.center();
    var rotation = projection.rotate();
    rotation = [rotation[0] + 0.18, rotation[1] + 0.06];
    projection.rotate(rotation);
    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 = projections[this.value];
    path.projection(projection);
    // 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.rotate();

    d3.event.preventDefault();
    }

    function mousemove() {
    if (m0) {
    var m1 = [d3.event.pageX, d3.event.pageY],
    // o1 = [-1 * (o0[0] + (m0[0] - m1[0]) / 8), -1 * (o0[1] + (m1[1] - m0[1]) / 8)];
    o1 = [(o0[0] + (m0[0] - m1[0]) / 8), (o0[1] + (m1[1] - m0[1]) / 8)];
    projection.rotate(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(d);
    }

    function reframe(css) {
    for (var name in css) {
    frameElement.style[name] = css[name] + 'px';
    }
    }

    }
    1 change: 1 addition & 0 deletions world-50m.json
    View file
    1 addition, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  8. jeremybuis revised this gist Apr 17, 2013. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions spinny.html
    View file
    Original file line number Diff line number Diff line change
    @@ -61,5 +61,8 @@
    </div>
    </div>
    </div>

    <script src="vis.js"></script>

    </body>
    </html>
  9. jeremybuis created this gist Apr 17, 2013.
    65 changes: 65 additions & 0 deletions spinny.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    <!doctype html>
    <html class="no-js" lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>title</title>
    <meta name="viewport" content="width=device-width">

    <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>
    svg {
    width: 800px;
    height: 800px;
    pointer-events: all;
    }

    circle {
    fill: #dbe4f0;
    }

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

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

    #header div {
    font-size: 12px;
    }

    .tip { color: #999; }
    </style>

    </head>
    <body>

    <div id="container">
    </div>

    <div id="body">
    <div id="header">
    d3.geo.azimuthal
    <div><label for="proj">Projection: </label><select id="proj">
    <option value="azimuthalEqualArea">azimuthalEqualArea</option>
    <option value="azimuthalEquidistant">azimuthalEquidistant </option>
    <option value="gnomonic">gnomonic</option>
    <option value="orthographic" selected>orthographic</option>
    <option value="stereographic">stereographic</option>
    </select></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>
    </body>
    </html>
    156 changes: 156 additions & 0 deletions vis.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,156 @@
    function map() {
    var width = 800;
    var height = 800;

    var feature, // eventually: all svg paths (countries) of the world
    toggle; // animation on/off control

    var scale = {
    orthographic: 380,
    stereographic: 380,
    gnomonic: 380,
    azimuthalEquidistant: 380 / Math.PI * 2,
    azimuthalEqualArea: 380 / Math.SQRT2
    };

    var clipAngle = {
    orthographic: 90,
    stereographic: 90,
    gnomonic: 80,
    azimuthalEquidistant: 90,
    azimuthalEqualArea: 90
    };

    // var clipAngle = {
    // orthographic: 90,
    // stereographic: 170,
    // gnomonic: 80,
    // azimuthalEquidistant: 180 - 1e-3,
    // azimuthalEqualArea: 180 - 1e-3
    // };

    var projections = {
    orthographic: d3.geo.orthographic().translate([width/2, height/2]).scale(scale.orthographic).clipAngle(clipAngle.orthographic),
    stereographic: d3.geo.stereographic().translate([width/2, height/2]).scale(scale.stereographic).clipAngle(clipAngle.stereographic),
    gnomonic: d3.geo.gnomonic().translate([width/2, height/2]).scale(scale.gnomonic).clipAngle(clipAngle.gnomonic),
    azimuthalEquidistant: d3.geo.azimuthalEquidistant().translate([width/2, height/2]).scale(scale.azimuthalEquidistant).clipAngle(clipAngle.azimuthalEquidistant),
    azimuthalEqualArea: d3.geo.azimuthalEqualArea().translate([width/2, height/2]).scale(scale.azimuthalEqualArea).clipAngle(clipAngle.azimuthalEqualArea)
    };

    var projection = projections.orthographic;

    // var circle = d3.geo.circle()
    // .origin(projection.center());

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

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

    if (frameElement) {
    frameElement.style.height = '800px';
    }

    d3.json("world-50m.json", function(error, world) {
    // d3.json("http://bl.ocks.org/mbostock/raw/4090846/world-50m.json", function(error, world) {
    // var collection = topojson.object(world, world.objects.subunits).geometries;
    var collection = topojson.feature(world, world.objects.subunits).features;

    feature = svg.selectAll("path")
    .data(collection)
    .enter().append("svg:path")
    .attr("d", clip);

    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.center();
    var rotation = projection.rotate();
    rotation = [rotation[0] + 0.18, rotation[1] + 0.06];
    projection.rotate(rotation);
    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 = projections[this.value];
    path.projection(projection);
    // 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.rotate();

    d3.event.preventDefault();
    }

    function mousemove() {
    if (m0) {
    var m1 = [d3.event.pageX, d3.event.pageY],
    // o1 = [-1 * (o0[0] + (m0[0] - m1[0]) / 8), -1 * (o0[1] + (m1[1] - m0[1]) / 8)];
    o1 = [(o0[0] + (m0[0] - m1[0]) / 8), (o0[1] + (m1[1] - m0[1]) / 8)];
    projection.rotate(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(d);
    }

    function reframe(css) {
    for (var name in css) {
    frameElement.style[name] = css[name] + 'px';
    }
    }

    }