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.
Last active
January 15, 2017 10:13
-
-
Save dbetebenner/b3598839060d96909c435ba027e1095b to your computer and use it in GitHub Desktop.
D3 Block-a-Day: Day 13, January 13th, 2017
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license:gpl-3.0 | |
| height:250 | |
| border:no | |
| Raw |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment