jrichardsz/index.html

## 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="jquery.min.js"></script>
    <script type="text/javascript" src="d3.v2.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>


  <svg id="tags" width="100%" height="1600">
            <defs>
                <marker id="arrow" viewbox="0 -5 10 10" refX="15" refY="-0.5"
                        markerWidth="6" markerHeight="6" orient="auto">
                    <path d="M0,-5L10,0L0,5Z">
                </marker>
           </defs>
        </svg>
	<div id="text"></div>


</body>
</html>

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

    var vis = d3.select('#tags').append("svg:g");

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


      var force = d3.layout.force()
        .charge(-3000)
        .distance(200)
        .gravity(0.2)
        .nodes(json.nodes)
        .links(json.links)
        .size([700, 1500])
        .start();

      var link = vis.selectAll('line.link')
          .data(json.links)
        .enter().append('svg:line')
          .attr("class", "link")
		  .attr("marker-end", "url(#arrow)")
		.attr("stroke", "red")
          .style('stroke-width', 2)
          .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("name", function(d) { return d.name; })
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .attr("r", 40)
          .style("fill", function(d) { return fill(d.color); })
		  .on('dblclick', function(d) {
					alert(d.name);}
				)
          .call(force.drag);

		var text = vis.selectAll("text")
			.data(json.nodes)
			.enter().append("svg:text")
			.attr("x", function(d) { return d.x ; })
			.attr("y", function(d) { return d.y -10; })
			.attr("stroke", function(d) { return fill(d.color); })
			.text(function(d) { return d.name; })
			.attr("font-size","40")
			.call(force.drag);

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


      force.on("tick", function(e) {
        node.each(function(d) {
            d.x += ((5-d.group) * 350 - d.x) ;
			d.x = 1500 - d.x;
        });

		text.each(function(d) {
            d.x += ((5-d.group) * 350 - d.x) ;
			d.x = 1500 - d.x;
        });

        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; });

		text.attr("x", function(d) { return d.x ; })
            .attr("y", function(d) { return d.y; });
      });

    });


## server.js
var express = require("express"),
    app     = express(),
    port    = parseInt(process.env.PORT, 10) || 4567;

app.get("/", function(req, res) {
  res.redirect("/index.html");
});

app.configure(function(){
  app.use(express.methodOverride());
  app.use(express.bodyParser());
  app.use(express.static(__dirname + '/public'));
  app.use(express.errorHandler({
    dumpExceptions: true,
    showStack: true
  }));
  app.use(app.router);
});

app.listen(port);

## tags.json
{
  "nodes": [
    { "name": "Ma1", "group": 1, "color": 1 },
    { "name": "1", "group": 1, "color": 1  },
    { "name": "2", "group": 1, "color": 1  },
    { "name": "3", "group": 1 , "color": 2 },
    { "name": "4", "group": 1, "color": 2  },
    { "name": "5", "group": 1, "color": 2  },
    { "name": "6", "group": 1, "color": 2  },
    { "name": "7", "group": 2 , "color": 3 },
    { "name": "8", "group": 2, "color": 3  },
    { "name": "9", "group": 2 , "color": 3 },
    { "name": "10", "group": 2 , "color": 3 },
	{ "name": "11", "group": 3 , "color": 3 },
	{ "name": "12", "group": 4 , "color": 3 },
	{ "name": "13", "group": 4 , "color": 4 } ,
	{ "name": "14", "group": 4 , "color": 4 },
	{ "name": "15", "group": 4 , "color": 4 },
	{ "name": "16", "group": 4 , "color": 4 },
	{ "name": "17", "group": 5 , "color": 4 },
	{ "name": "18", "group": 5 , "color":  5 },
	{ "name": "19", "group": 5 , "color": 5 }
  ],
  "links": [
	{ "source": 6, "target": 16, "value" : 1 },
    { "source": 0, "target": 7, "value" : 2 },
	{ "source": 0, "target": 10, "value" : 2 },
	{ "source": 1, "target": 8, "value" : 4 },
	{ "source": 11, "target": 13, "value" : 5 },
	{ "source": 11, "target": 14, "value" : 6 },
	{ "source": 9, "target": 11, "value" : 6},
	{ "source": 13, "target": 16, "value" : 7},
	{ "source": 13, "target": 18, "value" : 7}
  ]
}
	<!doctype html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>tags</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="d3.v2.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>


	<svg id="tags" width="100%" height="1600">
	<defs>
	<marker id="arrow" viewbox="0 -5 10 10" refX="15" refY="-0.5"
	markerWidth="6" markerHeight="6" orient="auto">
	<path d="M0,-5L10,0L0,5Z">
	</marker>
	</defs>
	</svg>
	<div id="text"></div>



	</body>
	</html>
	var w = $('#tags').width(), h = $('#tags').height();
	var fill = d3.scale.category10();

	var vis = d3.select('#tags').append("svg:g");

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


	var force = d3.layout.force()
	.charge(-3000)
	.distance(200)
	.gravity(0.2)
	.nodes(json.nodes)
	.links(json.links)
	.size([700, 1500])
	.start();

	var link = vis.selectAll('line.link')
	.data(json.links)
	.enter().append('svg:line')
	.attr("class", "link")
	.attr("marker-end", "url(#arrow)")
	.attr("stroke", "red")
	.style('stroke-width', 2)
	.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("name", function(d) { return d.name; })
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", 40)
	.style("fill", function(d) { return fill(d.color); })
	.on('dblclick', function(d) {
	alert(d.name);}
	)
	.call(force.drag);

	var text = vis.selectAll("text")
	.data(json.nodes)
	.enter().append("svg:text")
	.attr("x", function(d) { return d.x ; })
	.attr("y", function(d) { return d.y -10; })
	.attr("stroke", function(d) { return fill(d.color); })
	.text(function(d) { return d.name; })
	.attr("font-size","40")
	.call(force.drag);

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




	force.on("tick", function(e) {
	node.each(function(d) {
	d.x += ((5-d.group) * 350 - d.x) ;
	d.x = 1500 - d.x;
	});

	text.each(function(d) {
	d.x += ((5-d.group) * 350 - d.x) ;
	d.x = 1500 - d.x;
	});

	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; });

	text.attr("x", function(d) { return d.x ; })
	.attr("y", function(d) { return d.y; });
	});

	});
	var express = require("express"),
	app = express(),
	port = parseInt(process.env.PORT, 10) \|\| 4567;

	app.get("/", function(req, res) {
	res.redirect("/index.html");
	});

	app.configure(function(){
	app.use(express.methodOverride());
	app.use(express.bodyParser());
	app.use(express.static(__dirname + '/public'));
	app.use(express.errorHandler({
	dumpExceptions: true,
	showStack: true
	}));
	app.use(app.router);
	});

	app.listen(port);
	{
	"nodes": [
	{ "name": "Ma1", "group": 1, "color": 1 },
	{ "name": "1", "group": 1, "color": 1 },
	{ "name": "2", "group": 1, "color": 1 },
	{ "name": "3", "group": 1 , "color": 2 },
	{ "name": "4", "group": 1, "color": 2 },
	{ "name": "5", "group": 1, "color": 2 },
	{ "name": "6", "group": 1, "color": 2 },
	{ "name": "7", "group": 2 , "color": 3 },
	{ "name": "8", "group": 2, "color": 3 },
	{ "name": "9", "group": 2 , "color": 3 },
	{ "name": "10", "group": 2 , "color": 3 },
	{ "name": "11", "group": 3 , "color": 3 },
	{ "name": "12", "group": 4 , "color": 3 },
	{ "name": "13", "group": 4 , "color": 4 } ,
	{ "name": "14", "group": 4 , "color": 4 },
	{ "name": "15", "group": 4 , "color": 4 },
	{ "name": "16", "group": 4 , "color": 4 },
	{ "name": "17", "group": 5 , "color": 4 },
	{ "name": "18", "group": 5 , "color": 5 },
	{ "name": "19", "group": 5 , "color": 5 }
	],
	"links": [
	{ "source": 6, "target": 16, "value" : 1 },
	{ "source": 0, "target": 7, "value" : 2 },
	{ "source": 0, "target": 10, "value" : 2 },
	{ "source": 1, "target": 8, "value" : 4 },
	{ "source": 11, "target": 13, "value" : 5 },
	{ "source": 11, "target": 14, "value" : 6 },
	{ "source": 9, "target": 11, "value" : 6},
	{ "source": 13, "target": 16, "value" : 7},
	{ "source": 13, "target": 18, "value" : 7}
	]
	}