bellybutton-challenge

JSON, JavaScript, HTML/CSS, D3 Library

Background

In this assignment, you will build 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.

Instructions

Complete the following steps:

• Use the D3 library to read in samples.json from the URL https://2u-data-curriculum-team.s3.amazonaws.com/dataviz-classroom/v1.1/14-Interactive-Web-Visualizations/02-Homework/samples.json.

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

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

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

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

• Update all the plots when a new sample is selected. Additionally, you are welcome to create any layout that you would like for your dashboard.

• Deploy your app to a free static page hosting service, such as GitHub Pages. Submit the links to your deployment and your GitHub repo. Ensure that your repository has regular commits and a thorough README.md file

Advanced Challenge Assignment

The following task is advanced and therefore optional.

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

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.

Citations

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/Links to an external site.

Instructor: Othmane Benyoucef

Color Schemes: Picnic Colorscale

Color Codes: HTML Colors

Async Function: Cleaner Styling

Font-Family: HTML/CSS Style Editing