Built with blockbuilder.org
xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>100 Labour Tweets</title> <style type="text/css"> body{ background-color: #fff; width: 100%; font-family: "PT Mono", Times, serif; color: black; font-size: 14px; text-decoration: none; width: 500; } div{ font-family: "PT Mono", Times, serif; font-size: 14px; display: block; margin: auto; width: 500; } .axis path, .axis line { stroke: #60605B; stroke-width: 1px; shape-rendering: crispEdges; opacity: 0.7; } .axis text { fill: #60605B; stroke: none; shape-rendering: crispEdges; opacity: 0.7; } circle:hover { fill: #D62828; opacity: 0.8; } </style> <script src="https://d3js.org/d3.v4.min.js"></script> </head><body><b><font size="5">100 Labour Tweets [29.07.18]</font><br></b>Data collected using a Python script, scraping the last 100 tweets - excluding RTs - of every MP who is a member of the <a href="https://twitter.com/tweetminster/lists/uk-mps-labour/members?lang=en">@tweetminister list of UK labour MPs</a>. This will update every 12 hours. Visualised using D3.js, engagement mapped across x & y axis, and datapoint size calculated by user's Twitter following.Hover on each datapoint to find out more on the user & read the full tweet.<br> <script type="text/javascript"> //declare global vars var w = 1000; var h = 500; var padding = 30; var margin = 30; var myFormat = d3.format(',') //create the svg var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); d3.csv("labour_csv_tweets.csv", function(data){ console.log(data); //create the tooltip div var div = d3.select("body").append("div") .attr("width", 600) .attr("class", "tooltip") .style("opacity", 0); //create scales var xScale = d3.scaleSqrt() .domain([0, d3.max(data, function(d) { return d.fav_count; })]) .range([padding, w - padding * 2]); var yScale = d3.scaleSqrt() .domain([0, d3.max(data, function(d) { return d.RT_count; })]) .range([h - padding, padding]); var rScale = d3.scaleSqrt() .domain([0, d3.max(data, function(d) { return d.user_followers_count; })]) .range([2,7]); //setting up axes var xAxis = d3.axisBottom() .scale(xScale) .ticks(5); var yAxis = d3.axisLeft() .scale(yScale); //create the circles svg.append("g") .attr("id", "circles") .attr("clip-path", "url(#chart-area)") .selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", "#BABFB7") .attr("opacity", 0.7) .attr("stroke", "white") .attr("stroke-width", 1) .attr("stroke-opacity", 0.6) .attr("r", function(d) { return rScale(d.user_followers_count); }) .attr("cx", function(d) { return xScale(d.fav_count); }) .attr("cy", function(d) { return yScale(d.RT_count); }) .on("mouseover", function(d) { div.transition() .duration(200) .style("opacity", .9) div .html("<b>" + d.screen_name + " (" + myFormat(d.user_followers_count) + " followers) @ " + d.status_created_at + "</b>" + "<br/>" + d.full_tweet + "<br/>" + "<b>fav count: </b> " + myFormat(d.fav_count) + " <b> RT count: </b>" + myFormat(d.RT_count)) .style("left", 50) .style("width", 500) .style("top", h + (margin * 1.5)); }) .on("mouseout", function(d) { div.transition() .style("opacity",0); }); //a clip path to tidy up the axes svg.append("clipPath") .attr("id", "chart-area") .append("rect") .attr("x", padding) .attr("y", padding) .attr("width", w - padding * 3) .attr("height", h - padding * 2); //create the labels //svg.selectAll("text") // .data(data) // .enter() // .append("text") // .text(function(d) { // return d.fav_count + "-" + d.RT_count; // }) // .attr("x", function(d) { // return xScale(d.fav_count); // }) // .attr("y", function(d) { // return yScale(d.RT_count); // }) // .style("font-family", "sans-serif") // .style("font-size", "11px") // .style("fill", "red"); //call x-axis svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + (h - padding) + ")") .call(xAxis); //call y-axis svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + padding + ",0)") .call(yAxis);}); </script></body></html> https://d3js.org/d3.v4.min.js