Dashboard
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
font-size: 2em;
}
dashboard {
display: flex;
flex-direction: column;
gap: 20px;
}
sample-metadata {
border: 1px solid #ccc;
padding: 10px;
width: 300px;
}
plots {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.plot {
flex: 1 1 45%;
}
In This Assignment You Will Build An Interactive Dashboard To Explore
Sample Metadata
// Load the JSON data
d3.json("samples.json").then(function(data) {
console.log("Data loaded:", data);
const sampleNames = data.names; // Array of sample IDs
const samples = data.samples; // Array of sample objects
const metadata = data.metadata; // Array of metadata objects
// Populate dropdown menu
const dropdown = d3.select("#sample-select");
sampleNames.forEach(name => {
dropdown.append("option").text(name).property("value", name);
});
// Initialize dashboard with first sample
const initialSample = sampleNames[0];
updateDashboard(initialSample);
// Add event listener for dropdown change
dropdown.on("change", function() {
const selectedSample = d3.select(this).property("value");
updateDashboard(selectedSample);
});
// Function to update dashboard based on selected sample
function updateDashboard(sampleID) {
// Filter data for selected sample
const sampleData = samples.find(s => s.id === sampleID);
const metaData = metadata.find(m => m.id.toString() === sampleID);
// Update metadata panel
updateMetadata(metaData);
// Update plots
updateBarChart(sampleData);
updateBubbleChart(sampleData);
updateGaugeChart(metaData);
}
// Function to update metadata panel
function updateMetadata(meta) {
const metadataDiv = d3.select("#sample-metadata");
metadataDiv.html("");
Object.entries(meta).forEach(([key, value]) => {
metadataDiv.append("p").text(`${key}: ${value}`);
});
}
// Function to create and update bar chart
function updateBarChart(sampleData) {
// Extract top 10 OTUs
const sampleValues = sampleData.sample_values;
const otuIDs = sampleData.otu_ids;
const otuLabels = sampleData.otu_labels;
// Combine data for sorting
const combined = otuIDs.map((id, index) => ({
id: id,
sample_value: sampleValues[index],
label: otuLabels[index]
}));
// Sort descending by sample_value
const sorted = combined.sort((a, b) => b.sample_value - a.sample_value);
const top10 = sorted.slice(0, 10).reverse();
const trace = {
x: top10.map(d => d.sample_value),
y: top10.map(d => `OTU ${d.id}`),
text: top10.map(d => d.label),
type: "bar",
orientation: "h"
};
const layout = {
title: "Top 10 OTUs in Sample",
margin: { t: 50, l: 100 }
};
Plotly.newPlot("bar", [trace], layout);
}
// Function to create or update bubble chart
function updateBubbleChart(sampleData) {
const otuIDs = sampleData.otu_ids;
const sampleValues = sampleData.sample_values;
const otuLabels = sampleData.otu_labels;
const trace = {
x: otuIDs,
y: sampleValues,
text: otuLabels,
mode: "markers",
marker: {
size: sampleValues,
color: otuIDs,
colorscale: "Earth",
sizemode: "area",
sizeref: 2.0 Math.max(...sampleValues) / (100*2),
sizemin: 4
}
};
const layout = {
title: "OTUs Distribution",
hovermode: "closest",
xaxis: { title: "OTU ID" },
yaxis: { title: "Sample Values" },
margin: { t: 50 }
};
Plotly.newPlot("bubble", [trace], layout);
}
// Function to create or update gauge chart
function updateGaugeChart(meta) {
const washFreq = meta.wfreq;
const data = [
{
type: "indicator",
mode: "gauge+number",
value: washFreq,
title: { text: "Weekly Washing Frequency", font: { size: 24 } },
gauge: {
axis: { range: [0, 9], tickwidth: 1, tickcolor: "darkblue" },
bar: { color: "darkblue" },
steps: [
{ range: [0, 1], color: "#f8f3ec" },
{ range: [1, 2], color: "#f4f1e0" },
{ range: [2, 3], color: "#e9e2c7" },
{ range: [3, 4], color: "#e2e3b4" },
{ range: [4, 5], color: "#d5e49d" },
{ range: [5, 6], color: "#b7cc92" },
{ range: [6, 7], color: "#8cbf8a" },
{ range: [7, 8], color: "#7fc97f" },
{ range: [8, 9], color: "#66c2a4" }
],
threshold: {
line: { color: "red", width: 4 },
thickness: 0.75,
value: washFreq
}
}
}
];
const layout = {
width: 350,
height: 300,
margin: { t: 25, r: 25, l: 25, b: 25 }
};
Plotly.newPlot("gauge", data, layout);
}
}).catch(function(error){
console.log("Error loading data:", error);
});
References
- Plotly.js Documentation. (n.d.). Retrieved from https://plotly.com/javascript/
- D3.js Documentation. (n.d.). Retrieved from https://d3js.org/
- Yurko, R., et al. (2020). Microbial diversity and composition in human navels. Frontiers in Microbiology, 11, 1040.
- Caporaso, J. G., et al. (2010). QIIME allows analysis of high-throughput community sequencing data. Nature Methods, 7(5), 335–336.
- MacConaill, L. E., et al. (2018). Using the gut microbiome as a biomarker for clinical outcomes: methods and applications. Clinical Pharmacology & Therapeutics, 103(5), 814–824.
- Heintz-Buschart, A., & Wilmes, P. (2018). Human gut microbiome: composition and dynamics. Genome Medicine, 10(1), 37.
- McDonald, D., et al. (2018). American Gut: an open platform for citizen science microbiome research. mSystems, 3(3), e00031-18.
- Das, S., et al. (2017). Exploring microbial communities in human body habitats using 16S rRNA gene sequencing. Frontiers in Microbiology, 8, 245.
- Goodrich, J. K., et al. (2014). Human genetics shape the gut microbiome. Cell, 159(4), 789–799.
- Zhou, Y., et al. (2021). Microbial signatures associated with health and disease in humans. Microbial Biotechnology, 14(8), 2356–2372.