WikiAtlas ramp (beta)

This gist is a starting point to code a function buiding wikiatlas keys. It also gather helpful resources to learn and code further. Collaborative and versionned coding, fork, can be done on Codio.

We dream of...

Ideally, the function should take as input :

the range [zmin, zmax] (?),
an array for positives values [0, 50 200, 500, <zmax>],
an array for negative values [<zmin>, -200, -100, -50, 0]

to then build a set of keys which manage both positive and negative altitudes,

Current code

Two different approches are implemented. One use a threshold scale, in the style of Ford Fessenden’s map of police stops involving force. A linear scale is used to set the x-position of each colored rectangle in the key. There is one rectangle per color in the threshold scale’s range, and one tick per value in the threshold scale’s domain. The linear scale’s domain sets the implied extent of the key, here spanning 0 to 100%. Explore D3's ordinal scales may be productive.

Tutorial

Let’s Make a Bar Chart I (code) - build HTML table.
Let’s Make a Bar Chart II (code) - build SVG table from json, horizontal bars.
Let’s Make a Bar Chart III (code) - build SVG table fron json, vertical bars with .domain(), .range(), .ticks().
Margin Convention

Official

d3.tsv - load and parse data
d3.format - format percentages
d3.scale.ordinal - x-position encoding
d3.scale.linear - y-position encoding
d3.max - compute domains
d3.svg.axis - display axes and .ticks()

License

Public domain.

<!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="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js