{"id":22557509,"url":"https://github.com/vara-co/belly-button-challenge","last_synced_at":"2026-05-08T17:35:22.041Z","repository":{"id":230477208,"uuid":"777433555","full_name":"vara-co/belly-button-challenge","owner":"vara-co","description":"Interactive Dashboard Exploring a database, on the biodiversity of the belly button.","archived":false,"fork":false,"pushed_at":"2024-04-04T23:29:08.000Z","size":1626,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-03T03:12:12.813Z","etag":null,"topics":["biodiversity","charts","css","data-analytics","html","html-css-javascipt","interactive-visualization","javascript","javascript-library","science"],"latest_commit_sha":null,"homepage":"https://vara-co.github.io/belly-button-challenge/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vara-co.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-25T20:58:45.000Z","updated_at":"2024-04-04T23:23:32.000Z","dependencies_parsed_at":"2025-03-28T11:42:17.473Z","dependency_job_id":null,"html_url":"https://github.com/vara-co/belly-button-challenge","commit_stats":null,"previous_names":["vara-co/belly-button-challenge"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vara-co/belly-button-challenge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vara-co%2Fbelly-button-challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vara-co%2Fbelly-button-challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vara-co%2Fbelly-button-challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vara-co%2Fbelly-button-challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vara-co","download_url":"https://codeload.github.com/vara-co/belly-button-challenge/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vara-co%2Fbelly-button-challenge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32790592,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["biodiversity","charts","css","data-analytics","html","html-css-javascipt","interactive-visualization","javascript","javascript-library","science"],"created_at":"2024-12-07T20:07:29.164Z","updated_at":"2026-05-08T17:35:22.000Z","avatar_url":"https://github.com/vara-co.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eDU - DA Module 14 \"belly-button-challenge\"\u003cbr/\u003e\nAn Interactive Dashboard Exploring Belly Button Biodiversity\u003c/h1\u003e\n\u003ch2 align=\"center\"\u003eUsing HTML(PyCharm) and JavaScript(Visual Studio Code)\u003cbr/\u003e\n\u003cbr/\u003e\nby Laura Vara\u003c/h2\u003e\u003cbr/\u003e\n\n![ReadMe_BacteriaThumbTITLE2](https://github.com/vara-co/belly-button-challenge/assets/152572519/b6ddb643-cfbf-4bc0-a369-b3ec18d840a4)\n\nNote: 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.\n\n**Live Static Belly-Button-Challenge HTML Deployment website:**\nhttps://vara-co.github.io/belly-button-challenge/\n\nThe 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.\nThis 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.\n\n\u003ch2\u003eIndex\u003c/h2\u003e\u003cbr/\u003e\n1. Content of the repository\u003cbr/\u003e\n2. Instructions for the Challenge\u003cbr/\u003e\n3. References\u003cbr/\u003e\n\nContent of the repository\n-----------------------------------------------------------\n- index.html    \u003c-- This is the HTML used for this project, with some changes to deploy as a static wesbite.\n- samples.json  \u003c-- This is the database JSON file with the data used for this project\n- js directory:\n  -  app.js \u003c-- This is the JSON file that makes the charts be interactive with information from the database provided.\n(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.)\n\n- Images directory:\nThis 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.\n    \n\u003ch2\u003eInstructions\u003c/h2\u003e\nThe instructions for this challenge are divided into the following subsections:\n \n\n\u003ch3\u003e1. Use the D3 library\u003c/h3\u003e\n\n- Read in samples.json from the URL: https://static.bc-edx.com/data/dl-1-2/m14/lms/starter/samples.json\n\n\n\u003ch3\u003e2. Horizontal bar chart\u003c/h3\u003e\n\n- Create a horizontal bar chaert with a dropdown menu to display the top 10 OTUs found in that individual\n  - Use **sample_values** as the values for the bar chart.\n  - Use **otu_ids** as the labels for the bar chart.\n  - Use **otu_labels** as the hovertext for the chart.\n- It should look like this:\n\n\u003cbr/\u003e\n\n![barchart](https://github.com/vara-co/belly-button-challenge/assets/152572519/40c07338-8610-4f0a-83c8-453443b9ccb5)\n\n\u003cbr/\u003e\n\u003ch3\u003e3. Bubble Chart\u003c/h3\u003e\u003cbr/\u003e\n\n- Create a bubble chart that displays each sample.\n  - Use **otu_ids** for the x values.\n  - Use **sample_values** for the y values.\n  - Use **sample_values** for the marker size.\n  - Use **otu_ids** for the marker colors.\n  - Use **otu_labels** for the text values.\n- It should look like this:\n\n\u003cbr/\u003e\n\n![BubbleChart](https://github.com/vara-co/belly-button-challenge/assets/152572519/8a7d7f24-8563-4202-91dc-dd63378d44b1)\n\n\u003cbr/\u003e\n\u003ch3\u003e4. Metadata\u003c/h3\u003e\u003cbr/\u003e\n\n- Display the sample metadata, i.e., an individual's demographic information.\n\n\u003cbr/\u003e\n\u003ch3\u003e5. Key-Value Display \u003c/h3\u003e\u003cbr/\u003e\n\n- Display each key-value pair from the metadata JSON object somewhere on the page.\n- It should look like this:\n\n\u003cbr/\u003e\n\n![Key_Value_box](https://github.com/vara-co/belly-button-challenge/assets/152572519/e422990c-e654-4c44-806a-5d3c562fb1dc)\n\n\u003cbr/\u003e\n\u003ch3\u003e6. Plots should be updated \u003c/h3\u003e\u003cbr/\u003e\n\n- 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.\u003cbr/\u003e\n- This is an example dashboard:\n\n\u003cbr/\u003e\n\n![image](https://github.com/vara-co/belly-button-challenge/assets/152572519/5b991292-ecd0-4bfe-ab10-2c216de2856f)\n\n\u003cbr/\u003e\n\u003ch3\u003e7. Website Deployment \u003c/h3\u003e\u003cbr/\u003e\n\n- Deploy your app to a free static page hosting service, such as GitHub Pages. Submit the links to your deployment and your GitHub repo.\n\n\u003cbr/\u003e\n\n**Advanced Challenge Section**\n(Optional with no extra points)\n- Adapt the Gauge Chart from [the plotly.com](https://plotly.com/javascript/gauge-charts/) site, to plot the weekly washing frequency of the individual.\n- You will need to modify the exapmle gauge code to account for values ranging from 0-9.\n- Update the chart whenever a new sample is selected.\n- (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.)\n- This bonus section should look like this:\n\n\u003cbr/\u003e\n\n![Bonus](https://github.com/vara-co/belly-button-challenge/assets/152572519/5ce03186-f494-4ede-8f3c-e95e7ca5c67e)\n\n\u003ch2\u003eReferences for the belly-button-challenge\u003c/h2\u003e\u003cbr/\u003e\nMost of what's in this challenge, was covered in class.\u003cbr/\u003e\nThe few things that either weren't or we had to reference to, are described\nwith it's source right below.\u003cbr/\u003e\n\n\n- Bar and Bubble Charts:\n  - https://plotly.com/javascript/bar-charts/\n  - https://plotly.com/javascript/bubble-charts/\n\n- Plotly Color Scales. The one used for the Bubble Chart was \"Earth\":\n  - https://plotly.com/python/v3/matplotlib-colorscales/\n  - https://community.plotly.com/t/what-colorscales-are-available-in-plotly-and-which-are-the-default/2079/2\n  - https://plotly.com/python/builtin-colorscales/\n\n- HTML Style changes:\n  - https://htmlcolorcodes.com/\n  - https://www.w3schools.com/css/css_font.asp\n\n- Deploying a static HTML on Github:\n  - https://docs.github.com/en/pages/quickstart\n  - https://www.youtube.com/watch?v=OltY8JIaP-4\n    \n----------------------------------------------------------------------------------------------\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvara-co%2Fbelly-button-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvara-co%2Fbelly-button-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvara-co%2Fbelly-button-challenge/lists"}