Dana is a data journalist writing about her hometown McMinnville, Oregon. Her hometown is famous for UFO sightings and even has an annual gathering of UFO enthusiasts. For this project, I have been helping her analyzing and scraping a set of data in JavaScript format. We have created an app to deploy JavaScript functions to loop through and filter the data, and then created a HTML file to populate the data table using JavaScript. On the HTML file, we added a filter button to filter data on date. Finally, we also used Bootstrap and CSS stylesheet to customize the visualization.
The purpose of this challenge is to provide a more in-depth analysis of UFO sightings by allowing users to filter for multiple criteria at the same time. Besides date, I also added city, state, country and shape. In addition, I have removed the button and set the form to update automatically when the input of filter changes on the website.
- The very top part is a navigation bar with text “UFO Sightings”.
- Right below vav bar is a jumbotron written “The Truth Is Out There” with an image background.
- Next section has two parts of content: left section has a header “UFO Sightings: Fact of Fancy?” and a sub-header “Ufologists Weigh In”; right section contains a paragraph of information.
- The bottom left section is the filter input form, where users can input one or multiple filters by date, city, state, country and shape.
- The bottom right section is the data table, which updates with filter inputs.
Click HERE to access to the website.
-
In Filter Search section, input desired date,the table will update to results by that specific date.
-
OR, enter any other one or any multiple filters, press Enter, the data table will update to filtered data.
-
Click top of the page “UFO Sightings” in nav bar to reset the filter form and data table.
The users must have basic knowledge of the data before conducting a search. For example, the user must know the available date, cities, states, countries, and shapes in the dataset in order to get data returned. If the users randomly type a city that she/he wants to search for, for instance, Honolulu, she/he will get nothing returned becasue Honolulu is not available in the dataset.
- To address above drawback, it would be better if there’s a drop-down menu/list for each filter. Therefore, the users will know available elements within each filter to avoid typing invalid input.
- It would be a more optimal user experience if there is a button at the bottom of Filter Search Section to confirm the search action.
- Another recommendation for development in the future is that we can remove the Filter Search Section and implement drop-down filter menu on the table header. Each filter has a drop-down, users would be able to filter the data directly in the table.