{"size": 1566, "ext": "js", "max_stars_repo_path": "static/js/app.js", "max_stars_repo_name": "ZackRogers/plotly-challenge", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "static/js/app.js", "max_issues_repo_name": "ZackRogers/plotly-challenge", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "static/js/app.js", "max_forks_repo_name": "ZackRogers/plotly-challenge", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.0, "max_line_length": 82, "alphanum_fraction": 0.4763729246}
d3.json('samples.json').then(function ({ names, metadata, samples }) {
    names.forEach(name => {
        d3.select('select').append('option').text(name);
    });
    showCharts();
});

function optionChanged() {
    showCharts();
};

function showCharts(){
    d3.json('samples.json').then(({metadata,samples})=>{
        var selection = d3.select('select').node().value;

        var meta = metadata.filter(obj=>obj.id == selection)[0];
        var sample = samples.filter(obj=>obj.id == selection)[0];

        d3.select('.panel-body').html('')
        Object.entries(meta).forEach(([key,val])=>{
            d3.select('.panel-body').append('h5').text(key.toUpperCase()+': '+val)
        })

        console.log(meta, sample);

        var barData = [
            {
              x: sample.sample_values.slice(0,10).reverse(),
              y: sample.otu_ids.slice(0,10).reverse().map(val=>'OTU '+val),
              type: 'bar',
              orientation: 'h'
            }
        ];
        
        Plotly.newPlot('bar', barData);
        
        var trace1 = {
            x: sample.otu_ids,
            y: sample.sample_values,
            mode: 'markers',
            marker: {
                size: sample.sample_values,
                color: sample.otu_ids
            }
          };
          
          var data = [trace1];
          
          var layout = {
            title: 'Marker Size',
            showlegend: false,
            height: 600,
            width: 600
          };
          
          Plotly.newPlot('bubble', data);
    });
};