andrewhavck/index.html

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

.outnode {
  fill: #ababab;
  opacity: .3;
  stroke: #FF6E6E;
  stroke-width: 2;
}

.innode {
  fill: #000;
}

.link {
  stroke: #E01B74;
  stroke-opacity: .4;
  stroke-width: 2;
}

.name {
  position: absolute;
  font-family: Arial;
  font-weight: bold;
  top: 60px;
  left: 70px;
  color: #000;
  font-size: 45px;
}

.interactions {
  position: absolute;
  font-family: Arial;
  font-weight: bold;
  color: #4099FF;
  font-size: 20px;
}

</style>
<head>

<!-- Load jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.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 word = "hate"
        var query = "%22I%20" + word + "%20you%22";
        var search = "http://search.twitter.com/search.json?rpp=100&q=" + query + "&callback=?";

        var name = d3.select("body")
                .append("div")
                .attr("class","name");

        var interactions = d3.select("body")
                .append("div")
                .attr("class","interactions");

        $.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, target: link.target});

                link.target = users[link.target] ||
                              (users[link.target] = {name: link.target, source: link.source});
            });

            var force = d3.layout.force()
                .charge(-170)
                .linkDistance(80)
                .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 fadein = function (d) {
                var text = "";
                if(d.target) {
                  text = d.name + " " + word + "s " + users[d.target].name;
                } else {
                  text = d.name + " is " + word + "d by " + d.source.name;
                }
                name.text(text)
                     .transition()
                     .style("opacity",0.7)
                     .duration(400);
            };

            var fadeout = function (d) {

                 name.transition()
                     .style("opacity",0.0)
                     .duration(300);
            };

            var node = svg.append("g")
                .selectAll("circle")
                .data(force.nodes())
                .enter()
                .append("g")
                .on("mouseover", fadein)
                .on("mouseout", fadeout)
                .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);

            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>
</html>
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<style>

	.outnode {
	fill: #ababab;
	opacity: .3;
	stroke: #FF6E6E;
	stroke-width: 2;
	}

	.innode {
	fill: #000;
	}

	.link {
	stroke: #E01B74;
	stroke-opacity: .4;
	stroke-width: 2;
	}

	.name {
	position: absolute;
	font-family: Arial;
	font-weight: bold;
	top: 60px;
	left: 70px;
	color: #000;
	font-size: 45px;
	}

	.interactions {
	position: absolute;
	font-family: Arial;
	font-weight: bold;
	color: #4099FF;
	font-size: 20px;
	}

	</style>
	<head>

	<!-- Load jQuery -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.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 word = "hate"
	var query = "%22I%20" + word + "%20you%22";
	var search = "http://search.twitter.com/search.json?rpp=100&q=" + query + "&callback=?";

	var name = d3.select("body")
	.append("div")
	.attr("class","name");

	var interactions = d3.select("body")
	.append("div")
	.attr("class","interactions");

	$.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, target: link.target});

	link.target = users[link.target] \|\|
	(users[link.target] = {name: link.target, source: link.source});
	});

	var force = d3.layout.force()
	.charge(-170)
	.linkDistance(80)
	.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 fadein = function (d) {
	var text = "";
	if(d.target) {
	text = d.name + " " + word + "s " + users[d.target].name;
	} else {
	text = d.name + " is " + word + "d by " + d.source.name;
	}
	name.text(text)
	.transition()
	.style("opacity",0.7)
	.duration(400);
	};

	var fadeout = function (d) {

	name.transition()
	.style("opacity",0.0)
	.duration(300);
	};

	var node = svg.append("g")
	.selectAll("circle")
	.data(force.nodes())
	.enter()
	.append("g")
	.on("mouseover", fadein)
	.on("mouseout", fadeout)
	.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);

	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>
	</html>