Health Research Data Dashboard

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.

Github Repository

View on Github Pages

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);
  });
}