fresh block test

<!DOCTYPE html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<p>This is a paragraph.</p>
<script>
d3.select("body")

var jsonRectangles = [
  { "x_axis": 10, "y_axis": 10, "height": 20, "width":15, "color" : "green" },
  { "x_axis": 160, "y_axis": 40, "height": 83, "width":20, "color" : "purple" },
  { "x_axis": 218, "y_axis": 70, "height": 20, "width":20, "color" : "red" },
	{"x_axis": 110, "y_axis": 12, "height": 20, "width":35, "color" : "blue" },
	{"x_axis": 70, "y_axis": 40, "height": 34, "width":42, "color" : "black" },
	{"x_axis": 33, "y_axis": 109, "height": 26, "width":100, "color" : "orange" }];

// Finding the bounds of the jasonRectangle data using for loop  
var max_x = 0;
 var max_y = 0;
  for (var i = 0; i < jsonRectangles.length; i++)
 {
  var temp_x, temp_y;
  var temp_x = jsonRectangles[i].x_axis + jsonRectangles[i].width;
  var temp_y = jsonRectangles[i].y_axis + jsonRectangles[i].height;
  if ( temp_x >= max_x ) { max_x = temp_x; }
  if ( temp_y >= max_y ) { max_y = temp_y; }
 }

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

var rectangles = svgContainer.selectAll("rect")
                             .data(jsonRectangles)
                             .enter()
                             .append("rect");

d3.select("body").append("canvas");
console.log(d3);
</script>
</body>

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