UFO Data Exploration Site with Filters

Creates a styled website with an interactive table based on a dataset of reported UFO sightings. Uses javascript (and d3), html, and css.

Github Repository

Page loads with dynamic header, then user filters table for sightings located in El Cajon, CA

HTML, Javascript (D3) to load table into main page

function buildHTMLTable(incomingData) {
  //remove leftover rows
  var oldRows = d3.select("tbody").selectAll("tr");
  oldRows.remove();
  //Print table
  var printTable = d3.select("tbody");
  incomingData.forEach(function (tableObject) {
    //Make a row for each object in table
    var row = printTable.append("tr");
    //Print values within each object
    Object.entries(tableObject).forEach(([key, value]) => {
      var cell = row.append("td");
      console.log(value);
      cell.text(value);
    });
  });
}

Input filters listen for inputs and rebuild table using javascript

function runEnter() {
  //Prevent the page from refreshing
  d3.event.preventDefault();

  //Select the input element and get the raw HTML node
  var dateField = d3.select("#datetime");
  var cityField = d3.select("#cityInput");
  ---snip---
  //Get the value property of the input element
  var dateValue = dateField.property("value");
  var cityValue = cityField.property("value");
  var stateValue = stateField.property("value");
 ---snip---

  //Filter array for final table
  //Set to full data set to start
  tableFiltered = data;

  //If dateValue.length > 0, filter for date
  let dateFilter = [];
  if (dateValue.length > 0) {
    tableData.forEach(function (item) {
      //console.log(dateValue);
      if (item.datetime === dateValue) {
        dateFilter.push(item);
      }
    });
  }
  ---snip---
  //Establish array to store filtered by state data
  let stateFilter = [];

  //If state field has a value, filter for state
  if (stateValue.length > 0) {
    tableFiltered.forEach(function (item) {
      //console.log(stateValue);
      if (item.state === stateValue) {
        stateFilter.push(item);
      }
    });
    tableFiltered = stateFilter;
  }

---snip---

  //Possibility: none of the filters narrowed down tableFiltered, so original table should be output
  if (tableFiltered === data) {
    buildHTMLTable(tableData);
  } else {
    buildHTMLTable(tableFiltered);
  }
}