Posts Heatmap and Select Box

Heatmap and Select Box

Use the dataset provided in earthquakes.csv that describes the earthquake counts for different states from 2010 to 2015 in the US. Visualize the data using D3 heatmaps.

  1. Create a file named heatmap.html. Within this file, create a heatmap of the earthquakes for different states from year 2010 to 2015 (inclusively). Place the state name on the heatmap’s horizontal axis and the year on its vertical axis.
  2. A heatmap’s color scheme is a very important design element that has a direct impact on the heatmap’s effectiveness. Colorize the earthquake counts for each state, using a meaningful 9-gradation color gradient of your choice.
  3. Add axis labels and a legend to the chart. Place the year (2010, 2011, 2012, etc.) on the vertical axis (i.e. top → bottom: 2010 → 2015). Place the state name (“Alabama”, “Arizona”, “Arkansas”, etc.) on the horizontal axis also in alphabetical order (i.e. left → right: A → Z).
  4. Create a drop down select box with D3 based on the total counts (from 2010 to 2015) of earthquakes of a state. The selections are “0 to 9”, “10 to 99”, “100 to 499”, and “500 or above”. When the user selects a different range in this select box, the heatmap and the legend should both be updated with values corresponding to the selected range. Note the differences in the horizontal axes and legends for “0 to 9” and “500 or above” in Figure 4a and Figure 4b below. While the 9 color gradations in the legend remain the same, the threshold values are different. The default category when the page loads should be “0 to 9”.
  5. Implement a mouseover effect. When the mouse cursor is on a heatmap cell , the value of that cell will be displayed between the chart title and the heatmap.


  • The Earthquake Statistics is from USGS with some modifications.
  • The data provided in earthquake.csv would need to be “reshaped” in such a way that it can produce the expected output. All data reshaping must only be performed in javascript; you must not modify earthquake.csv. That is, your code should first read the data from earthquake.csv file as is, then you may reshape that loaded data using javascript, and then use it to create the heatmap.
  • The threshold values should not be hardcoded.
  • Please feel free to experiment with fonts, placement, color, etc. as long as the output looks reasonable for a heatmap and meets the functional requirements mentioned above.
This post is licensed under CC BY 4.0 by the author.

Trending Tags