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

Adding Legends to the calendar heatmap #24

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

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
2 participants