Export Image
Export Code

Fork of IMPROVED Scatterplot using react and D3 with DropDown Menu

HaowenWeiJohn

Last edited Feb 13, 2021
Created on Feb 13, 2021

Visualizing the data DefensiveAsylumCases_Dataset1: A scatterplot showing the Number of Wait Time in days from when a case entered the system to when they exited compared to when they entered. The quantitative attribute shows the Decision Code of the case and if you hover you see the wait time in days.

I was previously struggling with getting my dropdown to work with only showing years from a slected year. I saw one of my classmates Taylor was working on a similar idea by filtering groups of years together in her plot Plot launch year/month with menus. This was a huge help to me because it helped me see how to easily filter my data by year and assign them to a group categorical variable so that when I selected the variable in the dropdown only those data point would show!

In addition I was able to get my x-axis to change from showing years when "All Years" is shown to only showing the month (in numberic form) whne a specific year was selected by writing a function for the selction of xTickFormat based on the xAttribute value selected. Orginally (before 10/13/2020) I was having issues with not seeing all the data ploted on the far left hand side, even if it wasn't the correct data. This was fixed by filtering my data on a function called filtered data and then using this filtered dataset to create marks. The idea came from the video lessons on adding a color legend with interaction.

I had to add a function to check if the data was "missing"/null, and if it was I have it output a message for the user-- see 2011.

Lastly, the color legend and interactive color legend were learned via watching the videos for class. I did experiment with trying to use "onclick" instead of onHover, but decided I didn't want to use radio buttons for my legend(not sure a better way to do it?), and so instead went with this rendering.

MIT Licensed