app.js
// 3. Create a bubble chart that displays each sample.
3. Create a bubble chart that displays each sample.
3 . Create a bubble chart that displays each sample .
function updateBubblesPlot(samples) {
    d3.json('samples2.json').then(data => {
      let bubbles = data.samples.filter(bubbleID => bubbleID.id == samples);
      let sv_bubbles = bubbles.map(d => d.sample_values);
      let otuids_bubbles = bubbles.map(d => d.otu_ids);
      let label_bubbles = bubbles.map(d => d.otu_labels);
      let trace2 = [{
        x: sv_bubbles[0],
        y: otuids_bubbles[0],
        mode: "markers",
        type: "bubble",
        marker: {
          size: sv_bubbles[0],
          color: otuids_bubbles[0],
        },
        text: label_bubbles[0],
      }];
      let layout2 = {
        title: "Top OTUs per Sample",
        width: 1400
      };
      Plotly.newPlot("bubble", trace2, layout2)
    });
}
function updateBubblesPlot ( samples ) { d3 . json ( 'samples2.json' ) . then ( data => { let bubbles = data . samples . filter ( bubbleID => bubbleID . id == samples ) ; let sv_bubbles = bubbles . map ( d => d . sample_values ) ; let otuids_bubbles = bubbles . map ( d => d . otu_ids ) ; let label_bubbles = bubbles . map ( d => d . otu_labels ) ; let trace2 = [ { x : sv_bubbles [ 0 ] , y : otuids_bubbles [ 0 ] , mode : "markers" , type : "bubble" , marker : { size : sv_bubbles [ 0 ] , color : otuids_bubbles [ 0 ] , } , text : label_bubbles [ 0 ] , } ] ; let layout2 = { title : "Top OTUs per Sample" , width : 1400 } ; Plotly . newPlot ( "bubble" , trace2 , layout2 ) } ) ; }
3.
3 .
// Use D3 library to read in samples.json // filtering data by the input value // Trace1 to plot bubble graph // Use otu_ids for the x values. // Use sample_values for the y values. // Use sample_values for the marker size. // Use otu_ids for the marker colors. // Use otu_labels for the text values. // Set layout with title // Build plot