The dataset includes details about natural calamities that occurred in the United States from 1950 upto current time. This dataset was curated by National Oceanic and Atmospheric Administration and is available here. It has around 20 distinct attributes which includes attributes like the type of event that occurred, location of occurrence - state and county along with lat-lng, time of occurrence, injuries or fatalities caused by the incident and some more nominal data like news headlines in which the incident was featured. The number of records in the dataset is ~1,500,000. The dataset is split into 70 csv files which were merged together into one 'compositeStorms.csv' file

Visualization design

Natural calamities have more to do with the geographical locations of places and not just names and numbers. Accordingly, I chose a map visualization which shows how many incidents had occurred in every state. This kind of visualization would help the user to understand which regions of the country experience more incidents, something which a simple bar chart or pie chart would not have been able to convey effectively. Some of the records had the county names/fips garbled while some other records simply had no lat-lng information. Dropping these rows was significantly reducing the dataset size and hence I was restricted to visualize only the state level instance count and could not implement the county level breakdown. One conscious design choice that was made here was to use d3.interpolateGreys for the color scale since it is known that differences in black/white or the value component of HSV are better perceived than those in color scales.

My initial plan was to provide a radio checkbox for the user to select what kind of events to see - tornadoes, avalances, thunder storms, etc. However as I scanned through the dataset, I realised that there were around 20 to 30 different types of incidents recorded which made the checkbox widget unfavorable. This led me to keep this breakdown of incidents by type for a detail-on-demand kind of interaction and show only the aggregate incident count on the main map visualization. Since the data for time of occurrence of the events was also available, a time slider was also a natural choice. Instead of using a single time slider, I opted for a time range slider so that it would be possible to view the details of incidents over a time range and not just in a single year or so. The time range slider was linked with the map visualization to dynamically update it. Tooltip was also used on the map to help the user identify which state the user is looking at and what is the value that the map is visualizing. Without assuming any intuitiveness of my interface, a pointer was also provided on the tooltip as to what to do next to see more details.

The Details panel shows the breakdown of the incidents as per the type of incident, for the chosen state and for the chosen time range. Additionally, radio checkboxes were also provided to get an idea of the damage caused by different kinds of incidents. One design choice was made here to not sort the fetched values by the value, but to sort it by the event name. The idea was that this would help the user to scan through the incidents and the damage it caused in a flow, without having to search the event name again on toggling between 'Instances', 'Injuries' and 'Deaths'. The initial plan was to also link the time range slider with the details panel for dynamic update, but that was putting a lot of load on the database causing visible lag. This plan was thus dropped and instead to refresh the details panel, the user would need to click on a state or toggle between 'Instances', 'Injuries' and 'Deaths'.

Backend design

Postgresql was used as recommended for the backend. Web server was implemented using python flask library and the connection between web server and the database was implemented using the psycopg2 library. For the communication between the web pages and the server, d3.json() was used as it encapsulates the javascript fetch API within itself.