Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active March 6, 2019 05:25
Download ZIP

Revisions

  1. mbostock revised this gist Mar 6, 2019. 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/animated-contours
  2. mbostock revised this gist Nov 5, 2017. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,10 +10,10 @@
    <script src="https://d3js.org/d3-timer.v1.min.js"></script>
    <script>

    // Populate a grid of n×m values where -9.6 ≤ x ≤ 9.6 and -5 ≤ y ≤ 5.
    var n = 240, m = 125, values = new Array(n * m);
    for (var j = 0.5, k = 0; j < m; ++j) {
    for (var i = 0.5; i < n; ++i, ++k) {
    // Populate a grid of (n+2)×(m+2) values where -9.6 ≤ x ≤ 9.6 and -5 ≤ y ≤ 5.
    var n = 240, m = 125, values = new Array((n + 2) * (m + 2));
    for (var j = -0.5, k = 0; j < m + 1; ++j) {
    for (var i = -0.5; i < n + 1; ++i, ++k) {
    values[k] = value(i / n * 19.2 - 9.6, 5 - j / m * 10);
    }
    }
    @@ -23,9 +23,10 @@
    color = d3.scaleSequential(d3.interpolateRdBu).domain([-1, 1]),
    path = d3.geoPath(null, context),
    thresholds = d3.range(-1.2, 1, 0.2),
    contours = d3.contours().size([n, m]);
    contours = d3.contours().size([n + 2, m + 2]);

    context.scale(canvas.width / n, canvas.width / n);
    context.scale(canvas.width / (n + 1), canvas.width / (n + 1));
    context.translate(-0.5, -0.5);

    d3.timer(function(t) {
    var dv = (t % 1000) / 1000 * 0.2;
  3. mbostock revised this gist Apr 10, 2017. 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
    @@ -32,10 +32,10 @@
    contours
    .thresholds(thresholds.map(function(v) { return v + dv; }))
    (values)
    .forEach(contour);
    .forEach(fill);
    });

    function contour(geometry) {
    function fill(geometry) {
    context.beginPath();
    path(geometry);
    context.fillStyle = color(geometry.value);
  4. mbostock revised this gist Apr 7, 2017. 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
    @@ -19,13 +19,14 @@
    }

    var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

    var color = d3.scaleSequential(d3.interpolateRdBu).domain([-1, 1]),
    path = d3.geoPath(d3.geoIdentity().scale(canvas.width / n), context),
    context = canvas.getContext("2d"),
    color = d3.scaleSequential(d3.interpolateRdBu).domain([-1, 1]),
    path = d3.geoPath(null, context),
    thresholds = d3.range(-1.2, 1, 0.2),
    contours = d3.contours().size([n, m]);

    context.scale(canvas.width / n, canvas.width / n);

    d3.timer(function(t) {
    var dv = (t % 1000) / 1000 * 0.2;
    contours
  5. mbostock revised this gist Apr 7, 2017. 1 changed file with 29 additions and 16 deletions.
    45 changes: 29 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,34 +1,47 @@
    <!DOCTYPE html>
    <svg width="960" height="500" stroke="#fff" stroke-width="0.5"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <canvas width="960" height="500"></canvas>
    <script src="https://d3js.org/d3-array.v1.min.js"></script>
    <script src="https://d3js.org/d3-color.v1.min.js"></script>
    <script src="https://d3js.org/d3-contour.v1.min.js"></script>
    <script src="https://d3js.org/d3-geo.v1.min.js"></script>
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
    <script src="https://d3js.org/d3-scale.v1.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/d3-timer.v1.min.js"></script>
    <script>

    // Populate a grid of n×m values where -9.6 ≤ x ≤ 9.6 and -5 ≤ y ≤ 5.
    var n = 240, m = 125, values = new Array(n * m);
    for (var j = 0.5, k = 0; j < m; ++j) {
    for (var i = 0.5; i < n; ++i, ++k) {
    values[k] = sinCos(i / n * 19.2 - 9.6, 5 - j / m * 10);
    values[k] = value(i / n * 19.2 - 9.6, 5 - j / m * 10);
    }
    }

    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
    var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

    var color = d3.scaleSequential(d3.interpolateRdBu)
    .domain([-1, 1]);
    var color = d3.scaleSequential(d3.interpolateRdBu).domain([-1, 1]),
    path = d3.geoPath(d3.geoIdentity().scale(canvas.width / n), context),
    thresholds = d3.range(-1.2, 1, 0.2),
    contours = d3.contours().size([n, m]);

    svg.selectAll("path")
    .data(d3.contours()
    .size([n, m])
    (values))
    .enter().append("path")
    .attr("d", d3.geoPath(d3.geoIdentity().scale(width / n)))
    .attr("fill", function(d) { return color(d.value); });
    d3.timer(function(t) {
    var dv = (t % 1000) / 1000 * 0.2;
    contours
    .thresholds(thresholds.map(function(v) { return v + dv; }))
    (values)
    .forEach(contour);
    });

    function sinCos(x, y) {
    function contour(geometry) {
    context.beginPath();
    path(geometry);
    context.fillStyle = color(geometry.value);
    context.fill();
    }

    function value(x, y) {
    return Math.sin(x + y) * Math.sin(x - y);
    }

  6. mbostock created this gist Apr 7, 2017.
    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
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    An example of [d3-contour](https://github.com/d3/d3-contour).
    35 changes: 35 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    <!DOCTYPE html>
    <svg width="960" height="500" stroke="#fff" stroke-width="0.5"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-contour.v1.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script>

    // Populate a grid of n×m values where -9.6 ≤ x ≤ 9.6 and -5 ≤ y ≤ 5.
    var n = 240, m = 125, values = new Array(n * m);
    for (var j = 0.5, k = 0; j < m; ++j) {
    for (var i = 0.5; i < n; ++i, ++k) {
    values[k] = sinCos(i / n * 19.2 - 9.6, 5 - j / m * 10);
    }
    }

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

    var color = d3.scaleSequential(d3.interpolateRdBu)
    .domain([-1, 1]);

    svg.selectAll("path")
    .data(d3.contours()
    .size([n, m])
    (values))
    .enter().append("path")
    .attr("d", d3.geoPath(d3.geoIdentity().scale(width / n)))
    .attr("fill", function(d) { return color(d.value); });

    function sinCos(x, y) {
    return Math.sin(x + y) * Math.sin(x - y);
    }

    </script>
    Binary file added preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    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.