app.js
// Create a function to plot all charts and plots
Create a function to plot all charts and plots
Create a function to plot all charts and plots
function plotData(id) {
    d3.json('Data/samples.json').then((data) => {
        console.log(data);
        var samples = data.samples.filter(details => details.id.toString() === id)[0];
        var sampleValues = samples.sample_values.slice(0, 10).reverse();
        var topTenOTU = (samples.otu_ids.slice(0, 10)).reverse();
        var OTU_ids = topTenOTU.map(details => "OTU" + details);
        var labels = samples.otu_labels.slice(0, 10);
        var trace1 = {
            x: sampleValues,
            y: OTU_ids,
            text: labels,
            type: "bar",
            orientation: "h"
        };
        var data1 = [trace1];
        var layout = {
            title: "Top Ten OTUs",
            yaxis: {
                tickmode: "linear"
            },
            margin: {
                l: 100,
                r: 100,
                t: 100,
                b: 100
            }
        };
        Plotly.newPlot("bar", data1, layout);
        var trace2 = {
            x: samples.otu_ids,
            y: samples.sample_values,
            text: samples.otu_labels,
            mode: "markers",
            marker: {
                size: samples.sample_values,
                color: samples.otu_ids
            }
        };
        var layout2 = {
            xaxis: {title: "OTU ID"},
            height: 750,
            width: 1250
        };
        var data2 = [trace2];
        Plotly.newPlot("bubble", data2, layout2);
        var wfreq = data.metadata.wfreq
        var gaugeData = [
            {
                domain: {x: [0, 1], y: [0, 1] },
                value: wfreq,
                title: {text: 'Weekly Washing Frequency'},
                type: "indicator",
                mode: "gauge+number",
                gauge: {
                    axis: {range: [null, 9] },
                    steps: [
                    { range: [0, 2], color: "purple" },
                    { range: [2, 4], color: "red" },
                    { range: [4, 6], color: "blue" },
                    { range: [6, 8], color: "teal" },
                    { range: [8, 9], color: "green" }
                    ]}
                }
            ];
        var layout3 = {
            width: 500,
            height: 400,
            margin: {t: 10, b: 20, l: 80, r: 80}
        };
        Plotly.newPlot("gauge", gaugeData, layout3);
    });
}
function plotData ( id ) { d3 . json ( 'Data/samples.json' ) . then ( ( data ) => { console . log ( data ) ; var samples = data . samples . filter ( details => details . id . toString ( ) === id ) [ 0 ] ; var sampleValues = samples . sample_values . slice ( 0 , 10 ) . reverse ( ) ; var topTenOTU = ( samples . otu_ids . slice ( 0 , 10 ) ) . reverse ( ) ; var OTU_ids = topTenOTU . map ( details => "OTU" + details ) ; var labels = samples . otu_labels . slice ( 0 , 10 ) ; var trace1 = { x : sampleValues , y : OTU_ids , text : labels , type : "bar" , orientation : "h" } ; var data1 = [ trace1 ] ; var layout = { title : "Top Ten OTUs" , yaxis : { tickmode : "linear" } , margin : { l : 100 , r : 100 , t : 100 , b : 100 } } ; Plotly . newPlot ( "bar" , data1 , layout ) ; var trace2 = { x : samples . otu_ids , y : samples . sample_values , text : samples . otu_labels , mode : "markers" , marker : { size : samples . sample_values , color : samples . otu_ids } } ; var layout2 = { xaxis : { title : "OTU ID" } , height : 750 , width : 1250 } ; var data2 = [ trace2 ] ; Plotly . newPlot ( "bubble" , data2 , layout2 ) ; var wfreq = data . metadata . wfreq var gaugeData = [ { domain : { x : [ 0 , 1 ] , y : [ 0 , 1 ] } , value : wfreq , title : { text : 'Weekly Washing Frequency' } , type : "indicator" , mode : "gauge+number" , gauge : { axis : { range : [ null , 9 ] } , steps : [ { range : [ 0 , 2 ] , color : "purple" } , { range : [ 2 , 4 ] , color : "red" } , { range : [ 4 , 6 ] , color : "blue" } , { range : [ 6 , 8 ] , color : "teal" } , { range : [ 8 , 9 ] , color : "green" } ] } } ] ; var layout3 = { width : 500 , height : 400 , margin : { t : 10 , b : 20 , l : 80 , r : 80 } } ; Plotly . newPlot ( "gauge" , gaugeData , layout3 ) ; } ) ; }
Create a function to plot all charts and plots
Create a function to plot all charts and plots
// Read in the data(samples.json) // filter samples by id, and convert to string //console.log(samples); // Get the top 10 OTUs //console.log(`OTU Ids: ${OTU_ids}`); //console.log(`Sample Values: ${sampleValues}`); //console.log(`Top ten OTU IDs: ${topTenOTU}`); // Create traces for bar plot // Create data variable for plot // Create layout variable for plot // Initiate the horizontal bar plot // Create traces for bubble plot // Create the layout variable // Initiate the bubble plot // Find the washing frew from metadata //console.log(wfreq); // Create gauge plot // convert the wfreq to float // Initiate plot