https://github.com/wrighang/14_belly-button-challenge

Module 14: Introduction to JavaScript
https://github.com/wrighang/14_belly-button-challenge

arrays conditionals d3 dom-manipulation functions loops objects

Last synced: 11 days ago
JSON representation

Module 14: Introduction to JavaScript

• Host: GitHub
• URL: https://github.com/wrighang/14_belly-button-challenge
• Owner: wrighang
• Created: 2025-01-04T18:13:01.000Z (23 days ago)
• Default Branch: main
• Last Pushed: 2025-01-14T01:48:11.000Z (13 days ago)
• Last Synced: 2025-01-14T02:38:32.280Z (13 days ago)
• Topics: arrays, conditionals, d3, dom-manipulation, functions, loops, objects
• Language: JavaScript
• Homepage:
• Size: 4.88 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 14_belly-button-challenge

# Deliverable(s)

[index.html](https://github.com/wrighang/14_belly-button-challenge/blob/main/index.html)

[app.js](https://github.com/wrighang/14_belly-button-challenge/blob/main/static/js/app.js)

[Github Pages Deployment](https://wrighang.github.io/14_belly-button-challenge/)

## Background

In this assignment, I built an interactive dashboard to explore the Belly Button Biodiversity datasetLinks to an external site., 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.

## Requirements

### Bar Chart

- Chart initializes without error  

- Chart updates when a new sample is selected  

- Chart uses Top 10 sample values as values  

- Chart uses otu_ids as the labels  

- Chart uses otu_labels as the tooltip  

### Bubble Charts

- Chart initializes without error  

- Chart updates when a new sample is selected  

- Chart uses otu_ids for the x values  

- Chart uses otu_ids for marker colors  

- Chart uses sample_values for the y values  

- Chart uses sample_values for the marker size  

- Chart uses otu_labels for text values  

### Metadata and Deployment

- Metadata initializes without error  

- Metadata updates when a new sample is selected  

- App Successfully Deployed to Github Pages  

====================================================================

## CODING_PROCESS

- I frequently referred to the activities throughout the challenge to ensure I was on track.

- For the Bar Chart, I used Xpert Learning Assistant to help with mapping the otu_ids to a list of strings to serve as yticks for better labeling and readability.

- I wanted to add spacing between the bar and bubble chart and looked up how to do it and modifyed the .html file

- Purchased and referenced "Data Visualization with Python and JavaScript" and "Data Visualization with D3 Cookbook". These books provided valuable insights and alternative approaches to tackle the activity.