dveeden/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
    <div id="g1">g1</div>
    <div id="g2">g2</div>
    <script src="https://d3js.org/d3.v3.min.js"></script>

    <script>
        var width = 960,
            height = 300

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

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

        var tree = d3.layout.tree()
            .size([width, height]);

        var diagonal = d3.svg.diagonal()
	    .projection(function(d) { return [d.y, d.x]; });

        var force = d3.layout.force()
            .gravity(0.1)
            .distance(100)
            .charge(-700)
            .size([width, height]);

        var color = function (group) {
            if (group == 1) {
                return "#aaa"
            } else if (group == 2) {
                return "#fbc280"
            } else {
                return "#405275"
            }
        }

        var i = 0;

        d3.json("t1.json", function (error, json) {
            var nodes = tree.nodes(json),
                links = tree.links(nodes);

            nodes.forEach(function(d) { d.y = 300 + (d.depth * 150); d.x = d.x/5; });

            var node = svg1.selectAll(".node")
                .data(nodes, function(d) { return d.id || (d.id = ++i); })
                .enter()
                .append("g")
                .attr("class", "node")
                .attr("transform", function(d) {
		    return "translate(" + d.y + "," + d.x + ")"; });

            node.append("circle")
                .attr("r", 13)
                .attr('fill', function (d) {
                    return color(d.group);
                });

            node.append("text")
                .attr("dx", 10)
                .attr("dy", 28)
                .style("font-size", "18px")
                .text(function (d) {
                    return d.name
                });

            var link = svg1.selectAll("path.link")
	        .data(links, function(d) { return d.target.id; });

            link.enter().insert("path", "g")
	        .attr("class", "link")
                .style("stroke", "#4245f5")
                .style("fill-opacity", "0")
	        .attr("d", diagonal);

            var node_coords1 = node.filter(function(d) { return d.group == 1; })
               .data()
               .map(function(d) { return [ d.y, d.x ]; });

            var hull1 = svg1.append("path")
                .attr("class", "hull")
                .style("fill", "darkolivegreen")
                .style("fill-opacity", "20%")
                .style("stroke", "darkgreen")
                .style("stroke-opacity", "50%")
                .attr("transform", "scale(1.5), translate(-130, -30)");

            hull1.datum(d3.geom.hull(node_coords1))
                .attr("d", function(d) { return "M" + d.join("L") + "Z"; });

        });

        d3.json("t2.json", function (error, json) {
            if (error) throw error;


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

            var link = svg2.selectAll(".link")
                .data(json.links)
                .enter().append("line")
                .attr("class", "link")
                .style("stroke", "#4245f5");

            var node = svg2.selectAll(".node")
                .data(json.nodes)
                .enter().append("g")
                .attr("class", "node")
                .call(force.drag);
            node.append('circle')
                .attr('r', 13)
                .attr('fill', function (d) {
                    return color(d.group);
                });

            node.append("text")
                .attr("dx", 20)
                .attr("dy", 8)
                .style("font-size", "18px")

                .text(function (d) {
                    return d.name
                });

            var node_coords = [];
            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>

## t1.json
{
    "name": "server1",
    "group": 1,
    "children": [
        {
            "name": "server2",
            "group": 1
        },
        {
            "name": "server3",
            "group": 1,
            "children": [
                {
                    "name": "server4",
                    "group": 2
                }
            ]
        },
        {
            "name": "server5",
            "group": 1
        }
    ]
}

## t2.json
{
    "nodes": [{
        "name": "server1",
        "group": 1
    }, {
        "name": "server2",
        "group": 1
    }, {
        "name": "server3",
        "group": 1
    }, {
        "name": "server4",
        "group": 2
    }, {
        "name": "server5",
        "group": 1
    }],
    "links": [{
        "source": 0,
        "target": 1
    },{
        "source": 0,
        "target": 2
    },{
        "source": 1,
        "target": 3
    },{
        "source": 0,
        "target": 4
    }]
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<div id="g1">g1</div>
	<div id="g2">g2</div>
	<script src="https://d3js.org/d3.v3.min.js"></script>

	<script>
	var width = 960,
	height = 300

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

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

	var tree = d3.layout.tree()
	.size([width, height]);

	var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

	var force = d3.layout.force()
	.gravity(0.1)
	.distance(100)
	.charge(-700)
	.size([width, height]);

	var color = function (group) {
	if (group == 1) {
	return "#aaa"
	} else if (group == 2) {
	return "#fbc280"
	} else {
	return "#405275"
	}
	}

	var i = 0;

	d3.json("t1.json", function (error, json) {
	var nodes = tree.nodes(json),
	links = tree.links(nodes);

	nodes.forEach(function(d) { d.y = 300 + (d.depth * 150); d.x = d.x/5; });

	var node = svg1.selectAll(".node")
	.data(nodes, function(d) { return d.id \|\| (d.id = ++i); })
	.enter()
	.append("g")
	.attr("class", "node")
	.attr("transform", function(d) {
	return "translate(" + d.y + "," + d.x + ")"; });

	node.append("circle")
	.attr("r", 13)
	.attr('fill', function (d) {
	return color(d.group);
	});

	node.append("text")
	.attr("dx", 10)
	.attr("dy", 28)
	.style("font-size", "18px")
	.text(function (d) {
	return d.name
	});

	var link = svg1.selectAll("path.link")
	.data(links, function(d) { return d.target.id; });

	link.enter().insert("path", "g")
	.attr("class", "link")
	.style("stroke", "#4245f5")
	.style("fill-opacity", "0")
	.attr("d", diagonal);

	var node_coords1 = node.filter(function(d) { return d.group == 1; })
	.data()
	.map(function(d) { return [ d.y, d.x ]; });

	var hull1 = svg1.append("path")
	.attr("class", "hull")
	.style("fill", "darkolivegreen")
	.style("fill-opacity", "20%")
	.style("stroke", "darkgreen")
	.style("stroke-opacity", "50%")
	.attr("transform", "scale(1.5), translate(-130, -30)");

	hull1.datum(d3.geom.hull(node_coords1))
	.attr("d", function(d) { return "M" + d.join("L") + "Z"; });

	});

	d3.json("t2.json", function (error, json) {
	if (error) throw error;


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

	var link = svg2.selectAll(".link")
	.data(json.links)
	.enter().append("line")
	.attr("class", "link")
	.style("stroke", "#4245f5");

	var node = svg2.selectAll(".node")
	.data(json.nodes)
	.enter().append("g")
	.attr("class", "node")
	.call(force.drag);
	node.append('circle')
	.attr('r', 13)
	.attr('fill', function (d) {
	return color(d.group);
	});

	node.append("text")
	.attr("dx", 20)
	.attr("dy", 8)
	.style("font-size", "18px")

	.text(function (d) {
	return d.name
	});

	var node_coords = [];
	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>
	{
	"name": "server1",
	"group": 1,
	"children": [
	{
	"name": "server2",
	"group": 1
	},
	{
	"name": "server3",
	"group": 1,
	"children": [
	{
	"name": "server4",
	"group": 2
	}
	]
	},
	{
	"name": "server5",
	"group": 1
	}
	]
	}
	{
	"nodes": [{
	"name": "server1",
	"group": 1
	}, {
	"name": "server2",
	"group": 1
	}, {
	"name": "server3",
	"group": 1
	}, {
	"name": "server4",
	"group": 2
	}, {
	"name": "server5",
	"group": 1
	}],
	"links": [{
	"source": 0,
	"target": 1
	},{
	"source": 0,
	"target": 2
	},{
	"source": 1,
	"target": 3
	},{
	"source": 0,
	"target": 4
	}]
	}