https://github.com/arosas17/ufos

Here, a small article of UFO sightings was created with a table data of past sightings. Filters were added so that searching for something would be made easier.
https://github.com/arosas17/ufos

Last synced: 1 day ago
JSON representation

Here, a small article of UFO sightings was created with a table data of past sightings. Filters were added so that searching for something would be made easier.

• Host: GitHub
• URL: https://github.com/arosas17/ufos
• Owner: arosas17
• Created: 2022-09-04T19:32:44.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-14T18:36:11.000Z (about 2 years ago)
• Last Synced: 2023-12-24T08:30:58.236Z (11 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.53 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# UFOs

## Overview 

In the process of setting up a journalism article about UFO sights, data was received in a JavaScript file about current information on UFO sightings throughout the US and CA. Although the data file is not massive, there is enough data that it could be disorganized. In addition to the disorganization, the article will be publicly displayed online. Thus, in order to organize the data, a table was created in an html file to hold the data as well as filters for multiple categories to even further the organization.

## Results 



The layout the webpage has a fairly simple layout. The filters added have been made to show to the left of table, with placeholders found within the input boxes. In order to use the filters, all that needs to be done is to type into one, or multiple, of the boxes. The code ```d3.selectAll("input").on("change", updateFilters);``` is made to activate the updateFilters function upon any changes that occur within the "input" element. The table will then change after clicking out of the box or by pressing the enter key. Depending what the viewer wants to look at and filter out, the search boxes will direct them to the appropriate category.

                        **Before Filter is Activated**                                                             **After Filter is Activated**


      

In the example images above, if a person wants to look at all the UFO sightings in Canada. They would go to the filters and input "ca" into the search box under the "Enter Country" text. That person would then activate the filter.

## Summary

Overall, the webpage operates as it should. The text is displayed properly, coloring is applied, and the table filters base on the input boxes on the left. One takeaway from this new design is that the removal of the search button, which may initially throw a person off. People are more accustom to using, or at least having, a button to search or filter something after typing in the search/filter terms. An example would be the Google homepage, there exists button that would allow a person to search. Other ways that it may be improved it to add in a method to sort the table. There are a few pieces of information that would be helpful to see in an ascending or descending order, particularly date and duration. Furthermore, the borders around the search criteria could be improved visually. The borders are much longer in length than the input boxes, so it can be visually enhanced by simply decreasing the length of the borders so that it fits more snugly around the search criteria.