Posts Interactive Visualization
Post
Cancel

Interactive Visualization

Use the dataset state-year-earthquakes.csv to create an interactive line chart and sub-chart.

This dataset contains the earthquake counts by U.S. state and region, in the years 2010 to 2015 (inclusively). In the data sample below, each row under the header represents a state, its region, year, and count of earthquakes.

Create a line chart.

Summarize the data by displaying the count of earthquakes by region for each year. Sum the count of earthquakes by year for all states in their respective regions.

Axes: All axes should automatically adjust based on the data.

Line styling, legend, and title.

Interactivity and sub-chart. In the next few parts of this question, you will create event handlers to detect mouseover and mouseout events over each dot shape, so that when hovering over a dot, a horizontal bar chart representing the earthquake count for each state in a region will be shown below the line chart (for the year of that dot).

Create a Bar chart

Use a horizontal design for the bar chart, with one bar per state in the selected region. Each bar represents the count of earthquakes for one state in the selected year.

Axes: All axes should automatically adjust based on the data. Do not hard-code any values.

The vertical axis represents states in a region. The state names should be sorted in ascending order on the vertical axis where the state with the lowest amount of earthquakes is at the bottom and the state with the highest order of earthquakes is at the top.

Note: If a region has multiple states with an equivalent count of earthquakes, then order those state names in ascending alphabetical order. e.g., Alabama, Delaware, and Florida have 0 earthquakes in 2013. They will be ordered as:

The horizontal axis represents the count of earthquakes for the selected year. Display these values using a linear scale.

Bar styling and title

The barchart and its title should only be displayed during mouseover events for a dot in the line chart.

The dot in the line chart should change to a larger size during mouseover to emphasize that it is the selected point.

Mouseout Event Handling

The barchart and its title should be hidden from view on mouseout and the dot previously mouseovered should return to its original size.

This post is licensed under CC BY 4.0 by the author.

Trending Tags