andrewhavck/index.html

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

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

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</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=?";

        //hack couldn't get d3.json to work for jsonp, I don't care, use jquery instead
        $.getJSON(search,function(data) {
            results = data.results;

            //Define svg dimensions
            var width = 1200;
            var height = 1000;

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

            var nodes = [];
            var links = [];

            var labelAnchors = [];

            var users = {};

            var index = 0;

            //nasty for loop action
            for(var i = 0; i < results.length; i++) {

                var fromUser = results[i].from_user;
                var toUser = results[i].to_user;

                if(toUser != null && fromUser != null) {
                    if(users[fromUser] == undefined) {

                       var newFromId = index++;

                       users[fromUser] = newFromId;

                       var from = {
                           id : newFromId,
                           name : fromUser
                       };

                      nodes.push(from);
                    }

                    if(users[toUser] == undefined) {

                       var newToId = index++;

                       users[toUser] = newToId;

                        var to = {
                            id : newToId,
                            name : toUser
                        };

                        nodes.push(to);
                    }

                    links.push({
                            source : users[fromUser],
                            target : users[toUser]
                    });
                }
            };

            var color = d3.scale.category20();

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

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

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

            var node = svg.append("g")
                .attr("class", "nodes")
                .selectAll("circle")
                .data(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 = height / 2;
                     return "translate(" + d.x + "," + d.y + ")";
                });

            node.append("circle")
                .attr("class", "node")
                .attr("r", 13)
                .style("fill", "4099FF")
                .style("opacity", ".4")
                .call(force.drag);

            node.append("circle")
                .attr("class", "node")
                .attr("r", 6)
                .style("fill", "black")
                .call(force.drag);

            node.append("title")
                .text(function(d) { return "@" + d.name; });

            /*
            node.append("text")
                .attr("text-anchor", "start")
                .style("fill", "black")
                .style("font-family", "Arial")
                .style("font-size", 10)
                .style("font-weight", "bold")
                .style("opacity", ".7")
                .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("transform", function(d) {
                        return "translate(" + [d.x, d.y] + ")";
                    });
            });
    });
});

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

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

	.link {
	stroke: #999;
	stroke-opacity: .6;
	}

	</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=?";

	//hack couldn't get d3.json to work for jsonp, I don't care, use jquery instead
	$.getJSON(search,function(data) {
	results = data.results;

	//Define svg dimensions
	var width = 1200;
	var height = 1000;

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

	var nodes = [];
	var links = [];

	var labelAnchors = [];

	var users = {};

	var index = 0;

	//nasty for loop action
	for(var i = 0; i < results.length; i++) {

	var fromUser = results[i].from_user;
	var toUser = results[i].to_user;

	if(toUser != null && fromUser != null) {
	if(users[fromUser] == undefined) {

	var newFromId = index++;

	users[fromUser] = newFromId;

	var from = {
	id : newFromId,
	name : fromUser
	};

	nodes.push(from);
	}

	if(users[toUser] == undefined) {

	var newToId = index++;

	users[toUser] = newToId;

	var to = {
	id : newToId,
	name : toUser
	};

	nodes.push(to);
	}

	links.push({
	source : users[fromUser],
	target : users[toUser]
	});
	}
	};

	var color = d3.scale.category20();

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

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

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

	var node = svg.append("g")
	.attr("class", "nodes")
	.selectAll("circle")
	.data(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 = height / 2;
	return "translate(" + d.x + "," + d.y + ")";
	});

	node.append("circle")
	.attr("class", "node")
	.attr("r", 13)
	.style("fill", "4099FF")
	.style("opacity", ".4")
	.call(force.drag);

	node.append("circle")
	.attr("class", "node")
	.attr("r", 6)
	.style("fill", "black")
	.call(force.drag);

	node.append("title")
	.text(function(d) { return "@" + d.name; });

	/*
	node.append("text")
	.attr("text-anchor", "start")
	.style("fill", "black")
	.style("font-family", "Arial")
	.style("font-size", 10)
	.style("font-weight", "bold")
	.style("opacity", ".7")
	.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("transform", function(d) {
	return "translate(" + [d.x, d.y] + ")";
	});
	});
	});
	});

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