Ch. 8, Fig. 9 - D3.js in Action

This is the code for Chapter 8, Figure 9 from D3.js in Action that creates an image gallery that resizes when the window resizes.

<html>
<head>
  <title>D3 in Action Chapter 8 - Example 7</title>
  <meta charset="utf-8" />
<script src="https://d3js.org/colorbrewer.v1.min.js" type="text/JavaScript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 </head>
<style>
tr {
  border: 1px gray solid;
}

td {
  border: 2px black solid;
}

div.table {
  position:relative;
}
div.data {
  position: absolute;
  width: 90px;
  padding: 0 5px;
}

div.head {
  position: absolute;
}

div.datarow {
  position: absolute;
  width: 100%;
  border-top: 2px black solid;
  background: white;
  height: 35px;
  overflow: hidden;
}

div.gallery {
  position: relative;
}

img.infinite {
  position: absolute;
  background: rgba(255,255,255,0);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0,0,0,0);
}

</style>
<body>
<div id="traditional"> 
</div>
</body>
  <footer>
    
<script>
  imageArray = [];
 d3.select("#traditional").append("canvas").attr("height", 500).attr("width", 500);
  
  var context = d3.select("canvas").node().getContext("2d");
  context.textAlign = "center";
  context.font="200px Georgia";
  colorScale = d3.scale.quantize().domain([0,1]).range(colorbrewer.Reds[7]);
    
  lineScale = d3.scale.quantize().domain([0,1]).range([10,40]);
  for (var x=0;x<100;x++) {
  context.clearRect(0,0,500,500);
  context.strokeStyle = colorScale(Math.random());
  context.lineWidth = lineScale(Math.random());
  context.fillStyle = colorScale(Math.random());
  context.beginPath();
  context.arc(250,250,200,0,2*Math.PI);
  context.fill();
  context.stroke();
  
  context.fillStyle = "black";
  context.fillText(x,250,280);
  var dataURL = d3.select("canvas").node().toDataURL();
  imageArray.push({x: x, url: dataURL});
  }

imgPerLine = 8;
  d3.select("canvas").remove();
  d3.select("#traditional")
  .append("div").attr("class", "gallery")
  .selectAll("img").data(imageArray).enter().append("img")
  .attr("class", "infinite")
  .attr("src", function(d) {return d.url})

redrawGallery();
  
  function redrawGallery() {
var newWidth = parseFloat(d3.select("div.gallery").node().clientWidth);
      var imageSize = newWidth / imgPerLine;
      function imgX(x) {
        return Math.floor(x / imgPerLine) * imageSize;
      }
      function imgY(x) {
        return Math.floor(x%imgPerLine * imageSize)
      }
      d3.selectAll("img")
      .style("width", newWidth / imgPerLine)
      .style("top", function(d) {return imgX(d.x)})
      .style("left", function(d) {return imgY(d.x)})   
  }
  
  window.onresize = function(event) {
	redrawGallery();
  }

</script>
  </footer>

</html>

https://d3js.org/colorbrewer.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js