I'm currently in the process of creating a color legend using d3, and I've managed to display it vertically. However, I would like it to be shown horizontally instead. Below is a snippet of the code I've been working on along with a link to the corresponding jsfiddle.
var svg = d3.select(selector_id)
.append("svg")
.attr("height", (legendheight) + "px")
.attr("width", (legendwidth) + "px")
.style("position", "absolute")
.style("left", "0px")
.style("top", "0px")
svg
.append("g")
.attr("transform", "translate(" + (legendwidth - margin.left - margin.right + 3) + "," + (margin.top) + ")")
.call(legendaxis);
};
Here's an example of what I'm aiming for: https://i.stack.imgur.com/cCxSa.png
For further information, you can also check out the fiddle link provided below: