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/

1 Like

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

1 Like

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.

1 Like


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/

1 Like


Thank you !

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

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

1 Like

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


1 Like

Finished mine!:

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

1 Like

Here’s my heat map:

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