https://github.com/kayannr/belly-button-biodiversity

Javascript, HMTL, and Flask to display interactive data on a web application
https://github.com/kayannr/belly-button-biodiversity

flask html5 javascript

Last synced: about 2 months ago
JSON representation

Javascript, HMTL, and Flask to display interactive data on a web application

• Host: GitHub
• URL: https://github.com/kayannr/belly-button-biodiversity
• Owner: kayannr
• Created: 2020-06-13T16:57:08.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-08-13T05:44:04.000Z (almost 3 years ago)
• Last Synced: 2025-01-23T03:14:42.288Z (over 1 year ago)
• Topics: flask, html5, javascript
• Language: JavaScript
• Homepage: https://kayannr.github.io/belly-button-biodiversity/Belly-Button-Biodiversity/index.html
• Size: 1.86 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Belly Button Biodiversity

https://kayannr.github.io/belly-button-biodiversity/

## Background

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.

## Plotly

 ![bar Chart](Images/1.PNG)

The following are tasks completed: 

1.  `samples.json` is read using D3 library

2. A horizontal bar chart with a dropdown menu to display the top 10 OTUs found in that individual is created. The following are used for the interactive bar chart: 

* Use `sample_values` as the values for the bar chart.

* Use `otu_ids` as the labels for the bar chart.

* Use `otu_labels` as the hovertext for the chart.

3. Adapt the Gauge Chart from  to plot the weekly washing frequency of the individual.

4. A bubble chart that displays each sample. The following are used for the interactive bubble chart: 

* Use `otu_ids` for the x values.

* Use `sample_values` for the y values.

* Use `sample_values` for the marker size.

* Use `otu_ids` for the marker colors.

* Use `otu_labels` for the text values.

![Bubble Chart](Images/2.PNG)

5. Display the sample metadata, i.e., an individual's demographic information.

6. Display each key-value pair from the metadata JSON object somewhere on the page.

7. Update all of the plots any time that a new sample is selected.