|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
body { |
|
margin: 0; |
|
overflow: hidden; |
|
} |
|
|
|
svg { |
|
font: 10px sans-serif; |
|
} |
|
|
|
.caption { |
|
font-weight: bold; |
|
} |
|
|
|
.key path { |
|
display: none; |
|
} |
|
|
|
.key line { |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
|
|
/* Legend box */ |
|
.legend_key path { |
|
display: none; |
|
} |
|
|
|
.legend_key line { |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
</style> |
|
<body> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://d3js.org/topojson.v1.min.js"></script> |
|
|
|
<script src="../js/d3.v3.min.js"></script> |
|
<script src="../js/topojson.v1.min.js"></script> |
|
<script> |
|
var margin = {top: 20, right: 10, bottom: 20, left: 10}, |
|
width = 400 - margin.left - margin.right, |
|
height = 300 - margin.top - margin.bottom; |
|
|
|
var formatNumber = d3.format(".0f"); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
svg.append("rect") |
|
.attr("class", "background") |
|
.attr({"x":-margin.left,"y":-margin.top}) |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height+ margin.top + margin.bottom) |
|
.style("fill", "green") |
|
.style("fill-opacity", 0.2); |
|
|
|
/* **************** ^^^^^^^^^ ************* */ |
|
/* **************** RAMP LEFT ************* */ |
|
var threshold = d3.scale.threshold() |
|
.domain([0, 500, 4000, 8000, 9000]) // values elevation (m) |
|
.range(["#ACD0A5", "#E1E4B5", "#AA8753", "#FFFAF0", "#FFFFFF"]); // colors |
|
|
|
// A position encoding for the key only. |
|
var y = d3.scale.linear() |
|
.domain([0, 9000]) |
|
.range([0, 270]); |
|
|
|
var yAxis = d3.svg.axis() |
|
.scale(y) |
|
.orient("right") |
|
.tickSize(13) |
|
.tickValues(threshold.domain()) |
|
.tickFormat(function(d) { return formatNumber(d)+"m"; }); |
|
|
|
var g = svg.append("g") |
|
.attr("class", "key"); |
|
|
|
g.selectAll("rect") |
|
.data(threshold.range().map(function(color) { |
|
var d = threshold.invertExtent(color); |
|
if (d[0] == null) d[0] = y.domain()[0]; |
|
if (d[1] == null) d[1] = y.domain()[1]; |
|
return d; |
|
})) |
|
.enter().append("rect") |
|
.attr("width", 8) |
|
.attr("y", function(d) { return y(d[0]); }) |
|
.attr("height", function(d) { return y(d[1]) - y(d[0]); }) |
|
.style("fill", function(d) { return threshold(d[0]); }); |
|
|
|
g.call(yAxis).append("text") |
|
.attr("class", "caption") |
|
.attr("y", -6) |
|
.text("Altitude"); |
|
|
|
/* **************** ^^^^^^^^^^^ ************* */ |
|
/* **************** RAMP BOTTOM ************* */ |
|
/* COLORS */ |
|
// Color-values equivalence |
|
var color_elev = d3.scale.linear() |
|
.domain([0, 500, 4000, 8000, 9000]) // values elevation (m) |
|
.range(["#ACD0A5", "#E1E4B5", "#AA8753", "#FFFFFF", "#FFFFFF"]) // colors |
|
.interpolate(d3.interpolateHcl); |
|
/* END colors */ |
|
|
|
|
|
/* LEGEND_RAMP */ // depending on var color. |
|
// Color ramp |
|
var x = d3.scale.linear() |
|
.domain([0, 8000]) // legend elevation (m) |
|
.range([0, 280]); // width (px) |
|
|
|
|
|
// (JS shortcut) |
|
var legend_key = svg.append("g") |
|
.attr("class", "legend_key") |
|
.attr("transform", "translate(" + (width - 300) + "," + (height - 30) + ")"); |
|
|
|
// Color ramp: white background |
|
legend_key.append("rect") |
|
.attr("x", -10) |
|
.attr("y", -10) |
|
.attr("width", 310) |
|
.attr("height", 40) |
|
.style("fill", "white") |
|
.style("fill-opacity", 0.5) |
|
|
|
// Color ramp: bricks |
|
legend_key.selectAll(".color_ramp") |
|
// 10 ticks ? |
|
.data(d3.pairs(x.ticks(10))) // HERE ! in d3.pairs: [0, 500, 1000] |
|
.enter().append("rect") |
|
.attr("class", "elev_color_brick") // or "band" |
|
.attr("height", 10) |
|
.attr("x", function(d) { return x(d[0]); }) // d[0] is something between 0 and 5000. |
|
.attr("width", function(d) { return x(d[1]) - x(d[0]); }) // useless |
|
.style("fill", function(d) { return color_elev(d[0]); }); // color |
|
|
|
// Color ramp: ticks |
|
var xAxis = d3.svg.axis() |
|
.scale(x) |
|
.orient("bottom") |
|
.tickSize(13) |
|
// .tickValues(threshold.domain()) |
|
.tickFormat(d3.format(".0f")); |
|
|
|
legend_key.call(xAxis); |
|
/* END LEGEND */ |
|
|
|
</script> |
