A JavaScript Interactive Dashboard
The purpose of this project is to create an interactive dashboard, a creative visualization that offers interactivity which can help the audience better understand the data and draw the same conclusions as researchers and data analyst. The purpose of this research is to gather, identify, and analyze the biological footprint of individuals’ naval and their unique naval bacteria.
The research and data file provided holds data of 153 individuals and their:
- Unique and anonymous IDs
- Demographic details
- Belly button scrubbing frequency
- Belly button biological “footprint”
Raw data from JavaScript array is now displayed in a dynamic dashboard with a pull down menu programmed to allow the user to explore. They can do a deep dive into their own results or compare to others. The dashboard can be found at the link that follows. Please try it on your own.
Belly Button Biodiversity Interactive Dashboard:
🧫 Belly Button Biodiversity Interactive Dashboard: https://mjrotter4445.github.io/Belly_Button_Data/ 🧪
In this development, we used JavaScript as the primary coding language along with Plotly.js library. The combination of the two allows Users to not be required to install additional programs, such as JavaScript, on their computers in order to run the code. JavaScript enables us to create visualizations that are attractive, accessible, and interactive.
- The data for the table is stored in a JavaScript array or list named samples.json
- The table is built by inserting JavaScript into HTML page. charts.js.
- HTML is used to to build the webpage index.html.
- CSS and Bootstrap then builds and styles the page style.css.
- Fire fox Developer Tools are ideal to test the code as we progress through the development.
- Further we use a new Dependency named D3.
- Additionally, we deployed the final results of Belly Button Biodiversity Dashboard on GitHub
This link is above and is an interactive page, so please experiment and try it out!