Roza has a partially completed dashboard that she needs to finish. She has a completed panel for demographic information and now needs to visualize the bacterial data for each volunteer. Specifically, her volunteers should be able to identify the top 10 bacterial species in their belly buttons. That way, if Improbable Beef identifies a species as a candidate to manufacture synthetic beef, Roza's volunteers will be able to identify whether that species is found in their navel.
What You're Creating
This new assignment consists of four technical analysis deliverables. You will submit the following:
• Deliverable 1: Create a Horizontal Bar Chart
• Deliverable 2: Create a Bubble Chart
• Deliverable 3: Create a Gauge Chart
• Deliverable 4: Customize the Dashboard
Deliverable 1 Instructions
Using your knowledge of JavaScript, Plotly, and D3.js, create a 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. The horizontal bar chart will display the sample_values as the values, the otu_ids as the labels, and the otu_labels as the hover text for the bars on the chart.
Deliverable 2 Instructions
Using your knowledge of JavaScript, Plotly, and D3.js, create a bubble chart that will display the following when an individual’s ID is selected from the dropdown menu webpage:
• The otu_ids as the x-axis values.
• The sample_values as the y-axis values.
• The sample_values as the marker size.
• The otu_ids as the marker colors.
• The otu_labels as the hover-text values.
Deliverable 3 Instructions
Using your knowledge of JavaScript, Plotly, and D3.js, create a 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.
Deliverable 4 Instructions
Use your knowledge of HTML and Bootstrap to customize the webpage for your dashboard.
- Customize your dashboard with three of the following:
• Add an image to the jumbotron.
• Add background color or a variety of compatible colors to the webpage.
• Add more information about the project as a paragraph on the page.
• Change layout of page. - When the dashboard is first opened in a browser, ID 940’s data should be displayed in the dashboard, and the three charts should be working according to their requirements.
- When a sample is selected, the dashboard should display the data in the panel and all three charts according to their requirements.
From the module work for the first github pages that was created during module. Plotly_Deployment