andrewhavck/index.html

## index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>

.outnode {
  fill: #ababab;
  opacity: .3;
  stroke: #4099FF;
  stroke-width: 3;
}

.innode {
  fill: #000;
}

.link {
  stroke: #d98534;
  stroke-opacity: .6;
  stroke-width: 2;
}

.label {
  font-family: Arial;
  font-weight: bold;
  fill: black;
  opacity: .8;
}

</style>
<head>

<!-- Load jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<!-- Load d3 -->
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>

<!-- Define inlined JavaScript -->
<script type="text/javascript">

    $(document).ready(function() {

        var query = "I%20sent%20you%20money%20on%20%23dwolla&";
        var search = "http://search.twitter.com/search.json?rpp=100&q=" + query + "callback=?";

        $.getJSON(search, function(data) {
            results = data.results;

            //Define svg dimensions
            var w = 1200;
            var h = 1000;

            //Create the svg
            var svg = d3.select("body").append("svg")
                .attr("width", w)
                .attr("height", h);

            var links = [];
            var users = {};

            //Make links from JSON
            results.forEach(function(result) {
                if(result.from_user != null && result.to_user != null) {
                    links.push({ source: result.from_user , target: result.to_user});
                }
            });

            //Remove dupes
            links.forEach(function(link) {
                link.source = users[link.source] || (users[link.source] = {name: link.source});
                link.target = users[link.target] || (users[link.target] = {name: link.target});
            });

            var force = d3.layout.force()
                .charge(-1500)
                .linkDistance(80)
                .gravity(1)
                .size([w, h]);

           force
                .nodes(d3.values(users))
                .links(links)
                .start();

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

            var node = svg.append("g")
                .selectAll("circle")
                .data(force.nodes())
                .enter()
                .append("g")
                .attr("transform", function(d, i) {
                     // Set d.x and d.y here so that other elements can use it. d is
                     // expected to be an object here.
                     d.x = i * 70 + 50,
                     d.y = h / 2;
                     return "translate(" + d.x + "," + d.y + ")";
                });

            node.append("circle")
                .attr("class", "outnode")
                .attr("r", 16)
                .call(force.drag);

            node.append("circle")
                .attr("class", "innode")
                .attr("r", 5)
                .call(force.drag);

            node.append("text")
                .attr("class", "label")
                .style("font-size", 9)
                .text(function(d) {
                        return "@" + d.name;
                });

            var updateLink = function() {
                this.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; });
            }

            var updateNode = function() {
                 this.attr("transform", function(d) {
                        return "translate(" + [d.x, d.y] + ")";
                    });
            }

            force.on("tick", function() {
                node.call(updateNode);
                link.call(updateLink);
            });
    });
});

</script>
</head>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<style>

	.outnode {
	fill: #ababab;
	opacity: .3;
	stroke: #4099FF;
	stroke-width: 3;
	}

	.innode {
	fill: #000;
	}

	.link {
	stroke: #d98534;
	stroke-opacity: .6;
	stroke-width: 2;
	}

	.label {
	font-family: Arial;
	font-weight: bold;
	fill: black;
	opacity: .8;
	}

	</style>
	<head>

	<!-- Load jQuery -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

	<!-- Load d3 -->
	<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>

	<!-- Define inlined JavaScript -->
	<script type="text/javascript">

	$(document).ready(function() {

	var query = "I%20sent%20you%20money%20on%20%23dwolla&";
	var search = "http://search.twitter.com/search.json?rpp=100&q=" + query + "callback=?";

	$.getJSON(search, function(data) {
	results = data.results;

	//Define svg dimensions
	var w = 1200;
	var h = 1000;

	//Create the svg
	var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);

	var links = [];
	var users = {};

	//Make links from JSON
	results.forEach(function(result) {
	if(result.from_user != null && result.to_user != null) {
	links.push({ source: result.from_user , target: result.to_user});
	}
	});

	//Remove dupes
	links.forEach(function(link) {
	link.source = users[link.source] \|\| (users[link.source] = {name: link.source});
	link.target = users[link.target] \|\| (users[link.target] = {name: link.target});
	});

	var force = d3.layout.force()
	.charge(-1500)
	.linkDistance(80)
	.gravity(1)
	.size([w, h]);

	force
	.nodes(d3.values(users))
	.links(links)
	.start();

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

	var node = svg.append("g")
	.selectAll("circle")
	.data(force.nodes())
	.enter()
	.append("g")
	.attr("transform", function(d, i) {
	// Set d.x and d.y here so that other elements can use it. d is
	// expected to be an object here.
	d.x = i * 70 + 50,
	d.y = h / 2;
	return "translate(" + d.x + "," + d.y + ")";
	});

	node.append("circle")
	.attr("class", "outnode")
	.attr("r", 16)
	.call(force.drag);

	node.append("circle")
	.attr("class", "innode")
	.attr("r", 5)
	.call(force.drag);

	node.append("text")
	.attr("class", "label")
	.style("font-size", 9)
	.text(function(d) {
	return "@" + d.name;
	});

	var updateLink = function() {
	this.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; });
	}

	var updateNode = function() {
	this.attr("transform", function(d) {
	return "translate(" + [d.x, d.y] + ")";
	});
	}

	force.on("tick", function() {
	node.call(updateNode);
	link.call(updateLink);
	});
	});
	});

	</script>
	</head>
	</body>
	</html>