xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <script> const rectangles = [ {"x": 0, "y": 0, "width": 30, "height": 40}, {"x": 50, "y": 50, "width": 30, "height": 40}, {"x": 100, "y": 100, "width": 30, "height": 40}, {"x": 150, "y": 150, "width": 30, "height": 40}]; const svgContainer = d3.select('body').append('svg').attr('width', 560).attr('height', 960); const svgRectangles = svgContainer.selectAll('rect').data(rectangles).enter().append('rect'); svgRectangles .attr("x", function (d,i) { return d.x; }) .attr("y", function (d,i) { return d.y; }) .attr("width", function (d,i) { return d.width; }) .attr("height", function (d,i) { return d.height; }); </script></body> https://d3js.org/d3.v4.min.js