text: // git bash python -m http.server
  //http://127.0.0.1:8000/
  // function to plot graphs
  function buildCharts(id) {
      // getting data from the json file
      d3.json("Data/samples.json").then((data)=> {
          console.log(data)
  
  //open browser to view the data elements in the json
  //create variables
  
  // filter sample values 
      var samples = data.samples.filter(s => s.id.toString() === id)[0];
      console.log(samples);
    
      // Getting the top 10 
      var sampleValues = samples.sample_values.slice(0, 10).reverse();
  
      // get only top 10 otu ids for the plot OTU and reversing it. 
      var OTU_top = (samples.otu_ids.slice(0, 10)).reverse();
      
      // get the otu id's 
      var OTU_id = OTU_top.map(d => "OTU " + d)
  
      // get the top 10 labels for the plot
      var labels = samples.otu_labels.slice(0, 10);
  
      // create trace variable for the plot
      var trace = {
          x: sampleValues,
          y: OTU_id,
          text: labels,
          marker: {
            color: 'rgb(142,124,195)'},
          type:"bar",
          orientation: "h",
      };
  
      // create data variable
      var data = [trace];
  
      // create layout variable to set plots layout
      var layout = {
          title: "Top 10 OTU",
          yaxis:{
              tickmode:"linear",
          },
          margin: {
              l: 100,
              r: 100,
              t: 100,
              b: 30
          }
      };
  
      // create the bar plot
      Plotly.newPlot("bar", data, layout);
  
    
      // The bubble chart
      var trace1 = {
          x: samples.otu_ids,
          y: samples.sample_values,
          mode: "markers",
          marker: {
              size: samples.sample_values,
              color: samples.otu_ids
          },
          text: samples.otu_labels
  
      };
  
      // set the layout for the bubble plot
      var layout_b = {
          xaxis:{title: "OTU ID"},
          height: 600,
          width: 1000
      };
  
      // creating data variable 
      var data1 = [trace1];
  
      // create the bubble plot
      Plotly.newPlot("bubble", data1, layout_b); 
  
      // The guage chart
  
      d3.json("Data/samples.json").then((data)=> {
      
          // get the metadata info for the demographic panel
      var metadata = data.metadata;
      
          // filter meta data info 
      var result = metadata.filter(meta => meta.id.toString() === id)[0];
      
      //frequency
      var wfreq = result.map(d => d.wfreq);
      console.log(`frequency: ${wfreq}`)
  
  
      var data_g = [
        {
        domain: { x: [0, 1], y: [0, 1] },
        value: parseFloat(wfreq),
        title: { text: `Weekly Washing Frequency ` },
        type: "indicator",
        
        mode: "gauge+number",
        gauge: { axis: { range: [null, 9] },
                 steps: [
                  { range: [0, 2], color: "yellow" },
                  { range: [2, 4], color: "cyan" },
                  { range: [4, 6], color: "teal" },
                  { range: [6, 8], color: "lime" },
                  { range: [8, 9], color: "green" },
                ]}
            
        }
      ];
      var layout_g = { 
          width: 700, 
          height: 600, 
          margin: { t: 20, b: 40, l:100, r:100 } 
        };
      Plotly.newPlot("gauge", data_g, layout_g);
    });
  } );
  }
  // create function to retrieve data
  function buildMetadata(id) {
  // read the json file to get data
  d3.json("Data/samples.json").then((data)=> {
      
      // get the metadata info for the demographic panel
      var metadata = data.metadata;
  
      // filter meta data info 
      var result = metadata.filter(meta => meta.id.toString() === id)[0];
  
      // select demographic panel to put data
      var demographicInfo = d3.select("#sample-metadata");
      
      // Use `.html("") to clear any existing metadata
      demographicInfo.html("");
  
      // grab the necessary demographic data data for the id and append the info to the panel
      Object.entries(result).forEach((key) => {   
              demographicInfo.append("h5").text(key[0].toUpperCase() + ": " + key[1] + "\n");    
      });
  });
  }
  
  // create the function for the change event
  function optionChanged(newSample) {
      buildCharts(newSample);
      buildMetadata(newSample);
      }
  // create the function for the initial data rendering
  function init() {
  // select dropdown menu 
  var dropdown = d3.select("#selDataset");
  
  // read the data 
  d3.json("Data/samples.json").then((data)=> {
      console.log(data)
      var sampleNames=data.names;
      // Use the first sample from the list to build the initial plots
      var firstSample = sampleNames[0];
      
      // get the id data to the dropdown menu
      data.names.forEach(function(name) {
          dropdown.append("option").text(name).property("value");
      });
  
      buildCharts(firstSample);
      buildMetadata(firstSample);
  
  });
  }
  
  init();