Module 14: Belly Button Challenge

Table of Contents

• About
• Tools
• Key Steps
  • JSON Data
  • Populated Dropdown
  • Horizontal Bar Chart
  • Metadata
  • Bonus

About

In this project I built an interactive dashboard to explore the Belly Button Biodiversity dataset, which catalogs the microbes that colonize human navels.

Tools

• Javascript
• D3
• HTML
• Plotly

Key Steps

JSON Data

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); 
        

---

Populated Dropdown

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);
        });

---

Horizontal Bar Chart

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.

---

Bubble Chart

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.

---

Metadata

Showed demographic data for each selected individual, displayed as key:value pairs.

---

Bonus

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.