Khulood Alkhudaidi
The goal of this assignment is to create multiple views and link them where interactions in any given view updates the others. That allows the user to explore different parts of the data between views.
https://khulood20.github.io/04-multiple-views/index.html
I chose to visualize data for Suicide Rates Overview 1985 to 2016 [1]. It has 27821 items, so I visualized the average of the first five years, namely (1985 -1990). I started with a code [2] from bl.ocks.org. The code has a bar chart, so I created a scatter plot, linked them together, and added interaction between them.
- For the scatterplot side: A brush was created so that when the user brushes the scatterplot, the bar chart gets filtered.
- For the bar chart side: a hover event was added so that when the user hovers over a bar, the corresponding circle in the scatterplot is colored in red.
- Linking and Filtering through brushing technique
- Coloring scatterplot circle when hovering on a bar
- A blue gradient color for the bar chart from light to dark to indicate the high to low suicides rate
- Animating the bars when filtering
- Using google fonts
A sketch and a color palette:
