Kokolipa / belly-button-challenge

Building an interactive dashboard to describe and explore the Belly Button Biodiversity dataset using JavaScript and HTML. 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 Challenge

Project description:

Building an interactive dashboard to describe and explore the Belly Button Biodiversity dataset using JavaScript and HTML. 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.

Dashboard Creation Process:

The JavaScript (app.js) plays as the backend of the dashboard and is divided into two funnels:

1. Data funnel: To extract, transform, and load the data subsets to the dashboard's corresponding HTML tags and visuals.
   • How?
     • Calling the Belly Button API to GET the data response and divide it into three main subsets using D3.json(URL):
       • metadata
       • names
       • samples
     • Mapping the subsets to extract relevant fields for the dashboard's visuals and assign the filtered subsets to the variables created in the global scope ("sampleData" and "metaField").
     • To push all the sample IDs to the HTML tag, I used document.getElementById and referred to the corresponding HTML-dropdown-tag and assigned it to a variable; I then used the forEach to "loop" over the items and pushed them one by one to create a new option using document.createElement.
     • Finally, for convenience, I chained the catch function to D3.json(URL) to catch errors while working on and with the dataset.
2. Data visuals: To create an interactive dashboard, I made a function that plots a visual based on one condition: if the selected value lives within the subset, filter the results and use the return value to plot the visuals for the dashboard.

Libraries used:

1. Plotly
2. D3

Languages used:

1. HTML - Frontend
2. JavaScript - Backend

Dashboard Image:

Folder structure:

.
├── js-belly-button
│   ├── Images 
│   |   ├── belly_dashboard.png
│   ├── static    
│   |   ├── .gitkeep
│   |   ├── app.js # This is the backend code for the dashboard
│   ├── index.html # This is the frontend
│   ├── samples.json # This json file contains the data used for the project                              
|___.gitignore               
|___README.md