D3js simple grouping

answer for http://stackoverflow.com/questions/15518095/appending-a-different-number-of-elements-to-each-group

Interactive version /widged/5203275

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <title>D3 grouping</title>	
    <script src="https://d3js.org/d3.v2.min.js"></script>
</head>  
  
<body>
    <style type="text/css">    
      div.group {
        background-color: blue;
        color: white;
        margin: 20px;
        padding: 9px;
      }
      div.node {
        background-color: orange;
        margin: 3px;
      }
	</style>

<div id='viz'></div>
    <script>
     var data = [
            [1,2,3],
            [1,2,3,4],
            [1,2,3,4,5]
           ];

var viz = d3.select("#viz");
     var groups = viz.selectAll("div.group")
                     .data(data, function(d, index) { 
                        return d.key; 
                     })
                     .enter()
                     .append("div")
                     .classed('group', true)
                     .text(function(d, i) { return 'group ' + i});

var nodes = groups
                     .selectAll("div.node")
					 .data(function(d, index){ 
                       console.log("d",d);
                        return d;
                     })
                     .enter().append("div")
                     .classed('node', true)
                     .text(function(d, i) { return d});
  </script>

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

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