Twitterfluence Scatterplot

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Twitterfluence</title>
		<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
        
 		<script type="text/javascript" src="https://use.typekit.com/brf5jpj.js"></script>
		<script src="//use.typekit.net/drk2sev.js"></script>
		<script type="text/javascript">try{Typekit.load();}catch(e){}</script> 
              
		<style type="text/css">
			
			body {
				margin: 0;
				background-color: #48494B;
				font-family: "proxima-nova", "Source Sans Pro", sans-serif;
			}

#container {
				width: 850px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 30px;
				padding: 30px;
				background-color: white;
				box-shadow: 3px 3px 7px #222;
			}

h1 {
				font-size: 24px;
				margin: 0;
			}

p {
				font-size: 16px;
				margin: 15px 0 10px 0;
			}

a {
			  color: #799DCB;
			  text-decoration: none;
			  transition: color .3s, background .3s, border .3s;
			}
			a:hover {
			  color: #48494b;
			  background: #e7e8e9;
			}

svg {
				background-color: white;
				padding-left: 20px;
			}

.dot {
				opacity: 0.4;
				stroke: #787878;
				stroke-width: 1;
				}	
				
			.dot:hover {
				opacity: 1.0;
				cursor:pointer;
				}
						
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

</style>
	</head>
	<body>

<h1>Twitterfluence</h1>
			<p>Enjoy this exploration of Twitter users who follow <a href="https://twitter.com/threestory" title="Threestory Twitter page" target="new">@threestory</a>. You can see the correlation (or lack thereof) between the number of people a user follows and the number of followers they have themselves. The size of each circle is relative to the number of tweets that user has tweeted. The circle color matches the background color of that user's Twitter profile (just for fun). Clicking on a circle will take you to that person's Twitter page.</p>

</div>

//Dimensions and padding
			var w = 700;
			var h = 500;
			var padding = [ 20, 20, 40, 20 ];  //Top, right, bottom, left

var dataset;
			
				
			// Various accessors that specify the four dimensions of data to visualize
			function x(d) { return d.followers_count; }
			function y(d) { return d.friends_count; }
			function radius(d) { return d.statuses_count; }

// Various range scales
			var maxRadius = 50;
		
			var xScale = d3.scale.linear().range([0, w - maxRadius]),
				yScale = d3.scale.linear().range([h , 0 + maxRadius]),
				radiusScale = d3.scale.sqrt().range([0, maxRadius]);
			
			
						
			//Create the empty SVG image
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w + padding[3] + padding[1])
						.attr("height", h + padding[0] + padding[2])
						.append("g")
						.attr("transform", "translate(35,10)");

//Load data
			d3.json("twitter.json", function(error, data) {
				if (error) return console.warn(error);
				dataset = data;
				console.log(dataset);

//sort smallest circles last to make sure they are accessible to mouse events

data.sort(function(a, b) {
					return d3.descending(+a.statuses_count, +b.statuses_count);
				});

// set domains to data maxes
				xScale.domain([ 0, d3.max(data, function(d) {
					return +d.followers_count;
				}) ]);
				yScale.domain([ 0, d3.max(data, function(d) {
					return +d.friends_count;
				}) ]);
				radiusScale.domain([ 0, d3.max(data, function(d) {
					return +d.statuses_count;
				}) ]);
				
			// The axes
			var xAxis = d3.svg.axis().orient("bottom").scale(xScale).tickFormat(d3.format(",.0f")),
				yAxis = d3.svg.axis().scale(yScale).orient("left").tickFormat(d3.format(",.0f"));

// Add the x-axis.
			svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," + h + ")")
				.call(xAxis);
			
			// Add the y-axis.
			svg.append("g")
				.attr("class", "y axis")
				.call(yAxis);
			
			// Add an x-axis label.
			svg.append("text")
				.attr("class", "x label")
				.attr("text-anchor", "end")
				.attr("x", w)
				.attr("y", h - 6)
				.attr("transform", "translate(-" + maxRadius + ",0)")
				.text("Number of Followers");
			
			// Add a y-axis label.
			svg.append("text")
				.attr("class", "y label")
				.attr("text-anchor", "end")
				.attr("y", 6)
				.attr("dy", ".75em")
				.attr("transform", "translate(5," + maxRadius + ")rotate(-90)")
				.text("Number Following");

//Add a dot for each follower
				var dot = svg.append("g")
					.attr("class", "dots")
					.selectAll(".dot")
					.data(data)
					.enter()
					.append("a")
					.attr("xlink:href", function(d) {
						return "https://twitter.com/" + d.screen_name;
						})
					.on("click", function(){
						 d3.select(this)
						 .attr("url")
						 })
					.append("circle")
					.attr("class", "dot")
					.style("fill", function(d) {
						return "#" + d.profile_background_color;
						})
					.call(position);
//					.sort(order);
					
				//Add titles
				dot.append("title")
				.text(function(d) { return d.screen_name; });
				
				//Position dots based on data
				function position(dot) {
					dot .attr("cx", function(d) { return xScale(d.followers_count); })
						.attr("cy", function(d) { return yScale(d.friends_count); })
						.attr("r", 0 );
				}
						
				
				dot.transition()
					.delay(function(d, i) {
						return i * 20;
					})
					.duration(1000)
					.attr("r", function(d) {
						return radiusScale(d.statuses_count);
					});
				
				//Defines sort order so smallest dots are drawn on top
				function order(a, b) {
					return radius(b) - radius(a);
				}

});

</script>

</body>
</html>

Modified http://use.typekit.com/brf5jpj.js to a secure url

https://d3js.org/d3.v3.min.js

https://use.typekit.com/brf5jpj.js

https://use.typekit.net/drk2sev.js