Built with blockbuilder.org
<!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!
//declare global vars
var w = 1000;
var h = 500;
var padding = 50;
var margin = 50;
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>