Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Forked from mbostock/.block
Last active December 20, 2022 03:31
Download ZIP

Revisions

  1. mbostock revised this gist Dec 20, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,2 @@
    license: gpl-3.0
    redirect: https://observablehq.com/@d3/orthographic-shading
  2. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  3. mbostock revised this gist Oct 31, 2015. 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
    @@ -14,7 +14,7 @@

    </style>
    <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var width = 960,
  4. mbostock revised this gist Jun 11, 2015. 2 changed files with 19 additions and 41 deletions.
    6 changes: 3 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,8 @@ The above grid demonstrates an orthographic azimuthal projection. The lines are

    Part 2 of 3.

    1. [Orthographic Grid](http://bl.ocks.org/2974930)
    1. [Orthographic Grid](/mbostock/2974930)
    2. **Orthographic Clipping**
    3. [Orthographic Shading](http://bl.ocks.org/3031319)
    3. [Orthographic Shading](/mbostock/3031319)

    To see this technique applied to real geographic features, see the [Spinny Globe](http://bl.ocks.org/1246403) example.
    To see this technique applied to real geographic features, see the [Spinny Globe](/mbostock/1246403) example.
    54 changes: 16 additions & 38 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,8 @@
    <meta charset="utf-8">
    <style>

    path,
    circle {
    circle,
    path {
    fill: none;
    stroke: #333;
    }
    @@ -14,61 +14,39 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v2.min.js?2.9.6"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

    var width = 960,
    height = 500;

    var xStepsBig = d3.range(-180, 180, 10),
    yStepsBig = d3.range(-90, 90, 10),
    xStepsSmall = d3.range(-180, 180 + 1, 5),
    yStepsSmall = d3.range(-90, 90 + 1, 5);
    var rotate = [-71.03, 42.37],
    velocity = [.018, .006];

    var origin = [-71.03, -42.37],
    velocity = [.018, .006],
    t0 = Date.now();
    var projection = d3.geo.orthographic()
    .scale(240)
    .clipAngle(90);

    var projection = d3.geo.azimuthal()
    .mode("orthographic")
    .scale(240);
    var path = d3.geo.path()
    .projection(projection);

    var circle = d3.geo.circle();
    var graticule = d3.geo.graticule();

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

    svg.selectAll(".x")
    .data(xStepsBig)
    .enter().append("path")
    .attr("class", "x")
    .datum(function(x) { return yStepsSmall.map(function(y) { return [x, y]; }); });

    svg.selectAll(".y")
    .data(yStepsBig)
    .enter().append("path")
    .attr("class", "y")
    .datum(function(y) { return xStepsSmall.map(function(x) { return [x, y]; }); });
    var feature = svg.append("path")
    .datum(graticule);

    svg.append("circle")
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .attr("r", 240);

    var path = svg.selectAll("path");

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

    function draw(d) {
    d = circle.clip({type: "LineString", coordinates: d});
    return d ? "M" + d.coordinates.map(projection).join("L") : null;
    }

    </script>
  5. mbostock revised this gist Oct 12, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  6. mbostock revised this gist Jul 9, 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
    @@ -26,7 +26,7 @@
    yStepsSmall = d3.range(-90, 90 + 1, 5);

    var origin = [-71.03, -42.37],
    velocity = [.0018, .006],
    velocity = [.018, .006],
    t0 = Date.now();

    var projection = d3.geo.azimuthal()
  7. mbostock revised this gist Jul 9, 2012. 1 changed file with 9 additions and 11 deletions.
    20 changes: 9 additions & 11 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
    <script src="http://d3js.org/d3.v2.min.js?2.9.6"></script>
    <script>

    var width = 960,
    @@ -26,15 +26,14 @@
    yStepsSmall = d3.range(-90, 90 + 1, 5);

    var origin = [-71.03, -42.37],
    velocity = [.018, .06];
    velocity = [.0018, .006],
    t0 = Date.now();

    var projection = d3.geo.azimuthal()
    .mode("orthographic")
    .origin(origin)
    .scale(240);

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

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    @@ -57,14 +56,13 @@
    .attr("cy", height / 2)
    .attr("r", 240);

    var path = svg.selectAll("path")
    .attr("d", draw);
    var path = svg.selectAll("path");

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

  8. mbostock revised this gist Jul 4, 2012. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,4 +4,6 @@ Part 2 of 3.

    1. [Orthographic Grid](http://bl.ocks.org/2974930)
    2. **Orthographic Clipping**
    3. [Orthographic Shading](http://bl.ocks.org/3031319)
    3. [Orthographic Shading](http://bl.ocks.org/3031319)

    To see this technique applied to real geographic features, see the [Spinny Globe](http://bl.ocks.org/1246403) example.
  9. mbostock revised this gist Jul 3, 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
    @@ -3,5 +3,5 @@ The above grid demonstrates an orthographic azimuthal projection. The lines are
    Part 2 of 3.

    1. [Orthographic Grid](http://bl.ocks.org/2974930)
    2. **[Orthographic Clipping](http://bl.ocks.org/3021474)**
    2. **Orthographic Clipping**
    3. [Orthographic Shading](http://bl.ocks.org/3031319)
  10. mbostock revised this gist Jul 3, 2012. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,7 @@
    The above grid demonstrates an orthographic azimuthal projection. The lines are at uniform 10º increments of latitude and longitude.
    The above grid demonstrates an orthographic azimuthal projection. The lines are at uniform 10º increments of latitude and longitude.

    Part 2 of 3.

    1. [Orthographic Grid](http://bl.ocks.org/2974930)
    2. **[Orthographic Clipping](http://bl.ocks.org/3021474)**
    3. [Orthographic Shading](http://bl.ocks.org/3031319)
  11. mbostock revised this gist Jul 3, 2012. 2 changed files with 24 additions and 20 deletions.
    4 changes: 1 addition & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1 @@
    The above grid demonstrates an orthographic azimuthal projection. The lines are at uniform 10º increments of latitude and longitude.

    This example demonstrates [bug 691](https://github.com/mbostock/d3/issues/691).
    The above grid demonstrates an orthographic azimuthal projection. The lines are at uniform 10º increments of latitude and longitude.
    40 changes: 23 additions & 17 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,36 +2,43 @@
    <meta charset="utf-8">
    <style>

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

    circle {
    stroke-width: 2px;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
    <script>

    var width = 960,
    height = 500,
    xStepsBig = d3.range(-180, 180, 10),
    height = 500;

    var xStepsBig = d3.range(-180, 180, 10),
    yStepsBig = d3.range(-90, 90, 10),
    xStepsSmall = d3.range(-180, 180 + 6, 6),
    yStepsSmall = d3.range(-90, 90 + 3, 3);
    xStepsSmall = d3.range(-180, 180 + 1, 5),
    yStepsSmall = d3.range(-90, 90 + 1, 5);

    var origin = [-71.03, -42.37],
    velocity = [.018, .06];

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

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

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(-.5,-.5)");
    .attr("height", height);

    svg.selectAll(".x")
    .data(xStepsBig)
    @@ -54,17 +61,16 @@
    .attr("d", draw);

    d3.timer(function() {
    var origin = projection.origin(),
    x = origin[0] + .018,
    y = origin[1] + 0.06;
    projection.origin([x, y]);
    circle.origin([x, y]);
    origin[0] += velocity[0];
    origin[1] += velocity[1];
    projection.origin(origin);
    circle.origin(origin);
    path.attr("d", draw);
    });

    function draw(d) {
    d = circle.clip({type: "LineString", coordinates: d});
    return d ? "M" + d.coordinates.map(projection).join("L") : "M0,0";
    return d ? "M" + d.coordinates.map(projection).join("L") : null;
    }

    </script>
    </script>
  12. mbostock revised this gist Jun 29, 2012. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    <meta charset="utf-8">
    <style>

    path {
    circle, path {
    fill: none;
    stroke: #333;
    }
    @@ -45,6 +45,11 @@
    .attr("class", "y")
    .datum(function(y) { return xStepsSmall.map(function(x) { return [x, y]; }); });

    svg.append("circle")
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .attr("r", 240);

    var path = svg.selectAll("path")
    .attr("d", draw);

  13. mbostock revised this gist Jun 29, 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
    @@ -21,7 +21,7 @@

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

    var circle = d3.geo.circle()
  14. mbostock revised this gist Jun 29, 2012. 2 changed files with 5 additions and 3 deletions.
    4 changes: 3 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,3 @@
    The above grid demonstrates an orthographic azimuthal projection. The lines are at uniform 10º increments of latitude and longitude.
    The above grid demonstrates an orthographic azimuthal projection. The lines are at uniform 10º increments of latitude and longitude.

    This example demonstrates [bug 691](https://github.com/mbostock/d3/issues/691).
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -50,8 +50,8 @@

    d3.timer(function() {
    var origin = projection.origin(),
    x = origin[0] + .18,
    y = origin[1] + 0.6;
    x = origin[0] + .018,
    y = origin[1] + 0.06;
    projection.origin([x, y]);
    circle.origin([x, y]);
    path.attr("d", draw);
  15. mbostock revised this gist Jun 29, 2012. 1 changed file with 10 additions and 3 deletions.
    13 changes: 10 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,6 +24,9 @@
    .origin([-71.03, 42.37])
    .scale(240);

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

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    @@ -46,13 +49,17 @@
    .attr("d", draw);

    d3.timer(function() {
    var origin = projection.origin();
    projection.origin([origin[0] + .18, origin[1] + .06]);
    var origin = projection.origin(),
    x = origin[0] + .18,
    y = origin[1] + 0.6;
    projection.origin([x, y]);
    circle.origin([x, y]);
    path.attr("d", draw);
    });

    function draw(d) {
    return "M" + d.map(projection).join("L");
    d = circle.clip({type: "LineString", coordinates: d});
    return d ? "M" + d.coordinates.map(projection).join("L") : "M0,0";
    }

    </script>
  16. mbostock revised this gist Jun 22, 2012. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,8 +24,6 @@
    .origin([-71.03, 42.37])
    .scale(240);

    var line = d3.svg.line();

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    @@ -54,7 +52,7 @@
    });

    function draw(d) {
    return line(d.map(projection));
    return "M" + d.map(projection).join("L");
    }

    </script>
  17. mbostock revised this gist Jun 22, 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 @@
    The above grid shows the distortion of Azimuthal Projection.
    The above grid demonstrates an orthographic azimuthal projection. The lines are at uniform 10º increments of latitude and longitude.
  18. mbostock revised this gist Jun 22, 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
    @@ -22,7 +22,7 @@
    var projection = d3.geo.azimuthal()
    .mode("orthographic")
    .origin([-71.03, 42.37])
    .scale(260);
    .scale(240);

    var line = d3.svg.line();

  19. mbostock revised this gist Jun 22, 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
    @@ -21,7 +21,8 @@

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

    var line = d3.svg.line();

  20. mbostock revised this gist Jun 22, 2012. 1 changed file with 11 additions and 1 deletion.
    12 changes: 11 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -44,6 +44,16 @@
    .datum(function(y) { return xStepsSmall.map(function(x) { return [x, y]; }); });

    var path = svg.selectAll("path")
    .attr("d", function(d) { return line(d.map(projection)); });
    .attr("d", draw);

    d3.timer(function() {
    var origin = projection.origin();
    projection.origin([origin[0] + .18, origin[1] + .06]);
    path.attr("d", draw);
    });

    function draw(d) {
    return line(d.map(projection));
    }

    </script>
  21. mbostock revised this gist Jun 22, 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
    @@ -16,8 +16,8 @@
    height = 500,
    xStepsBig = d3.range(-180, 180, 10),
    yStepsBig = d3.range(-90, 90, 10),
    xStepsSmall = d3.range(-180, 180, 6),
    yStepsSmall = d3.range(-90, 90, 3);
    xStepsSmall = d3.range(-180, 180 + 6, 6),
    yStepsSmall = d3.range(-90, 90 + 3, 3);

    var projection = d3.geo.azimuthal()
    .mode("orthographic")
  22. mbostock revised this gist Jun 22, 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
    @@ -16,8 +16,8 @@
    height = 500,
    xStepsBig = d3.range(-180, 180, 10),
    yStepsBig = d3.range(-90, 90, 10),
    xStepsSmall = d3.range(-180, 180, 1),
    yStepsSmall = d3.range(-90, 90, 1);
    xStepsSmall = d3.range(-180, 180, 6),
    yStepsSmall = d3.range(-90, 90, 3);

    var projection = d3.geo.azimuthal()
    .mode("orthographic")
  23. mbostock revised this gist Jun 22, 2012. 1 changed file with 4 additions and 5 deletions.
    9 changes: 4 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,15 +14,14 @@

    var width = 960,
    height = 500,
    xStepsBig = d3.range(-180, 180, 20),
    xStepsBig = d3.range(-180, 180, 10),
    yStepsBig = d3.range(-90, 90, 10),
    xStepsSmall = d3.range(-180, 180, 4),
    yStepsSmall = d3.range(-90, 90, 2);
    xStepsSmall = d3.range(-180, 180, 1),
    yStepsSmall = d3.range(-90, 90, 1);

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

    var line = d3.svg.line();

  24. mbostock revised this gist Jun 22, 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
    @@ -20,7 +20,9 @@
    yStepsSmall = d3.range(-90, 90, 2);

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

    var line = d3.svg.line();

  25. mbostock revised this gist Jun 22, 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
    @@ -19,7 +19,8 @@
    xStepsSmall = d3.range(-180, 180, 4),
    yStepsSmall = d3.range(-90, 90, 2);

    var projection = d3.geo.azimuthal();
    var projection = d3.geo.azimuthal()
    .mode("gnomonic");

    var line = d3.svg.line();

  26. mbostock revised this gist Jun 22, 2012. 2 changed files with 3 additions and 3 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    The above grid shows the distortion of Albers Projection.
    The above grid shows the distortion of Azimuthal Projection.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@
    xStepsSmall = d3.range(-180, 180, 4),
    yStepsSmall = d3.range(-90, 90, 2);

    var albers = d3.geo.albers();
    var projection = d3.geo.azimuthal();

    var line = d3.svg.line();

    @@ -42,6 +42,6 @@
    .datum(function(y) { return xStepsSmall.map(function(x) { return [x, y]; }); });

    var path = svg.selectAll("path")
    .attr("d", function(d) { return line(d.map(albers)); });
    .attr("d", function(d) { return line(d.map(projection)); });

    </script>
  27. mbostock revised this gist Jun 22, 2012. 3 changed files with 7 additions and 68 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    The above grid shows the effect of [fisheye distortion](http://bost.ocks.org/mike/fisheye/). Move the mouse to change the focal point.
    The above grid shows the distortion of Albers Projection.
    45 changes: 0 additions & 45 deletions fisheye.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,45 +0,0 @@
    (function() {
    d3.fisheye = function() {
    var radius = 200,
    power = 2,
    k0,
    k1,
    center = [0, 0];

    function fisheye(d) {
    var dx = d[0] - center[0],
    dy = d[1] - center[1],
    dd = Math.sqrt(dx * dx + dy * dy);
    if (dd >= radius) return d;
    var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
    return [center[0] + dx * k, center[1] + dy * k];
    }

    function rescale() {
    k0 = Math.exp(power);
    k0 = k0 / (k0 - 1) * radius;
    k1 = power / radius;
    return fisheye;
    }

    fisheye.radius = function(_) {
    if (!arguments.length) return radius;
    radius = +_;
    return rescale();
    };

    fisheye.power = function(_) {
    if (!arguments.length) return power;
    power = +_;
    return rescale();
    };

    fisheye.center = function(_) {
    if (!arguments.length) return center;
    center = _;
    return fisheye;
    };

    return rescale();
    };
    })();
    28 changes: 6 additions & 22 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,11 +2,6 @@
    <meta charset="utf-8">
    <style>

    .background {
    fill: none;
    pointer-events: all;
    }

    path {
    fill: none;
    stroke: #333;
    @@ -15,17 +10,16 @@
    </style>
    <body>
    <script src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
    <script src="fisheye.js"></script>
    <script>

    var width = 960,
    height = 500,
    xStepsBig = d3.range(10, width, 20),
    yStepsBig = d3.range(10, height, 20),
    xStepsSmall = d3.range(0, width + 6, 6),
    yStepsSmall = d3.range(0, height + 6, 6);
    xStepsBig = d3.range(-180, 180, 20),
    yStepsBig = d3.range(-90, 90, 10),
    xStepsSmall = d3.range(-180, 180, 4),
    yStepsSmall = d3.range(-90, 90, 2);

    var fisheye = d3.fisheye();
    var albers = d3.geo.albers();

    var line = d3.svg.line();

    @@ -35,11 +29,6 @@
    .append("g")
    .attr("transform", "translate(-.5,-.5)");

    svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height);

    svg.selectAll(".x")
    .data(xStepsBig)
    .enter().append("path")
    @@ -53,11 +42,6 @@
    .datum(function(y) { return xStepsSmall.map(function(x) { return [x, y]; }); });

    var path = svg.selectAll("path")
    .attr("d", line);

    svg.on("mousemove", function() {
    fisheye.center(d3.mouse(this));
    path.attr("d", function(d) { return line(d.map(fisheye)); });
    });
    .attr("d", function(d) { return line(d.map(albers)); });

    </script>
  28. mbostock revised this gist Jun 20, 2012. 2 changed files with 49 additions and 6 deletions.
    45 changes: 45 additions & 0 deletions fisheye.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    (function() {
    d3.fisheye = function() {
    var radius = 200,
    power = 2,
    k0,
    k1,
    center = [0, 0];

    function fisheye(d) {
    var dx = d[0] - center[0],
    dy = d[1] - center[1],
    dd = Math.sqrt(dx * dx + dy * dy);
    if (dd >= radius) return d;
    var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
    return [center[0] + dx * k, center[1] + dy * k];
    }

    function rescale() {
    k0 = Math.exp(power);
    k0 = k0 / (k0 - 1) * radius;
    k1 = power / radius;
    return fisheye;
    }

    fisheye.radius = function(_) {
    if (!arguments.length) return radius;
    radius = +_;
    return rescale();
    };

    fisheye.power = function(_) {
    if (!arguments.length) return power;
    power = +_;
    return rescale();
    };

    fisheye.center = function(_) {
    if (!arguments.length) return center;
    center = _;
    return fisheye;
    };

    return rescale();
    };
    })();
    10 changes: 4 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@
    </style>
    <body>
    <script src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
    <script src="http://bost.ocks.org/mike/fisheye/fisheye.js?0.0.2"></script>
    <script src="fisheye.js"></script>
    <script>

    var width = 960,
    @@ -27,9 +27,7 @@

    var fisheye = d3.fisheye();

    var line = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; });
    var line = d3.svg.line();

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    @@ -46,13 +44,13 @@
    .data(xStepsBig)
    .enter().append("path")
    .attr("class", "x")
    .datum(function(x) { return yStepsSmall.map(function(y) { return {x: x, y: y}; }); });
    .datum(function(x) { return yStepsSmall.map(function(y) { return [x, y]; }); });

    svg.selectAll(".y")
    .data(yStepsBig)
    .enter().append("path")
    .attr("class", "y")
    .datum(function(y) { return xStepsSmall.map(function(x) { return {x: x, y: y}; }); });
    .datum(function(y) { return xStepsSmall.map(function(x) { return [x, y]; }); });

    var path = svg.selectAll("path")
    .attr("d", line);
  29. mbostock revised this gist Jun 20, 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
    @@ -8,7 +8,7 @@
    }

    path {
    fill-opacity: .1;
    fill: none;
    stroke: #333;
    }

  30. mbostock revised this gist Jun 20, 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
    @@ -8,7 +8,7 @@
    }

    path {
    fill: #ccc;
    fill-opacity: .1;
    stroke: #333;
    }