Skip to main content
100%

Scatterplot using react and D3 with DropDown Menu Filtering WORKING

✓ Published3🌍 Public

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 description

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.

The Next thing I need to fix is to filter my data to only show each cases 1st appearance since this data for entrance date is the same for every occurrence of a case this causes there to be those long vertical lines.

MIT Licensed

Similar vizzes