label

index.html

<div id="container"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
  // Project names and categories
  var projectData = [
    { name: 'Support Project for the Amazonian Social Agenda of the ACTO', category: 'Social', color: 'red' },
    { name: 'Strategic Framework Program to Develop a Regional Agenda for the Protection of Indigenous Peoples in Voluntary Isolation and Initial Contact', category: 'Social', color: 'red' },
    { name: 'Forest Cover Monitoring Project in the Amazon Region/Deforestation Monitoring', category: 'Environmental', color: 'green' },
    { name: 'Forest use and Land use Changes in the Pan-Amazon Forest Project', category: 'Environmental', color: 'green' },
    { name: 'Integrated and Sustainable Management of Transboundary Waters Resources of the Amazon River Basin Considering Variability and Climate Change', category: 'Environmental', color: 'green' },
    { name: 'Environmental Health Surveillance Program for the Amazon Region', category: 'Health', color: 'purple' },
    { name: 'Institutional Strengthening Project for the ACTO Member Countries in Ecologically Responsible Forest Management and Biodiversity Conservation in Managed Forests in the Amazon', category: 'Biodiversity', color: 'blue' },
    { name: 'Bio-amazonian Project (This project is relevant to both health and biodiversity categories)', category: 'Biodiversity', color: 'blue' }
  ];

  // Render project labels
  var container = document.getElementById('container');
  projectData.forEach(function(project) {
    var label = document.createElement('div');
    label.innerHTML = '<svg width="10" height="10"><circle cx="5" cy="5" r="5" fill="' + project.color + '" /></svg>' + project.name;
    container.appendChild(label);
  });
</script>

label.markdown

label

A Pen by wagmachado on CodePen.

License.

script.js

   const projects = [
     // ... project objects
   ];

   const projectLabelsContainer = document.getElementById('project-labels');
   projects.forEach(project => {
     const projectLabel = document.createElement('div');
     projectLabel.innerHTML = `<span style="color: ${project.color};">●</span> ${project.name}`;
     projectLabelsContainer.appendChild(projectLabel);
   });