Skip to content

Instantly share code, notes, and snippets.

@jasondavies

jasondavies/README.md

Forked from mbostock/.block
Created September 22, 2012 17:11
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. jasondavies revised this gist Oct 26, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    <style>
    body { padding: 0px 230px; background: #000; }
    </style>
    <script src="https://raw.github.com/jasondavies/d3/projection/d3.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
    <canvas id="canvas" width="540" height="500" style="width: 1080px; height: 1000px"></canvas>
    <script>
  2. jasondavies revised this gist Oct 12, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    <style>
    body { padding: 0px 230px; background: #000; }
    </style>
    <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
    <script src="https://raw.github.com/jasondavies/d3/projection/d3.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
    <canvas id="canvas" width="540" height="500" style="width: 1080px; height: 1000px"></canvas>
    <script>
  3. jasondavies revised this gist Sep 28, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    body { padding: 0px 230px; }
    body { padding: 0px 230px; background: #000; }
    </style>
    <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
  4. jasondavies revised this gist Sep 28, 2012. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,30 +1,30 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    body { padding: 150px 380px; }
    body { padding: 0px 230px; }
    </style>
    <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
    <canvas id="canvas" width="540" height="500"></canvas>
    <canvas id="canvas" width="540" height="500" style="width: 1080px; height: 1000px"></canvas>
    <script>

    var width = 200,
    height = 200;
    var width = 500 / 2,
    height = 500 / 2;

    var projection = d3.geo.stereographic()
    .scale(75)
    .scale(50)
    .translate([width / 2, height / 2]);

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

    var x = d3.scale.linear()
    .domain([180, -180])
    .range([0, width]);
    .range([0, width * 2]);

    var y = d3.scale.linear()
    .domain([90, -90])
    .range([height, 0]);
    .range([height * 2, 0]);

    var image = new Image;
    image.onload = onload;
  5. jasondavies revised this gist Sep 28, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    <style>
    body { padding: 150px 380px; }
    </style>
    <script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
    <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
    <canvas id="canvas" width="540" height="500"></canvas>
    <script>
  6. jasondavies revised this gist Sep 23, 2012. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,8 @@
    image.src = "readme-world.jpeg";

    function onload() {
    var context = document.getElementById("canvas").getContext("2d"),
    var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    sourceWidth = image.width,
    sourceHeight = image.height;
    context.drawImage(image, 0, 0, sourceWidth, sourceHeight);
    @@ -45,8 +46,8 @@
    context.clearRect(0, 0, sourceWidth, sourceHeight);
    refresh();

    d3.select("#canvas").on("mousemove", function() {
    var p = d3.mouse(this);
    d3.select(window).on("mousemove", function() {
    var p = d3.mouse(canvas);
    projection.rotate([x.invert(p[0]), y.invert(p[1])]);
    refresh();
    });
  7. jasondavies revised this gist Sep 23, 2012. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,15 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    body { padding: 150px 380px; }
    </style>
    <script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
    <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
    <canvas id="canvas" width="540" height="500"></canvas>
    <script>

    var width = 200,
    height = 200,
    rotate = [0, 0, 0];
    height = 200;

    var projection = d3.geo.stereographic()
    .scale(75)
    @@ -43,11 +45,9 @@
    context.clearRect(0, 0, sourceWidth, sourceHeight);
    refresh();

    d3.timer(function(elapsed) {
    rotate[0]++;
    rotate[1]++;
    rotate[2]++;
    projection.rotate(rotate);
    d3.select("#canvas").on("mousemove", function() {
    var p = d3.mouse(this);
    projection.rotate([x.invert(p[0]), y.invert(p[1])]);
    refresh();
    });

  8. jasondavies revised this gist Sep 23, 2012. 1 changed file with 12 additions and 16 deletions.
    28 changes: 12 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,16 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    body {
    padding: 100px 280px;
    }

    </style>
    <script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
    <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
    <canvas id="canvas" width="960" height="500"></canvas>
    <canvas id="canvas" width="540" height="500"></canvas>
    <script>

    var width = 400,
    height = 300;
    var width = 200,
    height = 200,
    rotate = [0, 0, 0];

    var projection = d3.geo.stereographic()
    .scale(100)
    .scale(75)
    .translate([width / 2, height / 2]);

    var path = d3.geo.path()
    @@ -44,14 +38,16 @@
    out = context.createImageData(width, height),
    data = out.data,
    interpolate = bilinear(function(x, y, offset) {
    return source[(y * 540 + x) * 4 + offset];
    return source[(y * sourceWidth + x) * 4 + offset];
    });
    context.clearRect(0, 0, 540, 270);
    context.clearRect(0, 0, sourceWidth, sourceHeight);
    refresh();

    d3.select("#canvas").on("mousemove", function() {
    var p = d3.mouse(this);
    projection.origin([x.invert(p[0]), y.invert(p[1])]);
    d3.timer(function(elapsed) {
    rotate[0]++;
    rotate[1]++;
    rotate[2]++;
    projection.rotate(rotate);
    refresh();
    });

  9. jasondavies revised this gist Sep 22, 2012. 3 changed files with 4 additions and 2 deletions.
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,3 @@
    A modified version of Mike Bostock’s [mesmerising stereographic projection example](http://bl.ocks.org/3763057). A NASA [Blue Marble](http://visibleearth.nasa.gov/view.php?id=73776) raster image is reprojected using `d3.geo.stereographic().invert` from the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/master/geo/projection).
    A modified version of Mike Bostock’s mesmerising [stereographic projection example](http://bl.ocks.org/3763057).

    A NASA [Blue Marble](http://visibleearth.nasa.gov/view.php?id=73776) raster image is reprojected using `d3.geo.stereographic().invert` from the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/master/geo/projection).
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -32,7 +32,7 @@

    var image = new Image;
    image.onload = onload;
    image.src = "world.jpeg";
    image.src = "readme-world.jpeg";

    function onload() {
    var context = document.getElementById("canvas").getContext("2d"),
    0 world.jpeg → readme-world.jpeg
    View file
    File renamed without changes
  10. jasondavies revised this gist Sep 22, 2012. 3 changed files with 60 additions and 36 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 modified version of Mike Bostock’s [mesmerising stereographic projection example](http://bl.ocks.org/3763057). A NASA [Blue Marble](http://visibleearth.nasa.gov/view.php?id=73776) raster image is reprojected using `d3.geo.stereographic().invert` from the [geo.projection D3 plugin](https://github.com/d3/d3-plugins/tree/master/geo/projection).
    95 changes: 59 additions & 36 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,27 +2,22 @@
    <meta charset="utf-8">
    <style>

    .land {
    fill: none;
    stroke: #000;
    }

    .boundary {
    fill: none;
    stroke: #aaa;
    body {
    padding: 100px 280px;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
    <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
    <canvas id="canvas" width="960" height="500"></canvas>
    <script>

    var width = 960,
    height = 500;
    var width = 400,
    height = 300;

    var projection = d3.geo.stereographic()
    .scale(300);
    .scale(100)
    .translate([width / 2, height / 2]);

    var path = d3.geo.path()
    .projection(projection);
    @@ -35,32 +30,60 @@
    .domain([90, -90])
    .range([height, 0]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    var image = new Image;
    image.onload = onload;
    image.src = "world.jpeg";

    function onload() {
    var context = document.getElementById("canvas").getContext("2d"),
    sourceWidth = image.width,
    sourceHeight = image.height;
    context.drawImage(image, 0, 0, sourceWidth, sourceHeight);

    svg.on("mousemove", function() {
    var p = d3.mouse(this);
    projection.origin([x.invert(p[0]), y.invert(p[1])]);
    svg.selectAll("path").attr("d", path);
    });
    var source = context.getImageData(0, 0, sourceWidth, sourceHeight).data,
    out = context.createImageData(width, height),
    data = out.data,
    interpolate = bilinear(function(x, y, offset) {
    return source[(y * 540 + x) * 4 + offset];
    });
    context.clearRect(0, 0, 540, 270);
    refresh();

    d3.json("/d/3682676/readme-boundaries.json", function(collection) {
    svg.append("g")
    .attr("class", "boundary")
    .selectAll("path")
    .data(collection.geometries)
    .enter().append("path")
    .attr("d", path);
    });
    d3.select("#canvas").on("mousemove", function() {
    var p = d3.mouse(this);
    projection.origin([x.invert(p[0]), y.invert(p[1])]);
    refresh();
    });

    d3.json("/d/3682676/readme-land.json", function(collection) {
    svg.insert("g", ".boundary")
    .attr("class", "land")
    .selectAll("path")
    .data(collection.geometries)
    .enter().append("path")
    .attr("d", path);
    });
    function refresh() {
    for (var y = 0; y < height; y++) {
    for (var x = 0; x < width; x++) {
    var i = (y * width + x) * 4,
    location = projection.invert([x, y]),
    sx = (180 + location[0]) / 360 * sourceWidth,
    sy = (90 - location[1]) / 180 * sourceHeight;
    data[i++] = interpolate(sx, sy, 0);
    data[i++] = interpolate(sx, sy, 1);
    data[i++] = interpolate(sx, sy, 2);
    data[i++] = 0xff;
    }
    }
    context.putImageData(out, 0, 0);
    }
    }

    function bilinear(f) {
    return function(x, y, o) {
    var x0 = Math.floor(x),
    y0 = Math.floor(y),
    x1 = Math.ceil(x),
    y1 = Math.ceil(y);
    if (x0 === x1 || y0 === y1) return f(x0, y0, o);
    return (f(x0, y0, o) * (x1 - x) * (y1 - y)
    + f(x1, y0, o) * (x - x0) * (y1 - y)
    + f(x0, y1, o) * (x1 - x) * (y - y0)
    + f(x1, y1, o) * (x - x0) * (y - y0)) / ((x1 - x0) * (y1 - y0));
    };
    }

    </script>
    Binary file added world.jpeg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  11. @mbostock mbostock revised this gist Sep 21, 2012. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -28,11 +28,11 @@
    .projection(projection);

    var x = d3.scale.linear()
    .domain([-180, 180])
    .domain([180, -180])
    .range([0, width]);

    var y = d3.scale.linear()
    .domain([-90, 90])
    .domain([90, -90])
    .range([height, 0]);

    var svg = d3.select("body").append("svg")
    @@ -41,7 +41,7 @@

    svg.on("mousemove", function() {
    var p = d3.mouse(this);
    projection.rotate([x.invert(p[0]), y.invert(p[1])]);
    projection.origin([x.invert(p[0]), y.invert(p[1])]);
    svg.selectAll("path").attr("d", path);
    });

  12. @mbostock mbostock created this gist Sep 21, 2012.
    66 changes: 66 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    .land {
    fill: none;
    stroke: #000;
    }

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

    </style>
    <body>
    <script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
    <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
    <script>

    var width = 960,
    height = 500;

    var projection = d3.geo.stereographic()
    .scale(300);

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

    var x = d3.scale.linear()
    .domain([-180, 180])
    .range([0, width]);

    var y = d3.scale.linear()
    .domain([-90, 90])
    .range([height, 0]);

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

    svg.on("mousemove", function() {
    var p = d3.mouse(this);
    projection.rotate([x.invert(p[0]), y.invert(p[1])]);
    svg.selectAll("path").attr("d", path);
    });

    d3.json("/d/3682676/readme-boundaries.json", function(collection) {
    svg.append("g")
    .attr("class", "boundary")
    .selectAll("path")
    .data(collection.geometries)
    .enter().append("path")
    .attr("d", path);
    });

    d3.json("/d/3682676/readme-land.json", function(collection) {
    svg.insert("g", ".boundary")
    .attr("class", "land")
    .selectAll("path")
    .data(collection.geometries)
    .enter().append("path")
    .attr("d", path);
    });

    </script>