Skip to content

Building an interactive dashboard to explore the Belly Button Biodiversity dataset using JavaScript, D3, Plotly, HTML and CSS.

Notifications You must be signed in to change notification settings

Amarilli/belly-button-challenge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

belly-button-challenge

Background

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

belly button

Horizontal Bar Chart

I used 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.

I created a horizontal bar chart with a dropdown menu to display the top 10 OTUs in a determinate sample.

I used sample_values as the values for the bar chart.

I used otu_ids as the label for the bar chart.

I used otu_labels as the hovertext for the chart.

bar chart

Bubble Chart

I created a bubble chart that displays each sample.

I used otu_ids for the x values.

I used sample_values for the y values.

I used sample_values for the marker size.

I used otu_ids for the marker colors.

I used otu_labels for the text values.

I displayed the sample metadata, i.e., an individual's demographic information.

demographic

I displayed each key-value pair from the metadata JSON object on the page.

I updated all the plots in case a new sample is selected. Additionally, I created a layout for the dashboard.

bubble

I deployed my app to a free static page hosting service, such as GitHub Pages

Gauge Chart

I adapted the Gauge Chart from Plotly to plot the weekly washing frequency of each individual.

I modified the example gauge code to account for values ranging from 0 through 9.

Also, I updated the chart in case a new sample is selected. Here is the result:

gauge

References

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.

Background image: Designed by Freepik

About

Building an interactive dashboard to explore the Belly Button Biodiversity dataset using JavaScript, D3, Plotly, HTML and CSS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published