justinkamerman/retweet.html

## retweet.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="d3.js"></script>
        <style>
            .link {
            stroke: #ccc;
            stroke-width: 2
            }

            .node text {
            pointer-events: none;
            font: 10px sans-serif;
            }

            .originator {
            fill: none;
            stroke: red;
            stroke-width: 2
            }

            .followers {
            fill: none;
            stroke: #ccc;
            stroke-width: 2
            }

            .tweet-text {
            pointer-events: none;
            font: 20px sans-serif;
            fill: black
            }

            .tweet-retweetcount {
            pointer-events: none;
            font: 15px sans-serif;
            fill: #ccc
            }

            .tweet-reach {
            pointer-events: none;
            font: 15px sans-serif;
            fill: #ccc
            }
        </style>
    </head>
    <body>
        <script>
            function getUrlVars() {
                var vars = {};
                var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = value;
                });
                return vars;
            }


            reach = null
            tweetId = getUrlVars()["id"]
            console.log(tweetId)
            d3.json("data/" + tweetId + ".json", function(json){

            var width = 960,
            height = 960;

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

            // draw the graph edges
            var link = svg.selectAll("link")
            .data(json.links)
            .enter()
            .append("line")
            .attr("class","link");

            // draw the graph nodes
            var node = svg.selectAll("node")
            .data(json.nodes)
            .enter()
            .append("g")
            .attr("class", "node")

            // create the layout
            var force = d3.layout.force()
            .gravity(0.1)
            .linkDistance(200)
            .charge(-800)
            .size([width, height])
            .nodes(json.nodes)
            .links(json.links)
            .start();

            // define what to do one each tick of the animation
            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 + ")"; });
            });

            // bind the drag interaction to the nodes
            node.call(force.drag);

            // Node images
            node.append("image")
            .attr("xlink:href", function(d) { return d.profile_image_url })
            .attr("x", -20)
            .attr("y", -20)
            .attr("width", 40)
            .attr("height", 40);

            // Label nodes
            node.append("text")
            .attr("dx", 20)
            .attr("dy", ".35em")
            .text(function(d) { return d.screen_name });

            // Follower count circles
            node.append("circle")
            .attr("class", "followers")
            .attr("r", function(d) { reach += d.followers_count; return 5*Math.log(d.followers_count+2)})

            // Mark originator node
            d3.select (".node").append("circle").attr("class", "originator").attr("r", 20)

            // Tweet details
            svg.append("text")
            .attr("class", "tweet-text")
            .attr("x", 10)
            .attr("y", 20)
            .text(json.tweet.text)

            svg.append("text")
            .attr("class", "tweet-retweetcount")
            .attr("x", 10)
            .attr("y", 40)
            .text("Retweet Count: " + json.tweet.retweet_count)

            svg.append("text")
            .attr("class", "tweet-reach")
            .attr("x", 10)
            .attr("y", 60)
            .text("Reach: " + reach)

            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="d3.js"></script>
	<style>
	.link {
	stroke: #ccc;
	stroke-width: 2
	}

	.node text {
	pointer-events: none;
	font: 10px sans-serif;
	}

	.originator {
	fill: none;
	stroke: red;
	stroke-width: 2
	}

	.followers {
	fill: none;
	stroke: #ccc;
	stroke-width: 2
	}

	.tweet-text {
	pointer-events: none;
	font: 20px sans-serif;
	fill: black
	}

	.tweet-retweetcount {
	pointer-events: none;
	font: 15px sans-serif;
	fill: #ccc
	}

	.tweet-reach {
	pointer-events: none;
	font: 15px sans-serif;
	fill: #ccc
	}
	</style>
	</head>
	<body>
	<script>
	function getUrlVars() {
	var vars = {};
	var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
	vars[key] = value;
	});
	return vars;
	}


	reach = null
	tweetId = getUrlVars()["id"]
	console.log(tweetId)
	d3.json("data/" + tweetId + ".json", function(json){

	var width = 960,
	height = 960;

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

	// draw the graph edges
	var link = svg.selectAll("link")
	.data(json.links)
	.enter()
	.append("line")
	.attr("class","link");

	// draw the graph nodes
	var node = svg.selectAll("node")
	.data(json.nodes)
	.enter()
	.append("g")
	.attr("class", "node")

	// create the layout
	var force = d3.layout.force()
	.gravity(0.1)
	.linkDistance(200)
	.charge(-800)
	.size([width, height])
	.nodes(json.nodes)
	.links(json.links)
	.start();

	// define what to do one each tick of the animation
	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 + ")"; });
	});

	// bind the drag interaction to the nodes
	node.call(force.drag);

	// Node images
	node.append("image")
	.attr("xlink:href", function(d) { return d.profile_image_url })
	.attr("x", -20)
	.attr("y", -20)
	.attr("width", 40)
	.attr("height", 40);

	// Label nodes
	node.append("text")
	.attr("dx", 20)
	.attr("dy", ".35em")
	.text(function(d) { return d.screen_name });

	// Follower count circles
	node.append("circle")
	.attr("class", "followers")
	.attr("r", function(d) { reach += d.followers_count; return 5*Math.log(d.followers_count+2)})

	// Mark originator node
	d3.select (".node").append("circle").attr("class", "originator").attr("r", 20)

	// Tweet details
	svg.append("text")
	.attr("class", "tweet-text")
	.attr("x", 10)
	.attr("y", 20)
	.text(json.tweet.text)

	svg.append("text")
	.attr("class", "tweet-retweetcount")
	.attr("x", 10)
	.attr("y", 40)
	.text("Retweet Count: " + json.tweet.retweet_count)

	svg.append("text")
	.attr("class", "tweet-reach")
	.attr("x", 10)
	.attr("y", 60)
	.text("Reach: " + reach)

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