-
Notifications
You must be signed in to change notification settings - Fork 0
/
BellyButton_bar_chart_starter_code.js
93 lines (76 loc) · 3 KB
/
BellyButton_bar_chart_starter_code.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
function init() {
// Grab a reference to the dropdown select element
var selector = d3.select("#selDataset");
// Use the list of sample names to populate the select options
d3.json("samples.json").then((data) => {
var sampleNames = data.names;
sampleNames.forEach((sample) => {
selector
.append("option")
.text(sample)
.property("value", sample);
});
// Use the first sample from the list to build the initial plots
var firstSample = sampleNames[0];
buildCharts(firstSample);
buildMetadata(firstSample);
});
}
// Initialize the dashboard
init();
function optionChanged(newSample) {
// Fetch new data each time a new sample is selected
buildMetadata(newSample);
buildCharts(newSample);
}
// Demographics Panel
function buildMetadata(sample) {
d3.json("samples.json").then((data) => {
var metadata = data.metadata;
// Filter the data for the object with the desired sample number
var resultArray = metadata.filter(sampleObj => sampleObj.id == sample);
var result = resultArray[0];
// Use d3 to select the panel with id of `#sample-metadata`
var PANEL = d3.select("#sample-metadata");
// Use `.html("") to clear any existing metadata
PANEL.html("");
// Use `Object.entries` to add each key and value pair to the panel
// Hint: Inside the loop, you will need to use d3 to append new
// tags for each key-value in the metadata.
Object.entries(result).forEach(([key, value]) => {
PANEL.append("h6").text(`${key.toUpperCase()}: ${value}`);
});
});
}
// 1. Create the buildCharts function.
function buildCharts(sample) {
// 2. Use d3.json to load and retrieve the samples.json file
d3.json("samples.json").then((data) => {
// 3. Create a variable that holds the samples array.
var samples = data.samples;
// 4. Create a variable that filters the samples for the object with the desired sample number.
var resultArray = samples.filter(sampleObj => sampleObj.id == sample);
// 5. Create a variable that holds the first sample in the array.
var result = resultArray[0];
// 6. Create variables that hold the otu_ids, otu_labels, and sample_values.
var otu_ids = result.otu_ids;
var otu_labels = result.otu_labels;
var sample_values = result.sample_values;
// 7. Create the yticks for the bar chart.
// Hint: Get the the top 10 otu_ids and map them in descending order
// so the otu_ids with the most bacteria are last.
var yticks = otu_ids.slice(0, 10).reverse().map(otu_ids => "OTU " + otu_ids);
// 8. Create the trace for the bar chart.
var barData = [{
x: sample_values.slice(0, 10).reverse(),
y: yticks,
type: 'bar',
orientation: 'h',
hovertext: otu_labels.slice(0, 10).reverse()
}];
// 9. Create the layout for the bar chart.
var barLayout = {
title: 'Top 10 Bacteria Cultures Found',
};
// 10. Use Plotly to plot the data with the layout.
Plotly.newPlot('bar', barData, barLayout);