DU - DA Module 14 "belly-button-challenge"
An Interactive Dashboard Exploring Belly Button Biodiversity

Using HTML(PyCharm) and JavaScript(Visual Studio Code)

by Laura Vara

Note: For the grading department, I deleted the repository where I had deployed the website according to the notes I sent when submitting, and I just made it here. I didn't know it was possible, but I managed to do it. The dashboard's link is in the description of this repository and in this read me file, right below this statement. Thank you.

Live Static Belly-Button-Challenge HTML Deployment website: https://vara-co.github.io/belly-button-challenge/

The goal of this assignment was to build an interactive dashboard to explore a Belly Button Biodiversity dataset, which catalogs the microbes that colonize human navels. This dataset contains a small number of microbial species to which in this project, we'll refer to as OTUs. These have shown, via this dataset, that are present in more than 70% of people.

Index

1. Content of the repository
2. Instructions for the Challenge
3. References

Content of the repository

• index.html <-- This is the HTML used for this project, with some changes to deploy as a static wesbite.

• samples.json <-- This is the database JSON file with the data used for this project

• js directory:

  • app.js <-- This is the JSON file that makes the charts be interactive with information from the database provided. (Note that for the paths that connect the HTML with the app.js file, these files have to be in this same order. Othewise you would have to redefine the file paths in your code.)

• Images directory: This directory has several .png images provided. I used bacteria.png to add it to the HTML website. It was not part of the instructions, but I did it anyway.

Instructions

The instructions for this challenge are divided into the following subsections:

1. Use the D3 library

• Read in samples.json from the URL: https://static.bc-edx.com/data/dl-1-2/m14/lms/starter/samples.json

2. Horizontal bar chart

• Create a horizontal bar chaert 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.
• It should look like this:

3. Bubble Chart

• 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.
• It should look like this:

4. Metadata

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

5. Key-Value Display

• Display each key-value pair from the metadata JSON object somewhere on the page.
• It should look like this:

6. Plots should be updated

• Update all the plots when a new sample is selected from the dropdown menu. Additionally, you are welcome to create any layout that you would like for your dahsboard.
  
• This is an example dashboard:

7. Website Deployment

• Deploy your app to a free static page hosting service, such as GitHub Pages. Submit the links to your deployment and your GitHub repo.

Advanced Challenge Section (Optional with no extra points)

• Adapt the Gauge Chart from the plotly.com site, to plot the weekly washing frequency of the individual.
• You will need to modify the exapmle gauge code to account for values ranging from 0-9.
• Update the chart whenever a new sample is selected.
• (NOTE: These lines of code, in the original HTML were commented out to avoid errors, as I did not do this bonus section. However, I might try in the future when I have more experience with JavaScript.)
• This bonus section should look like this:

References for the belly-button-challenge

Most of what's in this challenge, was covered in class.
The few things that either weren't or we had to reference to, are described with it's source right below.

• Bar and Bubble Charts:

  • https://plotly.com/javascript/bar-charts/
  • https://plotly.com/javascript/bubble-charts/

• Plotly Color Scales. The one used for the Bubble Chart was "Earth":

  • https://plotly.com/python/v3/matplotlib-colorscales/
  • https://community.plotly.com/t/what-colorscales-are-available-in-plotly-and-which-are-the-default/2079/2
  • https://plotly.com/python/builtin-colorscales/

• HTML Style changes:

  • https://htmlcolorcodes.com/
  • https://www.w3schools.com/css/css_font.asp

• Deploying a static HTML on Github:

  • https://docs.github.com/en/pages/quickstart
  • https://www.youtube.com/watch?v=OltY8JIaP-4

---