D3 Pictogram Experiments

by canandita

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/herrstucki/5684816/raw/2318a9f6b9ac814d60f6b1f784f4b17c3e22ac3a/d3-grid.js"></script>

CoffeeScript

points = d3.range(50).map (i) -> {id: i}
pointGrid = d3.layout.grid()
  .rows(2)
  .cols(25)
  .size([400, 40]);

svg =d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 400)

svg.append("defs")
  .append("g")
  .attr("id","iconCustom")
   .append("path")
  .attr("d","M10.9873,8.0606 C10.8633,6.7076 9.6463,5.6456 8.1613,5.6456 L6.5003,5.6456 L6.5003,4.6116 C7.3343,4.2296 7.9173,3.3936 7.9173,2.4166 C7.9173,1.0816 6.8353,-0.0004 5.5003,-0.0004 C4.1653,-0.0004 3.0833,1.0816 3.0833,2.4166 C3.0833,3.3936 3.6663,4.2306 4.5003,4.6116 L4.5003,5.6456 L2.8383,5.6456 C1.3533,5.6456 0.1363,6.7076 0.0123,8.0606 L0.0003,14.7256 C0.0003,15.1786 0.3933,15.5446 0.8803,15.5446 L0.9653,15.5446 C1.4513,15.5446 1.8443,15.1786 1.8443,14.7256 L1.8443,8.2896 L2.4863,8.2896 L2.4863,15.4866 L2.5133,15.4866 L2.5133,23.7046 C2.5133,24.3166 3.0463,24.8126 3.7033,24.8126 C4.3603,24.8126 4.8933,24.3166 4.8933,23.7046 L4.8933,15.4866 L6.1333,15.4866 L6.1333,23.7046 C6.1333,24.3166 6.6673,24.8126 7.3233,24.8126 C7.9803,24.8126 8.5133,24.3166 8.5133,23.7046 L8.5133,15.4866 L8.5133,14.8936 L8.5133,8.2896 L9.1543,8.2896 L9.1543,14.7256 C9.1543,15.1786 9.5483,15.5456 10.0343,15.5456 L10.1203,15.5456 C10.6063,15.5456 11.0003,15.1786 11.0003,14.7256 L10.9873,8.0606 Z")
  .attr("transform", "scale(1)")
    
    
icons = svg.append("g")
  .selectAll("use")
  .data(pointGrid(points)).enter()
  .append("use")
  .attr("transform", (d) -> "translate(#{d.x}, #{d.y})")  
  .attr("xlink:href","#iconCustom")
  
icons
  .attr("fill", "#eee")
  .transition()
  .duration(750)
  .delay((d, i) -> i/5*750)
  .attr("fill", (d, i) -> if i is 0 then "green" else "blue")
            
icons.on "click", (d, i) ->
  console.log d