umarfoo/belly_button_biodiversity_plotly_javascript

Developed belly button biodiversity dashboard based on data provided using plotly and d3 in JavaScript. The user can select the patient ID from the drop down menu and the selected patient's data is plotted on the dashboard.

Link to the Deployed Website

Click here to see the deployed website.

JavaScript Plotly - Belly Button Biodiversity

In this project, I built an interactive dashboard to explore the Belly Button Biodiversity dataset, which catalogs the microbes that colonize human navels.

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.

Tasks

Step 1: Plotly

1. Use the D3 library to read in samples.json.

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

3. Create a bubble chart that displays each sample.

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

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

5. Display each key-value pair from the metadata JSON object somewhere on the page.

6. Update all of the plots any time that a new sample is selected.

Advanced Tasks

• Adapt the Gauge Chart to plot the weekly washing frequency of the individual.

• You will need to modify the example gauge code to account for values ranging from 0 through 9.

• Update the chart whenever a new sample is selected.