Skip to content
Interactive dashboard created with Python Flask and JavaScript, deployed to Heroku
Jupyter Notebook JavaScript Python HTML CSS
Branch: master
Clone or download
Latest commit e01e681 Jul 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bb_app
.gitignore
Operational.ipynb
Procfile
README.md
initdb.py
requirements.txt

README.md

Building an interactive dashboard to explore a Belly Buton Biodiversity

Step 1 - Flask API

Use Flask to design an API for your dataset and to serve the HTML and JavaScript required for your dashboard page.

  • Create the following routes for your api.
@app.route("/")
    """Return the dashboard homepage."""
@app.route('/names')
    """List of sample names.

    Returns a list of sample names in the format
    [
        "BB_940",
        "BB_941",
        "BB_943",
        "BB_944",
        "BB_945",
        "BB_946",
        "BB_947",
        ...
    ]

    """
@app.route('/otu')
    """List of OTU descriptions.

    Returns a list of OTU descriptions in the following format

    [
        "Archaea;Euryarchaeota;Halobacteria;Halobacteriales;Halobacteriaceae;Halococcus",
        "Archaea;Euryarchaeota;Halobacteria;Halobacteriales;Halobacteriaceae;Halococcus",
        "Bacteria",
        "Bacteria",
        "Bacteria",
        ...
    ]
    """
@app.route('/metadata/<sample>')
    """MetaData for a given sample.

    Args: Sample in the format: `BB_940`

    Returns a json dictionary of sample metadata in the format

    {
        AGE: 24,
        BBTYPE: "I",
        ETHNICITY: "Caucasian",
        GENDER: "F",
        LOCATION: "Beaufort/NC",
        SAMPLEID: 940
    }
    """
@app.route('/wfreq/<sample>')
    """Weekly Washing Frequency as a number.

    Args: Sample in the format: `BB_940`

    Returns an integer value for the weekly washing frequency `WFREQ`
    """
@app.route('/samples/<sample>')
    """OTU IDs and Sample Values for a given sample.

    Sort your Pandas DataFrame (OTU ID and Sample Value)
    in Descending Order by Sample Value

    Return a list of dictionaries containing sorted lists  for `otu_ids`
    and `sample_values`

    [
        {
            otu_ids: [
                1166,
                2858,
                481,
                ...
            ],
            sample_values: [
                163,
                126,
                113,
                ...
            ]
        }
    ]
    """

Step 2 - Plotly.js

Use Plotly.js to build interactive charts for your dashboard.

  • Use the route /names to populate a dropdown select element with the list of sample names.

    • Use document.getElementById, document.createElement and append to populate the create option elements and append them to the dropdown selector.

    • Use the following HTML tag for the dropdown selector

    <select id="selDataset" onchange="optionChanged(this.value)"></select>
    • Create a function called optionChanged to handle the change event when a new sample is selected (i.e. fetch data for the newly selected sample).
  • Create a PIE chart that uses data from your routes /samples/<sample> and /otu to display the top 10 samples.

    • Use the Sample Value as the values for the PIE chart

    • Use the OTU ID as the labels for the pie chart

    • Use the OTU Description as the hovertext for the chart

    • Use Plotly.restyle to update the chart whenever a new sample is selected

  • Create a Bubble Chart that uses data from your routes /samples/<sample> and /otu to plot the Sample Value vs the OTU ID for the selected sample.

    • Use the OTU IDs for the x values

    • Use the Sample Values for the y values

    • Use the Sample Values for the marker size

    • Use the OTU IDs for the marker colors

    • Use the OTU Description Data for the text values

    • Use Plotly.restyle to update the chart whenever a new sample is selected

  • Display the sample metadata from the route /metadata/<sample>

    • Display each key/value pair from the metadata JSON object somewhere on the page

    • Update the metadata for each sample that is selected

  • Finally, deploy your Flask app to Heroku.


You can’t perform that action at this time.