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

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);
  }
}