rmarimon/README

## README
Just to show how not to do things.

## index.html
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>tags</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
      $(window).resize(function() {$('.resizable').resize(); })
    });
    </script>

    <style type="text/css">
      circle.node {
        stroke: #fff;
        stroke-width: 1.5px;
      }
      line.link {
        stroke: #999;
        stroke-opacity: .6;
      }
    </style>

  </head>
<body>

  <div id="tags" style="width:100%;height:500px;"></div>
  <script type="text/javascript">

    var w = $('#tags').width(), h = $('#tags').height();
    var fill = d3.scale.category20();

    var vis = d3.select('#tags')
      .append('svg:svg')
        .attr('width', w)
        .attr('height', h);

    d3.json("tags.json", function(json) {

      var force = d3.layout.force()
        .charge(-120)
        .distance(30)
        .gravity(.1)
        .nodes(json.nodes)
        .links(json.links)
        .size([w, h])
        .start();

      var link = vis.selectAll('line.link')
          .data(json.links)
        .enter().append('svg:line')
          .attr("class", "link")
          .style('stroke-width', 3)
          .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; });

      var node = vis.selectAll("circle.node")
          .data(json.nodes)
        .enter().append("svg:circle")
          .attr("class", "node")
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .attr("r", 5)
          .style("fill", function(d) { return fill(d.group); })
          .call(force.drag);

      node.append('svg:title')
          .text(function(d) { return d.name; });

      force.on("tick", function(e) {

        var k = .5 * e.alpha;
        node.each(function(d) {
            d.y += ((4 - d.group) * 100 - d.y) * k;
        });

        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("cx", function(d) { return d.x ; })
            .attr("cy", function(d) { return d.y; });

      });

    });

  </script>

</body>
</html>

## tags.json
{
  "nodes": [
    { "name": "a", "group": 1 },
    { "name": "b", "group": 1 },
    { "name": "c", "group": 1 },
    { "name": "d", "group": 1 },
    { "name": "e", "group": 1 },
    { "name": "f", "group": 1 },
    { "name": "g", "group": 1 },
    { "name": "h", "group": 2 },
    { "name": "i", "group": 2 },
    { "name": "j", "group": 2 },
    { "name": "k", "group": 3 }
  ],
  "links": [
    { "source": 0, "target": 7, "value" : 1 },
    { "source": 1, "target": 7, "value" : 1 },
    { "source": 1, "target": 10, "value" : 1 },
    { "source": 2, "target": 7, "value" : 1 },
    { "source": 2, "target": 8, "value" : 1 },
    { "source": 3, "target": 8, "value" : 1 },
    { "source": 4, "target": 8, "value" : 1 },
    { "source": 5, "target": 9, "value" : 1 },
    { "source": 5, "target": 10, "value" : 1 },
    { "source": 6, "target": 9, "value" : 1 },
    { "source": 7, "target": 10, "value" : 1 },
    { "source": 8, "target": 10, "value" : 1 },
    { "source": 9, "target": 10, "value" : 1 }
  ]
}
	<!doctype html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>tags</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.min.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.min.js"></script>

	<script type="text/javascript">
	$(document).ready(function() {
	$(window).resize(function() {$('.resizable').resize(); })
	});
	</script>

	<style type="text/css">
	circle.node {
	stroke: #fff;
	stroke-width: 1.5px;
	}
	line.link {
	stroke: #999;
	stroke-opacity: .6;
	}
	</style>

	</head>
	<body>

	<div id="tags" style="width:100%;height:500px;"></div>
	<script type="text/javascript">

	var w = $('#tags').width(), h = $('#tags').height();
	var fill = d3.scale.category20();

	var vis = d3.select('#tags')
	.append('svg:svg')
	.attr('width', w)
	.attr('height', h);

	d3.json("tags.json", function(json) {

	var force = d3.layout.force()
	.charge(-120)
	.distance(30)
	.gravity(.1)
	.nodes(json.nodes)
	.links(json.links)
	.size([w, h])
	.start();

	var link = vis.selectAll('line.link')
	.data(json.links)
	.enter().append('svg:line')
	.attr("class", "link")
	.style('stroke-width', 3)
	.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; });

	var node = vis.selectAll("circle.node")
	.data(json.nodes)
	.enter().append("svg:circle")
	.attr("class", "node")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", 5)
	.style("fill", function(d) { return fill(d.group); })
	.call(force.drag);

	node.append('svg:title')
	.text(function(d) { return d.name; });

	force.on("tick", function(e) {

	var k = .5 * e.alpha;
	node.each(function(d) {
	d.y += ((4 - d.group) * 100 - d.y) * k;
	});

	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("cx", function(d) { return d.x ; })
	.attr("cy", function(d) { return d.y; });

	});

	});

	</script>

	</body>
	</html>
	{
	"nodes": [
	{ "name": "a", "group": 1 },
	{ "name": "b", "group": 1 },
	{ "name": "c", "group": 1 },
	{ "name": "d", "group": 1 },
	{ "name": "e", "group": 1 },
	{ "name": "f", "group": 1 },
	{ "name": "g", "group": 1 },
	{ "name": "h", "group": 2 },
	{ "name": "i", "group": 2 },
	{ "name": "j", "group": 2 },
	{ "name": "k", "group": 3 }
	],
	"links": [
	{ "source": 0, "target": 7, "value" : 1 },
	{ "source": 1, "target": 7, "value" : 1 },
	{ "source": 1, "target": 10, "value" : 1 },
	{ "source": 2, "target": 7, "value" : 1 },
	{ "source": 2, "target": 8, "value" : 1 },
	{ "source": 3, "target": 8, "value" : 1 },
	{ "source": 4, "target": 8, "value" : 1 },
	{ "source": 5, "target": 9, "value" : 1 },
	{ "source": 5, "target": 10, "value" : 1 },
	{ "source": 6, "target": 9, "value" : 1 },
	{ "source": 7, "target": 10, "value" : 1 },
	{ "source": 8, "target": 10, "value" : 1 },
	{ "source": 9, "target": 10, "value" : 1 }
	]
	}