Skip to content

Instantly share code, notes, and snippets.

@clofresh

clofresh/index.html

Last active August 11, 2017 01:47
Show Gist options
  • Save clofresh/07174b875bc074ff9cead1b8b76acde9 to your computer and use it in GitHub Desktop.
Save clofresh/07174b875bc074ff9cead1b8b76acde9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<style>
.domain {
display: none;
}
</style>
<svg width="960" height="500"></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"),
margin = {top: 20, right: 30, bottom: 30, left: 40};
var x = d3.scaleLinear()
.rangeRound([margin.left, width - margin.right]);
var y = d3.scaleLinear()
.rangeRound([height - margin.bottom, margin.top]);
//var data = [[3.6,79],[1.8,54],[3.333,74],[2.283,62],[4.533,85],[2.883,55],[4.7,88],[3.6,85],[1.95,51],[4.35,85],[1.833,54],[3.917,84],[4.2,78],[1.75,47],[4.7,83],[2.167,52],[1.75,62],[4.8,84],[1.6,52],[4.25,79],[1.8,51],[1.75,47],[3.45,78],[3.067,69],[4.533,74],[3.6,83],[1.967,55],[4.083,76],[3.85,78],[4.433,79],[4.3,73],[4.467,77],[3.367,66],[4.033,80],[3.833,74],[2.017,52],[1.867,48],[4.833,80],[1.833,59],[4.783,90],[4.35,80],[1.883,58],[4.567,84],[1.75,58],[4.533,73],[3.317,83],[3.833,64],[2.1,53],[4.633,82],[2,59],[4.8,75],[4.716,90],[1.833,54],[4.833,80],[1.733,54],[4.883,83],[3.717,71],[1.667,64],[4.567,77],[4.317,81],[2.233,59],[4.5,84],[1.75,48],[4.8,82],[1.817,60],[4.4,92],[4.167,78],[4.7,78],[2.067,65],[4.7,73],[4.033,82],[1.967,56],[4.5,79],[4,71],[1.983,62],[5.067,76],[2.017,60],[4.567,78],[3.883,76],[3.6,83],[4.133,75],[4.333,82],[4.1,70],[2.633,65],[4.067,73],[4.933,88],[3.95,76],[4.517,80],[2.167,48],[4,86],[2.2,60],[4.333,90],[1.867,50],[4.817,78],[1.833,63],[4.3,72],[4.667,84],[3.75,75],[1.867,51],[4.9,82],[2.483,62],[4.367,88],[2.1,49],[4.5,83],[4.05,81],[1.867,47],[4.7,84],[1.783,52],[4.85,86],[3.683,81],[4.733,75],[2.3,59],[4.9,89],[4.417,79],[1.7,59],[4.633,81],[2.317,50],[4.6,85],[1.817,59],[4.417,87],[2.617,53],[4.067,69],[4.25,77],[1.967,56],[4.6,88],[3.767,81],[1.917,45],[4.5,82],[2.267,55],[4.65,90],[1.867,45],[4.167,83],[2.8,56],[4.333,89],[1.833,46],[4.383,82],[1.883,51],[4.933,86],[2.033,53],[3.733,79],[4.233,81],[2.233,60],[4.533,82],[4.817,77],[4.333,76],[1.983,59],[4.633,80],[2.017,49],[5.1,96],[1.8,53],[5.033,77],[4,77],[2.4,65],[4.6,81],[3.567,71],[4,70],[4.5,81],[4.083,93],[1.8,53],[3.967,89],[2.2,45],[4.15,86],[2,58],[3.833,78],[3.5,66],[4.583,76],[2.367,63],[5,88],[1.933,52],[4.617,93],[1.917,49],[2.083,57],[4.583,77],[3.333,68],[4.167,81],[4.333,81],[4.5,73],[2.417,50],[4,85],[4.167,74],[1.883,55],[4.583,77],[4.25,83],[3.767,83],[2.033,51],[4.433,78],[4.083,84],[1.833,46],[4.417,83],[2.183,55],[4.8,81],[1.833,57],[4.8,76],[4.1,84],[3.966,77],[4.233,81],[3.5,87],[4.366,77],[2.25,51],[4.667,78],[2.1,60],[4.35,82],[4.133,91],[1.867,53],[4.6,78],[1.783,46],[4.367,77],[3.85,84],[1.933,49],[4.5,83],[2.383,71],[4.7,80],[1.867,49],[3.833,75],[3.417,64],[4.233,76],[2.4,53],[4.8,94],[2,55],[4.15,76],[1.867,50],[4.267,82],[1.75,54],[4.483,75],[4,78],[4.117,79],[4.083,78],[4.267,78],[3.917,70],[4.55,79],[4.083,70],[2.417,54],[4.183,86],[2.217,50],[4.45,90],[1.883,54],[1.85,54],[4.283,77],[3.95,79],[2.333,64],[4.15,75],[2.35,47],[4.933,86],[2.9,63],[4.583,85],[3.833,82],[2.083,57],[4.367,82],[2.133,67],[4.35,74],[2.2,54],[4.45,83],[3.567,73],[4.5,73],[4.15,88],[3.817,80],[3.917,71],[4.45,83],[2,56],[4.283,79],[4.767,78],[4.533,84],[1.85,58],[4.25,83],[1.983,43],[2.25,60],[4.75,75],[4.117,81],[2.15,46],[4.417,90],[1.817,46],[4.467,74]]
var data = [
[462, 196],
[474, 196],
[464, 196],
[459, 196],
[460, 196],
]
x.domain(d3.extent(data, function(d) { return d[0]; })).nice();
y.domain(d3.extent(data, function(d) { return d[1]; })).nice();
var contourData = d3.contourDensity()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); })
.size([width, height])
.thresholds(8)
// .bandwidth(20)
(data);
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(d3.extent(contourData, function(d) { return d.value; }));
svg.insert("g", "g")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.selectAll("path")
.data(contourData)
.enter().append("path")
.attr("d", d3.geoPath())
.attr("fill", function(d) { console.log(d); return color(d.value); });
svg.append("g")
.attr("stroke", "white")
.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d) { return x(d[0]); })
.attr("cy", function(d) { return y(d[1]); })
.attr("r", 2);
svg.append("g")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(d3.axisBottom(x))
.select(".tick:last-of-type text")
.select(function() { return this.parentNode.appendChild(this.cloneNode()); })
.attr("y", -3)
.attr("dy", null)
.attr("font-weight", "bold")
.text("x");
svg.append("g")
.attr("transform", "translate(" + margin.left + ",0)")
.call(d3.axisLeft(y))
.select(".tick:last-of-type text")
.select(function() { return this.parentNode.appendChild(this.cloneNode()); })
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("y");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment