3d tiles

by nancynancy

HTML

<html>

  <head>
<script src="https://d3js.org/d3.v5.min.js"></script>

  </head>

  <body>
  </body>

</html>

JavaScript

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

var myred = "#FF0000";
var myblue = "#00FFFF";

var x = 60;
var y = 150;
var dodge = 4;

/* g.append("rect")
  .attr("height", 300)
  .attr("width", 400)
  .attr("fill", "pink")
 */

const numPerRow = 10
const size = 30
const scale = d3.scaleLinear() // <-A
  .domain([0, numPerRow - 3])
  .range([0, size * numPerRow])
  
var makesquares = function(color, xnudge, ynudge){
g.selectAll('rect')
  .data(d3.range(100)) // <-B
  .enter().append('rect')
  .attr('x', (d, i) => {
    const n = i % numPerRow  // <-C
    return scale(n)
  })
  .attr('y', (d, i) => {
    const n = Math.floor(i / 10) // <-D
    return scale(n)
  }) 
  .attr('width', size)
  .attr('height', size)
  .attr('fill', color)
  .attr('stroke-width', 0)
  .attr('stroke', 'white')
  .attr("transform", "translate(" + xnudge + "," + ynudge + ")")
}

/* makesquares("black") */
makesquares(myred, 10, 10)