Plotly.ly-Belly Button Biodiversity

Belly Button Biodiversity - Interactive Dashboard built with HTML, Bootstrap, JavaScript, D3.js, and Plotly.ly.

GitHub Page : divya-gh.github.io/Plotly.ly

Table of contents

• Project Title
• Description
• Objective
• Screen Shots
• Technologies
• Code
• Status
• Acknowledgement
• Contact

Project Title : Belly Button Biodiversity

Description

This project aims at building a interactive dashboard to explore the Belly Button Biodiversity dataset, which catalogs the microbes that colonize human navels..

Data Set

• 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.

Objective

• Update all of the plots below any time that a new sample is selected.
• Deploy the app to a free static page hosting service, such as GitHub Pages.

Step 1 - Bar Graph:

• Create a horizontal bar chart with a dropdown menu to display the top 10 OTUs found in that individual.
  • Use sample_values as the values for the bar chart.
  • Use otu_ids as the labels for the bar chart.
  • Use otu_labels as the hovertext for the chart.

Step 2 - Bubble chart:

• Include the following,
  • Use otu_ids for the x values.
  • Use sample_values for the y values.
  • Use sample_values for the marker size.
  • Use otu_ids for the marker colors.
  • Use otu_labels for the text values.

Step 3 - Demographic information:

• Display the sample metadata, i.e., an individual's demographic information.

Step 4 - Advanced Challenge : Gauge Chart

• Create a gauge chart to plot the weekly washing frequency of the individual.
  • write a code to account for values ranging from 0 through 9.
  • Update the chart whenever a new sample is selected.

Screen Shots

Step 1 - Bar Graph:

Step 2 - Bubble chart:

Step 3 - Demographic information:

Step 4 - Gauge Chart:

Technologies and Tools

• Visual Studio Code Editor
• GitBash, GitHub , Git Pages
• chrome DOM
• HTML , CSS, Bootstrap
• JavaScript

Java Script Libraries :

• D3.js
• Plotly.ly

Code

• Plotly Code

Status

Project Complete

Acknowledgement

• UTSA BootCamp
• Hulcr, J. et al.(2012) A Jungle in There: Bacteria in Belly Buttons are Highly Diverse, but Predictable. Retrieved from: http://robdunnlab.com/projects/belly-button-biodiversity/results-and-data/
• Code credit for Gauge : https://www.instructables.com/Showing-Charts-and-Gauges-of-IOT-Device-Data-Using/

Contact

Divya Shetty