The cost of damage of Hurricane Harvey is amongst the highest in recent history (in the last 37 years).
The original data visualization on New York Times is shown in the video below.
The data can be re-represented in the following format with greater clarity:
A heatmap with a linear colour scale (Red Hue from pink to black) to show extent of damage (cost). Pink was used instead of white because white cannot be seen on white background.
Ideally, a colour legend should reflect the scale of damage (Tried to get it up, but it was not displaying).
The Hurricane Harvey is highlighted in yellow to spotlight and allow users to compare with other disasters.
The timing, frequency and distribution of the disaster (Year, Month) can be interpreted based on the positions of the cells.
Users can hover over the cell to view more information in the tooltip. This removes clutter and keeps the user focused on the key information on the cost of damage.
Information on the comparison with the top disaster with the highest cost of damage is shown in the tooltip.
Additional barplots at the bottom) are shown to illustrate the top 5 disasters with highest cost of damage, which is used to compare with the costliest disaster in recent history.
However, there are limitations for these visualizations:
The heatmap does not show the type of disaster. A possible solution is to colour the border of the cell accordingly to reflect the nature of the event. However, this may make the visualization more cluttered, messy and confusing. The best solution is to facet out the natural disasters (one heatmap for each, and one for overall like this one).
There might be some disasters that occur at the same time that cannot be visualized. Possible solution includes splitting the cell vertically into the 5 slices, each representing one natural disaster (In fact there are 8 from the original source NOAA). However, it may not totally resolve the issue of overlapping events of the same nature.
Linked interactivity between the two charts shown, and a focus slider that slides across a chronologically ordered barchart (x-axis: date of disaster, y-axis: cost of damage) will help users to better navigate through the natural disasters.
This interactive graph is designed by Ong Kian Eng using d3.