Skip to content

Instantly share code, notes, and snippets.

@btipling

btipling/README.md

Forked from jasondavies/README.md
Created December 24, 2012 06:46
Show Gist options
  • Save btipling/4368114 to your computer and use it in GitHub Desktop.
Save btipling/4368114 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @jasondavies 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
    @@ -54,7 +54,7 @@

    </style>
    <select id="projection-menu"></select>
    <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>
    <script>

  2. @jasondavies 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
    @@ -55,7 +55,7 @@
    </style>
    <select id="projection-menu"></select>
    <script src="https://raw.github.com/jasondavies/d3/projection/d3.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/projection/geo/projection/projection.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
    <script>

    var width = 960,
  3. @jasondavies 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
    @@ -63,7 +63,7 @@

    var options = [
    {name: "Aitoff", projection: d3.geo.aitoff()},
    {name: "Albers", projection: d3.geo.albers().scale(145).parallels([20, 50]).origin([0, 0]).translate([width * .500, height * .750])},
    {name: "Albers", projection: d3.geo.albers().scale(145).parallels([20, 50]).center([0, 0]).translate([width * .500, height * .750])},
    {name: "Bonne", projection: d3.geo.bonne().scale(120).translate([width * .500, height * .425])},
    {name: "Collignon", projection: d3.geo.collignon().scale(93)},
    {name: "Eckert I", projection: d3.geo.eckert1().scale(165)},
  4. @jasondavies jasondavies revised this gist Oct 12, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -54,7 +54,7 @@

    </style>
    <select id="projection-menu"></select>
    <script src="https://raw.github.com/mbostock/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/projection/geo/projection/projection.js"></script>
    <script>

    @@ -194,7 +194,7 @@
    svg.selectAll(".geometry, .graticule").attr("d", path);
    });

    d3.json("readme.json", function(geometry) {
    d3.json("readme.json", function(err, geometry) {
    var feature = svg.insert("path", ".foreground,.graticule")
    .attr("class", "geometry")
    .datum(geometry);
  5. @jasondavies jasondavies revised this gist Sep 26, 2012. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,12 +22,14 @@

    .background {
    fill: none;
    display: none;
    }

    .foreground {
    fill: none;
    stroke: #333;
    stroke-width: 1.5px;
    display: none;
    }

    .graticule {
    @@ -162,7 +164,7 @@

    function update(option) {
    projection.precision(Infinity);
    svg.selectAll("path").attr("d", path);
    svg.selectAll(".geometry, .graticule").attr("d", path);
    path.projection(projection = option.projection);
    projection.rotate(rotate).precision(Infinity);
    transitioning = true;
  6. @jasondavies jasondavies revised this gist Sep 26, 2012. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -104,8 +104,7 @@
    var path = d3.geo.path()
    .projection(projection);

    var graticule = d3.geo.graticule()
    .extent([[-180, -90], [180, 90]]);
    var graticule = d3.geo.graticule();

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    @@ -162,16 +161,16 @@
    }

    function update(option) {
    projection.precision(Infinity);
    svg.selectAll("path").attr("d", path);
    path.projection(projection = option.projection);
    projection.rotate(rotate).precision(Infinity);
    svg.selectAll("path").attr("d", path);
    transitioning = true;
    initial = rotate.slice();
    svg.selectAll(".geometry, .graticule").transition()
    .duration(750)
    .attr("d", path)
    .each("end", function() {
    projection.precision(10);
    transitioning = false;
    t0 = Date.now();
    });
    @@ -180,6 +179,8 @@
    svg.selectAll(".background, .foreground").transition()
    .duration(750)
    .attr("d", path);
    d3.timer.flush();
    projection.precision(10);
    }

    d3.timer(function() {
  7. @jasondavies jasondavies revised this gist Sep 26, 2012. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -163,9 +163,8 @@

    function update(option) {
    path.projection(projection = option.projection);
    projection.precision(Infinity);
    svg.selectAll(".geometry, .graticule").attr("d", path);
    projection.rotate(rotate);
    projection.rotate(rotate).precision(Infinity);
    svg.selectAll("path").attr("d", path);
    transitioning = true;
    initial = rotate.slice();
    svg.selectAll(".geometry, .graticule").transition()
  8. @jasondavies jasondavies revised this gist Sep 26, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -163,8 +163,9 @@

    function update(option) {
    path.projection(projection = option.projection);
    projection.rotate(rotate).precision(Infinity);
    projection.precision(Infinity);
    svg.selectAll(".geometry, .graticule").attr("d", path);
    projection.rotate(rotate);
    transitioning = true;
    initial = rotate.slice();
    svg.selectAll(".geometry, .graticule").transition()
  9. @jasondavies jasondavies revised this gist Sep 26, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -164,6 +164,7 @@
    function update(option) {
    path.projection(projection = option.projection);
    projection.rotate(rotate).precision(Infinity);
    svg.selectAll(".geometry, .graticule").attr("d", path);
    transitioning = true;
    initial = rotate.slice();
    svg.selectAll(".geometry, .graticule").transition()
  10. @jasondavies jasondavies revised this gist Sep 26, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -163,13 +163,14 @@

    function update(option) {
    path.projection(projection = option.projection);
    projection.rotate(rotate);
    projection.rotate(rotate).precision(Infinity);
    transitioning = true;
    initial = rotate.slice();
    svg.selectAll(".geometry, .graticule").transition()
    .duration(750)
    .attr("d", path)
    .each("end", function() {
    projection.precision(10);
    transitioning = false;
    t0 = Date.now();
    });
  11. @jasondavies jasondavies revised this gist Sep 26, 2012. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -52,8 +52,8 @@

    </style>
    <select id="projection-menu"></select>
    <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/clip/geo/projection/projection.js"></script>
    <script src="https://raw.github.com/mbostock/d3/projection/d3.v2.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/projection/geo/projection/projection.js"></script>
    <script>

    var width = 960,
    @@ -105,7 +105,6 @@
    .projection(projection);

    var graticule = d3.geo.graticule()
    .precision([1, 1])
    .extent([[-180, -90], [180, 90]]);

    var svg = d3.select("body").append("svg")
  12. @jasondavies jasondavies revised this gist Sep 26, 2012. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -52,8 +52,8 @@

    </style>
    <select id="projection-menu"></select>
    <script src="https://raw.github.com/mbostock/d3/projection/d3.v2.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/projection/geo/projection/projection.js"></script>
    <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/clip/geo/projection/projection.js"></script>
    <script>

    var width = 960,
    @@ -105,6 +105,7 @@
    .projection(projection);

    var graticule = d3.geo.graticule()
    .precision([1, 1])
    .extent([[-180, -90], [180, 90]]);

    var svg = d3.select("body").append("svg")
  13. @jasondavies jasondavies revised this gist Sep 26, 2012. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -52,8 +52,8 @@

    </style>
    <select id="projection-menu"></select>
    <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/clip/geo/projection/projection.js"></script>
    <script src="https://raw.github.com/mbostock/d3/projection/d3.v2.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/projection/geo/projection/projection.js"></script>
    <script>

    var width = 960,
    @@ -105,7 +105,6 @@
    .projection(projection);

    var graticule = d3.geo.graticule()
    .precision([1, 1])
    .extent([[-180, -90], [180, 90]]);

    var svg = d3.select("body").append("svg")
  14. @jasondavies jasondavies revised this gist Sep 26, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Testing the new antemeridian cutting in the [d3.geo.projection](https://github.com/d3/d3-plugins/tree/master/geo/projection) plugin.
    Testing the new antemeridian cutting in the [d3.geo.projection](https://github.com/d3/d3-plugins/tree/clip/geo/projection) plugin.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -53,7 +53,7 @@
    </style>
    <select id="projection-menu"></select>
    <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>
    <script src="https://raw.github.com/d3/d3-plugins/clip/geo/projection/projection.js"></script>
    <script>

    var width = 960,
  15. @jasondavies jasondavies revised this gist Sep 26, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Testing the new antemeridian cutting in the [d3.geo.projection](https://github.com/d3/d3-plugins/tree/clip/geo/projection) plugin.
    Testing the new antemeridian cutting in the [d3.geo.projection](https://github.com/d3/d3-plugins/tree/master/geo/projection) plugin.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -53,7 +53,7 @@
    </style>
    <select id="projection-menu"></select>
    <script src="https://raw.github.com/jasondavies/d3/projection/d3.v2.min.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/clip/geo/projection/projection.js"></script>
    <script src="https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js"></script>
    <script>

    var width = 960,
  16. @jasondavies jasondavies revised this gist Sep 25, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -52,7 +52,7 @@

    </style>
    <select id="projection-menu"></select>
    <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/clip/geo/projection/projection.js"></script>
    <script>

    @@ -101,7 +101,7 @@
    var projection = options[i].projection
    .translate([width / 2 - .5, height / 2 - .5]);

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

    var graticule = d3.geo.graticule()
  17. @jasondavies jasondavies revised this gist Sep 25, 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
    @@ -70,7 +70,7 @@
    {name: "Eckert IV", projection: d3.geo.eckert4().scale(180)},
    {name: "Eckert V", projection: d3.geo.eckert5().scale(170)},
    {name: "Eckert VI", projection: d3.geo.eckert6().scale(170)},
    {name: "Equirectangular (Plate Carrée)", projection: d3.geo.equirectangular().scale(950)},
    {name: "Equirectangular (Plate Carrée)", projection: d3.geo.equirectangular()},
    {name: "Hammer", projection: d3.geo.hammer().scale(165)},
    {name: "Goode Homolosine", projection: d3.geo.homolosine()},
    {name: "Kavrayskiy VII", projection: d3.geo.kavrayskiy7()},
  18. @jasondavies jasondavies revised this gist Sep 25, 2012. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -104,7 +104,9 @@
    var path = d3.geo.projection.path()
    .projection(projection);

    var graticule = d3.geo.graticule().extent([[-180, -90], [180, 90]]);
    var graticule = d3.geo.graticule()
    .precision([1, 1])
    .extent([[-180, -90], [180, 90]]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
  19. @jasondavies jasondavies revised this gist Sep 25, 2012. 1 changed file with 17 additions and 3 deletions.
    20 changes: 17 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -104,12 +104,25 @@
    var path = d3.geo.projection.path()
    .projection(projection);

    // TODO graticule points at ±90° don't work too well.
    var graticule = d3.geo.graticule().extent([[-180, -90 + 1], [180, 90 - 1]]);
    var graticule = d3.geo.graticule().extent([[-180, -90], [180, 90]]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    .attr("height", height)
    .call(d3.behavior.drag()
    .origin(function() { return {x: rotate[0], y: -rotate[1]}; })
    .on("dragstart", function() { transitioning = true; })
    .on("drag", function(d) {
    rotate[0] = d3.event.x;
    rotate[1] = -d3.event.y;
    projection.rotate(rotate);
    svg.selectAll(".geometry, .graticule").attr("d", path);
    })
    .on("dragend", function() {
    transitioning = false;
    t0 = Date.now();
    initial = rotate.slice();
    }));

    svg.append("path")
    .datum(graticule.outline)
    @@ -136,6 +149,7 @@
    .text(function(d) { return d.name; });

    function loop() {
    if (transitioning) return;
    var j = Math.floor(Math.random() * n);
    menu.property("selectedIndex", i = j + (j >= i));
    update(options[i]);
  20. @jasondavies jasondavies revised this gist Sep 24, 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
    @@ -94,7 +94,7 @@
    velocity = [.010, -.002],
    t0 = Date.now();

    var interval = setInterval(loop, 2500),
    var interval = setInterval(loop, 5000),
    i = 0,
    n = options.length - 1;

  21. @jasondavies jasondavies revised this gist Sep 24, 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
    @@ -94,7 +94,7 @@
    velocity = [.010, -.002],
    t0 = Date.now();

    var interval = setInterval(loop, 1500),
    var interval = setInterval(loop, 2500),
    i = 0,
    n = options.length - 1;

  22. @jasondavies jasondavies revised this gist Sep 24, 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
    @@ -151,7 +151,7 @@
    projection.rotate(rotate);
    transitioning = true;
    initial = rotate.slice();
    svg.selectAll(".land path, .boundary path, .graticule").transition()
    svg.selectAll(".geometry, .graticule").transition()
    .duration(750)
    .attr("d", path)
    .each("end", function() {
  23. @jasondavies jasondavies revised this gist Sep 24, 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
    @@ -171,7 +171,7 @@
    rotate[0] = initial[0] + velocity[0] * t;
    rotate[1] = initial[1] + velocity[1] * t;
    projection.rotate(rotate);
    svg.selectAll(".land path, .boundary path, .graticule").attr("d", path);
    svg.selectAll(".geometry, .graticule").attr("d", path);
    });

    d3.json("readme.json", function(geometry) {
  24. @jasondavies jasondavies revised this gist Sep 24, 2012. 1 changed file with 101 additions and 16 deletions.
    117 changes: 101 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,18 @@
    <meta charset="utf-8">
    <style>

    body {
    height: 500px;
    position: relative;
    width: 960px;
    }

    #projection-menu {
    position: absolute;
    right: 10px;
    top: 10px;
    }

    path {
    fill: none;
    stroke: #000;
    @@ -39,28 +51,62 @@
    }

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

    var width = 960,
    height = 500;

    var origin = [-71, 42],
    var options = [
    {name: "Aitoff", projection: d3.geo.aitoff()},
    {name: "Albers", projection: d3.geo.albers().scale(145).parallels([20, 50]).origin([0, 0]).translate([width * .500, height * .750])},
    {name: "Bonne", projection: d3.geo.bonne().scale(120).translate([width * .500, height * .425])},
    {name: "Collignon", projection: d3.geo.collignon().scale(93)},
    {name: "Eckert I", projection: d3.geo.eckert1().scale(165)},
    {name: "Eckert II", projection: d3.geo.eckert2().scale(165)},
    {name: "Eckert III", projection: d3.geo.eckert3().scale(180)},
    {name: "Eckert IV", projection: d3.geo.eckert4().scale(180)},
    {name: "Eckert V", projection: d3.geo.eckert5().scale(170)},
    {name: "Eckert VI", projection: d3.geo.eckert6().scale(170)},
    {name: "Equirectangular (Plate Carrée)", projection: d3.geo.equirectangular().scale(950)},
    {name: "Hammer", projection: d3.geo.hammer().scale(165)},
    {name: "Goode Homolosine", projection: d3.geo.homolosine()},
    {name: "Kavrayskiy VII", projection: d3.geo.kavrayskiy7()},
    {name: "Lambert cylindrical equal-area", projection: d3.geo.cylindricalEqualArea()},
    {name: "Larrivée", projection: d3.geo.larrivee().scale(95)},
    {name: "Mercator", projection: d3.geo.mercator().scale(490)},
    {name: "Miller", projection: d3.geo.miller().scale(100)},
    {name: "Mollweide", projection: d3.geo.mollweide().scale(165)},
    {name: "Nell–Hammer", projection: d3.geo.nellHammer()},
    {name: "Polyconic", projection: d3.geo.polyconic().scale(100)},
    {name: "Robinson", projection: d3.geo.robinson()},
    {name: "Sinusoidal", projection: d3.geo.sinusoidal()},
    {name: "van der Grinten", projection: d3.geo.vanDerGrinten().scale(75)},
    {name: "Wagner VI", projection: d3.geo.wagner6()},
    {name: "Winkel Tripel", projection: d3.geo.winkel3()}
    ];

    var initial = [-71, 42, 0],
    rotate = initial.slice(),
    transitioning = false,
    velocity = [.010, -.002],
    t0 = Date.now();

    var projection = d3.geo.homolosine()
    .scale(150)
    .translate([width / 2, height / 2]);
    var interval = setInterval(loop, 1500),
    i = 0,
    n = options.length - 1;

    // TODO graticule points at ±90° don't work too well.
    var graticule = d3.geo.graticule().extent([[-180, -90 + 1], [180, 90 - 1]]);
    var projection = options[i].projection
    .translate([width / 2 - .5, height / 2 - .5]);

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

    // TODO graticule points at ±90° don't work too well.
    var graticule = d3.geo.graticule().extent([[-180, -90 + 1], [180, 90 - 1]]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    @@ -81,18 +127,57 @@
    .attr("class", "foreground")
    .attr("d", path);

    var menu = d3.select("#projection-menu")
    .on("change", change);

    menu.selectAll("option")
    .data(options)
    .enter().append("option")
    .text(function(d) { return d.name; });

    function loop() {
    var j = Math.floor(Math.random() * n);
    menu.property("selectedIndex", i = j + (j >= i));
    update(options[i]);
    }

    function change() {
    clearInterval(interval);
    update(options[this.selectedIndex]);
    }

    function update(option) {
    path.projection(projection = option.projection);
    projection.rotate(rotate);
    transitioning = true;
    initial = rotate.slice();
    svg.selectAll(".land path, .boundary path, .graticule").transition()
    .duration(750)
    .attr("d", path)
    .each("end", function() {
    transitioning = false;
    t0 = Date.now();
    });
    d3.timer.flush();
    projection.rotate([0, 0, 0]);
    svg.selectAll(".background, .foreground").transition()
    .duration(750)
    .attr("d", path);
    }

    d3.timer(function() {
    if (transitioning) return;
    var t = Date.now() - t0;
    rotate[0] = initial[0] + velocity[0] * t;
    rotate[1] = initial[1] + velocity[1] * t;
    projection.rotate(rotate);
    svg.selectAll(".land path, .boundary path, .graticule").attr("d", path);
    });

    d3.json("readme.json", function(geometry) {
    var feature = svg.insert("path", ".foreground,.graticule")
    .attr("class", "geometry")
    .datum(geometry)
    .attr("d", path);

    d3.timer(function() {
    var t = Date.now() - t0,
    o = [origin[0] + velocity[0] * t, origin[1] + velocity[1] * t, 0];
    projection.rotate(o);
    svg.selectAll("path.geometry,path.graticule").attr("d", path);
    });
    .datum(geometry);
    });

    </script>
  25. @jasondavies jasondavies revised this gist Sep 24, 2012. 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 @@
    Testing the new antemeridian cutting in [d3.geo.projection](https://github.com/d3/d3-plugins/tree/clip/geo/projection) plugin.
    Testing the new antemeridian cutting in the [d3.geo.projection](https://github.com/d3/d3-plugins/tree/clip/geo/projection) plugin.
  26. @jasondavies jasondavies revised this gist Sep 24, 2012. 3 changed files with 337 additions and 27 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Testing Jason Davies new [d3.geo.clip](https://github.com/d3/d3-plugins/tree/clip/geo/clip) plugin.
    Testing the new antemeridian cutting in [d3.geo.projection](https://github.com/d3/d3-plugins/tree/clip/geo/projection) plugin.
    88 changes: 62 additions & 26 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,61 +2,97 @@
    <meta charset="utf-8">
    <style>

    circle {
    path {
    fill: none;
    stroke: #000;
    stroke-width: 2px;
    stroke-width: 1px;
    }

    .background {
    fill: none;
    }

    .foreground {
    fill: none;
    stroke: #333;
    stroke-width: 1.5px;
    }

    .graticule {
    fill: none;
    stroke: #333;
    stroke-width: .5px;
    }

    .graticule:nth-child(2n) {
    stroke-dasharray: 2,2;
    }

    .land {
    fill: #d7c7ad;
    stroke: #766951;
    }

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

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

    var width = 960,
    height = 500,
    radius = 240;
    height = 500;

    var origin = [-71, 42],
    velocity = [.010, -.002],
    t0 = Date.now();

    var projection = d3.geo.azimuthal()
    .mode("orthographic")
    .scale(radius)
    var projection = d3.geo.homolosine()
    .scale(150)
    .translate([width / 2, height / 2]);

    var clip = d3.geo.clip();
    // TODO graticule points at ±90° don't work too well.
    var graticule = d3.geo.graticule().extent([[-180, -90 + 1], [180, 90 - 1]]);

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

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

    svg.append("circle")
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .attr("r", radius);
    svg.append("path")
    .datum(graticule.outline)
    .attr("class", "background")
    .attr("d", path);

    svg.selectAll(".graticule")
    .data(graticule.lines)
    .enter().append("path")
    .attr("class", "graticule")
    .attr("d", path);

    d3.json("/d/3682676/readme-land.json", function(geometry) {
    var feature = svg.append("path")
    svg.append("path")
    .datum(graticule.outline)
    .attr("class", "foreground")
    .attr("d", path);

    d3.json("readme.json", function(geometry) {
    var feature = svg.insert("path", ".foreground,.graticule")
    .attr("class", "geometry")
    .datum(geometry)
    .attr("d", draw);
    .attr("d", path);

    d3.timer(function() {
    var t = Date.now() - t0,
    o = [origin[0] + velocity[0] * t, origin[1] + velocity[1] * t];
    projection.origin(o);
    clip.origin(o);
    feature.attr("d", draw);
    o = [origin[0] + velocity[0] * t, origin[1] + velocity[1] * t, 0];
    projection.rotate(o);
    svg.selectAll("path.geometry,path.graticule").attr("d", path);
    });

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

    </script>
    </script>
    274 changes: 274 additions & 0 deletions readme.json
    View file
    274 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  27. @mbostock mbostock revised this gist Sep 16, 2012. 2 changed files with 2 additions and 1 deletion.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Testing Jason Davies new [d3.geo.clip](https://github.com/d3/d3-plugins/tree/clip/geo/clip) plugin.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -41,7 +41,7 @@
    .attr("cy", height / 2)
    .attr("r", radius);

    d3.json("/d/1246403/readme.json", function(geometry) {
    d3.json("/d/3682676/readme-land.json", function(geometry) {
    var feature = svg.append("path")
    .datum(geometry)
    .attr("d", draw);
  28. @mbostock mbostock revised this gist Sep 16, 2012. 3 changed files with 8 additions and 187 deletions.
    1 change: 0 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    This example demonstrates [D3](http://d3js.org/)’s support for [azimuthal projections](http://www.progonos.com/furuti/MapProj/Dither/ProjAz/projAz.html) and clipping to [great circles](http://en.wikipedia.org/wiki/Great_circle)! [Release 2.3.0](http://github.com/mbostock/d3) also includes support for Gnomonic, Bonne, Werner and Sinusoidal projections, as well as for rendering [great arcs](http://flowingdata.com/2011/05/11/how-to-map-connections-with-great-circles/).
    15 changes: 8 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,19 +2,15 @@
    <meta charset="utf-8">
    <style>

    circle,
    path {
    circle {
    fill: none;
    stroke: #000;
    }

    circle {
    stroke-width: 2px;
    }

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

    @@ -40,7 +36,12 @@
    .attr("width", width)
    .attr("height", height);

    d3.json("readme.json", function(geometry) {
    svg.append("circle")
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .attr("r", radius);

    d3.json("/d/1246403/readme.json", function(geometry) {
    var feature = svg.append("path")
    .datum(geometry)
    .attr("d", draw);
    179 changes: 0 additions & 179 deletions readme.json
    View file
    0 additions, 179 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  29. @jasondavies jasondavies revised this gist Sep 14, 2012. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,8 @@

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

    var width = 960,
    @@ -30,7 +31,7 @@
    .scale(radius)
    .translate([width / 2, height / 2]);

    var circle = d3.geo.greatCircle();
    var clip = d3.geo.clip();

    var path = d3.geo.path()
    .projection(projection);
    @@ -48,12 +49,12 @@
    var t = Date.now() - t0,
    o = [origin[0] + velocity[0] * t, origin[1] + velocity[1] * t];
    projection.origin(o);
    circle.origin(o);
    clip.origin(o);
    feature.attr("d", draw);
    });

    function draw(d) {
    return path(circle.clip(d));
    return path(clip(d));
    }
    });

  30. @jasondavies jasondavies revised this gist Jul 9, 2012. 2 changed files with 179 additions and 3 deletions.
    2 changes: 0 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1 @@
    This example demonstrates [D3](http://d3js.org/)’s support for [azimuthal projections](http://www.progonos.com/furuti/MapProj/Dither/ProjAz/projAz.html) and clipping to [great circles](http://en.wikipedia.org/wiki/Great_circle)! [Release 2.3.0](http://github.com/mbostock/d3) also includes support for Gnomonic, Bonne, Werner and Sinusoidal projections, as well as for rendering [great arcs](http://flowingdata.com/2011/05/11/how-to-map-connections-with-great-circles/).

    The geometry for this example comes from [Natural Earth](http://www.naturalearthdata.com/)’s coastline dataset.
    180 changes: 179 additions & 1 deletion readme.json
    View file
    179 additions, 1 deletion not shown because the diff is too large. Please use a local Git client to view these changes.