/Belly-Button-Biodiversity

Using Plotly with javascript to visualize the diversity of bacteria present in any individual's belly button

Primary LanguageJavaScript

Belly-Button-Biodiversity

Project Overview

Roza has a partially completed dashboard that she needs to finish. She has a completed panel for demographic information and now needs to visualize the bacterial data for each volunteer. Specifically, her 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, Roza's volunteers will be able to identify whether that species is found in their navel.

Results

Bar chart

Creating 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 displays 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. Del1_final.png

Bubble chart

Creating 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. Del2_final.png

Gauge chart

Creating a gauge chart that displays the 'weekly washing frequency' of the belly button 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. Del3_final.png

Customizing the Dashboard

1. Three different customizations are added using HTML and bootstrap.
  • An image is added to jumbotron
  • A background color is added to the webpage
  • Customization is added to the

    tag so the text below the title stands out
    These three changes are highlited in the image below:

Del4_html_img.png

2. When the dashboard is first opened in a browser

ID 940’s data is displayed in the dashboard, and the three charts are working according to their requirements. Del4_final.png

3. When a sample is selected

The dashboard displays the data in the panel and all three charts according to their requirements.
The image below shows the display when ID 1278 is selected:
ID-1278.png