GithubHelp home page GithubHelp logo

wjriebel / plotly-challenge Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 1.53 MB

An interactive dashboard to explore the Bacteria Biodiversity dataset, using Plotly.js to create visualizations

HTML 38.97% JavaScript 61.03%
bubble-chart chart belly-button-biodiversity

plotly-challenge's Introduction

Plot.ly Homework - Belly Button Biodiversity

Bacteria by filterforge.com

In this assignment, you will build an interactive dashboard to explore the Belly Button Biodiversity dataset, which catalogs the microbes that colonize human navels.

The dataset reveals that a small handful of microbial species (also called operational taxonomic units, or OTUs, in the study) were present in more than 70% of people, while the rest were relatively rare.

Step 1: Plotly

  1. Use the D3 library to read in samples.json.

  2. Create a horizontal bar chart with a dropdown menu to display the top 10 OTUs found in that individual.

  • Use sample_values as the values for the bar chart.

  • Use otu_ids as the labels for the bar chart.

  • Use otu_labels as the hovertext for the chart.

    bar Chart

  1. Create a bubble chart that displays each sample.
  • Use otu_ids for the x values.

  • Use sample_values for the y values.

  • Use sample_values for the marker size.

  • Use otu_ids for the marker colors.

  • Use otu_labels for the text values.

Bubble Chart

  1. Display the sample metadata, i.e., an individual's demographic information.

  2. Display each key-value pair from the metadata JSON object somewhere on the page.

hw

  1. Update all of the plots any time that a new sample is selected.

Additionally, you are welcome to create any layout that you would like for your dashboard. An example dashboard is shown below:

hw

Advanced Challenge Assignment (Optional)

The following task is advanced and therefore optional.

  • Adapt the Gauge Chart from https://plot.ly/javascript/gauge-charts/ to plot the weekly washing frequency of the individual.

  • You will need to modify the example gauge code to account for values ranging from 0 through 9.

  • Update the chart whenever a new sample is selected.

Weekly Washing Frequency Gauge

Deployment

  • Deploy your app to a free static page hosting service, such as GitHub Pages. Submit the links to your deployment and your GitHub repo.

  • Ensure your repository has regular commits (i.e. 20+ commits) and a thorough README.md file

Hints

  • Use console.log inside of your JavaScript code to see what your data looks like at each step.

  • Refer to the Plotly.js documentation when building the plots.

About the Data

Hulcr, J. et al.(2012) A Jungle in There: Bacteria in Belly Buttons are Highly Diverse, but Predictable. Retrieved from: http://robdunnlab.com/projects/belly-button-biodiversity/results-and-data/


© 2019 Trilogy Education Services

plotly-challenge's People

Contributors

wj-riebel avatar wjriebel avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.