contour3

by jpeter06

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-hsv.v0.1.min.js"></script>

JavaScript

function flip(data) {
  const flip = {
    width: data.height,
    height: data.width,
    values: Array.from(data.values)
  };
  for (let i = 0, l = data.values.length; i < l; i++) {
    flip.values[(i % data.width) * flip.width + Math.floor(i / data.width)] =
      data.values[i];
  }

  return flip;
}

function interpolateTerrain (t) {
  var i0 = d3.interpolateHsvLong(d3.hsv(120, 1, 0.65), d3.hsv(60, 1, 0.90));
  var i1 = d3.interpolateHsvLong(d3.hsv(60, 1, 0.90), d3.hsv(0, 0, 0.95));
  return  t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2);
}

var steps=35;
var ticks= 20;
var width= 87;
var height = 61;
var wide = true;
var rawData = d3.json("https://gist.githubusercontent.com/mbostock/4241134/raw/ee3244eaf405667623241b3d5e1477424623d12b/volcano.json");
console.log(rawData);
var data = wide ? rawdata : flip(rawdata);
var color = d3.scaleSequential(interpolateTerrain).domain(d3.extent(data.values)).nice();
var thresholds = color.ticks(ticks);

//var d3 = d3 = require("https://d3js.org/d3.v5.min.js", "[email protected]/build/d3-hsv.min.js");



function addlabel(svg, text, xy, angle) {
  angle += Math.cos(angle) < 0 ? Math.PI : 0;
  svg
    .append("text")
    .attr("fill", "#fff")
    .attr("stroke", "none")
    .attr("text-anchor", "middle")
    .attr("dy", "0.3em")
    .attr("transform", `translate(${xy})rotate(${angle * degrees})`)
    .text(text)
    .style("font-size", "1.1px");
}