-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
154 lines (117 loc) · 4.14 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
// create the function that gets the data and creates the plots for the id
function getPlot(id) {
// get the data from the json file
d3.json("samples.json").then((data)=> {
console.log(data)
// filter sample values by id
var samples = data.samples.filter(s => s.id.toString() === id)[0];
console.log(samples);
// get only top 10 sample values to plot and reverse for the plotly
var sampleValues = samples.sample_values.slice(0, 10).reverse();
// get only top 10 otu ids for the plot
var idValues = (samples.otu_ids.slice(0, 10)).reverse();
// get the otu id's to the desired form for the plot
var idOtu = idValues.map(d => "OTU " + d)
console.log(`OTU IDS: ${idOtu}`)
// get the top 10 labels for the plot
var labels = samples.otu_labels.slice(0, 10);
console.log(`Sample Values: ${sampleValues}`)
console.log(`Id Values: ${idValues}`)
// create trace variable for the plot
var trace = {
x: sampleValues,
y: idOtu,
text: labels,
type:"bar",
orientation: "h",
};
// create data variable
var data = [trace];
// create layout variable to set plots layout
var layout = {
title: "Top 10 OTU",
yaxis:{
tickmode:"linear",
},
margin: {
l: 100,
r: 100,
t: 30,
b: 20
}
};
// create the bar plot
Plotly.newPlot("bar", data, layout);
//console.log(`ID: ${samples.otu_ids}`)
// create the trace for the bubble chart
var trace1 = {
x: samples.otu_ids,
y: samples.sample_values,
mode: "markers",
marker: {
size: samples.sample_values,
color: samples.otu_ids
},
text: samples.otu_labels
};
// set the layout for the bubble plot
var layout = {
xaxis:{title: "OTU ID"},
height: 600,
width: 1300
};
// create the data variable
var data1 = [trace1];
// create the bubble plot
Plotly.newPlot("bubble", data1, layout);
// create pie chart
var tracePie = {
labels: idOtu,
values:sampleValues,
type:"pie",
}
var data = [tracePie]
Plotly.newPlot("gauge", data)
});
}
// create the function to get the necessary data
function getInfo(id) {
// read the json file to get data
d3.json("samples.json").then((data)=> {
// get the metadata info for the demographic panel
var metadata = data.metadata;
console.log(metadata)
// filter meta data info by id
var result = metadata.filter(meta => meta.id.toString() === id)[0];
// select demographic panel to put data
var demographicInfo = d3.select("#sample-metadata");
// empty the demographic info panel each time before getting new id info
demographicInfo.html("");
// grab the necessary demographic data data for the id and append the info to the panel
Object.entries(result).forEach((key) => {
demographicInfo.append("h5").text(key[0].toUpperCase() + ": " + key[1] + "\n");
});
});
}
// create the function for the change event
function optionChanged(id) {
getPlot(id);
getInfo(id);
}
// create the function for the initial data rendering
function init() {
// select dropdown menu
var dropdown = d3.select("#selDataset");
// read the data
d3.json("samples.json").then((data)=> {
console.log(data)
// get the id data to the dropdwown menu
data.names.forEach(function(name) {
dropdown.append("option").text(name).property("value");
});
// call the functions to display the data and the plots to the page
getPlot(data.names[0]);
getInfo(data.names[0]);
});
}
init();