Cannot align Choropleth legend Axis with D3

Tell us what’s happening:
So I’ve managed to display the colorbar but I cannot manage to align the axis with the colorbar.

I must be doing something wrong and I cannot seem to find where the issue is.

The solution passes all the tests, but I do not want to move on until I understand why the axis is not aligning

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Challenge: Visualize Data with a Choropleth Map

Link to the challenge:

Here are the places to adjust:

	const Legend = SVG.append("g")
		.attr("class","key")
		.attr("id","legend")
  	.attr('transform', 'translate(0,40)');

This transform moves the whole legend, rects and ticks.

	Legend.selectAll("rect")
		...
		.attr("x", d => colorScale(d[0])+220+'px')

This moves the rects right 220 plus their scale location, but doesn’t affect the ticks or legend placement.

	Legend.append('g')
		.attr('class', 'caption')
		.attr('x', colorScale.range())
		.attr('y', 5+'px')
		.attr('fill', '#fff')
		.attr('text-anchor', 'start')
		.attr('font-weight', 'bold')
		.call(xAxis);

This doesn’t have a transform and is measured relative to the legend, which still starts at the left side of the ticks despite you moving the rects earlier.

Thank you my friend you have opened my eyes :slight_smile:

Happy coding !