Scatterplot, network, and table

by JVAdams

CSS

.link line {
		stroke: gray;}
	.link line.separator {
		stroke: white;}
	.node circle {
		stroke: gray;
		stroke-width: 1.5;}
	.node text {
		font: 12px sans-serif;
		pointer-events: none;}

JavaScript

var graph = {"nodes": [
    {"name": "Betty",  "size": 12, "company": "X", "location": "ChicagoIL"},
    {"name": "Frank",  "size": 12, "company": "Y", "location": "NewYorkNY"},
    {"name": "Jim",    "size": 12, "company": "Y", "location": "LosAngelesCA"},
    {"name": "Sally",  "size": 12, "company": "Z", "location": "TorontoON"},
    {"name": "Tom",    "size": 12, "company": "X", "location": "ChicagoIL"},
    {"name": "GroupA", "size": 18, "company": "T", "location": "x"},
    {"name": "GroupB", "size": 18, "company": "T", "location": "x"}],
  "links": [
    {"source": 2, "target": 5,  "bond": 1},
    {"source": 3, "target": 5,  "bond": 2},
    {"source": 4, "target": 5,  "bond": 1},
    {"source": 0, "target": 6,  "bond": 1},
    {"source": 1, "target": 6,  "bond": 2},
    {"source": 4, "target": 6,  "bond": 1}],
  "locs": [
    {"lat": 40.7142, "long":  -74.0064, "location": "NewYorkNY"},
    {"lat": 34.0522, "long": -118.2428, "location": "LosAngelesCA"},
    {"lat": 43.6481, "long":  -79.4042, "location": "TorontoON"},
    {"lat": 41.8500, "long":  -87.6500, "location": "ChicagoIL"}]};

	var width = 250;
	var height = 250;
	var padding = 20;

	var color = d3.scale.category20();

	var radius = d3.scale.sqrt()
		.range([0, 7]);

	var scale = d3.scale.linear();

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

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

	var force = d3.layout.force()
		.size([width, height])
		.charge(-400)
		.linkStrength(3)
		.linkDistance(function(d) {
			return radius(d.source.size) + radius(d.target.size) + (30 / (2*d.bond-1))
			; });

		// network diagram stuff

		force
			.nodes(graph.nodes)
			.links(graph.links)
			.on("tick", tick)
			.start();

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

		link.append("line")
			.style("stroke-width", function(d) { return (d.bond * 2 -...