D3 Examples - SVG Icons

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .container, .container-new {
      width: 100%;
      height: 100%;
      margin: 1rem;
      background-color: #fafafa;
      display: flex;
      flex-direction: row;
      flex-wrap:  wrap;
      justify-content: center;
    }
    .icon {
      flex:  0 1 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    svg {
      width:  50%;
      height: 50%;
    }
  </style>
</head>
<body>
  <h3>Existing Topic Icons</h3>
  <div class="container">
  </div>
  <h3>Options for New Topic Icons</h3>
  <div class="container equity"></div>
  <div class="container financing"></div>
  <div class="container tribal"></div>
  <script>
    var existingIcons = [
      {
        color: '#479c6b',
        topic: 'agriculture'
      },
      {
        color: '#3c5882',
        topic: 'biodiversity-and-habitat'
      },
      {
        color: '#809530',
        topic: 'parks-recreation-and-historic-and-cultural'
      },
      {
        color: '#a73f3b',
        topic: 'emergency-management'
      },
      {
        color: '#ce8a34',
        topic: 'energy'
      },
      {
        color: '#1d6440',
        topic: 'forestry'
      },
      {
        color: '#815a54',
        topic: 'land-use-and-community-development'
      },
      {
        color: '#009290',
        topic: 'ocean-and-coast'
      },
      {
        color: '#bc3a6d',
        topic: 'public-health'
      },
      {
        color: '#7f5a79',
        topic: 'transportation'
      },
      {
        color: '#138db8',
        topic: 'water'
      }
    ];
​
    var equityIcons = [
      {
        color: '#479c6b',
        topic: 'equity-and-environmental-justice1'
      },
      {
        color: '#3c5882',
        topic: 'equity-and-environmental-justice2'
      },
    ];
​
    var financingIcons = [
      {
        color: '#809530',
        topic: 'financing1'
      },
      {
        color: '#a73f3b',
        topic: 'financing2'
      },
            {
        color: '#a73f3b',
        topic: 'financing3'
      },
    ];
​
    var tribalIcons = [
      {
        color: '#1d6440',
        topic: 'tribal-and-indigenous-communities1'
      },
      {
        color: '#1d6440',
        topic: 'tribal-and-indigenous-communities2'
      },
    ];
​
    function loadSvgFile(filename, className) {
      d3.xml(filename).mimeType('image/svg+xml').get(function(error, xml) {
        if (error) throw error;
        var icon = d3.select('.' + className)
          .append('div')
          .classed('icon', true)
          .node();
​
        icon.appendChild(xml.documentElement);
​
        var span = document.createElement('span');
        var topic = filename.split('.')[0];
        span.innerHTML = topic.split('topic-')[1];
        icon.appendChild(span)
​
      });
    }
​
    existingIcons.forEach(function(item){
      loadSvgFile('topic-' + item.topic + '.svg', 'container');
    });
​
    equityIcons.forEach(function(item){
      loadSvgFile('topic-' + item.topic + '.svg', 'equity');
    });
​
    financingIcons.forEach(function(item){
      loadSvgFile('topic-' + item.topic + '.svg', 'financing');
    });
​
    tribalIcons.forEach(function(item){
      loadSvgFile('topic-' + item.topic + '.svg', 'tribal');
    });
​
  </script>
</body>
​
    