d3byex · November 27, 2015 23:17
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta name="description" content="D3byEX 11.4">
    <meta charset="utf-8">
 </head>
 <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.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(1)
                .charge(-4000)
                .start();

          var link = svg.selectAll('line')
                .data(data.edges)
                .enter()
            .append('line')
                .attr({
                  stroke: '#ccc',
                    'pointer-events': 'none',
                    'font': '10px sans-serif'
                });

            var nodes = svg.selectAll('g')
                .data(data.nodes)
                .enter()
                .append('g')
                .call(force.drag);

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

            nodes.append('text')
                .attr({
                        dx: 12,
                        dy: '.35em',
                        'pointer-events': 'none'
                    })
            .style('font', '10px sans-serif')
                    .text(function (d) { return d.name });

            force.on('tick', function () {
                link.each(function (d) {
                    d3.select(this).attr({
                        x1: d.source.x,
                        y1: d.source.y,
                        x2: d.target.x,
                        y2: d.target.y
                    });
                });

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

        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="D3byEX 11.4">
	<meta charset="utf-8">
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.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(1)
	.charge(-4000)
	.start();

	var link = svg.selectAll('line')
	.data(data.edges)
	.enter()
	.append('line')
	.attr({
	stroke: '#ccc',
	'pointer-events': 'none',
	'font': '10px sans-serif'
	});

	var nodes = svg.selectAll('g')
	.data(data.nodes)
	.enter()
	.append('g')
	.call(force.drag);

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

	nodes.append('text')
	.attr({
	dx: 12,
	dy: '.35em',
	'pointer-events': 'none'
	})
	.style('font', '10px sans-serif')
	.text(function (d) { return d.name });

	force.on('tick', function () {
	link.each(function (d) {
	d3.select(this).attr({
	x1: d.source.x,
	y1: d.source.y,
	x2: d.target.x,
	y2: d.target.y
	});
	});

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

	});
	</script>
	</body>
	</html>