{"id":25924880,"url":"https://github.com/tinaland101/biodiversity-project","last_synced_at":"2026-04-10T02:11:29.825Z","repository":{"id":269344086,"uuid":"907052447","full_name":"tinaland101/Biodiversity-Project","owner":"tinaland101","description":" The Belly Button Biodiversity dataset, was collected as part of a study to understand the microbial ecosystem living in the human stomach. The project aims to provide a visual for the data collected in an interactive dashboard displayed on a user friendly website.","archived":false,"fork":false,"pushed_at":"2025-01-04T22:13:13.000Z","size":114,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-03T18:13:53.792Z","etag":null,"topics":["backend-webdevelopment","css","d3js","dashboard","front-end-development","html-css-javascript","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinaland101.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-22T17:16:13.000Z","updated_at":"2025-01-09T03:03:43.000Z","dependencies_parsed_at":"2025-03-03T18:13:55.018Z","dependency_job_id":null,"html_url":"https://github.com/tinaland101/Biodiversity-Project","commit_stats":null,"previous_names":["tinaland101/belly-button-challenge","tinaland101/biodiversity-project"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinaland101%2FBiodiversity-Project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinaland101%2FBiodiversity-Project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinaland101%2FBiodiversity-Project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinaland101%2FBiodiversity-Project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinaland101","download_url":"https://codeload.github.com/tinaland101/Biodiversity-Project/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241715018,"owners_count":20007914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backend-webdevelopment","css","d3js","dashboard","front-end-development","html-css-javascript","javascript"],"created_at":"2025-03-03T18:13:55.480Z","updated_at":"2025-12-31T01:03:11.772Z","avatar_url":"https://github.com/tinaland101.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"/ Build the metadata panel\nfunction buildMetadata(sample) {\n  // Fetch the data from the samples.json file\n  d3.json(\"https://static.bc-edx.com/data/dl-1-2/m14/lms/starter/samples.json\").then((data) =\u003e {\n\n    // Get the metadata field\n    const metadata = data.metadata;\n\n    // Filter the metadata for the object with the desired sample number\n    const resultArray = metadata.filter(sampleObj =\u003e sampleObj.id == sample);\n    const result = resultArray[0];  // There should only be one result since ID is unique\n\n    // Use d3 to select the panel with id of #sample-metadata\n    const panel = d3.select(\"#sample-metadata\");\n\n    // Use .html(\"\") to clear any existing metadata\n    panel.html(\"\");\n\n    // Loop through the metadata and display each key-value pair with capitalized labels\n    Object.entries(result).forEach(([key, value]) =\u003e {\n      // Capitalize the key (e.g., 'id' to 'ID')\n      const formattedKey = key.toUpperCase(); \n\n      // Append the formatted key and value to the panel\n      panel.append(\"p\").text(`${formattedKey}: ${value}`);\n    });\n  });\n}\n\n// Function to build both charts (Bubble and Bar charts)\nfunction buildCharts(sample) {\n  d3.json(\"https://static.bc-edx.com/data/dl-1-2/m14/lms/starter/samples.json\").then((data) =\u003e {\n\n    // Get the samples field\n    const sampleData = data.samples;\n\n    // Filter the samples for the object with the desired sample number\n    const resultArray = sampleData.filter(sampleObj =\u003e sampleObj.id == sample);\n    const result = resultArray[0];  // Get the first result (unique ID)\n\n    // Get the otu_ids, otu_labels, and sample_values\n    const otu_ids = result.otu_ids;\n    const otu_labels = result.otu_labels;\n    const sample_values = result.sample_values;\n\n    // Build the Bubble Chart\n    const bubbleTrace = {\n      x: otu_ids,\n      y: sample_values,\n      text: otu_labels,\n      mode: 'markers',\n      marker: {\n        size: sample_values,\n        color: otu_ids,\n        colorscale: 'Earth'\n      }\n    };\n\n    const bubbleLayout = {\n      title: 'Bacteria Cultures Per Sample',\n      xaxis: { title: 'OTU ID' },\n      yaxis: {\n        title: 'Number of Bacteria',\n        tickvals: [0, 500, 1000, 1500, 2000, 2500, 3000, 3500], // Set y-axis ticks\n      },\n      showlegend: false\n    };\n\n    // Render the Bubble Chart\n    Plotly.newPlot('bubble', [bubbleTrace], bubbleLayout);\n\n    // For the Bar Chart, map the otu_ids to a list of strings for your yticks\n    const top10OTUs = sample_values.slice(0, 10).reverse();\n    const top10OTUIds = otu_ids.slice(0, 10).map(id =\u003e `OTU ${id}`).reverse();\n    const top10OTULabels = otu_labels.slice(0, 10).reverse();\n\n    // Build the Bar Chart\n    const barTrace = {\n      x: top10OTUs,\n      y: top10OTUIds,\n      text: top10OTULabels,\n      type: 'bar',\n      orientation: 'h'\n    };\n\n    const barLayout = {\n      title: 'Top 10 Bacteria Cultures Found', // Updated title\n      xaxis: { \n        title: 'Number of Bacteria', // Updated x-axis label\n        tickvals: [0, 20, 40, 60, 80, 100, 120, 140, 160], // Set x-axis ticks\n      },\n      \n    };\n\n    // Render the Bar Chart\n    Plotly.newPlot('bar', [barTrace], barLayout);\n  });\n}\n\n// Function to run on page load\nfunction init() {\n  d3.json(\"https://static.bc-edx.com/data/dl-1-2/m14/lms/starter/samples.json\").then((data) =\u003e {\n\n    // Get the names field (test subject IDs)\n    const sampleNames = data.names;\n\n    // Use d3 to select the dropdown with id of #selDataset\n    const dropdown = d3.select(\"#selDataset\");\n\n    // Use the list of sample names to populate the select options\n    sampleNames.forEach((sample) =\u003e {\n      dropdown.append(\"option\").text(sample).property(\"value\", sample);\n    });\n\n    // Get the first sample from the list\n    const firstSample = sampleNames[0];\n\n    // Build charts and metadata panel with the first sample\n    buildCharts(firstSample);\n    buildMetadata(firstSample);\n  });\n}\n\n// Function for event listener when a new sample is selected\nfunction optionChanged(newSample) {\n  // Build charts and metadata panel each time a new sample is selected\n  buildCharts(newSample);\n  buildMetadata(newSample);\n}\n\n// Initialize the dashboard\ninit();\n________________\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinaland101%2Fbiodiversity-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinaland101%2Fbiodiversity-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinaland101%2Fbiodiversity-project/lists"}