drorata/d3-graph.html

## d3-graph.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .links line {
        stroke: #999;
        stroke-opacity: 0.6;
    }

    .nodes circle {
        stroke: #fff;
        stroke-width: 1.5px;
    }

    text {
        font-family: sans-serif;
        font-size: 10px;
    }
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

    function node_type(d) {
        if (d.type == "DWH-Table") {
            return 'green'
        } else {
            return 'blue'
        }
    }

    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

    var color = d3.scaleOrdinal(d3.schemeCategory20);

    var simulation = d3.forceSimulation()
        .force("link", d3.forceLink().id(function (d) { return d.id; }))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(width / 2, height / 2));

    d3.json("ma-graph.json", function (error, graph) {
        if (error) throw error;

        var link = svg.append("g")
            .attr("class", "links")
            .selectAll("line")
            .data(graph.links)
            .enter().append("line")
            .attr("stroke-width", function (d) { return Math.sqrt(d.value); })
            .attr("marker-end", "url(#end)");;

        var node = svg.append("g")
            .attr("class", "nodes")
            .selectAll("g")
            .data(graph.nodes)
            .enter().append("g")

        // build the arrow.
        svg.append("svg:defs").selectAll("marker")
            .data(["end"])      // Different link/path types can be defined here
            .enter().append("svg:marker")    // This section adds in the arrows
            .attr("id", String)
            .attr("viewBox", "0 -5 10 10")
            .attr("refX", 15)
            .attr("refY", -1.5)
            .attr("markerWidth", 8)
            .attr("markerHeight", 8)
            .attr("orient", "auto")
            .append("svg:path")
            .attr("d", "M0,-5L10,0L0,5");

        var circles = node.append("circle")
            .attr("r", 5)
            .attr("fill", function (d) { return color(node_type(d)); })
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended));

        var lables = node.append("text")
            .text(function (d) {
                return d.id;
            })
            .attr('x', 6)
            .attr('y', 3);

        node.append("title")
            .text(function (d) {
                return "Name: ".concat(d.name).concat("\n")
                    .concat("Owner: ").concat(d.owner);
            });

        simulation
            .nodes(graph.nodes)
            .on("tick", ticked);

        simulation.force("link")
            .links(graph.links);

        function ticked() {
            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 + ")";
                })
        }
    });

    function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }

    function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }

</script>

## graph.json
{
    "nodes": [
        {
            "id": "foo",
            "name": "A foo table",
            "owner": "TBA",
            "type": "DWH-Table",
            "group": 1
        },
        {
            "id": "bar",
            "name": "a bar table",
            "owner": "TBA",
            "type": "DWH-Table",
            "group": 2
        }
    ],
    "links": [
        {
            "source": "foo",
            "target": "bar"
        }
    ]
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.links line {
	stroke: #999;
	stroke-opacity: 0.6;
	}

	.nodes circle {
	stroke: #fff;
	stroke-width: 1.5px;
	}

	text {
	font-family: sans-serif;
	font-size: 10px;
	}
	</style>
	<svg width="960" height="600"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	function node_type(d) {
	if (d.type == "DWH-Table") {
	return 'green'
	} else {
	return 'blue'
	}
	}

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height");

	var color = d3.scaleOrdinal(d3.schemeCategory20);

	var simulation = d3.forceSimulation()
	.force("link", d3.forceLink().id(function (d) { return d.id; }))
	.force("charge", d3.forceManyBody())
	.force("center", d3.forceCenter(width / 2, height / 2));

	d3.json("ma-graph.json", function (error, graph) {
	if (error) throw error;

	var link = svg.append("g")
	.attr("class", "links")
	.selectAll("line")
	.data(graph.links)
	.enter().append("line")
	.attr("stroke-width", function (d) { return Math.sqrt(d.value); })
	.attr("marker-end", "url(#end)");;

	var node = svg.append("g")
	.attr("class", "nodes")
	.selectAll("g")
	.data(graph.nodes)
	.enter().append("g")

	// build the arrow.
	svg.append("svg:defs").selectAll("marker")
	.data(["end"]) // Different link/path types can be defined here
	.enter().append("svg:marker") // This section adds in the arrows
	.attr("id", String)
	.attr("viewBox", "0 -5 10 10")
	.attr("refX", 15)
	.attr("refY", -1.5)
	.attr("markerWidth", 8)
	.attr("markerHeight", 8)
	.attr("orient", "auto")
	.append("svg:path")
	.attr("d", "M0,-5L10,0L0,5");

	var circles = node.append("circle")
	.attr("r", 5)
	.attr("fill", function (d) { return color(node_type(d)); })
	.call(d3.drag()
	.on("start", dragstarted)
	.on("drag", dragged)
	.on("end", dragended));

	var lables = node.append("text")
	.text(function (d) {
	return d.id;
	})
	.attr('x', 6)
	.attr('y', 3);

	node.append("title")
	.text(function (d) {
	return "Name: ".concat(d.name).concat("\n")
	.concat("Owner: ").concat(d.owner);
	});

	simulation
	.nodes(graph.nodes)
	.on("tick", ticked);

	simulation.force("link")
	.links(graph.links);

	function ticked() {
	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 + ")";
	})
	}
	});

	function dragstarted(d) {
	if (!d3.event.active) simulation.alphaTarget(0.3).restart();
	d.fx = d.x;
	d.fy = d.y;
	}

	function dragged(d) {
	d.fx = d3.event.x;
	d.fy = d3.event.y;
	}

	function dragended(d) {
	if (!d3.event.active) simulation.alphaTarget(0);
	d.fx = null;
	d.fy = null;
	}

	</script>
	{
	"nodes": [
	{
	"id": "foo",
	"name": "A foo table",
	"owner": "TBA",
	"type": "DWH-Table",
	"group": 1
	},
	{
	"id": "bar",
	"name": "a bar table",
	"owner": "TBA",
	"type": "DWH-Table",
	"group": 2
	}
	],
	"links": [
	{
	"source": "foo",
	"target": "bar"
	}
	]
	}