Background 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....

Background

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

Files

Use the following links to download the Challenge starter codes.

Download the bar chart starter code.(Links to an external site.)

Download the bubble chart starter code.(Links to an external site.)

Download the gauge chart starter code.(Links to an external site.)

Deliverable 1: Create a Horizontal Bar Chart (35 points)

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 thesample_valuesas the values, theotu_idsas the labels, and theotu_labelsas the hover text for the bars on the chart.

Your bar chart should look like the following image:

REWIND

For this deliverable, you’ve already done the following in this module:

• 
  
  Lesson 12.1.3:
  Create a bar chart


• 
  
  Lesson 12.2.1:
  Use JavaScript functions and methods:map(),filter(),reverse(), andslice().


• 
  
  Lesson 12.2.2:
  Create a bar chart with filtered arrays


• 
  
  Lesson 12.3.2:
  Load a JSON file withd3.json()
  


• 
  
  Lesson 12.4.3:
  Create a function that reads in json data


• 
  
  Lesson 12.4.3:
  Write code to use the ID number to create the sample’s information on a panel or chart


• 
  
  Lesson 12.5.1:
  Deploy your project to GitHub Pages

Download theBellyButton_bar_chart_starter_code.js, add it to the js folder of your GitHub pages (GitHub.io) folder, and rename the filecharts.js. Use the instructions below to add code where indicated by the numbered-step comments in the starter code file.

In Steps 3-6, you’ll initialize variables that hold arrays for the sample that is selected from the dropdown menu on the webpage.

IMPORTANT

Make sure that you useconsole.log()to help debug any issues.

1. In Step 1, we’ve provided the code for thebuildCharts();function that contains the argumentsample, which is the sample that is selected from the dropdown menu.


2. In Step 2, we’ve provided the code to retrieve thesamples.jsonfile using thed3.json().then()method.


3. In Step 3, create a variable that has the array for all the samples.


4. In Step 4, create a variable that will hold an array that contains all the data from the new sample that is chosen from the dropdown menu. To retrieve the data from the new sample, filter the variable created in Step 3 for the sampleidthat matches the new sampleidchosen from the dropdown menu and passed into thebuildCharts()function as the argument.


5. In Step 5, create a variable that holds the first sample in the array.

NOTE

You can combine Steps 4 and 5 as one line of code, but make sure you use the correct variable name for Step 6 when retrieving the array data.

6. 
   

   In Step 6, create variables that have arrays forotu_ids,otu_labels, andsample_values.

   
   


7. 
   

   In Step 7, create theyticksfor the bar chart.

   
   

HINT

In Steps 8-10, create thetraceobject, the layout, andPlotly.newPlot()function for the horizontal bar chart.

8. In Step 8, create thetraceobject for the bar chart, where the x values are thesample_valuesand the hover text for the bars are theotu_labelsin descending order.


9. In Step 9, create the layout for the bar chart that includes a title.


10. In Step 10, use thePlotly.newPlot()function to plot the trace object with the layout.

After you have completed the coding requirements, your dashboard will look like this image when it loads for the first time:

Deliverable 1 Requirements

You will earn a perfect score for Deliverable 1 by completing all requirements below:

• Code is written to create the arrays when a sample is selected from the dropdown menu(10 pt)
  


• Code is written to create the trace object in thebuildCharts()function, and it contains the following:(10 pt)
  
  
  
  • The y values are theotu_idsin descending order
  
  
  • The x values are thesample_valuesin descending order
  
  
  • The hover text is theotu_labelsin descending order.
  
  
  
  


• Code is written to create the layout array in thebuildCharts()function that creates a title for the chart(5 pt)
  


• When the dashboard is first opened in a browser, ID 940’s data should be displayed in the dashboard, and the bar chart has the following:(10 pt)
  
  
  
  • The top 10sample_valuesare sorted in descending order
  
  
  • The top 10sample_valuesas values
  
  
  • Theotu_idsas the labels
  
  
  
  

Deliverable 2: Create a Bubble Chart (30 points)

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:

• Theotu_idsas the x-axis values.


• Thesample_valuesas the y-axis values.


• Thesample_valuesas the marker size.


• Theotu_idsas the marker colors.


• Theotu_labelsas the hover-text values.

Your bubble chart should look like the following image:

REWIND

For this deliverable, you’ve already done the following in this module:

• 
  
  Lesson 12.2.2
  Create atraceobject and layout for a chart


• 
  
  Lesson 12.5.1:
  Deploy your project to GitHub Pages

Download theBellyButton_bubble_chart_starter_code.jsfile, copy the starter code from Steps 1-3, and add it to yourcharts.jsfile after Step 10 for Deliverable 1.

Use the variables that were created in Deliverable 1 to populate the bubble chart. Then, use the instructions below to write the code for thetraceobject, the layout, andPlotly.newPlot()function to create the bubble chart.

1. To create thetraceobject for the bubble chart do the following:
   
   
   • Assign theotu_ids,sample_values, andotu_labelsto the x, y, and text properties, respectively.
   
   
   • For themodeandmarkerproperties, the mode is "markers" and themarkerproperty is a dictionary that defines thesize,color, andcolorscaleof the markers.
   
   
   
   

If you’d like a hint on how to create atraceobject for a bubble chart, that’s totally okay. If not, that’s great too. You can always revisit this later if you change your mind.

HINT

2. To create the layout for the bubble chart, add a title, a label for the x-axis, margins, and thehovermodeproperty. Thehovermodeshould show the text of the bubble on the chart when you hover near that bubble.

If you’d like a hint on how to create a layout for a bubble chart, that’s totally okay. If not, that’s great too. You can always revisit this later if you change your mind.

HINT

3. Lastly, use the givenPlotly.newPlot()function to plot thetraceobject and layout.

After you have completed the coding requirements, your dashboard will look like the image below when it loads for the first time, with the bar chart you created in Deliverable 1 and the bubble chart.

Deliverable 2 Requirements

You will earn a perfect score for Deliverable 2 by completing all requirements below:

• The code for the trace object in thebuildCharts();function does the following:(10 pt)
  
  
  
  • Sets theotu_idsas the x-axis values
  
  
  • Sets thesample_valuesas the y-axis values
  
  
  • Sets theotu_labelsas the hover-text values
  
  
  • Sets thesample_valuesas the marker size
  
  
  • Sets theotu_idsas the marker colors
  
  
  
  


• The code for the layout in thebuildCharts();function does the following:(10 pt)
  
  
  
  • Creates a title
  
  
  • Creates a label for the x-axis
  
  
  • The text for a bubble is shown when hovered over
  
  
  
  


• When the dashboard is first opened in a browser, ID 940’s data should be displayed in the dashboard. All three charts should also be working according to their requirements when a sample is selected from the dropdown menu(10 pt)
  

Deliverable 3: Create a Gauge Chart (20 points)

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.

Your gauge chart should look similar to the following image:

REWIND

For this deliverable, you’ve already done the following in this module:

• 
  
  Lesson 12.2.2:
  Create atraceobject and layout for a chart


• 
  
  Lesson 12.5.1:
  Deploy your project to GitHub Pages

Download theBellyButton_gauge_starter_code.js, using Steps 1-3 in thebuildCharts()function initialize variables that hold arrays for the sample that is selected from the dropdown menu on the webpage.

1. In Step 1, create a variable that filters the metadata array for an object in the array whose id property matches the ID number passed intobuildCharts()function as the argument.


2. In Step 2, create a variable that holds the first sample in the array created in Step 2.

NOTE

You can combine Steps 1 and 2 as one line of code, but make sure you use the correct variable name for Step 3 when retrieving the washing frequency value.

3. In Step 3, create a variable that converts the washing frequency to a floating point number.


4. In Step 4, create the trace object for the gauge chart.

If you’d like a hint on how to create a gauge chart, that’s totally okay. If not, that’s great too. You can always revisit this later if you change your mind.

HINT

5. In Step 5, create the layout for the gauge chart making sure that it fits in thetag for the gauge id.


6. In Step 6, use thePlotly.newPlot()function to plot thetraceobject and the layout.

After you have completed the coding requirements, your dashboard will look like this image when it loads for the first time, with the bar chart you created in Deliverable 1, the bubble chart created in Deliverable 2, and the gauge chart:

Deliverable 3 Requirements

You will earn a perfect score for Deliverable 3 by completing all requirements below:

• The code to build the gauge chart does the following:(10 pt)
  
  
  
  • Creates a title for the chart.
  
  
  • Creates the ranges for the gauge in increments of two, with a different color for each increment.
  
  
  • Adds the washing frequency value on the gauge chart.
  
  
  • The indicator shows the level for the washing frequency on the gauge.
  
  
  • The gauge is added to the dashboard.
  
  
  • The gauge fits in the margin of theelement.
  
  
  
  


• When the webpage loads, the bar and bubble chart are working according to the requirements in Deliverable 1 and 2, respectively, and the gauge chart is working according to the requirements listed for this Deliverable(10 pt)
  

Deliverable 4: Customize the Dashboard (20 points)

Deliverable 4 Instructions

Use your knowledge of HTML and Bootstrap to customize the webpage for your dashboard.

1. 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.
   
   
   • Use a custom font with contrast for the colors.
   
   
   • Add more information about the project as a paragraph on the page.
   
   
   • Add information about what each graph visualizes, either under or next to each graph.
   
   
   • Make the webpage mobile-responsive.
   
   
   • Change the layout of the page.
   
   
   • Add a navigation bar that allows you to select the bar or bubble chart on the page.
   
   
   
   


2. 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.


3. When a sample is selected, the dashboard should display the data in the panel and all three charts according to their requirements.

Deliverable 4 Requirements

You will earn a perfect score for Deliverable 4 by completing all requirements below:

• The webpage has three customizations.(10 pt)
  


• When the dashboard is first opened in a browser, ID 940’s data should be displayed in the dashboard, and all three charts should be working according to the requirements when a sample is selected from the dropdown menu(5 pt)
  

Submission

Once you’re ready to submit, make sure to check your work against the rubric to ensure you are meeting the requirements for this Challenge one final time. It’s easy to overlook items when you’re in the zone!

As a reminder, the deliverables for this Challenge are as follows:

• Deliverable 1: Create a Horizontal Bar Chart


• Deliverable 2: Create a Bubble Chart


• Deliverable 3: Create a Gauge Chart


• Deliverable 4: Customize the Dashboard

Upload the following to your GitHub pages repository:

• The updatedindex.htmlfile.


• Thecharts.jsfile, which should be in the js folder of the static folder.


• Thesamples.jsonfile.


• A README.md that describes the purpose of the repository. Although there is no graded written analysis for this challenge, it is encouraged and good practice to add a brief description of your project.

To submit your challenge assignment in Canvas, click Submit, then provide the URL to your deployment and your GitHub repository for grading. Comments are disabled for graded submissions in BootCampSpot. If you have questions about your feedback, please notify your instructional staff or the Student Success Manager. If you would like to resubmit your work for an improved grade, you can use theRe-Submit Assignmentbutton to upload new links. You may resubmit up to 3 times for a total of 4 submissions.

IMPORTANT

Once you receive feedback on your Challenge, make any suggested updates or adjustments to your work. Then, add this week’s Challenge to your professional portfolio.

NOTE

You are allowed to miss up to two Challenge assignments and still earn your certificate. If you complete all Challenge assignments, your lowest two grades will be dropped. If you wish to skip this assignment, click Next, and move on to the next Module.

Rubric

Module-12 RubricModule-12 Rubric

Criteria	Ratings	Pts
This criterion is linked to a learning outcomeDeliverable 1: Create a Horizontal Bar Chart	35to >33.0PtsMastery✓Arrays are created when a new sample is selected from the dropdown menu. ✓All THREE elements of the trace object are created, and the data is in descending order. ✓The layout array creates a title for the chart. ✓When the webpage loads, the bar chart behaves according to the requirements. 33to >31.0PtsApproaching Mastery✓Arrays are created when a new sample is selected from the dropdown menu. ✓ALL THREE elements of the trace object are created, and some of the data is in descending order. ✓The layout array creates a title for the chart. ✓When the webpage loads, the bar chart behaves according to the requirements. 31to >27.0PtsProgressing✓Arrays are created when a new sample is selected from the dropdown menu. ✓ALL THREE elements of the trace object are created, but the data is not in descending order. ✓The layout array creates a title for the chart. ✓When the webpage loads, the bar chart behaves according to the requirements. 27to >0.0PtsEmerging✓Arrays are created when a new sample is selected from the dropdown menu. ✓TWO of the THREE elements of the trace object are created. ✓The layout array creates a title for the chart. ✓When the webpage loads, the bar chart behaves according to the requirements. 0PtsIncomplete	35pts
This criterion is linked to a learning outcomeDeliverable 2: Create a Bubble Chart	30to >27.0PtsMastery✓All FIVE elements of the trace object are created, and data is properly displayed. ✓All THREE elements are created with the layout. ✓When the webpage loads, the bar and bubble chart initialize without error and update when a new sample is selected. 27to >23.0PtsApproaching Mastery✓Code is written for FOUR of the FIVE elements of the trace object, and the data is displayed. ✓All THREE elements are created with the layout. ✓When the webpage loads, the bar chart initializes without error and is updated. ✓When the webpage loads, there is a minor error when the bubble chart initializes or is updated. 23to >20.0PtsProgressing✓Code is written for THREE of the FIVE elements for the bubble chart. ✓Code is written for TWO of THREE elements for the layout. ✓When the webpage loads, the bar chart initializes without error and is updated. ✓When the webpage loads, there are a few errors when the bubble chart initializes or is updated. 20to >0.0PtsEmerging✓Code is written for TWO of the FIVE elements for the bubble chart. ✓Code is written for ONE of THREE elements for the layout. ✓When the webpage loads, the bar chart initializes without error and is updated. ✓When the webpage loads, there are errors loading the bubble chart. 0PtsIncomplete	30pts
This criterion is linked to a learning outcomeDeliverable 3: Create a Gauge Chart	20to >17.0PtsMastery✓The gauge chart on the dashboard has ALL requirements. ✓When the webpage loads, the bar, bubble, and gauge chart initialize without error and update when a new sample is selected. 17to >14.0PtsApproaching Mastery✓The gauge chart on the dashboard has ALL requirements. ✓When the webpage loads, the bar and bubble charts initialize without error and are updated. ✓When the webpage loads, there is a minor error when the gauge chart initializes or is updated. 14to >11.0PtsProgressing✓The gauge chart has code written for THREE of the requirements, but there are a few errors when the gauge chart initializes or is updated. ✓When the webpage loads, the bar and bubble charts initialize without error and are updated. 11to >0.0PtsEmerging✓The gauge chart has code written for THREE of the requirements, but there are errors loading the gauge chart. ✓When the webpage loads, the bar and bubble charts initialize without error and are updated. 0PtsIncomplete	20pts
This criterion is linked to a learning outcomeDeliverable 4: Customize the Dashboard	15to >13.0PtsMastery✓The webpage has THREE customizations. ✓When the webpage loads, the bar and bubble chart initialize without error and update when a new sample is selected. 13to >11.0PtsApproaching Mastery✓The webpage has THREE customizations. ✓When the webpage loads or is updated, there is a minor error when the bar or bubble charts initialize and are updated. 11to >9.0PtsProgressing✓The webpage has TWO of THREE customizations. ✓When the webpage loads or is updated, there is an error when the bar or bubble charts initialize and are updated. 9to >0.0PtsEmerging✓The webpage has ONE of THREE customizations. ✓When the webpage loads or is updated, there are errors when the bar or bubble charts initialize and are updated. 0PtsIncomplete	15pts
Total points:100

12.5.1: Deploy the Project to GitHub Pages" style="float: left;">Previous
Module 12 Career Connection" style="float: right;">Next© 2020 - 2022 Trilogy Education Services, a 2U, Inc. brand. All Rights Reserved.