-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
116 lines (92 loc) · 2.65 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
function getPlots(id) {
// Get all plots for a particular ID
d3.json("samples.json").then(function(data){
console.log(data)
var filter_data = data.samples.filter(sample => sample.id.toString()===id)[0]
var ids = filter_data.otu_ids;
console.log(ids)
var samplevalues = filter_data.sample_values.slice(0,10).reverse();
console.log(samplevalues)
var otulabels = filter_data.otu_labels.slice(0,10);
console.log(otulabels)
var otu_top = (filter_data.otu_ids.slice(0,10)).reverse();
console.log(otu_top)
var otu_id = otu_top.map(d => "otu" + d);
console.log(`OTU IDS: ${otu_id}`)
var otulabels = filter_data.otu_labels.slice(0,10);
console.log(`OTU Labels: ${otulabels}`)
var trace = {
x: samplevalues,
y: otu_id,
hovertemplate: otulabels,
marker: {
color: 'blue'},
type: "bar",
orientation: "h",
};
var data_trace1 = [trace];
var layout ={
title: "Top 10 OTU",
yaxis:{
tickmode:"linear",
},
margin: {
l: 100,
r: 100,
t: 100,
b: 40
}
};
Plotly.newPlot("bar", data_trace1, layout);
console.log("Before bubble");
console.log(data.samples);
var trace1 = {
x: filter_data.otu_ids,
y: filter_data.sample_values,
mode: "markers",
marker: {
size: filter_data.sample_values,
color: filter_data.otu_ids
},
text: filter_data.otu_labels
};
var layout2 = {
xaxis:{title:"OTU ID"},
height: 500,
width: 1000
};
var data1 = [trace1];
Plotly.newPlot("bubble", data1,layout2);
});
}
function getdempographicsInfo(id){
d3.json("samples.json").then((data)=> {
var metadata = data.metadata;
console.log(metadata)
var results = metadata.filter(meta => meta.id.toString()===id)[0];
console.log(results);
var demoInfo = d3.select("#sample-metadata");
demoInfo.html("");
Object.entries(results).forEach((key)=> {
demoInfo.append("h5").text(key[0].toUpperCase() + ":" + key[1] + "\n");
});
});
}
function optionChanged(id) {
getPlots(id);
getdempographicsInfo(id);
// gaugeChart(id)
}
function init()
{
var dropdown = d3.select("#selDataset");
d3.json("samples.json").then((data)=> {
console.log(data)
data.names.forEach(function(name) {
dropdown.append("option").text(name).property("value");
});
getPlots(data.names[0]);
getdempographicsInfo(data.names[0]);
});
}
init();