mx = d3.max(gridData, d=>d.x);
my = d3.max(gridData, d=>d.y);
height = 460;
width  = 300;
numCellsx = 21;
numCellsy = 32;

gridData = {
    var da = [];
    var c = 0;
    for (var j = 0; j <= numCellsx; j++) {
        for (var k = 0; k <= numCellsy; k++) {
        c+=1;
        da.push({id:c,x:j,y:k,opa:1});
    }}
    return da;
}

{

  var hover  = -10;
  var ref_x  = 0;
  var ref_y  = 0;
  var dist   = 0;
  var stophover = false
  const svg = d3.select(DOM.svg(width, height));


  svg.append("image")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("xlink:href", "static/logo_think.png");

  var node = svg.selectAll("g.node")
    .data(gridData, d => d.id)
    
  var nodeEnter = node.enter()
    .append("svg:g")
    .attr("class", "node")

  nodeEnter.append("rect")
    .attr("id", d => d.id)
    .attr("x", d => scale_x(d.x))
    .attr("y", d => scale_y(d.y))
    .attr("width", width/(mx+1))
    .attr("height", height/(my+1))
    .attr("fill", "white")
    .attr("opacity", function(d){
      if (d.x > numCellsx/3 && d.x < numCellsx*.75 && d.y > numCellsy/10 && d.y < numCellsy/4.5) {
        d.opa = 0
        return 0}
      else {return 1}
    })
    .on("mouseover", function (event, d) {
      if (!stophover){
      hover = d.id
      ref_x = d.x
      ref_y = d.y
      d3.selectAll("rect")
        //.transition()
        //.delay(function(d,i){return Math.sqrt(Math.abs(d.x - ref_x)**2 + Math.abs(d.y - ref_y)**2);})
        //.duration(1000)
        //.attr("opacity",0)
        .attr("opacity",function(d){
          if (Math.sqrt(Math.abs(d.x - ref_x)**2 + Math.abs(d.y - ref_y)**2) < 4.1) {
            d.opa = d.opa*.93
            return d.opa*.93}
          else {return d3.select(this).attr("opacity")}
        })}
    })
    .on("click", function (event, d) {
      stophover = true
      hover = d.id
      ref_x = d.x
      ref_y = d.y
      d3.selectAll("rect")
        .transition()
        .delay(function(d,i){return 100*Math.sqrt(Math.abs(d.x - ref_x)**2 + Math.abs(d.y - ref_y)**2)})
        .duration(1000)
        .attr("opacity",function(d){
          d.opa = 0
          return 0
        })
    });

  return svg.node();
}

scale_x = d3.scaleLinear()
  .domain([0, mx])
  .range([0, width * (1-1/(mx+1))])

scale_y = d3.scaleLinear()
  .domain([0, my])
  .range([0, height * (1-1/(my+1))])

Jake Ferguson

Jake (he/him) is a PhD Candidate in Geography and Environmental Management at the University of Waterloo. He’s interested in SAR Interferometry, SAR Polarimetry, producing open educational resources, and fussing over his website’s D3 renders.
To see an image of me, click here

---

Education

University of Waterloo | Waterloo, CA
MSc. Physics, Computational Multiphysics Group | August 2019

University of Waterloo | Waterloo, CA
BSc. Physics | April 2017

Select publications

Polarimetric decomposition of microwave-band freshwater ice SAR data: Review, analysis, and future directions

---

I know the head render is chunky on Chrome, but that sounds like a Chrome issue :)

---