Using JavaScript and Plotly to create graphs and charts to display data about Belly Button Biodiversity through HTML.
Used JavaScript to gather and read the data from a JSON file. From that file used Plotly through JavaScript to create several charts to help visualize the data. HTML was used to display the charts.
• Data Sources: samples.json
• Software: JavaScript 1.8.5, Plotly 1.52.2, HTML5
JavaScript was used to organize and visulize the
belly button data in JSON. Several charts were created to help
display the data.
1. First coded the init function was created to create a selector box to select an "Individual" to display their bellybutton data, displaying Test Subject 940 first.
2. Coded the optionChanged function to then display the different test subject when selecting their number in the selector box.
3. Created a bar chart using Plotly to display the top 10 bacteria cultures found within the test subjects bellybutton.
4. Next, created a bubble chart to display the amount of bacteria culture per sample.
5. Formatted the bubble chart to grow in size as the sample amount gets larger.
6. Created the gauge on a different function.
7. Set variables for the data and created new values and labels to set the gauge.
8. Formatted the layout and edited the title and colors.
The analysis of the data shows that there are tons of bacteria within the human bellybutton and that the diversity is different for everyone. The bar chart displays the top 10 different cultures found and the bubble chart shows the abundance of each culture. The gauge displays on average how often the belly button is washed and it seems like the the average is around 3-5 times a week. The data shows that no two belly buttons are the same and that everyone has a different belly button biodiversity.