[preattentive] is there a red square?

<!DOCTYPE html>
<meta charset="utf-8">
<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>

var width = 400,
    height = 400,
    padding = 8,
    n = 11;

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

var var_value = "__value";

var data =  d3.range(Math.pow(n, 2));

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

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

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", "red")
    .style("opacity", function(d, i) { return i === 10 ? 0: 1; })
    .attr("transform", function(d) { return "translate(" + d.cx + "," + d.cy + ")"; })

var rects = svg.selectAll(".rect")
    .data(gridding(data));

rects.enter().append("rect")
    .attr("class", "rect")
    .style("fill", "red")
    .style("opacity", function(d, i) { return i === 10 ? 1: 0; })
    .attr("width", function(d) { return d.width - 2 * padding; })
    .attr("height", function(d) { return d.height - 2 * padding; })
    .attr("transform", function(d) { return "translate(" + (d.x + padding) + "," + (d.y + padding) + ")"; });

</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