matt-bernhardt/graph_explorer.html

## graph_explorer.html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3 Vision Quest - Network Explorer</title>
		<script src="/scripts/jquery-1.9.1.js"></script>
		<script src="/scripts/d3.v3.min.js" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/styles/reset.css">
		<link rel="stylesheet" type="text/css" href="/styles/d3vq.css">
		<style type="text/css">
#fig {
}
/* Range Controls */
.control {
	border: 1px solid #ccc;
	padding: 0.25em;
	margin: 0.5em 0;
	display: inline-block;
}
.control>* {
	vertical-align: middle;
}
.control input {
	margin: 0 1em;
	display: inline-block;
}
.control .value {
	display: inline-block;
	min-width: 2em;
	text-align: right;
}
/* Network graph */
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}
		</style>
	</head>
	<body>
		<div id="page">
			<h1>Network Explorer</h1>
			<div id="breadcrumb">
				<a href="/">Home</a>
			</div>
			<p>This is a basic exploration tool for networks, specifically using force-directed graphs.</p>
			<div id="fig"></div>
			<div class="control">
				<label for="charge">Charge: </label>
				<input type="range" class="charge" name="charge" min="-200" max="100" value="-120">
				<span class="value"></span>
			</div>
			<div class="control">
				<label for="link">Link Distance: </label>
				<input type="range" class="link" name="link" value="30">
				<span class="value"></span>
			</div>
			<input type="reset">
		</div>
<script>
$(document).ready( function() {
	$( '.control input' ).change(function() {
		v = $(this).val();
		$(this).next().text(v);
	});

	var width = 960,
	    height = 500;

	var linkDistance = 30;
	var charge = -120;

	var color = d3.scale.category20();

	var force = d3.layout.force()
	    .charge(function() { return charge; } )
	    .linkDistance(function() { return linkDistance; } )
	    .size([width, height]);

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

	d3.json("data/network/crew12.json", function(error, graph) {
	  force
		.nodes(graph.nodes)
		.links(graph.links)
		.start();

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

	  var node = svg.selectAll(".node")
		.data(graph.nodes)
		.enter().append("circle")
		.attr("class", "node")
		.attr("r", 5)
		.style("fill", function(d) { return color(d.group); })
		.call(force.drag);

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

	  d3.select("input[name=charge]").on("change", function() {
	  	force.stop();
	    charge = this.value;
	    force.start();
	  });

	  d3.select("input[name=link]").on("change", function() {
	  	force.stop();
	    linkDistance = this.value;
	    force.start();
	  });

	  d3.select("input[type=reset]").on("click", function() {
	  	force.stop();
	    linkDistance = 30;
	    charge = -120;
	    $(".value").text("");
	    force.start();
	  });

	});

});
</script>
	</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Vision Quest - Network Explorer</title>
	<script src="/scripts/jquery-1.9.1.js"></script>
	<script src="/scripts/d3.v3.min.js" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="/styles/reset.css">
	<link rel="stylesheet" type="text/css" href="/styles/d3vq.css">
	<style type="text/css">
	#fig {
	}
	/* Range Controls */
	.control {
	border: 1px solid #ccc;
	padding: 0.25em;
	margin: 0.5em 0;
	display: inline-block;
	}
	.control>* {
	vertical-align: middle;
	}
	.control input {
	margin: 0 1em;
	display: inline-block;
	}
	.control .value {
	display: inline-block;
	min-width: 2em;
	text-align: right;
	}
	/* Network graph */
	.node {
	stroke: #fff;
	stroke-width: 1.5px;
	}

	.link {
	stroke: #999;
	stroke-opacity: .6;
	}
	</style>
	</head>
	<body>
	<div id="page">
	<h1>Network Explorer</h1>
	<div id="breadcrumb">
	<a href="/">Home</a>
	</div>
	<p>This is a basic exploration tool for networks, specifically using force-directed graphs.</p>
	<div id="fig"></div>
	<div class="control">
	<label for="charge">Charge: </label>
	<input type="range" class="charge" name="charge" min="-200" max="100" value="-120">
	<span class="value"></span>
	</div>
	<div class="control">
	<label for="link">Link Distance: </label>
	<input type="range" class="link" name="link" value="30">
	<span class="value"></span>
	</div>
	<input type="reset">
	</div>
	<script>
	$(document).ready( function() {
	$( '.control input' ).change(function() {
	v = $(this).val();
	$(this).next().text(v);
	});

	var width = 960,
	height = 500;

	var linkDistance = 30;
	var charge = -120;

	var color = d3.scale.category20();

	var force = d3.layout.force()
	.charge(function() { return charge; } )
	.linkDistance(function() { return linkDistance; } )
	.size([width, height]);

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

	d3.json("data/network/crew12.json", function(error, graph) {
	force
	.nodes(graph.nodes)
	.links(graph.links)
	.start();

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

	var node = svg.selectAll(".node")
	.data(graph.nodes)
	.enter().append("circle")
	.attr("class", "node")
	.attr("r", 5)
	.style("fill", function(d) { return color(d.group); })
	.call(force.drag);

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

	d3.select("input[name=charge]").on("change", function() {
	force.stop();
	charge = this.value;
	force.start();
	});

	d3.select("input[name=link]").on("change", function() {
	force.stop();
	linkDistance = this.value;
	force.start();
	});

	d3.select("input[type=reset]").on("click", function() {
	force.stop();
	linkDistance = 30;
	charge = -120;
	$(".value").text("");
	force.start();
	});

	});

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