Belly Button Biodiversity Dashboard with Plotly.js

Build Interactive Web Dashboard for Exploring Belly Button Biodiversity Data using Plotly.js, Javascript and D3.js

Goals • Dataset • Tools Used • Analysis and Challenges

Goals

Utilize JavaScript, Plotly, and D3.js to build the following visualizations:

horizontal bar chart to display the top 10 bacterial species (OTUs) when an individual’s ID is selected from the dropdown menu on the webpage
bubble chart that will display the following when an individual’s ID is selected from the dropdown menu webpage
gauge chart that displays the weekly washing frequency's value, and display the value as a measure from 0-10 on the progress bar in the gauge chart when an individual ID is selected from the dropdown menu

Dataset

Belly Button Data: JSON file containing belly button biodiversity data

Tools Used

Javascript: Programming language used for creating visually appealing and dynamic web content
- Plotly.js: Javascript library used to create engaging and dynamic charts
- D3.js: Javascript library used for data visualization, reading JSON files and placing API calls
HTML: Hypertext Markup Language used to build and design webpages
CSS: Creative Style Sheets add dynamic visual styling to html webpages

Analysis and Challenges

Using Javascript, we built a javascript function in our charts.js file that compiled data from samples.json, and through the following plotly CDN generated the descriptive charts below:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>