How to create multiple squares in d3.js?

1

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

1

<svg width="500" height="500"></svg>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Define the dataset (size and position of squares)
const dataset = [
  { x: 50, y: 50, size: 50 },
  { x: 150, y: 100, size: 70 },
  { x: 250, y: 150, size: 90 },
  { x: 350, y: 200, size: 110 }
];

// Create the SVG element
const svg = d3.select("svg");

// Bind the dataset to square elements
const squares = svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect");

// Set attributes for each square based on the dataset
squares
  .attr("x", d => d.x)
  .attr("y", d => d.y)
  .attr("width", d => d.size)
  .attr("height", d => d.size)
  .attr("fill", "blue");