wyaeld/index.html

## index.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>

    /*nodes*/
    .node text {
        pointer-events: none;
        font: 20px sans-serif;
    }

    .node circle {
        stroke: #fff;
        stroke-width: 4px;
    }

    .node.company {
      fill: #0262b6;
    }

    .node.company circle {
        fill: #fff;
        stroke: #0262b6;
    }

    .node.person {
      fill: #6402a5;
    }

    .node.person circle {
        fill: #fff;
        stroke: #6402a5;
    }

    /*links*/

    line.link {
        stroke-width: 3px;
    }

    .link {
        pointer-events: none;
        font: 20px sans-serif;
    }

    .link.shareholder {
        fill: #8dc702;
    }

    line.link.shareholder {
        stroke: #8dc702;
        marker-end: url(#arrow_friends)
    }

    .link.director {
        fill: #ffc602;
    }

    line.link.director {
        stroke: #ffc602;
        marker-end: url(#arrow_enemies)
    }


</style>
<body>

<svg id="cloud" width="960" height="600">

    <g class="node person" transform="translate(60,30)">
        <circle r="16"/>
        <text dx="20" dy=".35em">Person</text>
    </g>

    <g class="node company" transform="translate(60,70)">
        <circle r="16"/>
        <text dx="20" dy=".35em">Company</text>
    </g>

    <g transform="translate(60,110)">
        <line class="link shareholder" x1="-30" y1="0" x2="20" y2="0"/>
        <text class="link shareholder" dx="20" dy=".35em">Shareholder</text>
    </g>

    <g transform="translate(60,150)">
        <line class="link director" x1="-30" y1="0" x2="20" y2="0"/>
        <text class="link director" dx="20" dy=".35em">Director</text>
    </g>
    <g id="svgBody"/>

    <defs>
        <marker id="arrow_friends" viewbox="0 -5 10 10" refX="19" refY="0"
                markerWidth="6" markerHeight="6" orient="auto" stroke="#8dc702" fill="#8dc702">
            <path d="M0,-5L10,0L0,5Z"/>
        </marker>
        <marker id="arrow_enemies" viewbox="0 -5 10 10" refX="19" refY="0"
                markerWidth="6" markerHeight="6" orient="auto" stroke=" #ffc602" fill=" #ffc602">
            <path d="M0,-5L10,0L0,5Z"/>
        </marker>
    </defs>
</svg>

<script>

    var nodes = [
        {"id": 1, "name": "Alice",  "node_type":"person"},
        {"id": 2, "name": "Bob",    "node_type":"person"},
        {"id": 3, "name": "Carol",  "node_type":"company"},
        {"id": 4, "name": "Dan",    "node_type":"company"},
        {"id": 5, "name": "Eve",    "node_type":"company"},
        {"id": 6, "name": "Frank",  "node_type":"company"},
        {"id": 7, "name": "Garry",  "node_type":"person"}
    ];

    var links = [
        {"id": 1, "source_id": 1, "target_id": 2, "link_name" : "director"},
        {"id": 2, "source_id": 2, "target_id": 3, "link_name" : "director"},
        {"id": 3, "source_id": 2, "target_id": 4, "link_name" : "shareholder"},
        {"id": 4, "source_id": 3, "target_id": 4, "link_name" : "director"},
        {"id": 5, "source_id": 4, "target_id": 5, "link_name" : "shareholder"},
        {"id": 6, "source_id": 5, "target_id": 6, "link_name" : "director"},
        {"id": 7, "source_id": 1, "target_id": 6, "link_name" : "shareholder"},
        {"id": 8, "source_id": 1, "target_id": 5, "link_name" : "shareholder"},
        {"id": 10, "source_id": 5, "target_id": 7, "link_name" : "shareholder"}
    ];

    // helper function to create a map of node.id -> node
    mapNodes = function(nodes) {
        nodesMap = d3.map()
        nodes.forEach(function (n){
            nodesMap.set(n.id, n)
        })
        return nodesMap
    }

    var nodeMap = mapNodes(nodes)

    // so the links point to the named node
    links.forEach(function(l) {
        l.source = nodeMap.get(l.source_id)
        l.target = nodeMap.get(l.target_id)
    })

    var width = 960, height = 600
    var svg = d3.select("#svgBody");
    var force = d3.layout.force()
            .charge(-500)
            .friction(0.9)
            .gravity(.05)
            .linkDistance(150)
            .size([width, height]);

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

    var link = svg.selectAll(".link")
            .data(links)

    link.enter().append("line")
            .attr("class", function(d) { return "link " + d.link_name; });

    var node = svg.selectAll(".node").data(nodes)

    node.enter().append("g").attr("class", function(d) { return "node " + d.node_type; })
    node.append("circle").attr("r", 16).call(force.drag)
    node.append("text").attr("dx", 20).attr("dy", ".35em").text(function(d) { return d.name });

    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>

	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>

	/nodes/
	.node text {
	pointer-events: none;
	font: 20px sans-serif;
	}

	.node circle {
	stroke: #fff;
	stroke-width: 4px;
	}

	.node.company {
	fill: #0262b6;
	}

	.node.company circle {
	fill: #fff;
	stroke: #0262b6;
	}

	.node.person {
	fill: #6402a5;
	}

	.node.person circle {
	fill: #fff;
	stroke: #6402a5;
	}

	/links/

	line.link {
	stroke-width: 3px;
	}

	.link {
	pointer-events: none;
	font: 20px sans-serif;
	}

	.link.shareholder {
	fill: #8dc702;
	}

	line.link.shareholder {
	stroke: #8dc702;
	marker-end: url(#arrow_friends)
	}

	.link.director {
	fill: #ffc602;
	}

	line.link.director {
	stroke: #ffc602;
	marker-end: url(#arrow_enemies)
	}


	</style>
	<body>

	<svg id="cloud" width="960" height="600">

	<g class="node person" transform="translate(60,30)">
	<circle r="16"/>
	<text dx="20" dy=".35em">Person</text>
	</g>

	<g class="node company" transform="translate(60,70)">
	<circle r="16"/>
	<text dx="20" dy=".35em">Company</text>
	</g>

	<g transform="translate(60,110)">
	<line class="link shareholder" x1="-30" y1="0" x2="20" y2="0"/>
	<text class="link shareholder" dx="20" dy=".35em">Shareholder</text>
	</g>

	<g transform="translate(60,150)">
	<line class="link director" x1="-30" y1="0" x2="20" y2="0"/>
	<text class="link director" dx="20" dy=".35em">Director</text>
	</g>
	<g id="svgBody"/>

	<defs>
	<marker id="arrow_friends" viewbox="0 -5 10 10" refX="19" refY="0"
	markerWidth="6" markerHeight="6" orient="auto" stroke="#8dc702" fill="#8dc702">
	<path d="M0,-5L10,0L0,5Z"/>
	</marker>
	<marker id="arrow_enemies" viewbox="0 -5 10 10" refX="19" refY="0"
	markerWidth="6" markerHeight="6" orient="auto" stroke=" #ffc602" fill=" #ffc602">
	<path d="M0,-5L10,0L0,5Z"/>
	</marker>
	</defs>
	</svg>

	<script>

	var nodes = [
	{"id": 1, "name": "Alice", "node_type":"person"},
	{"id": 2, "name": "Bob", "node_type":"person"},
	{"id": 3, "name": "Carol", "node_type":"company"},
	{"id": 4, "name": "Dan", "node_type":"company"},
	{"id": 5, "name": "Eve", "node_type":"company"},
	{"id": 6, "name": "Frank", "node_type":"company"},
	{"id": 7, "name": "Garry", "node_type":"person"}
	];

	var links = [
	{"id": 1, "source_id": 1, "target_id": 2, "link_name" : "director"},
	{"id": 2, "source_id": 2, "target_id": 3, "link_name" : "director"},
	{"id": 3, "source_id": 2, "target_id": 4, "link_name" : "shareholder"},
	{"id": 4, "source_id": 3, "target_id": 4, "link_name" : "director"},
	{"id": 5, "source_id": 4, "target_id": 5, "link_name" : "shareholder"},
	{"id": 6, "source_id": 5, "target_id": 6, "link_name" : "director"},
	{"id": 7, "source_id": 1, "target_id": 6, "link_name" : "shareholder"},
	{"id": 8, "source_id": 1, "target_id": 5, "link_name" : "shareholder"},
	{"id": 10, "source_id": 5, "target_id": 7, "link_name" : "shareholder"}
	];

	// helper function to create a map of node.id -> node
	mapNodes = function(nodes) {
	nodesMap = d3.map()
	nodes.forEach(function (n){
	nodesMap.set(n.id, n)
	})
	return nodesMap
	}

	var nodeMap = mapNodes(nodes)

	// so the links point to the named node
	links.forEach(function(l) {
	l.source = nodeMap.get(l.source_id)
	l.target = nodeMap.get(l.target_id)
	})

	var width = 960, height = 600
	var svg = d3.select("#svgBody");
	var force = d3.layout.force()
	.charge(-500)
	.friction(0.9)
	.gravity(.05)
	.linkDistance(150)
	.size([width, height]);

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

	var link = svg.selectAll(".link")
	.data(links)

	link.enter().append("line")
	.attr("class", function(d) { return "link " + d.link_name; });

	var node = svg.selectAll(".node").data(nodes)

	node.enter().append("g").attr("class", function(d) { return "node " + d.node_type; })
	node.append("circle").attr("r", 16).call(force.drag)
	node.append("text").attr("dx", 20).attr("dy", ".35em").text(function(d) { return d.name });

	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>