top of page

Create Your First Project

Start adding your projects to your portfolio. Click on "Manage Projects" to get started

Microbial Species Analysis (JavaScript)

Project type

● Data Analysis Using JavaScript
● Data Visualization Using A Dashboard

Skills & Tools Used:

● JavaScript
● D3.js
● Plotly.js
● Data Visualization
● Dashboards

This project explores microbial data using the D3.js library to interpret and visualize information from the Belly Button Biodivesity dataset, which catalogs the microbes that colonize human navels. It aims to reveal top Operational Taxonomic Units (OTUs) in individuals (which are present in more than 70% of people, while the rest are relatively rare), utilizing dynamic visualizations like horizontal bar charts and bubble charts. The user-friendly interface features dropdown menus and responsive charts for seamless navigation, offering insights into microbial communities within each sample. Demographic metadata is also displayed, enhancing dataset context. Hosted on GitHub Pages for accessibility, this project emphasizes the potential of web-based data visualization tools in understanding microbiological ecosystems through analytics.

Deployment
- Check out my interactive dashboard on microbial ecosystems here: https://paoloarciaga.github.io/belly-button-challenge/

- Used D3 library to read samples.json from provided URL.
- Updated all plots when a new sample was selected.

Instructions
- Choose a Test Subject ID No. from the dropdown menu to view the visualizations with data specific to that individual.
- Hover over each chart to see additional details about the bacteria.

Features:

Horizontal Bar Chart: Top 10 OTUs found for the selected individual in the dropdown menu.
- Used sample_values as chart values.
- Used otu_ids as labels.
- Used otu_labels for hovertext.

Bubble Chart: Displays each sample.
- Used otu_ids for x values.
- Used sample_values for y values and marker size.
- Used otu_ids for marker colors.
- Used otu_labels for text values.

Demographic Information Panel: Displays the demographic information of the selected individual
- Displayed key-value pairs from the metadata JSON object on the page.

Gauge Chart
- Displayed the weekly washing frequency of the selected individual

bottom of page