Spatial region By JianiGao

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <title>Spatial region</title>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
<!-- 	There are more than one method to create the given marks.
			An easy way of implementation is simply use <rect> label within <svg>.
			The HTML code below will do the same job as the D3.js script.

svg.append("rect")
      .attr("x", 10)
    	.attr("y", 20)
    	.attr("width", 20)
    	.attr("height", 20)
    
    svg.append("rect")
      .attr("x", 40)
    	.attr("y", 40)
    	.attr("width", 40)
    	.attr("height", 40)
    
    svg.append("rect")
      .attr("x", 100)
    	.attr("y", 10)
    	.attr("width", 60)
    	.attr("height", 60)

</script>
</body>

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