Heatmap Challenge, Help Needed

Q1. How did they get the numbers for the color scheme rectangles that are under the chart?

I’m struggling with these d3 projects, and I’m doing my best not to look at the code in the example for help.

I try to read the d3 documentation, but there’s a lot of it, and trying to find what I need is not easy. I also try to research online for answers, but there far and few between unless I’m researching in the wrong manner or for the wrong things. I did find a video by FCC explaining how to do the heatmap, but I didn’t know if it would be okay for me to watch it and then continue with the challenge. I really want to be able to code well, but these d3 challenges are taking me much, much, longer than I want.

Q2. With that being said, is it okay to watch the FCC video about how to do the heatmap or should I just continue trying to get the heatmap to work without watching it?

Any advice on top of answering those questions will be welcomed.

Here’s the link to the Heatmap example for your convenience:

Here’s a link to my project:
https://codepen.io/nwbnwb/pen/wvGVdpQ?editors=0010

If you could post a link to your project, we might could offer more specific help, but don’t feel too bad as the heatmap is more difficult than the previous two projects.

The legend is a series of rectangles drawn on a line and colored according to a scale. So you decide how wide a temperature range you would like for each color on your scale, draw the rectangles, and fill them with color values from a color scale. Creating the scale for the legend is very similar to creating a scale for an axis, and you can transform it around the drawing just like the axes (or put it in a separate div even).

The colors will need to be interpolated from your scale with an interpolated color scheme. The documentation is terse to say the least. I used my scale’s .interpolator() method with the d3.interpolateBlues color scheme on my choropleth, for instance. This process will map a color to a range of temperature values in your case, which you can use of fill a rectangle.

Lastly, make sure that whatever examples or tips you use match the version of D3 that you use in your project. The link above is for D3v6, but a lot of the material I have seen uses older versions and there are significant differences between versions.

Jeremy, thank you for trying to help me.
I added a link to my project in the main post.

I picked 5 colors for my color theme.

I’m trying to use v6 of D3 and I think that is why it’s making it harder on me. I wish the D3 documentation went into more detail and such. The examples they do have for different things are in Observable which I find is making it harder for me to figure out what is what (what is Observable code and JS code).

Jeremy, I’m also having trouble figuring out how to get the rectangles to spread across the chart in the appropriate spots.

Looks better every time I check it. You’re getting one column of rectangles because you have

   .attr("x", d => xBandScale(d.years))

instead of

   .attr("x", d => xBandScale(d.year))

at line 201. When you get ready to apply your color scale, just add a call to your color scale function in place of "red" at line 194:

.attr("fill", "red")

but it should be style instead of attr.

Mine drew black rectangles forever as I worked on other parts and researched D3’s coloring functions.

A note of caution: D3 likes to silently not do stuff when there’s a problem, like with the d.years instead of d.year above. I have broken stuff countless times with a typo or other mistake and then had to search for the error. You can find the errors in your browser’s console when working locally, but I don’t know how to get them when using codepen.

@jeremy.a.gray

Thank you for helping me. Do you know how the numbers for rectangular color scheme in the example codepen were calculated?

“2.8, 3.9, 5.0, 6.1, 7.2, 8.3, 9.5, 10.6, 11.7, 12.8” … I’ve been trying to find out how these are calculated. ?

The example authors used

function (min, max, count) 
{
  var array = [];
  var step = (max - min) / count;
  var base = min;
   for (var i = 1; i < count; i++)
  {
    array.push(base + i * step);
  }
  return array;
}

at line 288 in their javascript and called it with the min and max temperatures and the number of colors in their scale. This was the domain of their color scale. They were borrowing from an example by the author of D3.

You can draw the legend how you like, as long as there are 4 colors. My legend has 14 colors corresponding to variances from -7 to +7 Celsius and I just set my color scale domain to [-7, 7].

Okay.
It seems they added the base temperature to the variance (which is in celsius) to get the celsius for the month.

If I add the base temperature to each variance and find the min and max values, my colorSchemeNumbers are going to be different than there numbers.

So should I create a function for .style that will return the appropriate color based on the degrees (basetemp + variance) for the month?

Yes, that’s how to calculate the temperatures. You may have different numbers on your scale if you use a different number of rectangles, but as long as you are using temperature (not variance) for the scale they should be similar to the example.

And yes, you’ll need a function that converts your temperatures to a color and it should be the same function for the rectangles on the heat map and on the legend.

I successfully got the cells to map to my colors.
But, not to put the information you gave to waste, I decided to try to use one of the d3 color schemes. I couldn’t get it to work at first. But I reread your input, and found a page on d3 that helped me produce this code:

const divergingColorScale = d3.scaleDiverging();
   
   divergingColorScale
    .domain([d3.min(mV, d => d.variance), d3.mean(mV, d => d.variance), d3.max(mV, d => d.variance)])
   .interpolator(d3.interpolateRdBu)

But, I’m not quite for sure how to convert that into the legend so that it passes the FCC test for at least rect of 4 colors. …
Any thoughts on the top of your head for how to do that?

There’s probably a way to create a single rectangle that shows the interpolator color scale but that wouldn’t past the test.

You’re right; you need multiple rectangles.

Roughly speaking, to create my legend I drew an axis with the same type of scale, domain, range as my color scale and transformed it to where I wanted it (just like you do with the x and y axes). Then, I drew rectangles corresponding to each step in the scale and filled them with the same color scale I used on the heat map cells.

Since my legend showed variances from -7 to +7, I used a domain of [-7, 7] and drew an axis with integer ticks, then above the axis drew 14 rectangles for each step and filled them with the color returned for the corresponding temperature from the map’s color scale.

My diverging color schemed worked, but I commented out the code for it and chose to go with the five color scheme I created and I did my best to calculate the color scheme scale.

Thank you for all your suggestions and help.