amylio / BellyButtonBiodiversity

Building a webpage using Plotly.js, a Javascript visualization library to plot data from external files and/or web-sources into a bar, pie or scatter plot chart. Utilized functional programming and methods to manipulate the data to achieve results.

Belly Button Biodiversity

Build a webpage using Plotly.js, a Javascript visualization library to plot data from external files and/or web-sources into a bar, pie and bubble charts. Utilized Javascript functional programming and methods to create interactive features, such as buttons or drop down menus, build chart components and finally HTML/Bootstrap script tags to stylize and arrange the data to publish the results.

Overview

Many bacteria species are not well studied and many more are unknown. We are tasked to assist a Rosa, a biomedical researcher who is responsible to study and document these bacterias. She is particularly interested in bacteria that synthesize proteins that taste like beef. Alternative meat companies have been successful in synthesizing this flavor profile using bacteria found in algae, and a few other organic matters. Improbable Foods is interested in finding the "perfect" flavor. Rosa believes that there might be a microorganism that can achieve the results that they are looking for. She theorizes that the ideal bacteria may be found in the human body, specifically the "belly button". In order to consolidate the data that has been collected, Rosa would like us to create a dashboard that can be accessed from anywhere. This webpage will be the main source for research team, as well as, the anonymous participants that are interested in knowing about the bacterias that have colonized in their belly buttons. To start:

• Build the code in Javascript to read data file in .json format using d3 (Data Driven Documents)
  • Create variables that will collect data such as ID,Gender,Bacteria Name, etc.
• Develop chart properties to visualize:
  • Bar Chart

• Gauge Chart

• Bubble Chart

• Use HTML and Bootstrap components to display the results, add images, webpage customization and interactive buttons (i.e. dropdown list)
• Publish final, working webpage using GitHub/GitPages to allow users access without the need to store the script and data in their local drives.

Results

Published page can be access by clicking here.

Tip: Best viewed on a desktop as the page has not been optimized to be mobile responsive.