D3 Examples - fresh block test

xxxxxxxxxx
 
<!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");
​
var rectangleAttributes = rectangles
                          .attr("x", function (d) { return d.x_axis; })
                          .attr("y", function (d) { return d.y_axis; })
                          .attr("height", function (d) { return d.height; })
                          .attr("width", function (d) { return d.width; })
                          .style("fill", function(d) { return d.color; });
​
d3.select("body").append("canvas");
console.log(d3);
</script>
</body>
​
​
    