Skip to content

Instantly share code, notes, and snippets.

@brett-miller

brett-miller/.block

Forked from mbostock/.block
Last active April 7, 2017 05:56
Show Gist options
  • Save brett-miller/ca9c388354e8071bc65791432af71d55 to your computer and use it in GitHub Desktop.
Save brett-miller/ca9c388354e8071bc65791432af71d55 to your computer and use it in GitHub Desktop.
Download ZIP
Contour Plot
Raw
.block
license: gpl-3.0
height: 673
border: no
Raw
index.html
<!DOCTYPE html>
<svg width="960" height="673" stroke="#fff" stroke-width="0.5"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hsv.v0.1.min.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var i0 = d3.interpolateHsvLong(d3.hsv(120, 1, 0.65), d3.hsv(60, 1, 0.90)),
i1 = d3.interpolateHsvLong(d3.hsv(60, 1, 0.90), d3.hsv(0, 0, 0.95)),
interpolateTerrain = function(t) { return t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2); },
color = d3.scaleSequential(interpolateTerrain).domain([90, 110]);
d3.json("volcano.json", function(error, volcano) {
if (error) throw error;
svg.selectAll("path")
.data(d3.contours()
.size([volcano.width, volcano.height])
.thresholds(d3.range(90, 115, 5))
(volcano.values))
.enter().append("path")
.attr("d", d3.geoPath(d3.geoIdentity().scale(width / volcano.width)))
.attr("fill", function(d) { return color(d.value); });
});
</script>
Raw
volcano.json
{"width":10,"height":10,"values":[103,104,104,105,105,106,106,106,107,107,106,106,105,105,104,104,104,104,105,107,107,106,105,105,107,108,109,110,110,110,110,110,110,109,109,109,109,109,109,108,107,107,107,107,106,106,105,104,104,104,104,104,104,104,103,103,103,103,102,102,101,101,100,100,100,100,100,99,98,97,97,96,96,96,96,96,96,96,95,95,95,94,94,94,94,94,94,104,104,105,105,106,106,107,107,107,107,107,107,107]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment