Infographic that displays 10 x 10 row of .svg images, with alternating colored images

Question

I need to create an infographic that displays several divs containing content including text and 2 variations of the same svg image (one image is green, one is black).

These svg images are small "people", and are expected to display an assortment of both colors (possibly randomly, limited to a number per row so that the order is not the same in each row) in a 10 x 10 grid.

Currently the method is being called on a scroll() event. When called, I'm looping 100 times and individually displaying a single black svg image, adding a number to its tag to indicate where the count is at. While this isn't ideal, it's my approach so far and is working, but slowly.

What I really want to do is display all 100 of these mixed color svg people, at once, when the page loads/document is ready, taking into account adding the "sprinkling" of green people svg's throughout the group. I might be able to use this solution for changing the black svg's CSS to green, but I am definitely stuck on how I'd do this randomly(?) throughout the 100 svg's that display.

One of my thoughts was to possibly call/execute the method that populates/adds 100 black svg's to the div's html, but save it into a single object/array. Once the page is ready, display the entire object/array of 100 svg's at once, then use the above link to change some people green..this is just brainstorming.

The other divs are not as big of an issue, since each displays < 10 people.

Thank you in advance for the help!

Answer 1

I took a random number generation approach.

1. I saved the number of sprinkled color I want throughout my SVG group in a data attribute on the container.
2. I captured all my svgs along with the number of total svgs.
3. I got the index of the SVG I wanted to change by multiplying a random number by the number of total svgs and taking its floor.
4. I then kept assigning a class to the SVG with the random index until I reached the "number of sprinkles" limit.

(function () {
  var $svgs = $('svg'),
      numSvgs = $svgs.length,
      howManySprinkles = parseInt($('[data-sprinkle]').attr('data-sprinkle'));

  function getRndSvg(outOfHowMany) {
    return Math.floor(Math.random() * outOfHowMany);
  }
  function sprinkleColor () {
    console.log(getRndSvg(numSvgs));
    var $rndElem = $svgs.eq(getRndSvg(numSvgs));
    if ($rndElem.attr('class') !== "alt-color") {
      $rndElem.attr('class', 'alt-color');
    }
  }
  while ($('.alt-color').length < howManySprinkles) {
   sprinkleColor(); 
  }  
}());

div {
  display: inline-block;
}
.alt-color circle {
  fill: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div data-sprinkle="3">
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>
<div>
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>
<div>
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>
<div>
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>
<div>
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>
<div>
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>
<div>
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>
<div>
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>
<div>
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>
<div>
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>