An interactive dashboard to explore the Belly Button Biodiversity dataset, which catalogs the microbes that colonize human navels. Our volunteers should be able to identify the top 10 bacterial species in their belly buttons. That way, if Improbable Beef identifies a species as a candidate to manufacture synthetic beef, the volunteers will be able to identify whether that species is found in their navel.
The dataset reveals that a small handful of microbial species (also called operational taxonomic units, or OTUs, in the study) were present in more than 70% of people, while the rest were relatively rare.
We started with JavaScript, Plotly, and D3.js to create a horizontal bar chart to display the top 10 bacterial species (OTUs) when an individual’s ID is selected from the dropdown menu on the webpage. The horizontal bar chart will display the sample_values as the values, the otu_ids as the labels, and the otu_labels as the hover text for the bars on the chart. Our Javascript code and results are as follow:
Next, we used JavaScript, Plotly, and D3.js to create a bubble chart that will display the following when an individual’s ID is selected from the dropdown menu webpage:
- The otu_ids as the x-axis values.
- The sample_values as the y-axis values.
- The sample_values as the marker size.
- The otu_ids as the marker colors.
- The otu_labels as the hover-text values.
The bubble chart is shown below:
We created a gauge chart that displays the weekly washing frequency's value, and display the value as a measure from 0-10 on the progress bar in the gauge chart when an individual ID is selected from the dropdown menu through the following chart:
Finally, we used Bootstrap features to add vibrance to our interactive dashboard:
- Added an image to the jumbotron
- Added background color or a variety of compatible colors to the webpage
- Use a custom font with contrast for the colors
- Made the webpage mobile-responsive
We added our project to GitHub pages so anyone can run the script without running on a local server.
https://ussyed11.github.io/BellyButton-Data-Visualization/