D3 Block-a-Day: Day 13, January 13th, 2017

D3 Block-a-Day: Day 13, January, 13th 2017

New Year's Resolution for 2017: Make a D3 Block a day to teach myself D3. This is Number 13. This example goes back to elementary principles to looks at how the SVG group element is implemented with D3. Nothing sophisticated, just some circles and squares, with an example borrowed from DashingD3.js.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>D3 Block-a-Day: Day 13, January 13, 2017</title>
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script>

circleData = [
        { "cx": 20, "cy": 20, "radius": 10, "color" : "green" },
        { "cx": 45, "cy": 45, "radius": 10, "color" : "blue" },
        { "cx": 70, "cy": 70, "radius": 10, "color" : "purple" }];

rectangleData = [
        { "rx": 110, "ry": 80, "height": 10, "width": 10, "color" : "blue" },
        { "rx": 135, "ry": 105, "height": 10, "width": 10, "color" : "black" },
        { "rx": 160, "ry": 130, "height": 10, "width": 10, "color" : "red" }];

svgContainer = d3.select("body").append("svg")
        .attr("width",960)
        .attr("height",200);

// Add the SVG Group Element ('g') Transform Here
    circleGroup = svgContainer.append("g")
        .attr("transform", "translate(250,0)");

// Circles added to the circleGroup
    circles = circleGroup.selectAll("circle")
        .data(circleData)
        .enter()
        .append("circle");

// Attributes added to the circles  
    circleAttributes = circles
        .attr("cx", function (d) { return d.cx; })
        .attr("cy", function (d) { return d.cy; })
        .attr("r", function (d) { return d.radius; })
        .style("fill", function (d) { return d.color; });

// Add the SVG Group Element Transform Here
    // NOTE: Rotation occurs around (0,0)/Upper Left
    rectangleGroup = svgContainer.append("g")
  		  .attr("transform", "rotate(20)");

// Rectangles added to the svgContainer
    rectangles = rectangleGroup.selectAll("rect")
        .data(rectangleData)
        .enter()
        .append("rect");

// Attributes added to the rectangles  
    rectangleAttributes = rectangles
        .attr("x", function (d) { return d.rx; })
        .attr("y", function (d) { return d.ry; })
        .attr("height", function (d) { return d.height; })
        .attr("width", function (d) { return d.width; })
        .style("fill", function(d) { return d.color; });
  </script>
</body>

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