Skip to content
This repository was archived by the owner on Sep 7, 2020. It is now read-only.

Conversation

@Rekhajikki
Copy link

@Rekhajikki Rekhajikki commented Jan 16, 2017

Hi,

I want to add the legend to my Calendar heatmap. However, currently the legend only contains three elements
≥ 0
≥ 9
≥ 200
as shown in below

capturehetamap

Find the below code
var cellSize = 16,
legendElementWidth = cellSize*2;
var colors =[
"rgb(255,255,191)",
"rgb(225,255,202)",
"rgb(217,239,139)",
"rgb(166,217,106)",
"rgb(102,189,99)",
"rgb(26,152,80)",
"rgb(244,109,67)",
"rgb(0,104,55)",
"rgb(215,48,39)",
"rgb(165,0,38)"
];
var legend = svg.selectAll(".legend")
.data([0].concat([0,9,200]), function(d) { return d; });

	legend.enter().append("g")
	    .attr("class", "legend");

	legend.append("rect")
			.attr("x",
			 function(d, i) { 
			 	return 30 * i; 
			 })
			.attr("y", 120)
			.attr("width", legendElementWidth)
			.attr("height", cellSize / 2)
			.style("fill", function(d, i) {
			 return colors[i]; 
			});
	legend.append("text")
			.attr("class", "mono")
			.text(function(d) { 
				return "≥ " + Math.round(d); 
			})
			.attr("x", function(d, i) { return 30 * i; })
			.attr("y", 137);
	legend.exit().remove();

Thanks & Regards,
Rekha G

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants