This project visualizes data from a JSON file that reports types of bacteria found in the umbilici (belly buttons) of test subjects. The dashboard allows users to explore the demographic information, bacteria types, and washing frequency associated with each subject in the study.
Use D3 to read JSON file and Javascript to build dashboard
function initDashboard() {
//Select dropdown
var dropdown = d3.select("#selDataset");
//Select Demographic data box
var demoInfo = d3.select("#sample-metadata");
//Read samples.json
d3.json("samples.json").then((data) => {
//grab array of names for dropdown
var names = data.names;
names.forEach((UID) => {
//Create dropdown options by appending each name to text and property attributes of new option
dropdown.append("option").text(UID).property("value", UID);
//console.log(typeof(UID))
});
//Set UID to first value to build initial plots and table
var SID = "940";
//call function to build initial charts and table
buildChartsTable(SID);
});
}
Use Plotly to build visualizations
var gaugeData = [
{
domain: { x: [0, 1], y: [0, 1] },
value: wfreq,
title: { text: "Belly Button Washing Frequency (per week)" },
type: "indicator",
mode: "gauge+number",
gauge: {
axis: { range: [null, 9], tickwidth: 1, tickcolor: "darkblue" },
bar: { color: "darkblue" },
bgcolor: "white",
borderwidth: 2,
bordercolor: "gray",
steps: [
{ range: [0, 5], color: "cyan" },
{ range: [5, 9], color: "royalblue" },
],
},
},
];
//Set layout and make plot
var layout = { width: 600, height: 500, margin: { t: 0, b: 0 } };
Plotly.newPlot("gauge", gaugeData, layout);
});
}