static/js/app.js
// Build a function for the charts
Build a function for the charts
Build a function for the charts
function chartBuilder(sample) {
  d3.json("samples.json").then((data) => {
    let samples = data.samples;
    let results = samples.filter(sampleObj => sampleObj.id == sample);
    let result = results[0];
    let otu_ids = result.otu_ids;
    let otu_labels = result.otu_labels;
    let sample_values = result.sample_values;
    let y = otu_ids.slice(0, 10).map(otuID => `OTU ${otuID}`).reverse();
    let barData = [
    {
      y: y,
      x: sample_values.slice(0, 10).reverse(),
      text: otu_labels.slice(0, 10).reverse(),
      marker: {
        color: otu_ids,
        colorscale: 'Portland'},
      type: "bar",
      orientation: "h"
    }
  ];
    let barLayout = {
      title: "Top 10 Bacteria Cultures Found",
      margin: { t: 30, l: 150 },
  };
    Plotly.newPlot("bar", barData, barLayout);
    let bubbleLayout = {
      title: "Bacteria Cultures Per Sample",
      margin: { t: 0 },
      hovermode: "closest",
      xaxis: { title: "OTU ID" },
      margin: { t: 30}
    };
    let bubbleData = [
      {
        x: otu_ids,
        y: sample_values,
        text: otu_labels,
        mode: "markers",
        marker: {
          size: sample_values,
          color: otu_ids,
          colorscale: "Jet"
        }
      }
    ];
    Plotly.newPlot("bubble", bubbleData, bubbleLayout);
  });
}
function chartBuilder ( sample ) { d3 . json ( "samples.json" ) . then ( ( data ) => { let samples = data . samples ; let results = samples . filter ( sampleObj => sampleObj . id == sample ) ; let result = results [ 0 ] ; let otu_ids = result . otu_ids ; let otu_labels = result . otu_labels ; let sample_values = result . sample_values ; let y = otu_ids . slice ( 0 , 10 ) . map ( otuID => ` ${ otuID } ` ) . reverse ( ) ; let barData = [ { y : y , x : sample_values . slice ( 0 , 10 ) . reverse ( ) , text : otu_labels . slice ( 0 , 10 ) . reverse ( ) , marker : { color : otu_ids , colorscale : 'Portland' } , type : "bar" , orientation : "h" } ] ; let barLayout = { title : "Top 10 Bacteria Cultures Found" , margin : { t : 30 , l : 150 } , } ; Plotly . newPlot ( "bar" , barData , barLayout ) ; let bubbleLayout = { title : "Bacteria Cultures Per Sample" , margin : { t : 0 } , hovermode : "closest" , xaxis : { title : "OTU ID" } , margin : { t : 30 } } ; let bubbleData = [ { x : otu_ids , y : sample_values , text : otu_labels , mode : "markers" , marker : { size : sample_values , color : otu_ids , colorscale : "Jet" } } ] ; Plotly . newPlot ( "bubble" , bubbleData , bubbleLayout ) ; } ) ; }
Build a function for the charts
Build a function for the charts
// Pull in data from samples.json   // Grab the UTO data - samples  // Filter data object and pull ids, labels, and values // Build a bar chart of top 10 Bacteria Cultures found // use slice (0,10) to grab top 10 and .reverse to order decending // Bar graph layout // call plotly to make the bar chart // Build a Bubble Chart for the Bacteria Cultures for selected sample