-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
139 lines (119 loc) · 4.36 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
const bellyButtons = "https://2u-data-curriculum-team.s3.amazonaws.com/dataviz-classroom/v1.1/14-Interactive-Web-Visualizations/02-Homework/samples.json"
function init(){
// code that runs once (only on page load or refresh)
let dropdown = document.getElementById('selDataset');
// create dropdown/select
d3.json(bellyButtons).then(function(data){
console.log(data)
for (let i = 0; i < data.names.length; i++) {
option = document.createElement('option');
option.text = data.names[i];
dropdown.appendChild(option);
}
})
// run functions to generate plots
createScatter('940')
createBar('940')
createSummary('940')
}
// function that runs whenever the dropdown is changed
// this function is in the HTML and is called with an input called 'this.value'
// that comes from the select element (dropdown)
function optionChanged(newID){
// code that updates graphics
createScatter(newID)
createBar(newID)
createSummary(newID)
}
function createScatter(id){
// code that makes scatter plot at id='bubble'
let otuIDs =[];
let otuColors = [];
let sampleValues = [];
let otuLabels = [];
d3.json(bellyButtons).then(function(data){
for (let i = 0; i < data.samples.length; i++){
if(id === data.samples[i].id){
for(let j =0; j < data.samples[i].sample_values.length; j++){
otuIDs.push(data.samples[i].otu_ids[j])
otuColors.push(data.samples[i].otu_ids[j])
sampleValues.push(data.samples[i].sample_values[j])
otuLabels.push(data.samples[i].otu_labels[j])
}
}
}
let scatterData = [
{
x:otuIDs,
y:sampleValues,
mode:'markers',
marker: {size:sampleValues, color:otuColors},
text:otuLabels
}
];
let layout = {title: "Bellybutton Samples Bubble Chart"};
Plotly.newPlot("bubble", scatterData, layout)
})
}
function createBar(id){
// code that makes bar chart at id='bar'
let x = [];
let y = [];
let hoverText = [];
d3.json(bellyButtons).then(function(data){
for(let i = 0; i < data.samples.length; i++){
if(id === data.samples[i].id){
for(let j = 0; j < 10; j++){
y.push(data.samples[i].otu_ids[j]);
x.push(data.samples[i].sample_values[j]);
hoverText.push(data.samples[i].otu_labels[j]);
}
}
}
for(let i = 0; i < y.length; i++){
y[i] = "OTU-"+y[i]
}
let graphData = [
{
x:x,
y:y,
mode:'markers',
marker: {size:16},
text:hoverText,
type: 'bar',
orientation: 'h'
}
];
let layout = {title: "Bellybutton Samples Bar Chart"};
Plotly.newPlot("bar", graphData, layout)
})
}
function createSummary(id){
// code that makes list, paragraph, text/linebreaks at id='sample-meta'
d3.json(bellyButtons).then(function(data){
let demoList = "";
let summaryTable = document.getElementById("sample-metadata")
idType = Number(id)
for(let i = 0; i < data.metadata.length; i++){
let demoData = data.metadata[i]
if(idType === demoData.id){
for(let [key,value] of Object.entries(demoData)){
demoList += key + ":" + value + "<br>"
}
}
};
summaryTable.innerHTML = demoList;
});
}
// function called, runs init instructions
// runs only on load and refresh of browser page
init()
// STRATEGIES
// 1. Inside-Out: Generate each chart by assuming an ID/name then refactor the code to
// work for any ID/name coming from the function. I typically do this practice.
// 2. Outside-In: Generate the control (dropdown) and how the control interacts with the other parts.
// I gave you the basics of how it interacts above. You could generate the dropdown
// and then see in the console the ID/names update as you make a change. Then you could
// make your chart code.
// Overall, the above are the two steps you need to do (1. Make plots with data, 2. make dropdown that passes id to functions)
// You could do it in either order.