Skip to content

Instantly share code, notes, and snippets.

@jeremybuis

jeremybuis/README.md

Last active December 21, 2015 14:59
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. jeremybuis revised this gist Aug 23, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    For best viewing experience, please play “Doin’ It Right (feat. Panda Bear)” off the latest Daft Punk album while watching this animation.
    This done with svg http://bl.ocks.org/mbostock/6242308 using this technique http://bl.ocks.org/mbostock/2374239
  2. jeremybuis revised this gist Aug 23, 2013. 4 changed files with 126 additions and 30 deletions.
    0 README → README.md
    View file
    File renamed without changes.
    30 changes: 0 additions & 30 deletions index
    View file
    Original file line number Diff line number Diff line change
    @@ -1,30 +0,0 @@
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <style>
    .graticule {
    fill: none;
    stroke: #777;
    stroke-opacity: .5;
    }

    .boundary {
    fill: none;
    stroke: #fff;
    // stroke-width: .5px;
    }

    .overlay {
    fill: none;
    pointer-events: all;
    }
    </style>
    </head>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>



    </script>
    126 changes: 126 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,126 @@
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <title>FUN</title>
    <style>
    .graticule {
    fill: none;
    stroke: #777;
    stroke-opacity: .5;
    }

    .boundary {
    fill: none;
    stroke: #fff;
    }

    .overlay {
    fill: none;
    pointer-events: all;
    }
    </style>
    </head>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>
    var margin = {top: 0, right: 0, bottom: 0, left: 0};
    var width = 960;
    var height = 500;

    var sf = [-122.417, 37.775],
    ny = [-74.0064, 40.7142],
    hk = [114.1589, 22.2783];

    var scale = (width + 1) / 2 / Math.PI;

    var projection = d3.geo.mercator()
    .translate([0, 0])
    .scale(scale)
    .precision(0.1);

    var graticule = d3.geo.graticule();

    var path = d3.geo.path();

    var zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, 8])
    .on("zoom", zoomed);

    var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
    .attr('class', 'world');

    var features = svg.append('g').attr('class', features);

    projection.translate([width/2, height/2]).scale(scale);
    path.projection(projection);

    features.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .style('stroke-width', 0.5 + 'px')
    .attr("d", path);

    var countries = features.insert('g', '.graticule')
    .attr('class', 'countries');

    var points = features.insert('g', '.graticule')
    .attr('class', 'points');

    d3.json('world.json', function(err, data) {

    countries.selectAll('.country')
    .data(topojson.feature(topojson.presimplify(data), data.objects.countries).features)
    .enter().append('path')
    .attr('class', 'country')
    .attr('d', path)
    .append('title')
    .text(function(d) { return d.properties.name; });

    features.insert("path", ".graticule")
    .datum(topojson.mesh(topojson.presimplify(data), data.objects.countries, function(a, b) { return a !== b; }))
    .attr("class", "boundary")
    .style('stroke-width', 1.0)
    .attr("d", path);

    svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height)
    .call(zoomTo(hk, 4).event)
    .transition()
    // .duration(60 * 1000 / 89 * 2)
    .duration(5000)
    .each(jump);
    });

    function zoomed() {
    features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    features.select('.graticule').style('stroke-width', 0.5 / d3.event.scale + "px");
    features.select('.boundary').style('stroke-width', 1.0 / d3.event.scale + "px");
    }

    function zoomTo(location, scale) {
    var point = projection(location);
    return zoom
    .translate([width / 2 - point[0] * scale, height / 2 - point[1] * scale])
    .scale(scale);
    }

    function jump() {
    var t = d3.select(this);
    (function repeat() {
    t = t.transition()
    .call(zoomTo(ny, 4).event)
    .transition()
    .call(zoomTo(sf, 4).event)
    .each("end", repeat);
    })();
    }


    </script>
    0 world → world.json
    View file
    File renamed without changes.
  3. jeremybuis created this gist Aug 23, 2013.
    1 change: 1 addition & 0 deletions README
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    For best viewing experience, please play “Doin’ It Right (feat. Panda Bear)” off the latest Daft Punk album while watching this animation.
    30 changes: 30 additions & 0 deletions index
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <style>
    .graticule {
    fill: none;
    stroke: #777;
    stroke-opacity: .5;
    }

    .boundary {
    fill: none;
    stroke: #fff;
    // stroke-width: .5px;
    }

    .overlay {
    fill: none;
    pointer-events: all;
    }
    </style>
    </head>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>



    </script>
    1 change: 1 addition & 0 deletions world
    View file
    1 addition, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.