# Graph Type Logos

## For Tree
Open jsfiddle.net, select D3 as library and paste:

-------------------- HTML
<div id="body"></div>

-------------------- CSS
.node circle {
    fill: #f00;
    stroke: #fff;
    stroke-width: 5px;
}
path.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 5px;
}

-------------------- JS
var m = [120, 120, 120, 120],
	w = 640 - m[1] - m[3],
	h = 480 - m[0] - m[2],
	i = 0,
	root,
	colors = ['#aec7e8', '#ffbb78', '#1f77b4', '#ff7f0e'];

var tree = d3.layout.tree()
	.size([h, w])
	.nodeSize([50, 50]);

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

var vis = d3.select("#body").append("svg:svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("svg:g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

root = {
	"name": "flare",
	"children": [{
		"name": "bla",
		"children": [{
			"name": "bla"
		}, {
			"name": "bla"
		}]
	}, {
		"name": "bla"
	}, {
		"name": "bla"
	}]
};
root.x0 = h / 2;
root.y0 = 0;

update(root);

function update (source) {
	var duration = 100;

	// Compute the new tree layout.
	var nodes = tree.nodes(root).reverse();

	// Normalize for fixed-depth.
	nodes.forEach(function (d) {
		d.y = d.depth * 80;
	});

	// Update the nodes…
	var node = vis.selectAll("g.node")
		.data(nodes, function (d) {
			return d.id || (d.id = ++i);
		});

	// Enter any new nodes at the parent's previous position.
	var nodeEnter = node.enter().append("svg:g")
		.attr("class", "node")
		.attr("transform", function (d) {
			return "translate(" + source.y0 + "," + source.x0 + ")";
		});

	nodeEnter.append("svg:circle")
		.attr("r", '12px')
		.style('fill', function (d) {
			return colors[d.id % 4];
		});

	// Transition nodes to their new position.
	var nodeUpdate = node.transition()
		.duration(duration)
		.attr("transform", function (d) {
			return "translate(" + d.y + "," + d.x + ")";
		});

	// Transition exiting nodes to the parent's new position.
	var nodeExit = node.exit().transition()
		.duration(duration)
		.attr("transform", function (d) {
			return "translate(" + source.y + "," + source.x + ")";
		})
		.remove();

	// Update the links…
	var link = vis.selectAll("path.link")
		.data(tree.links(nodes), function (d) {
			return d.target.id;
		});

	// Enter any new links at the parent's previous position.
	link.enter().insert("svg:path", "g")
		.attr("class", "link")
		.attr("d", function (d) {
			var o = {
				x: source.x0,
				y: source.y0
			};
			return diagonal({
				source: o,
				target: o
			});
		})
		.transition()
		.duration(duration)
		.attr("d", diagonal);

	// Transition links to their new position.
	link.transition()
		.duration(duration)
		.attr("d", diagonal);

	// Transition exiting nodes to the parent's new position.
	link.exit().transition()
		.duration(duration)
		.attr("d", function (d) {
			var o = {
				x: source.x,
				y: source.y
			};
			return diagonal({
				source: o,
				target: o
			});
		})
		.remove();

	// Stash the old positions for transition.
	nodes.forEach(function (d) {
		d.x0 = d.x;
		d.y0 = d.y;
	});
}


## For Graph
Open jsfiddle.net, select D3 as library and paste:

-------------------- HTML
<div id="body"></div>

-------------------- CSS
circle.node {
    fill: #f00;
    stroke: #fff;
    stroke-width: 5px;
}
.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 5px;
}

-------------------- JS
var width = 640,
	height = 480;

var colors = ['#aec7e8', '#ffbb78', '#1f77b4', '#ff7f0e'];

var force = d3.layout.force()
	.charge(-120)
	.linkDistance(100)
	.size([width, height]);

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

var graph = {
	"nodes": [
		{"name": "Myriel"},
		{"name": "Napoleon"},
		{"name": "Mlle.Baptistine"},
		{"name": "Mme.Magloire"},
		{"name": "CountessdeLo"},
		{"name": "Geborand"}],
	"links": [
		{"source": 1, "target": 0},
		{"source": 2, "target": 0},
		{"source": 3, "target": 0},
		{"source": 3, "target": 2},
		{"source": 4, "target": 0},
		{"source": 5, "target": 0},
		{"source": 1, "target": 2},
		{"source": 2, "target": 3},
		{"source": 3, "target": 4}
	]
};

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

var link = svg.selectAll(".link")
	.data(graph.links)
	.enter().append("line")
	.attr("class", "link");

var node = svg.selectAll(".node")
	.data(graph.nodes)
	.enter().append("circle")
	.attr("class", "node")
	.attr("r", "12px")
	.attr("style", function (d) {
        return 'fill:' + colors[d.index % 4] + ';';
	})
	.call(force.drag);

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("cx", function (d) {
		return d.x;
	})
		.attr("cy", function (d) {
			return d.y;
		});
});