Scatterplot using react and D3 with DropDown Menu |Filtering for OnChange of data not fully working...yet!
A scatterplot of Defensive Asylum case processing times visualizes wait time in days against the Office of the Chief Counsel (OSC) date of entry. The visualization uses React with D3.js to render SVG circles, with axes generated by custom components. A dropdown menu, implemented with `react-dropdown`, allows filtering by year; however, the filtering logic is incomplete, as the displayed data is not updated based on the selected year. The code includes a `filterYear` function that filters data by year using `d3.timeFormat`, but the `onChange` handler only updates the selected attribute without applying the filter to the plotted marks.
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 have gotten bits and pieces to work, separately, but the part I am missing to make this a working visual is for the data filter onChange to only display the data from the year selected. I know my filter works on it's own only give me data for the year I specify, however, something isn't working correcting with the onChange. I assume I am using onChange wrong or will need to add some sort of handler to both filter the data and then display the values of the OSC_DATE for the selected OSC_YEAR.
I hope to have this step figured out by my next visualization.
I am happy to have the dropdown menu working and to have created a function that can filter the data. I just need to figure out what I am missing to connect it all together and hopefully will be close to what I originally envision for my final project.