intro-to-d3/README.md

## README.md

      
    Raw
  

              README.md
            
          
    the g element

"g" stands for "group"
group transform applies to child elements


@currankelleher's famous introToD3 examples

artisanally ported to blockbuilder.org by @micahstubbs

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SVG Example</title>
  </head>
  <body>

    <svg width="250" height="250">

      <rect x="0"  y="0"   width="50"  height="200" fill="gray"/>
      <rect x="50" y="200" width="200" height="50"  fill="gray"/>

      <g transform="translate(50, 0)">
        <circle cx="0"   cy="0"   r="10"/>
        <circle cx="100" cy="100" r="10"/>
        <circle cx="130" cy="120" r="10"/>
        <circle cx="80"  cy="180" r="10"/>
        <circle cx="180" cy="80"  r="10"/>
        <circle cx="180" cy="40"  r="10"/>
      </g>

    </svg>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>SVG Example</title>
	</head>
	<body>

	<svg width="250" height="250">

	<rect x="0" y="0" width="50" height="200" fill="gray"/>
	<rect x="50" y="200" width="200" height="50" fill="gray"/>

	<g transform="translate(50, 0)">
	<circle cx="0" cy="0" r="10"/>
	<circle cx="100" cy="100" r="10"/>
	<circle cx="130" cy="120" r="10"/>
	<circle cx="80" cy="180" r="10"/>
	<circle cx="180" cy="80" r="10"/>
	<circle cx="180" cy="40" r="10"/>
	</g>

	</svg>

	</body>
	</html>