https://github.com/vara-co/belly-button-challenge
Interactive Dashboard Exploring a database, on the biodiversity of the belly button.
https://github.com/vara-co/belly-button-challenge
biodiversity charts css data-analytics html html-css-javascipt interactive-visualization javascript javascript-library science
Last synced: 3 months ago
JSON representation
Interactive Dashboard Exploring a database, on the biodiversity of the belly button.
- Host: GitHub
- URL: https://github.com/vara-co/belly-button-challenge
- Owner: vara-co
- Created: 2024-03-25T20:58:45.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-04T23:29:08.000Z (about 1 year ago)
- Last Synced: 2025-02-02T11:45:47.498Z (5 months ago)
- Topics: biodiversity, charts, css, data-analytics, html, html-css-javascipt, interactive-visualization, javascript, javascript-library, science
- Language: JavaScript
- Homepage: https://vara-co.github.io/belly-button-challenge/
- Size: 1.55 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
DU - DA Module 14 "belly-button-challenge"
An Interactive Dashboard Exploring Belly Button Biodiversity
Using HTML(PyCharm) and JavaScript(Visual Studio Code)
by Laura Vara
Note: For the grading department, I deleted the repository where I had deployed the website according to the notes I sent when submitting, and I just made it here. I didn't know it was possible, but I managed to do it. The dashboard's link is in the description of this repository and in this read me file, right below this statement. Thank you.
**Live Static Belly-Button-Challenge HTML Deployment website:**
https://vara-co.github.io/belly-button-challenge/
The goal of this assignment was to build an interactive dashboard to explore a [Belly Button Biodiversity dataset](https://robdunnlab.com/projects/belly-button-biodiversity/), which catalogs the microbes that colonize human navels.
This dataset contains a small number of microbial species to which in this project, we'll refer to as OTUs. These have shown, via this dataset, that are present in more than 70% of people.
Index
1. Content of the repository
2. Instructions for the Challenge
3. References
Content of the repository
-----------------------------------------------------------
- index.html <-- This is the HTML used for this project, with some changes to deploy as a static wesbite.
- samples.json <-- This is the database JSON file with the data used for this project
- js directory:
- app.js <-- This is the JSON file that makes the charts be interactive with information from the database provided.
(Note that for the paths that connect the HTML with the app.js file, these files have to be in this same order. Othewise you would have to redefine the file paths in your code.)
- Images directory:
This directory has several .png images provided. I used **bacteria.png** to add it to the HTML website. It was not part of the instructions, but I did it anyway.
Instructions
The instructions for this challenge are divided into the following subsections:
1. Use the D3 library
- Read in samples.json from the URL: https://static.bc-edx.com/data/dl-1-2/m14/lms/starter/samples.json
2. Horizontal bar chart
- Create a horizontal bar chaert with a dropdown menu to display the top 10 OTUs found in that individual
- 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.
- It should look like this:
3. Bubble Chart
- Create a bubble chart that displays each sample.
- 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.
- It should look like this:
4. Metadata
- Display the sample metadata, i.e., an individual's demographic information.
5. Key-Value Display
- Display each key-value pair from the metadata JSON object somewhere on the page.
- It should look like this:
6. Plots should be updated
- Update all the plots when a new sample is selected from the dropdown menu. Additionally, you are welcome to create any layout that you would like for your dahsboard.
- This is an example dashboard:
7. Website Deployment
- Deploy your app to a free static page hosting service, such as GitHub Pages. Submit the links to your deployment and your GitHub repo.
**Advanced Challenge Section**
(Optional with no extra points)
- Adapt the Gauge Chart from [the plotly.com](https://plotly.com/javascript/gauge-charts/) site, to plot the weekly washing frequency of the individual.
- You will need to modify the exapmle gauge code to account for values ranging from 0-9.
- Update the chart whenever a new sample is selected.
- (NOTE: These lines of code, in the original HTML were commented out to avoid errors, as I did not do this bonus section. However, I might try in the future when I have more experience with JavaScript.)
- This bonus section should look like this:
References for the belly-button-challenge
Most of what's in this challenge, was covered in class.
The few things that either weren't or we had to reference to, are described
with it's source right below.
- Bar and Bubble Charts:
- https://plotly.com/javascript/bar-charts/
- https://plotly.com/javascript/bubble-charts/
- Plotly Color Scales. The one used for the Bubble Chart was "Earth":
- https://plotly.com/python/v3/matplotlib-colorscales/
- https://community.plotly.com/t/what-colorscales-are-available-in-plotly-and-which-are-the-default/2079/2
- https://plotly.com/python/builtin-colorscales/
- HTML Style changes:
- https://htmlcolorcodes.com/
- https://www.w3schools.com/css/css_font.asp
- Deploying a static HTML on Github:
- https://docs.github.com/en/pages/quickstart
- https://www.youtube.com/watch?v=OltY8JIaP-4
----------------------------------------------------------------------------------------------