xxxxxxxxxx<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; } #tooltip { width: 150px; height: auto; padding: 5px; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); -moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); pointer-events: none; position: absolute; } #tooltip.hidden { display: none; } #tooltip p { margin: 0; font-size: 14px; line-height: 18px; } 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> <div id="container"> <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> <div id="tooltip" class="hidden"> <p><strong><span id="name">User name</strong></p> <p>@<span id="handle">Screen name</span></p> <p>Followers: <span id="followers">Followers</span></p> <p>Following: <span id="following">Following</span></p> <p>Tweets: <span id="tweets">Tweets</span></p> </div> <script type="text/javascript"> //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;// //linear scales// var xScale = d3.scale.linear().range([0, w - maxRadius]),// yScale = d3.scale.linear().range([h , 0 + maxRadius]),// radiusScale = d3.scale.sqrt().range([0, maxRadius]); //log scales var xScale = d3.scale.log().range([0, w - maxRadius]), yScale = d3.scale.log().range([h , 0 + maxRadius]), radiusScale = d3.scale.sqrt().range([4, 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_orig.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 - linear// 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;// }) ]); // set domains to data maxes - log xScale.domain([ 1, d3.max(data, function(d) { return +d.followers_count; }) ]); yScale.domain([ 1, d3.max(data, function(d) { return +d.friends_count; }) ]); radiusScale.domain([ 0, d3.max(data, function(d) { return +d.statuses_count; }) ]); // // The axes - linear// 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"));// // Log scale axes var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(5, d3.format(".0f")), yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(20, 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(0," + 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) .on("mouseover", function(d){ var xPosition = parseFloat(d3.select(this).attr("cx")) + 140; var yPosition = parseFloat(d3.select(this).attr("cy")) + h/2 - padding[0] - padding[2]; d3.select("#tooltip") .style("left", xPosition + "px") .style("top", yPosition + "px"); d3.select("#name") .text(d.name); d3.select("#handle") .text(d.screen_name); d3.select("#followers") .text(d.followers_count); d3.select("#following") .text(d.friends_count); d3.select("#tweets") .text(d.statuses_count); d3.select("#tooltip") .classed("hidden", false); }) .on("mouseout", function(){ d3.select("#tooltip").classed("hidden", true); });// .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 * 10; }) .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