denise

<!DOCTYPE html>
<html lang="en">
	<head>

.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>

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

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