Tracking UFOs with Javascript

Build a Webpage that Helps Enthusiasts Track UFO Activity using Javascript, HTML & CSS

Goals • Tools Used • Analysis and Challenges • Results • Summary

Goals

After helping build a webpage with a dynamic table containing UFO data, the client wants to expand the search functionality to more categories. I plan to use the following languages to create/modify the webpage and import the data contained in the javascript file:

HTML
Javascript
CSS

These tools will add in-depth analysis of UFO sightings by allowing users to filter for multiple criteria at the same time. I'll build this table using data stored in a JavaScript array with filters to make this table fully dynamic, meaning that it will react to user input, and then place the table into an HTML file for easy viewing. Finally, I'll customize the webpage using Bootstrap, and equip the table with several fully functional filters that will allow users to interact with our visualizations.

Tools Used

Javascript: Programming language used for creating visually appealing and dynamic web content
HTML: Hypertext Markup Language used to build and design webpages
CSS: Creative Style Sheets add dynamic visual styling to html webpages

Analysis and Challenges

Because I had to account for multiple search criteria, I took the following steps to modify our app.js:

Created an object to store any entered search terms

// 1. Create a variable to keep track of all the filters as an object.
let filters = {};

Build a function to loop through the filters object and rebuild the table:

// 7. Use this function to filter the table when data is entered.
function filterTable() {
  

  // 8. Set the filtered data to the tableData.
  let filteredData = tableData;

  // 9. Loop through all of the filters and keep any data that
  // matches the filter values
  Object.entries(filters).forEach(([key, val]) => {
    filteredData = filteredData.filter(row=> row[key] === val);
  });

  // 10. Finally, rebuild the table using the filtered data
  buildTable(filteredData);
}

Replaced the d3 event with the following in order to capture any changes since we got rid of the 'filter' button:

// 2. Attach an event to listen for changes to each filter
d3.selectAll("input").on("change", updateFilters);

Results

This webpage would be perfect for planning a UFO sighting adventure. The filters allow for a user to plan an itinerary by filtering States, Cities, etc.

Here's how my complete set looks:

If we want to help an UFO enthusiast plan a quick trip to any fireball sightings in California, we can first filter by state ('ca'):

We can then filter by shape ('fireball'):

Presto! We have a roadtrip!

Summary

This webpage presents a very useful way to navigate the extensive dataset of UFO sightings over the years. One big drawback to the changes we've made is the absesnse of any buttons on the page. Here are some slight tweaks we're suggesting to improve user experience:

Add a 'Clear Search' button in the index.html file below our filter table, with accompanying javascript that will clear our filters on the event of a button click. This will allow an easy way for the end user to perform multiple queries without having to reload the page
Allow the user to sort the table by each column. We can accomplish this by adding a sort form under the filter form on the left hand side with input boxes asking for the column and whether they want ascending or descending order