In this project I built an interactive dashboard to explore the Belly Button Biodiversity dataset, which catalogs the microbes that colonize human navels.
- Javascript
- D3
- HTML
- Plotly
Used D3 to read in sample JSON data from a sample url.
function init() {
//Import json data
d3.json(url).then((jsonDatadata) => {
data = jsonDatadata; // Store the JSON data as a variable
console.log(data);
The dropdown menu had options for 150 IDS from individuals in the sample data.
let dropdown = d3.select("#selDataset");
// Add options to the dropdown menu
data.names.forEach((name) => {
dropdown.append("option").text(name).property("value", name);
});
Created a horizontal bar chart with a dropdown menu to display the top 10 microbial species (also called operational taxonomic units, or OTUs) found in each sample individual.
Created a bubble chart that displayed the OTU values for each selected individual wtih a marker for bubble size and an OTU label on hover.
Showed demographic data for each selected individual, displayed as key:value pairs.
Created a gauge chart that displayed the weekly washing frequency of the selected individual. The data was filtered from
metadata.wfreq
in the json data.
The example gauge code was modified to account for values ranging from 0 through 9.