SVG Groups in d3.js

<!DOCTYPE html>
<html>
    <head>
        <title>SVG GROUPS</title>
        <script src="https://d3js.org/d3.v2.js"></script>
        <style>

.label1
            {
                font-size: 24pt;
                font-family: Verdana;
                fill-opacity: .6;
            }
            .label2
            {
                font-family: Verdana;
                font-size: 12pt;
                fill: white;
                fill-opacity: .6;
            }
        </style> 
    </head>
    <body>

// group attributes apply to all members
            group1 = svgcanvas.append("svg:g")
            //.attr("stroke", "white")
            //.attr("stroke-width", 3)
            .attr("fill", "orange");

circle1 = group1.append("svg:circle")
            .attr("cx", 75)
            .attr("cy", 162.5)
            .attr("r", 37.5);

text1 = group1.append("svg:text")
            .text("Group 1")
            .attr("class", "label1")
            .attr("x", 37.5)
            .attr("y", 237.5)
            //.style("stroke", "white")
            //.style("stroke-width", 1)
            //.style("font-size", "160%")
            //.style("fill", "orange");

text1 = svgcanvas.append("svg:text")
            .text("Group 2")
            .attr("class", "label2")
            .attr("x", 207.5)
            .attr("y", 237.5)

console.log(svgcanvas); 
        </script>

</body>
</html>

Modified http://d3js.org/d3.v2.js to a secure url

https://d3js.org/d3.v2.js