jchonglee/index.html

## index.html
<html>
<head>
<title>graph</title>
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.node text {
  pointer-events: none;
  font: .2em sans-serif;
  stroke: #555;
  stroke-width: 1.0px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

div#wrapper {
    width: 1200px;
    height: 1200px;
    margin: auto auto;
}

</style>
</head>
<body>

<div id="wrapper">

</div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var graph = JSON.parse('{"nodes": [{"group": 1, "name": "ben1", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/TdwDXJW5WLfqdsV1XXNk2mvncQFSJCvX"}, {"group": 1, "name": "ben2", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/6-g3FmC1nHm2b2jnn1L22NpXG5HVPL1P"}, {"group": 1, "name": "jenny", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/XTBV1-hWQLtHWjn8RVKP0Szn-djqxrLN"}, {"group": 1, "name": "james", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/NDjzg86CPGPJMsfRj2PdCG8QBJSPs1VC"}, {"group": 1, "name": "jason", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/229lmxsKQ0NFjfnFxmvjwQ8gJpK276Sv"}, {"group": 1, "name": "sarah"}, {"group": 1, "name": "john", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/BV4crLXZrhRXJHkFsNSwbCJpk-00618-"}, {"group": 1, "name": "rob", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/lHQTd9L6CCGJXT16cWGPHDndQJCzl0qQ"}, {"group": 1, "name": "jay", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/c8KjXcWcGXf90jVF46TM7G4jNblJZMkS"}, {"group": 1, "name": "grant", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/tMFrBD4JXTjRnfm0tnrLcL1rMJFGsfQ9"}, {"group": 1, "name": "aaron", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/WD5cl0R8CgFp142H-QhXL0zB9jNdR6nS"}, {"group": 1, "name": "quynh"}, {"group": 1, "name": "andy", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/d3gHV8G26DQ4LnLgm09qvwWMJFWcPvrB"}, {"group": 1, "name": "josie"}, {"group": 1, "name": "chris", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/1-GBLcXFFCzPCzn2mrHptLvwxDG6Swzl"}, {"group": 1, "name": "allen"}, {"group": 1, "name": "min", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/kB5Lw-1Xwlh8RBNxhcNk47tPntKGsV4T"}, {"group": 2, "name": "Calvin Klein Dress Shirt, STEEL No-Iron Midnight Blue Plaid Long-Sleeved Shirt"}, {"group": 2, "name": "Diamond Ring, 14k Gold Diamond Band (1 ct. t.w.)"}, {"group": 2, "name": "Liquid Solutions Double-Wall Porcelain Tumbler - 10 fl.oz."}, {"group": 2, "name": "Life Stride Shoes, Belinda Loafers Women\'s Shoes"}, {"group": 2, "name": "Alfani Boots, Lancer Suede Chukka Boots Men\'s Shoes"}, {"group": 2, "name": "Nike Men\'s New England Patriots NFL Fly Speed Knit Training Pants, College Navy - Large"}, {"group": 2, "name": "Nike Men\'s Jordan Aero Mania Low Basketball Shoes, Black/White/Gym Red/Black - 11.0"}, {"group": 2, "name": "GUESS Belt, Woven Belt"}, {"group": 2, "name": "T-Shirt International Inc Kids\' Appalachian State Mountaineers College Pullover Hoodie, Black - Large"}, {"group": 2, "name": "Stacy Adams Shoes, Walbridge Bit Loafers Men\'s Shoes"}, {"group": 2, "name": "Chubby Stick Shadow Tint for Eyes"}, {"group": 2, "name": "Quiksilver Hat, Please Hold Graphic Trucker Hat"}, {"group": 2, "name": "Timberland Men\'s Shoes, Earthkeepers Hookset Handcrafted Slip-On Loafers Men\'s Shoes"}, {"group": 2, "name": "Nike Men\'s Air Max 95 Dynamic Flywire Running Shoes, Black/Wolf Grey/Anthracite/Dark Grey - 10.0"}, {"group": 2, "name": "Jordan Durasheen Short - Mens - True Blue/Cement/Dark Grey"}, {"group": 2, "name": "Style&co. Shoes, Mickay Boots Women\'s Shoes"}, {"group": 2, "name": "Michael Kors Jacket, Stone Windowpane Sportcoat"}, {"group": 2, "name": "Van Heusen Shirt, Long-Sleeve Large Plaid Haberdashery Twill Shirt"}, {"group": 2, "name": "Louis Raphael Dress Pants, Comfort Stretch Pleated"}, {"group": 2, "name": "Nike Women\'s Air Pegasus+ 30 GRPC Running Shoes, Lavender/Lime Green/White - 10.0"}, {"group": 2, "name": "Floral Wrinkle-Resistant Shirt"}, {"group": 2, "name": "UA ColdGear(R) Hood"}, {"group": 2, "name": "Isis Women\'s Riviera Shorts"}, {"group": 2, "name": "Club Room Sweater, Merino Blend Roadmap Striped V-Neck"}, {"group": 2, "name": "Santiago Watch"}, {"group": 2, "name": "Solow Sport French Terry Cropped Pullover at Free People"}, {"group": 2, "name": "Nike Girls\' Toddler Jordan Hydro 2 Slide Sandals, Voltage Cherry/Black - 7.0"}, {"group": 2, "name": "essie nail color, poppy art pink- Limited Edition!"}, {"group": 2, "name": "b.tempt\'d by Wacoal Panty, Lace Kiss Bikini 978182"}, {"group": 2, "name": "Steve Madden Shoes, Ethin2 Wingtip Oxfords Men\'s Shoes"}, {"group": 2, "name": "Slim-Fit Pinstriped Suit Jacket"}, {"group": 2, "name": "BCX Kids Dress, Girls Tiered Ruffle Dress"}, {"group": 2, "name": "Poplin Expandable Comfort-Waist Pants"}, {"group": 2, "name": "FOSSIL Estate Passport Case"}, {"group": 2, "name": "Zink NBG Duck Call"}, {"group": 2, "name": "Jessica Simpson Dress, One Shoulder Party Dress"}], "links": [{"source": 10, "target": 38, "value": 1}, {"source": 10, "target": 40, "value": 1}, {"source": 10, "target": 46, "value": 1}, {"source": 10, "target": 24, "value": 1}, {"source": 10, "target": 30, "value": 1}, {"source": 1, "target": 28, "value": 1}, {"source": 1, "target": 47, "value": 1}, {"source": 1, "target": 43, "value": 1}, {"source": 1, "target": 22, "value": 1}, {"source": 1, "target": 33, "value": 1}, {"source": 8, "target": 47, "value": 1}, {"source": 8, "target": 29, "value": 1}, {"source": 8, "target": 46, "value": 1}, {"source": 8, "target": 21, "value": 1}, {"source": 8, "target": 34, "value": 1}, {"source": 4, "target": 31, "value": 1}, {"source": 4, "target": 22, "value": 1}, {"source": 4, "target": 40, "value": 1}, {"source": 4, "target": 35, "value": 1}, {"source": 4, "target": 21, "value": 1}, {"source": 16, "target": 41, "value": 1}, {"source": 16, "target": 20, "value": 1}, {"source": 16, "target": 19, "value": 1}, {"source": 16, "target": 32, "value": 1}, {"source": 16, "target": 36, "value": 1}, {"source": 14, "target": 23, "value": 1}, {"source": 14, "target": 26, "value": 1}, {"source": 14, "target": 22, "value": 1}, {"source": 14, "target": 38, "value": 1}, {"source": 14, "target": 34, "value": 1}, {"source": 6, "target": 47, "value": 1}, {"source": 6, "target": 17, "value": 1}, {"source": 6, "target": 38, "value": 1}, {"source": 6, "target": 40, "value": 1}, {"source": 6, "target": 34, "value": 1}, {"source": 13, "target": 39, "value": 1}, {"source": 13, "target": 36, "value": 1}, {"source": 13, "target": 37, "value": 1}, {"source": 13, "target": 27, "value": 1}, {"source": 13, "target": 45, "value": 1}, {"source": 15, "target": 22, "value": 1}, {"source": 15, "target": 46, "value": 1}, {"source": 15, "target": 21, "value": 1}, {"source": 15, "target": 47, "value": 1}, {"source": 15, "target": 25, "value": 1}, {"source": 10, "target": 47, "value": 1}, {"source": 10, "target": 26, "value": 1}, {"source": 10, "target": 33, "value": 1}, {"source": 10, "target": 23, "value": 1}, {"source": 10, "target": 34, "value": 1}, {"source": 2, "target": 27, "value": 1}, {"source": 2, "target": 18, "value": 1}, {"source": 2, "target": 44, "value": 1}, {"source": 2, "target": 45, "value": 1}, {"source": 2, "target": 42, "value": 1}, {"source": 9, "target": 17, "value": 1}, {"source": 9, "target": 22, "value": 1}, {"source": 9, "target": 46, "value": 1}, {"source": 9, "target": 34, "value": 1}, {"source": 9, "target": 40, "value": 1}, {"source": 11, "target": 24, "value": 1}, {"source": 11, "target": 48, "value": 1}, {"source": 11, "target": 32, "value": 1}, {"source": 11, "target": 20, "value": 1}, {"source": 11, "target": 25, "value": 1}, {"source": 0, "target": 49, "value": 1}, {"source": 0, "target": 33, "value": 1}, {"source": 0, "target": 50, "value": 1}, {"source": 0, "target": 34, "value": 1}, {"source": 0, "target": 19, "value": 1}, {"source": 3, "target": 33, "value": 1}, {"source": 3, "target": 40, "value": 1}, {"source": 3, "target": 21, "value": 1}, {"source": 3, "target": 34, "value": 1}, {"source": 3, "target": 17, "value": 1}, {"source": 5, "target": 51, "value": 1}, {"source": 5, "target": 28, "value": 1}, {"source": 5, "target": 22, "value": 1}, {"source": 5, "target": 18, "value": 1}, {"source": 5, "target": 52, "value": 1}, {"source": 12, "target": 47, "value": 1}, {"source": 12, "target": 26, "value": 1}, {"source": 12, "target": 33, "value": 1}, {"source": 12, "target": 23, "value": 1}, {"source": 12, "target": 34, "value": 1}]}');

var width = 1200,
    height = 800;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-600)
    .linkDistance(40)
    .size([width, height]);

var svg = d3.select("#wrapper").append("svg")
    .attr("width", width)
    .attr("height", height);

force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) { return Math.sqrt(d.value); });


  var node = svg.selectAll(".node")
     .data(graph.nodes)
    .enter().append("g")
     .attr("class", "node")
     .call(force.drag);


  node.append("circle")
      .attr("class","node")
      .attr("r", 8)
      .style("fill", function(d) { return color(d.group);})

  node.append("image")
      .attr("xlink:href", function(d) {return d.img;})
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 40)
      .attr("height", 40);

  node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { if (d.group == 1)
                              return d.name;
                          return "" });

  node.append("title")
      .text(function(d) { if (d.group == 2)
                               return d.name;
                          return "" });


  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  });


</script>
</body>
</html>
	<html>
	<head>
	<title>graph</title>
	<style>

	.node {
	stroke: #fff;
	stroke-width: 1.5px;
	}

	.node text {
	pointer-events: none;
	font: .2em sans-serif;
	stroke: #555;
	stroke-width: 1.0px;
	}

	.link {
	stroke: #999;
	stroke-opacity: .6;
	}

	div#wrapper {
	width: 1200px;
	height: 1200px;
	margin: auto auto;
	}

	</style>
	</head>
	<body>

	<div id="wrapper">

	</div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var graph = JSON.parse('{"nodes": [{"group": 1, "name": "ben1", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/TdwDXJW5WLfqdsV1XXNk2mvncQFSJCvX"}, {"group": 1, "name": "ben2", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/6-g3FmC1nHm2b2jnn1L22NpXG5HVPL1P"}, {"group": 1, "name": "jenny", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/XTBV1-hWQLtHWjn8RVKP0Szn-djqxrLN"}, {"group": 1, "name": "james", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/NDjzg86CPGPJMsfRj2PdCG8QBJSPs1VC"}, {"group": 1, "name": "jason", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/229lmxsKQ0NFjfnFxmvjwQ8gJpK276Sv"}, {"group": 1, "name": "sarah"}, {"group": 1, "name": "john", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/BV4crLXZrhRXJHkFsNSwbCJpk-00618-"}, {"group": 1, "name": "rob", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/lHQTd9L6CCGJXT16cWGPHDndQJCzl0qQ"}, {"group": 1, "name": "jay", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/c8KjXcWcGXf90jVF46TM7G4jNblJZMkS"}, {"group": 1, "name": "grant", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/tMFrBD4JXTjRnfm0tnrLcL1rMJFGsfQ9"}, {"group": 1, "name": "aaron", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/WD5cl0R8CgFp142H-QhXL0zB9jNdR6nS"}, {"group": 1, "name": "quynh"}, {"group": 1, "name": "andy", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/d3gHV8G26DQ4LnLgm09qvwWMJFWcPvrB"}, {"group": 1, "name": "josie"}, {"group": 1, "name": "chris", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/1-GBLcXFFCzPCzn2mrHptLvwxDG6Swzl"}, {"group": 1, "name": "allen"}, {"group": 1, "name": "min", "img": "https://mug0.assets-yammer.com/mugshot/images/150x150/kB5Lw-1Xwlh8RBNxhcNk47tPntKGsV4T"}, {"group": 2, "name": "Calvin Klein Dress Shirt, STEEL No-Iron Midnight Blue Plaid Long-Sleeved Shirt"}, {"group": 2, "name": "Diamond Ring, 14k Gold Diamond Band (1 ct. t.w.)"}, {"group": 2, "name": "Liquid Solutions Double-Wall Porcelain Tumbler - 10 fl.oz."}, {"group": 2, "name": "Life Stride Shoes, Belinda Loafers Women\'s Shoes"}, {"group": 2, "name": "Alfani Boots, Lancer Suede Chukka Boots Men\'s Shoes"}, {"group": 2, "name": "Nike Men\'s New England Patriots NFL Fly Speed Knit Training Pants, College Navy - Large"}, {"group": 2, "name": "Nike Men\'s Jordan Aero Mania Low Basketball Shoes, Black/White/Gym Red/Black - 11.0"}, {"group": 2, "name": "GUESS Belt, Woven Belt"}, {"group": 2, "name": "T-Shirt International Inc Kids\' Appalachian State Mountaineers College Pullover Hoodie, Black - Large"}, {"group": 2, "name": "Stacy Adams Shoes, Walbridge Bit Loafers Men\'s Shoes"}, {"group": 2, "name": "Chubby Stick Shadow Tint for Eyes"}, {"group": 2, "name": "Quiksilver Hat, Please Hold Graphic Trucker Hat"}, {"group": 2, "name": "Timberland Men\'s Shoes, Earthkeepers Hookset Handcrafted Slip-On Loafers Men\'s Shoes"}, {"group": 2, "name": "Nike Men\'s Air Max 95 Dynamic Flywire Running Shoes, Black/Wolf Grey/Anthracite/Dark Grey - 10.0"}, {"group": 2, "name": "Jordan Durasheen Short - Mens - True Blue/Cement/Dark Grey"}, {"group": 2, "name": "Style&co. Shoes, Mickay Boots Women\'s Shoes"}, {"group": 2, "name": "Michael Kors Jacket, Stone Windowpane Sportcoat"}, {"group": 2, "name": "Van Heusen Shirt, Long-Sleeve Large Plaid Haberdashery Twill Shirt"}, {"group": 2, "name": "Louis Raphael Dress Pants, Comfort Stretch Pleated"}, {"group": 2, "name": "Nike Women\'s Air Pegasus+ 30 GRPC Running Shoes, Lavender/Lime Green/White - 10.0"}, {"group": 2, "name": "Floral Wrinkle-Resistant Shirt"}, {"group": 2, "name": "UA ColdGear(R) Hood"}, {"group": 2, "name": "Isis Women\'s Riviera Shorts"}, {"group": 2, "name": "Club Room Sweater, Merino Blend Roadmap Striped V-Neck"}, {"group": 2, "name": "Santiago Watch"}, {"group": 2, "name": "Solow Sport French Terry Cropped Pullover at Free People"}, {"group": 2, "name": "Nike Girls\' Toddler Jordan Hydro 2 Slide Sandals, Voltage Cherry/Black - 7.0"}, {"group": 2, "name": "essie nail color, poppy art pink- Limited Edition!"}, {"group": 2, "name": "b.tempt\'d by Wacoal Panty, Lace Kiss Bikini 978182"}, {"group": 2, "name": "Steve Madden Shoes, Ethin2 Wingtip Oxfords Men\'s Shoes"}, {"group": 2, "name": "Slim-Fit Pinstriped Suit Jacket"}, {"group": 2, "name": "BCX Kids Dress, Girls Tiered Ruffle Dress"}, {"group": 2, "name": "Poplin Expandable Comfort-Waist Pants"}, {"group": 2, "name": "FOSSIL Estate Passport Case"}, {"group": 2, "name": "Zink NBG Duck Call"}, {"group": 2, "name": "Jessica Simpson Dress, One Shoulder Party Dress"}], "links": [{"source": 10, "target": 38, "value": 1}, {"source": 10, "target": 40, "value": 1}, {"source": 10, "target": 46, "value": 1}, {"source": 10, "target": 24, "value": 1}, {"source": 10, "target": 30, "value": 1}, {"source": 1, "target": 28, "value": 1}, {"source": 1, "target": 47, "value": 1}, {"source": 1, "target": 43, "value": 1}, {"source": 1, "target": 22, "value": 1}, {"source": 1, "target": 33, "value": 1}, {"source": 8, "target": 47, "value": 1}, {"source": 8, "target": 29, "value": 1}, {"source": 8, "target": 46, "value": 1}, {"source": 8, "target": 21, "value": 1}, {"source": 8, "target": 34, "value": 1}, {"source": 4, "target": 31, "value": 1}, {"source": 4, "target": 22, "value": 1}, {"source": 4, "target": 40, "value": 1}, {"source": 4, "target": 35, "value": 1}, {"source": 4, "target": 21, "value": 1}, {"source": 16, "target": 41, "value": 1}, {"source": 16, "target": 20, "value": 1}, {"source": 16, "target": 19, "value": 1}, {"source": 16, "target": 32, "value": 1}, {"source": 16, "target": 36, "value": 1}, {"source": 14, "target": 23, "value": 1}, {"source": 14, "target": 26, "value": 1}, {"source": 14, "target": 22, "value": 1}, {"source": 14, "target": 38, "value": 1}, {"source": 14, "target": 34, "value": 1}, {"source": 6, "target": 47, "value": 1}, {"source": 6, "target": 17, "value": 1}, {"source": 6, "target": 38, "value": 1}, {"source": 6, "target": 40, "value": 1}, {"source": 6, "target": 34, "value": 1}, {"source": 13, "target": 39, "value": 1}, {"source": 13, "target": 36, "value": 1}, {"source": 13, "target": 37, "value": 1}, {"source": 13, "target": 27, "value": 1}, {"source": 13, "target": 45, "value": 1}, {"source": 15, "target": 22, "value": 1}, {"source": 15, "target": 46, "value": 1}, {"source": 15, "target": 21, "value": 1}, {"source": 15, "target": 47, "value": 1}, {"source": 15, "target": 25, "value": 1}, {"source": 10, "target": 47, "value": 1}, {"source": 10, "target": 26, "value": 1}, {"source": 10, "target": 33, "value": 1}, {"source": 10, "target": 23, "value": 1}, {"source": 10, "target": 34, "value": 1}, {"source": 2, "target": 27, "value": 1}, {"source": 2, "target": 18, "value": 1}, {"source": 2, "target": 44, "value": 1}, {"source": 2, "target": 45, "value": 1}, {"source": 2, "target": 42, "value": 1}, {"source": 9, "target": 17, "value": 1}, {"source": 9, "target": 22, "value": 1}, {"source": 9, "target": 46, "value": 1}, {"source": 9, "target": 34, "value": 1}, {"source": 9, "target": 40, "value": 1}, {"source": 11, "target": 24, "value": 1}, {"source": 11, "target": 48, "value": 1}, {"source": 11, "target": 32, "value": 1}, {"source": 11, "target": 20, "value": 1}, {"source": 11, "target": 25, "value": 1}, {"source": 0, "target": 49, "value": 1}, {"source": 0, "target": 33, "value": 1}, {"source": 0, "target": 50, "value": 1}, {"source": 0, "target": 34, "value": 1}, {"source": 0, "target": 19, "value": 1}, {"source": 3, "target": 33, "value": 1}, {"source": 3, "target": 40, "value": 1}, {"source": 3, "target": 21, "value": 1}, {"source": 3, "target": 34, "value": 1}, {"source": 3, "target": 17, "value": 1}, {"source": 5, "target": 51, "value": 1}, {"source": 5, "target": 28, "value": 1}, {"source": 5, "target": 22, "value": 1}, {"source": 5, "target": 18, "value": 1}, {"source": 5, "target": 52, "value": 1}, {"source": 12, "target": 47, "value": 1}, {"source": 12, "target": 26, "value": 1}, {"source": 12, "target": 33, "value": 1}, {"source": 12, "target": 23, "value": 1}, {"source": 12, "target": 34, "value": 1}]}');

	var width = 1200,
	height = 800;

	var color = d3.scale.category20();

	var force = d3.layout.force()
	.charge(-600)
	.linkDistance(40)
	.size([width, height]);

	var svg = d3.select("#wrapper").append("svg")
	.attr("width", width)
	.attr("height", height);

	force
	.nodes(graph.nodes)
	.links(graph.links)
	.start();

	var link = svg.selectAll(".link")
	.data(graph.links)
	.enter().append("line")
	.attr("class", "link")
	.style("stroke-width", function(d) { return Math.sqrt(d.value); });




	var node = svg.selectAll(".node")
	.data(graph.nodes)
	.enter().append("g")
	.attr("class", "node")
	.call(force.drag);


	node.append("circle")
	.attr("class","node")
	.attr("r", 8)
	.style("fill", function(d) { return color(d.group);})

	node.append("image")
	.attr("xlink:href", function(d) {return d.img;})
	.attr("x", -8)
	.attr("y", -8)
	.attr("width", 40)
	.attr("height", 40);

	node.append("text")
	.attr("dx", 12)
	.attr("dy", ".35em")
	.text(function(d) { if (d.group == 1)
	return d.name;
	return "" });

	node.append("title")
	.text(function(d) { if (d.group == 2)
	return d.name;
	return "" });


	force.on("tick", function() {
	link.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; });

	node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
	});


	</script>
	</body>
	</html>