mukhtyar · January 18, 2018 20:41
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!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>
diff --git a/topic-agriculture.svg b/topic-agriculture.svg
diff --git a/topic-biodiversity-and-habitat.svg b/topic-biodiversity-and-habitat.svg
diff --git a/topic-emergency-management.svg b/topic-emergency-management.svg
diff --git a/topic-energy.svg b/topic-energy.svg
diff --git a/topic-equity-and-environmental-justice1.svg b/topic-equity-and-environmental-justice1.svg
diff --git a/topic-equity-and-environmental-justice2.svg b/topic-equity-and-environmental-justice2.svg
diff --git a/topic-financing3.svg b/topic-financing3.svg
diff --git a/topic-forestry.svg b/topic-forestry.svg
diff --git a/topic-land-use-and-community-development.svg b/topic-land-use-and-community-development.svg
diff --git a/topic-ocean-and-coast.svg b/topic-ocean-and-coast.svg
diff --git a/topic-parks-recreation-and-historic-and-cultural.svg b/topic-parks-recreation-and-historic-and-cultural.svg
diff --git a/topic-public-health.svg b/topic-public-health.svg
diff --git a/topic-transportation.svg b/topic-transportation.svg
diff --git a/topic-tribal-and-indigenous-communities1.svg b/topic-tribal-and-indigenous-communities1.svg
diff --git a/topic-tribal-and-indigenous-communities2.svg b/topic-tribal-and-indigenous-communities2.svg
diff --git a/topic-tribal-and-indigenous-communities3 (copy).svg b/topic-tribal-and-indigenous-communities3 (copy).svg
diff --git a/topic-water.svg b/topic-water.svg
	<!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>