Let's discuss your "Heat Map Visualization"

Let's discuss your "Heat Map Visualization"


Greetings, Fellow Campers!

This topic is for listing and review of Heat Map Visualization projects built as a part of FCC challenges. Please stick to these basic rules to keep the topic clean:-

  • Post your Codepen (or other) link to your project as a general reply to this topic.
  • For Codepen links use the following format to avoid embedding the pen:-
Project Link - [http://codepen.io/santakmishra/full/pgqOYq/](http://codepen.io/santakmishra/full/pgqOYq/)
  • Post reviews as a specific reply to the link which you are reviewing.


Project Link = http://codepen.io/mtroiani/full/aNEMQb/


Project Link - http://codepen.io/d33con/full/ZOrBPK/


Here is mine. I managed to replicate the original, though something about my scale/domain is different, as you can see in the slight difference in the legend.

Project Link - https://codepen.io/chrismarro/full/amzNvZ//


one thing I did notice, the example project “fades” nicely into view. I may have to revisit this and attempt that.



Could someone explain to me how to achieve this challenge ?

I did the first two graphs but this one is accelerating my balding process.

Can you just tell me, in English (not the code), the steps you went through ?


Project Link => http://www.aungmyokyaw.com/FCC-D3/HeatMap/
Source Code => https://github.com/AungMyoKyaw/FCC-D3


Hi folks,

I am almost done with this graph. However, I don’t understand why the colors behave like they do in the following project.

Project Link - http://codepen.io/bubulblu/pen/ALOrzx/

Could someone explain me

  • Why the colors display as such ?

  • How to display the legend’s colors ?

Thank you.


@bubulblu I could be completely wrong, but it doesn’t look like your domain is matching up with your range and you’re getting some odd interpolation from D3. If I were you I would try hard coding a range as just a [“cold color”, “hot color”] and then just match them to the max and min of the temperatures in the domain. From there, you can start adding in colors and matching temperatures to fine tune the style.

Here’s my version for good measure: http://codepen.io/TungstenNo74/full/WrMzJr/



Thank you !

I followed your advice and indeed, I get it right.


Project link: https://codepen.io/neotriz/full/PGOLBb/


Project Link --> https://codepen.io/BrusBilis/full/BLYXdR


Project Link - http://codepen.io/Josh5231/full/JRQLGY/


Project Link - https://codepen.io/cjsheets/full/EgqrVE/

Created a gradient effect.


Project Link


=> Heat Map




Finished mine!:

Project Link - http://codepen.io/chemok78/full/qRXmWX/


Here’s my heat map:


Project Link - Visualize Data with a Heat Map
welcome to feedback:grin: