d3byex · November 27, 2015 22:50
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta name="description" content="D3byEX 11.2">
    <meta charset="utf-8">
 </head>
 <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
        var url = 'https://gist.githubusercontent.com/d3byex/5a8267f90a0d215fcb3e/raw/b53d20a8a6a82fd8bab2c03e0ec5a96262b5c8da/uni_network.json';
        d3.json(url, function (error, data) {
            var width = 960, height = 500;

            var svg = d3.select('body').append('svg')
                .attr({
                    width: width,
                    height: height
                });

            var force = d3.layout.force()
                .nodes(data.nodes)
                .links(data.edges)
                .size([width, height])
                .linkDistance(200)
                .start();

            var edges = svg.selectAll('line')
                .data(data.edges)
                .enter()
                .append('line')
                .style('stroke', '#ccc')
                .style('stroke-width', 1);

            var colors = d3.scale.category20();
            var nodes = svg
                .selectAll('circle')
                .data(data.nodes)
                .enter()
                .append('circle')
                .attr('r', 10)
                .attr('fill', function (d, i) {
                    return colors(i);
                })
                .call(force.drag);

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

                nodes.attr('cx', function (d) { return d.x; })
                     .attr('cy', function (d) { return d.y; });
            });
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="D3byEX 11.2">
	<meta charset="utf-8">
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var url = 'https://gist.githubusercontent.com/d3byex/5a8267f90a0d215fcb3e/raw/b53d20a8a6a82fd8bab2c03e0ec5a96262b5c8da/uni_network.json';
	d3.json(url, function (error, data) {
	var width = 960, height = 500;

	var svg = d3.select('body').append('svg')
	.attr({
	width: width,
	height: height
	});

	var force = d3.layout.force()
	.nodes(data.nodes)
	.links(data.edges)
	.size([width, height])
	.linkDistance(200)
	.start();

	var edges = svg.selectAll('line')
	.data(data.edges)
	.enter()
	.append('line')
	.style('stroke', '#ccc')
	.style('stroke-width', 1);

	var colors = d3.scale.category20();
	var nodes = svg
	.selectAll('circle')
	.data(data.nodes)
	.enter()
	.append('circle')
	.attr('r', 10)
	.attr('fill', function (d, i) {
	return colors(i);
	})
	.call(force.drag);

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

	nodes.attr('cx', function (d) { return d.x; })
	.attr('cy', function (d) { return d.y; });
	});
	});
	</script>
	</body>
	</html>