Skip to content

Latest commit

 

History

History
45 lines (40 loc) · 2.73 KB

File metadata and controls

45 lines (40 loc) · 2.73 KB

Digging-Into-The-Belly-Button-Biome

Using a json file that contains the data of various patients and the bacteria results from their belly button samples, I've created a dynamic and interactive dashbaord that displays the previously mentioned data. By choosing the patient number from the dropdown menu, you can change the information to reflect the findings on the newly selected patient. From the Top 10 Bacteria found, to the number of times they wash/shower per week, it's there. The link to the dashboard is provided below.


To Interact With The Dashboard, Click Here:

https://dmcneill0711.github.io/Digging-Into-The-Belly-Button-Biome/

Languages Used:

  • HTML
  • JavaScript


  • Libraries Used:

  • Bootstrap
  • D3.js
  • Plotly.js


  • Programs Used:

  • Visual Studio Code


  • The Breakdown:

    1) Before building anything, I needed to examine and import the information. Following the link to the json, I was able to see how the data was organized. Then, using d3.json(), I created that constant variable and assigning it as dataSet. From there, I was about to pull and use the information.

    2) After that, I assigned each section of the data to a variable describing what information it's populating using Object.values.

    3) Once assigned, I created each funtion:

    • displayBar: which uses the patient's sample_values and otu_ids to create a bar graph. *displays the Top 10 Bacteria found in sample*
    • displayBubble: which uses the patient's otu_ids, sample_values, and otu_labels to construct the bubble chart. *and uses the sample_values to determine the size of each marker*
    • displayWashing: this function grabs the last item on the metadata list and uses that to alter the gauge meter.
    • diplayMeta: this creates a string using the key value pairs of the patient's metadata.
    • lastly, a function to display the patient names in the dropdown menu

    4) The second to last function created was the updatePlot, which is a for loop that runs through the indexes, and when that index number matches the one associated with the patient number, it will select all of the following information and update all of the charts with the relevant information.

    5) The final function used was the init() function, which determines what to display when the dashboard is first started.



    Screen Shots:

    dashboard

    dash_bubble