daniellav@

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!

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>

</script>
</body>

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