Build a dynamic dashboard to analyze human navel bacteria using JavaScript, Plotly, D3, HTML, CSS, and Bootstrap.

The project builds an interactive dashboard to explore the Belly Button Biodiversity dataset, which catalogs the microbes that colonize human navels. It will identify the top 10 bacterial species in their belly buttons to help in research of manufacturing sythetic beef.

The interactive dashboard will review the data with:

• Display the Test Subject's demographic information.
• Table displaying each key-value pair from the metadata JSON object on the page.
• Interactive dashboard such that when a new data was selected from the dropdown, the charts display the change
  • Horizontal bar chart with the top 10 OTUs found in that individual.
  • Bubble chart that displays each sample.
  • Gauge Chart with the weekly washing frequency of the individual.

The webpage is mobile optimized using the grid framework of BootStrap 3.3.7.

• Data Source: "Belly button samples data" information stored in a javascript file.
• Software/Libraries: HTML/CSS, JavaScript, Visual Studio Code 1.49.1, BootStrap 3.3.7, D3, Plotly 4.11

Link to deployed webpage: "Belly Button Biodiversity Dashboard"

Initial page appearance when landing on the webpage The data on the page shows details about Test Subject ID No.:940

Filtered Data Example Page appearance when filtered with Test Subject ID No.:962. The information in the bar cart, gauge chart and bubble chart including demographic information changes with selection of "Test Subject ID No: 962" from the dropdown menu with hover feature active for bar and bubble charts.