Legend with smooth gradient and corresponding labels - d3.js

Question

I'm creating a legend for some data.
This is my code: Plunker.
The problem is that the labels are uniformly distributed along the x axis while they should follow the color scale scheme:
var colorScale = d3.scaleLinear()
.domain([0, 10, 15, 20, 25, 100])
.range(['#E28672', '#EC93AB', '#CEB1DE', '#95D3F0', '#77EDD9', '#A9FCAA']);
Here is what I have:
And this is what I would like:
Thanks!

Answer 1

You need to set the tick values that you want to show, this can be done with:
axis.tickValues([value,value,...])
In your case you want the labeled values to be equal to the color breaks in your scale. Luckily you have an array containing those values already, the scale's domain:
axis.tickValues(colorScale.domain());
With an adjustment to legend width (the labels are rather close together otherwise), and applying that change, we get:
var colorScale = d3.scaleLinear()
.domain([0, 10, 15, 20, 25, 100])
.range(['#E28672', '#EC93AB', '#CEB1DE', '#95D3F0', '#77EDD9', '#A9FCAA']);
// append a defs (for definition) element to your SVG
var svgLegend = d3.select('body').append('svg')
.attr("width",600);
var defs = svgLegend.append('defs');
// append a linearGradient element to the defs and give it a unique id
var linearGradient = defs.append('linearGradient')
.attr('id', 'linear-gradient');
// horizontal gradient
linearGradient
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%");
// append multiple color stops by using D3's data/enter step
linearGradient.selectAll("stop")
.data([
{offset: "0%", color: "#E28672"},
{offset: "10%", color: "#EC93AB"},
{offset: "15%", color: "#CEB1DE"},
{offset: "20%", color: "#95D3F0"},
{offset: "25%", color: "#77EDD9"},
{offset: "100%", color: "#A9FCAA"}
])
.enter().append("stop")
.attr("offset", function(d) {
return d.offset;
})
.attr("stop-color", function(d) {
return d.color;
});
// append title
svgLegend.append("text")
.attr("class", "legendTitle")
.attr("x", 0)
.attr("y", 20)
.style("text-anchor", "left")
.text("Legend title");
// draw the rectangle and fill with gradient
svgLegend.append("rect")
.attr("x", 10)
.attr("y", 30)
.attr("width", 400)
.attr("height", 15)
.style("fill", "url(#linear-gradient)");
//create tick marks
var xLeg = d3.scaleLinear()
.domain([0, 100])
.range([10, 400]);
var axisLeg = d3.axisBottom(xLeg)
.tickValues(colorScale.domain())
svgLegend
.attr("class", "axis")
.append("g")
.attr("transform", "translate(0, 40)")
.call(axisLeg);
.legendTitle {
font-size: 15px;
fill: #4F4F4F;
font-weight: 12;
}
.axis path, .axis line {
fill: none;
stroke: none; /*black;*/
shape-rendering: crispEdges;
}
.axis text {
font-family: Consolas, courier;
fill: #000;
font-size: 9pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
I'd also point out that we can go one step further, and append the stops for the gradient using the scale's domain as well:
var colorScale = d3.scaleLinear()
.domain([0, 10, 15, 20, 25, 100])
.range(['#E28672', '#EC93AB', '#CEB1DE', '#95D3F0', '#77EDD9', '#A9FCAA']);
// append a defs (for definition) element to your SVG
var svgLegend = d3.select('body').append('svg')
.attr("width",600);
var defs = svgLegend.append('defs');
// append a linearGradient element to the defs and give it a unique id
var linearGradient = defs.append('linearGradient')
.attr('id', 'linear-gradient');
// horizontal gradient
linearGradient
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%");
// append multiple color stops by using D3's data/enter step
linearGradient.selectAll("stop")
.data(colorScale.domain())
.enter().append("stop")
.attr("offset", function(d) {
return d+"%";
})
.attr("stop-color", function(d) {
return colorScale(d);
});
// append title
svgLegend.append("text")
.attr("class", "legendTitle")
.attr("x", 0)
.attr("y", 20)
.style("text-anchor", "left")
.text("Legend title");
// draw the rectangle and fill with gradient
svgLegend.append("rect")
.attr("x", 10)
.attr("y", 30)
.attr("width", 400)
.attr("height", 15)
.style("fill", "url(#linear-gradient)");
//create tick marks
var xLeg = d3.scaleLinear()
.domain([0, 100])
.range([10, 400]);
var axisLeg = d3.axisBottom(xLeg)
.tickValues(colorScale.domain())
svgLegend
.attr("class", "axis")
.append("g")
.attr("transform", "translate(0, 40)")
.call(axisLeg);
.legendTitle {
font-size: 15px;
fill: #4F4F4F;
font-weight: 12;
}
.axis path, .axis line {
fill: none;
stroke: none; /*black;*/
shape-rendering: crispEdges;
}
.axis text {
font-family: Consolas, courier;
fill: #000;
font-size: 9pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>