UFOs
Overview of the UFO sighting: Filter UFO sightings on multiple criteria
Here I build a table using data stored in a JavaScript array. I have also create filters to make this table fully dynamic, meaning that it will react to user input, and then placed the table into an HTML file for easy viewing.
I have customized my webpage using Bootstrap, adding specific CSS components to the stylesheet such as applying a background color to the page , adding an image to the jumbotron and equipped my table with several fully functional filters that will allow users to interact with our visualizations.
Results:
Resources:
Software: HTML/CSS, JavaScript, BootStrap 4.0.0
UFO Website :
The website link deployed in github is https://nishatsultana3538.github.io/UFOs/
Using two javascript file app.js , data.js, one css file style.css and html file index.html I made the website to filter data for UFO sightings in different cities , shapes and time.
Below is how the website looks like
On ipad air
The website has 5 filter options to filter the data
in where previous filter button
was removed.
How to search in the UFO website :
Using different filter criteria we can get data depending on which filter options we use. We can also use one search field or multiple search field combined to narrow down the result. Using different date only in the Enter date search filed we can get data of different dates UFO sightings. Here are UFO sightings data for different dates.
Here is UFO sightings data for 1/10/2010 and only in California state:
Here is UFO sightings data for California state and triangle shape:
Here is UFO sightings data for 1/12/2010 and only in California state and with fireball shape:
Summary:
Drawback of this webpage
-
One drawback of the webpage is that user don't know what parameter to use to filter the data. They have to look at the data to use a filter option.
-
Another drawback is that search area has some data already shown which seems confusing and also the search data need to be cleared to re-input again.
Two additional recommendations
-
Using a dropdown menu in the search option will be easier to choose from.
-
The search field need to be cleared after one search has done.