title: Fill last svg graphic drawn in pictogram by percentage of height (d3.js)
body: <p>I am trying to modify this <a href="http://bl.ocks.org/alansmithy/d832fc03f6e6a91e99f4" rel="nofollow">pictogram</a>. I would like to create a similar affect, but with no user input. My aim is to have 50 SVG graphics displayed, but by having the data out of 100. So for instance, if the data input was 27, 13.5 of the graphics would be filled.</p>
  
  <p>From my limited experience with working in d3, I know the code is going to have to omit most(if not all) the css. This is my attempt so far;</p>
  
  <p><a href="http://plnkr.co/edit/tZXJ0ZqHp2y3PqYPunah?p=preview" rel="nofollow">http://plnkr.co/edit/tZXJ0ZqHp2y3PqYPunah?p=preview</a></p>
  
  <p>I'm not really sure how I can handle the transition of the last element so that, based on the data of <code>27/2</code> it would only fill the last graphic by 50%?</p>
  
  <p>Here is the code;</p>
  
  <pre><code>var svgDoc = d3.select("body")
  .append("svg")
  .attr("viewBox", "0 0 100 100");
  
  //define an icon store it in svg &lt;defs&gt; elements as a reusable component - this geometry can be generated from Inkscape, Illustrator or similar
  svgDoc.append("defs")
    .append("g")
  
    .attr("id", "iconCustom")
  
    .append("path")
  
    .attr("d", "M3.5,2H2.7C3,1.8,3.3,1.5,3.3,1.1c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1c0,0.4,0.2,0.7,0.6,0.9H1.1C0.7,2,0.4,2.3,0.4,2.6v1.9c0,0.3,0.3,0.6,0.6,0.6h0.2c0,0,0,0.1,0,0.1v1.9c0,0.3,0.2,0.6,0.3,0.6h1.3c0.2,0,0.3-0.3,0.3-0.6V5.3c0,0,0-0.1,0-0.1h0.2c0.3,0,0.6-0.3,0.6-0.6V2.6C4.1,2.3,3.8,2,3.5,2z");
  
  
  //specify the number of columns and rows for pictogram layout
  var numCols = 10;
  var numRows = 5;
  
  //padding for the grid
  var xPadding = 10;
  var yPadding = 15;
  
  //horizontal and vertical spacing between the icons
  var hBuffer = 9;
  var wBuffer = 8;
  
  //generate a d3 range for the total number of required elements
  var myIndex = d3.range(numCols * numRows);
  var myData = 27/2
  
  //create group element and create an svg &lt;use&gt; element for each icon
  svgDoc.append("g")
    .attr("id", "pictoLayer")
    .selectAll("use")
    .data(myIndex)
    .enter()
    .append("use")
    .attr("xlink:href", "#iconCustom")
    .attr("id", function(d) {
      return "icon" + d;
    })
    .attr("x", function(d) {
      var remainder = d % numCols; //calculates the x position (column number) using modulus
      return xPadding + (remainder * wBuffer); //apply the buffer and return value
    })
    .attr("y", function(d) {
      var whole = Math.floor(d / numCols) //calculates the y position (row number)
      return yPadding + (whole * hBuffer); //apply the buffer and return the value
    })
    .transition()
    .duration(1000)
    .style("fill", function(d) {
      if(d &lt; myData) {
        return "steelblue"
      }
  
    })
  </code></pre>
  
  <p>As a footnote; </p>
  
  <p>I am also trying to follow the enter, update, exit paradigm here so I can easily update with new data, although it's not the basis of the question, any advice on how to write the code with that in mind also is much appreciated! </p>
  
  <p>(<a href="http://plnkr.co/edit/fsJvJKqEW9bMtR6pClaY?p=preview" rel="nofollow">First attempt</a>, if you think continuing this way would better remedy the problem)</p>
  
  <p>Thanks in advance for any advice/help!</p>