function buildCharts(sample) {
  // 2. Use d3.json to load and retrieve the samples.json file 
  d3.json("samples.json").then((data) => {
    // 3. Create a variable that holds the samples array. 
    var samplesArray = data.samples;
    // 4. Create a variable that filters the samples for the object with the desired sample number.
    var newSamplesArray = samplesArray.filter(sampleObj => sampleObj.id == sample);
    //  5. Create a variable that holds the first sample in the array.
    var currentSample = newSamplesArray[0];

    // 6. Create variables that hold the otu_ids, otu_labels, and sample_values.
    var otu_ids = currentSample.otu_ids;
    var otu_labels = currentSample.otu_labels;
    var sample_values = currentSample.sample_values;

    console.log(otu_ids);
    console.log(otu_labels);
    console.log(sample_values);
    // 7. Create the yticks for the bar chart.
    // Hint: Get the the top 10 otu_ids and map them in descending order  
    //  so the otu_ids with the most bacteria are last. 
    var yticks = otu_ids.slice(0,10).map(function(otuID){
      return `OTU ${otuID}`;
    }).reverse();
    console.log(yticks);

    // 8. Create the trace for the bar chart. 
    var barData = [
      {
          x: sample_values.slice(0,10).reverse(),
          y: yticks,
          text: otu_labels.slice(0,10).reverse(),
          type: "bar",
          orientation: "h"    
      }
      
    ];
    // 9. Create the layout for the bar chart. 
    var barLayout = {
      title: "Top Bacteria Cultures Found",
      margin: {t: 60, l: 150}
     
    };
   // 10. Use Plotly to plot the data with the layout. 
    Plotly.newPlot("bar", barData, barLayout);

   // 1. Create the trace for the bubble chart.
    var bubbleData = [
      {
        x: otu_ids,
        y: sample_values,
        text: otu_labels,
        mode: "markers",
        marker: {
          size: sample_values,
          color: otu_ids,
          colorscale: "Earth"
        }
      }

   
    ];

   // 2. Create the layout for the bubble chart.
    var bubbleLayout = {
      title: "Bacteria Cultures per Sample",
      hovermode: "closest",
      xaxis: {title: "OTU ID"},
      margin: {t:50}
      
    };

    // 3. Use Plotly to plot the data with the layout.
    Plotly.newPlot("bubble", bubbleData, bubbleLayout); 

    //GUAGE CHART
    // Create variable that filters the metadata array 
    var metadata = data.metadata;
    var gaugeArray = metadata.filter(sampleObj => sampleObj.id == sample);
    // create a variable that holds first sample in array from step 
    var currentGauge = gaugeArray[0];
    var washFreq = parseFloat(currentGauge.wfreq);

    // var degrees = 180 - SVGPathSegLinetoVerticalAbs;
    // var radius = 0.5;
    // var radians = (degrees *Math.PI) / 180;
    // var x = radius * Math.cos(radians);
    // var y = radius * Math.sin(radians);
    // var mainPath = "M -.0 -0.05 L .0 0.05 L";
    // var pathX = String(x);
    // var space = " ";
    // var pathY = String(y);
    // var pathEnd = " Z";
    // var path = mainPath.concat(pathX, space, pathY, pathEnd);
    // var data = [
    //   {
    //     type:"scatter",
    //     x: [0],
    //     y: [0],
    //     marker: {size:12, color: "850000"},
    //     showlegened: false,
    //     name: "Freq",
    //     text: SVGPathSegLinetoVerticalAbs,
    //     hoverinfo: "text+name",

    //   }]


    // 4. Create the trace for the gauge chart.
    var gaugeData = [ {
      value: washFreq,
      type: "indicator",
      mode: "gauge+number",
      gauge: {
        axis: {range: [null, 10]},
        bar: {color: "black"},
        steps: [
          {range: [0, 2], color: "red"},
          {range: [2, 4], color: "orange"},
          {range: [4, 6], color: "yellow"},
          {range: [6, 8], color: "yellowgreen"},
          {range: [8, 10], color: "forestgreen"}
        ]
      },
      title: {text: "<b>Belly Button Washing Frequency</b> <br> Scrubs per Week", font: {size:20}}



    }
     
    ];
    
    // 5. Create the layout for the gauge chart.
    var gaugeLayout = { width: 500, height: 400, margin: {t: 40 , l: 30}
     
    };

    // 6. Use Plotly to plot the gauge data and layout.
    Plotly.newPlot("gauge", gaugeData, gaugeLayout);
  });
}
// 1. Create the buildCharts function.
1. Create the buildCharts function.
1 . Create the buildCharts function .
function buildCharts(sample) {
  d3.json("samples.json").then((data) => {
    var samplesArray = data.samples;
    var newSamplesArray = samplesArray.filter(sampleObj => sampleObj.id == sample);
    var currentSample = newSamplesArray[0];
    var otu_ids = currentSample.otu_ids;
    var otu_labels = currentSample.otu_labels;
    var sample_values = currentSample.sample_values;
    console.log(otu_ids);
    console.log(otu_labels);
    console.log(sample_values);
    var yticks = otu_ids.slice(0,10).map(function(otuID){
      return `OTU ${otuID}`;
    }).reverse();
    console.log(yticks);
    var barData = [
      {
          x: sample_values.slice(0,10).reverse(),
          y: yticks,
          text: otu_labels.slice(0,10).reverse(),
          type: "bar",
          orientation: "h"    
      }
    ];
    var barLayout = {
      title: "Top Bacteria Cultures Found",
      margin: {t: 60, l: 150}
    };
    Plotly.newPlot("bar", barData, barLayout);
    var bubbleData = [
      {
        x: otu_ids,
        y: sample_values,
        text: otu_labels,
        mode: "markers",
        marker: {
          size: sample_values,
          color: otu_ids,
          colorscale: "Earth"
        }
      }
    ];
    var bubbleLayout = {
      title: "Bacteria Cultures per Sample",
      hovermode: "closest",
      xaxis: {title: "OTU ID"},
      margin: {t:50}
    };
    Plotly.newPlot("bubble", bubbleData, bubbleLayout); 
    var metadata = data.metadata;
    var gaugeArray = metadata.filter(sampleObj => sampleObj.id == sample);
    var currentGauge = gaugeArray[0];
    var washFreq = parseFloat(currentGauge.wfreq);
    var gaugeData = [ {
      value: washFreq,
      type: "indicator",
      mode: "gauge+number",
      gauge: {
        axis: {range: [null, 10]},
        bar: {color: "black"},
        steps: [
          {range: [0, 2], color: "red"},
          {range: [2, 4], color: "orange"},
          {range: [4, 6], color: "yellow"},
          {range: [6, 8], color: "yellowgreen"},
          {range: [8, 10], color: "forestgreen"}
        ]
      },
      title: {text: "<b>Belly Button Washing Frequency</b> <br> Scrubs per Week", font: {size:20}}
    }
    ];
    var gaugeLayout = { width: 500, height: 400, margin: {t: 40 , l: 30}
    };
    Plotly.newPlot("gauge", gaugeData, gaugeLayout);
  });
}
function buildCharts ( sample ) { d3 . json ( "samples.json" ) . then ( ( data ) => { var samplesArray = data . samples ; var newSamplesArray = samplesArray . filter ( sampleObj => sampleObj . id == sample ) ; var currentSample = newSamplesArray [ 0 ] ; var otu_ids = currentSample . otu_ids ; var otu_labels = currentSample . otu_labels ; var sample_values = currentSample . sample_values ; console . log ( otu_ids ) ; console . log ( otu_labels ) ; console . log ( sample_values ) ; var yticks = otu_ids . slice ( 0 , 10 ) . map ( function ( otuID ) { return ` ${ otuID } ` ; } ) . reverse ( ) ; console . log ( yticks ) ; var barData = [ { x : sample_values . slice ( 0 , 10 ) . reverse ( ) , y : yticks , text : otu_labels . slice ( 0 , 10 ) . reverse ( ) , type : "bar" , orientation : "h" } ] ; var barLayout = { title : "Top Bacteria Cultures Found" , margin : { t : 60 , l : 150 } } ; Plotly . newPlot ( "bar" , barData , barLayout ) ; var bubbleData = [ { x : otu_ids , y : sample_values , text : otu_labels , mode : "markers" , marker : { size : sample_values , color : otu_ids , colorscale : "Earth" } } ] ; var bubbleLayout = { title : "Bacteria Cultures per Sample" , hovermode : "closest" , xaxis : { title : "OTU ID" } , margin : { t : 50 } } ; Plotly . newPlot ( "bubble" , bubbleData , bubbleLayout ) ; var metadata = data . metadata ; var gaugeArray = metadata . filter ( sampleObj => sampleObj . id == sample ) ; var currentGauge = gaugeArray [ 0 ] ; var washFreq = parseFloat ( currentGauge . wfreq ) ; var gaugeData = [ { value : washFreq , type : "indicator" , mode : "gauge+number" , gauge : { axis : { range : [ null , 10 ] } , bar : { color : "black" } , steps : [ { range : [ 0 , 2 ] , color : "red" } , { range : [ 2 , 4 ] , color : "orange" } , { range : [ 4 , 6 ] , color : "yellow" } , { range : [ 6 , 8 ] , color : "yellowgreen" } , { range : [ 8 , 10 ] , color : "forestgreen" } ] } , title : { text : "<b>Belly Button Washing Frequency</b> <br> Scrubs per Week" , font : { size : 20 } } } ] ; var gaugeLayout = { width : 500 , height : 400 , margin : { t : 40 , l : 30 } } ; Plotly . newPlot ( "gauge" , gaugeData , gaugeLayout ) ; } ) ; }
1.
1 .
// 2. Use d3.json to load and retrieve the samples.json file  // 3. Create a variable that holds the samples array.  // 4. Create a variable that filters the samples for the object with the desired sample number. //  5. Create a variable that holds the first sample in the array. // 6. Create variables that hold the otu_ids, otu_labels, and sample_values. // 7. Create the yticks for the bar chart. // Hint: Get the the top 10 otu_ids and map them in descending order   //  so the otu_ids with the most bacteria are last.  // 8. Create the trace for the bar chart.  // 9. Create the layout for the bar chart.  // 10. Use Plotly to plot the data with the layout.  // 1. Create the trace for the bubble chart. // 2. Create the layout for the bubble chart. // 3. Use Plotly to plot the data with the layout. //GUAGE CHART // Create variable that filters the metadata array  // create a variable that holds first sample in array from step  // var degrees = 180 - SVGPathSegLinetoVerticalAbs; // var radius = 0.5; // var radians = (degrees *Math.PI) / 180; // var x = radius * Math.cos(radians); // var y = radius * Math.sin(radians); // var mainPath = "M -.0 -0.05 L .0 0.05 L"; // var pathX = String(x); // var space = " "; // var pathY = String(y); // var pathEnd = " Z"; // var path = mainPath.concat(pathX, space, pathY, pathEnd); // var data = [ //   { //     type:"scatter", //     x: [0], //     y: [0], //     marker: {size:12, color: "850000"}, //     showlegened: false, //     name: "Freq", //     text: SVGPathSegLinetoVerticalAbs, //     hoverinfo: "text+name", //   }] // 4. Create the trace for the gauge chart. // 5. Create the layout for the gauge chart. // 6. Use Plotly to plot the gauge data and layout.