Skip to content

Latest commit

 

History

History
73 lines (36 loc) · 2.25 KB

README.md

File metadata and controls

73 lines (36 loc) · 2.25 KB
Raw

Plot.ly Homework - Belly Button Biodiversity

https://rubalbhullar.github.io/Belly-Button-Biodiversity/

Bacteria by filterforge.com

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

Step 1: Plotly

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

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

    bar Chart

  1. Creating 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.

Bubble Chart

  1. Displaying the sample metadata, i.e., an individual's demographic information.

  2. Displaying each key-value pair from the metadata JSON object somewhere on the page.

hw

  1. Updating all of the plots any time that a new sample is selected.

Additionally, creating any layout for dashboard. An example dashboard is shown below:

hw

Advanced Challenge

The following task is advanced.

  • Adapt the Gauge Chart from https://plot.ly/javascript/gauge-charts/ 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.

Weekly Washing Frequency Gauge

Deployment

  • Deploy your app to a free static page hosting service, such as GitHub Pages.

Hints

  • Use console.log inside of your JavaScript code to see what your data looks like at each step.

  • Refer to the Plotly.js documentation when building the plots.