Please see below the outline of this homework assingment, to check the final product please visit
https://parttimetriggered.github.io/belly-button-challenge/
This particular exercise was the most challenging to date as I found the jump from Python style progamming language to JavaScript quite hard. Though in the end I managed to create code that I was happy with. Please see both both app.js and bonus.js for required code.
Please note the code is pulling data straight from the AWS link provided, the sample data in the "Data" folder is only there as a reference. Further to this the "images" folder only has placeholder files that were used as a reference at the start of the project.
==========================================================
In this assignment, you will build an interactive dashboard to explore the Belly Button Biodiversity dataset, which catalogues the microbes that colonise 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.
Complete the following steps:
-
Use the D3 library to read in
samples.json
from the URLhttps://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 hover text 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 colours. -
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. An example dashboard is shown below:
- 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
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.
-
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.
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/
© 2022 Trilogy Education Services, a 2U, Inc. brand. All Rights Reserved.