IMPROVED Scatterplot using react and D3 with DropDown Menu
This interactive scatterplot displays the number of wait-time days from when a defensive asylum case entered the system to its exit, plotted against the entry date, with decision codes encoded by color. A dropdown menu filters the data by year, and hovering over the color legend fades unselected decision codes while tooltips show exact wait times. Built with React and D3 (v5), the visualization uses SVG elements, a time-scale x-axis that switches from year to month/day formatting depending on the selected range, and filters the dataset to show a "no data" message when a year has no entries. The dataset is loaded from a CSV URL.
AI-generated descriptionVisualizing 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.