Jamie Tan Javascript challenge submission
Let's add some user interactivity to our data visualisation! To tackle the common problem of serving meaningful data to users when the data collection is too large for manual searching, we have created a webpage with a JavaScript app that dymanically filters a dataset based on user inputs. Coding languages used are JavaScript, HTML, CSS and D3.js.
Level 1 challenge requires building the webpage with a JavaScript app that appends the dataset in a table and allows users to earch through the date/time column to find rows that match user input.
Level 2 challenge takes it further by enabling multiple search categories.
I have conquered both levels. 😅👽
-
Custom web page
-
Javascript code to append a table of 👽 sightings to the web page and adds new rows of data from dataset provided.
-
Javascript code to search through 'date/time' column and find rows that match user input.
-
Website is built to be responsive using bootstrap.
The webpage has all the functionalities of Level 1, with the following additions:
-
Multiple search categories on the following search criterias:
- date/time
- country
- state
- city
- shape
-
Dynamic dropdown options where options for 'state' is dependent on 'country' selection
-
Button to unfilter table and clear input/selection
-
Back to top button for easier page navigation
- JavaScript app (filename: app.js; in folder 'static' and subfolder 'js')
- JavaScript data (filename: data.js; in folder 'static' and subfolder 'js')
- HTML template (filename: index.html)
- CSS files (filename: bootstrap_darkly.css and style.css)
- Images (in folder 'static' and subfolder 'images')