Creates a styled website with an interactive table based on a dataset of reported UFO sightings. Uses javascript (and d3), html, and css.
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);
}
}