[preattentive] is there a blue circle?

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font-family: Helvetica;
    font-size: 10px;
  }

.point {
    fill: black;
  }

rect {
    fill: none;
    stroke: white;
    stroke-width: 1;
  }
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://romsson.github.io/d3-gridding/build/d3-gridding.js"></script>
<script>

/*
  TODO
  -retrieve actual parameters for each layout (e.g. orients)
*/

var width = 400,
    height = 400;

var gridding = d3.gridding()
  .size([width, height])
  .mode("grid");

var var_value = "__value";

var data =  d3.range(49);

var current_property = 0;

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

function draw() {

var griddingData = gridding(data);

var squares = svg.selectAll(".square")
      .data(griddingData);

squares.enter().append("rect")
      .attr("class", "square")
      .attr("width", function(d) { return d.width; })
      .attr("height", function(d) { return d.height; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

squares.transition()
      .attr("width", function(d) { return d.width; })
      .attr("height", function(d) { return d.height; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

squares.exit().remove();

var indexes = svg.selectAll(".index")
      .data(griddingData);

indexes.enter().append("text")
      .attr("class", "index")
      .style('text-anchor', 'middle')
      .style('dominant-baseline', 'central')
      .attr("transform", function(d) { return "translate(" + d.cx + "," + d.cy + ")"; })
      .text(function(d, i) { return d[var_value]; });

indexes.transition()
      .attr("transform", function(d) { return "translate(" + d.cx + "," + d.cy + ")"; })
      .text(function(d, i) { return d[var_value]; });

indexes.exit().remove();

var circles = svg.selectAll(".circle")
      .data(griddingData);

circles.enter().append("circle")
      .attr("class", "circle")
      .attr("r", function(d) {
        return Math.max((Math.min(d.height, d.width) / 2) - 5, 5);
      })
      .style("fill", function(d, i) {
        if(i === 12) {
          return "blue";
        } else {
          return "red";
        }
      })
      .attr("transform", function(d) { return "translate(" + d.cx + "," + d.cy + ")"; })

circles.transition()//.duration(0)
      .attr("r", function(d) {
        return (d.height / 2) -10;
      })
      .attr("transform", function(d) { return "translate(" + d.cx + "," + d.cy + ")"; })

circles.exit().remove();

}

draw();

</script>

</body>

Modified http://romsson.github.io/d3-gridding/build/d3-gridding.js to a secure url

https://d3js.org/d3.v4.min.js

https://romsson.github.io/d3-gridding/build/d3-gridding.js