Use JavaScript, HTML, CSS and Bootstrap to create a website with a dynamic data table. Users can browse various UFO sightings records and filter through five different specifications.
Data resource
Software
- JavaScript, D3, HTML, CSS, Bootstrap
1. HTML webpage and bootstrap
- Use Bootstrap and css to style the content layout and background color.
- Add
idto each user input field, so it can be referenced in the Javascript. - Add
idto the filter button, so it can be referenced by d3.js to listen to the event - Create place holder for the dynamic table.
2. CSS
- Adjust all
<body />text to white. - Beautify jumbotron with select image
3. JavaScript
- Save all data records into a variable
- Get table reference using d3
var tbody = d3.select("tbody"); - Create a
buildTablefunction using a forEach loop- Create a row for each object in data
- Create a cell for each value in the row
- Create a
filtersvariable to hold all filters from user input - Create a
updateFiltersfunction to update the filters list and values- Use d3 to capture the input field from user
- If a filter field receives input, add the Key:Value pair to
filterslist - If no input in that filter field, remove the Key:Value pair from
filters - In this project, we have five filters: Date, City, State, Country, and Shape
- Call
filterTablefunction to build the table with filtered data
- Create a
filterTablefunction which takes in one argument of filter- Loop through all the data and keep only the ones that matches the filter
filteredData = filteredData.filter((row) => row[key] === filtersObject[key]); - Rebuild the table by calling
buildTablefunction with the filtered data
- Loop through all the data and keep only the ones that matches the filter
- Reference the filter button with its
id; use d3 to listen to theclickevent and trigger theupdateFilterfunction - Make sure the table is built with unfiltered data when the page loads
There are many potential areas to work on to improve the UX. For example:
- The current filter system allows only one input value for each field. We could let the user input multiple values, eg.
state: CA, NY, WA. - We could add a drop-down menu/list, or have auto-fill function to facilitate the search experience.
- After the table is filtered, an
export to csvfunction would be very helpful for research purpose.
The screenshot below shows the search result with four filters applied.
