StarterCode/static/js/app.js
/**
 * update the bar chart
 * @param {the sample selected by the optionChanged function} sample 
 */
update the bar chart
@param {the sample selected by the optionChanged function} sample
update the bar chart @param { the sample selected by the optionChanged function } sample
function updateBarChart(sample) {
	if (sample == null) {
		d3.select("bar").text("");
		return;
	}
	var top10OTUsFound = sortTop10OTUsFound(sample);
	var data = [{
		x: top10OTUsFound.map(object => object.sample_values),
		y: top10OTUsFound.map(object => `OTU ${object.otu_ids} `),
		text: top10OTUsFound.map(object => object.otu_labels.split(";").join("<br>")),
		marker: {
			color: top10OTUsFound.map(object => otuIdToRgb(object.otu_ids))
		},
		type: "bar",
		orientation: "h"
	}];
	var layout = {
		title: "Top 10 OTUs Found",
	};
	Plotly.newPlot("bar", data, layout);
}
function updateBarChart ( sample ) { if ( sample == null ) { d3 . select ( "bar" ) . text ( "" ) ; return ; } var top10OTUsFound = sortTop10OTUsFound ( sample ) ; var data = [ { x : top10OTUsFound . map ( object => object . sample_values ) , y : top10OTUsFound . map ( object => ` ${ object . otu_ids } ` ) , text : top10OTUsFound . map ( object => object . otu_labels . split ( ";" ) . join ( "<br>" ) ) , marker : { color : top10OTUsFound . map ( object => otuIdToRgb ( object . otu_ids ) ) } , type : "bar" , orientation : "h" } ] ; var layout = { title : "Top 10 OTUs Found" , } ; Plotly . newPlot ( "bar" , data , layout ) ; }
update the bar chart
 @param {the sample selected by the optionChanged function} sample
update the bar chart @param { the sample selected by the optionChanged function } sample
// clear and exit if null sample // filter the top 10 otu's // map filtered data // set layout // plot data