Scatterplot using react and D3 with DropDown Menu Filtering WORKING
A scatterplot of asylum case data shows wait time in days against case entry date, with each point colored by decision code. A dropdown menu filters the visualization by year, changing the x-axis tick format from years to months when a specific year is selected. Built with React and D3 v5, the chart uses `scaleTime` and `scaleLinear` for axes, SVG circles for marks, and React state management to handle filtering through the `react-dropdown` component. Data comes from a CSV file loaded via D3's `csv` function.
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.