D3 Heat Map Legend

JavaScript
1

Hi fCC, I’m having trouble with the legend for the heat map project in the d3 cert.

The issue is that I don’t have much direction for how to efficiently create the legend. What I want to do is something like:

  1. generate an array of values to represent the intervals in the legend,
  2. create a scale for the x-axis (but I don’t really know what to do for the .domain()?),
  3. create the x-axis for the legend using that scale, but the d3 docs are a little confusing imho about how exactly to format numbers on axes, which I’d probably need to do considering that the array I’d generate would store un-rounded floats (for use elsewhere in the code, in particular cleaning up what the code currently does to get the right color in each heat map cell).

Problem is, I really don’t know (1) how to specifically implement this idea, OR, if this idea isn’t feasible, (2) what my other options really are.

I’ve inspected the visible code of the demo to sleuth for clues, and I’ve read relevant posts on this forum, but to no avail. Can any of y’all help?

2

Hi, I have implemented the legend in D3.js to make it easy to understand. Please take a look at the example; it may help you with your problem.
Link : https://codepen.io/imakashram/pen/yLGROVJ

3

Thanks Akash, but after articulating what I wanted here, I actually got it to work myself. Now my code can hopefully serve as a reference for others too lol.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.