D3js map color keys?

D3js map color keys?

Background concept: Elevation maps and their color keys for human readers
require a more detailled coverage of lower elevation (<200m), where 80% of
the world population lives.
D3 project:
Given data elevations levels (m) such : 0, 50, 100, 200, 500, 1000, 2000,
3000, 4000, 5000m.
How to add a non linear color ramp key, with ticks at 0, 50, 100, 200,
500, 1000, 2000, 3000, 4000, 5000m.



Comment: I currently goes with an unsatisfying linear ramp code, see this,
which cut my 5000m into 10 equal spans of 500m :

I should actually have 4 differents greens standing for 0, 50, 100, and
200m and less browns/greys/whites.
Var color declaration. Set up the color ramp table by stating the points
where I have color shifts :
// Color-values equivalence var color_elev = d3.scale.linear() .domain([0,
200, 2000, 5000]) // values elevation (m) .range(["#ACD0A5", "#E1E4B5",
"#AA8753", "#FFFFFF"]) // colors .interpolate(d3.interpolateHcl)
each of these 3 spans should indeed have linear color changes.
Injection of my SVG polygons
// Data (getJSON: TopoJSON) d3.json("data/topo/final.json", showData); //
---------- FUNCTION ------------- // function showData(error, fra) { ...
// do my topojson to svg map injection }
Create, push my Color ramp box and key
/* START LEGEND_RAMP */ // Color ramp var x = d3.scale.linear()
.domain([0, 5000]) // legend elevation (m) .range([0, 280]); // width (px)
// Color ramp place ? ? ? var xAxis = d3.svg.axis() .scale(x)
.orient("bottom") .tickSize(13) .tickFormat(d3.format(".0f"));
// (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")
.data(d3.pairs(x.ticks(10))) .enter().append("rect") .attr("class",
"elev_color_brick") // or "band" .attr("height", 8) .attr("x", function(d)
{ return x(d[0]); }) .attr("width", function(d) { return x(d1) - x(d[0]);
}) .style("fill", function(d) { return color_elev(d[0]); });
// ? legend_key.call(xAxis); /* END LEGEND */