Skip to content

Instantly share code, notes, and snippets.

@aerrity

aerrity/README.md

Last active December 26, 2015 03:59
Show Gist options
  • Save aerrity/7090034 to your computer and use it in GitHub Desktop.
Save aerrity/7090034 to your computer and use it in GitHub Desktop.
Download ZIP
#lovehate
Raw
README.md

D3.js line chart of all tweets containing the text "#lovehate" sent between Sun Oct 20 2013 19:00 and Mon Oct 21 2013 00:59. Based on Mike Bostock's example. Twitter data captured using the Streaming API.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 14px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 3px;
}
.overlay {
fill: none;
pointer-events: all;
}
.focus circle {
fill: none;
stroke: red;
stroke-width: 3px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%a %b %d %Y %H:%M").parse,
bisectDate = d3.bisector(function(d) { return d.minute; }).left;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(d3.time.minutes, 30)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.minute); })
.y(function(d) { return y(d.count); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("minutecounts2.csv", function(error, data) {
data.forEach(function(d) {
//hack to correct for daylight savings time (add one hour in ms)
//d.minute = new Date(+parseDate(d.minute) + 3600000);
d.minute = parseDate(d.minute);
d.count = +d.count;
});
data.sort(function(a, b) {
return a.minute - b.minute;
});
x.domain(d3.extent(data, function(d) { return d.minute; }));
y.domain(d3.extent(data, function(d) { return d.count; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Number of tweets containing #lovehate");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
var dateDescription = svg.append("g")
.attr("class", "focus")
.style("display", "none");
var countDescription = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("circle")
.attr("r", 4.5);
dateDescription.append("text")
.attr("x", 15)
.attr("dy", ".35em")
.attr("transform", "translate(" + 30 + "," + 10 + ")");
countDescription.append("text")
.attr("x", 15)
.attr("dy", ".35em")
.attr("transform", "translate(" + 30 + "," + 25 + ")");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); dateDescription.style("display", null); countDescription.style("display", null);})
.on("mouseout", function() { focus.style("display", "none"); dateDescription.style("display", "none"); countDescription.style("display", "none");})
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.minute > d1.minute - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.minute) + "," + y(d.count) + ")");
dateDescription.select("text").text("Time: " + d.minute);
countDescription.select("text").text("Tweets: " + d.count);
}
});
</script>
Raw
minutecounts2.csv
minute count
Sun Oct 20 2013 19:00 1
Sun Oct 20 2013 19:01 3
Sun Oct 20 2013 19:02 1
Sun Oct 20 2013 19:03 2
Sun Oct 20 2013 19:06 3
Sun Oct 20 2013 19:07 1
Sun Oct 20 2013 19:08 3
Sun Oct 20 2013 19:09 5
Sun Oct 20 2013 19:10 6
Sun Oct 20 2013 19:11 6
Sun Oct 20 2013 19:12 6
Sun Oct 20 2013 19:13 1
Sun Oct 20 2013 19:14 4
Sun Oct 20 2013 19:15 5
Sun Oct 20 2013 19:16 1
Sun Oct 20 2013 19:17 1
Sun Oct 20 2013 19:18 5
Sun Oct 20 2013 19:19 3
Sun Oct 20 2013 19:20 3
Sun Oct 20 2013 19:22 1
Sun Oct 20 2013 19:23 2
Sun Oct 20 2013 19:25 3
Sun Oct 20 2013 19:26 1
Sun Oct 20 2013 19:27 1
Sun Oct 20 2013 19:28 5
Sun Oct 20 2013 19:29 3
Sun Oct 20 2013 19:30 1
Sun Oct 20 2013 19:31 5
Sun Oct 20 2013 19:32 4
Sun Oct 20 2013 19:33 2
Sun Oct 20 2013 19:34 1
Sun Oct 20 2013 19:35 1
Sun Oct 20 2013 19:36 1
Sun Oct 20 2013 19:37 1
Sun Oct 20 2013 19:38 3
Sun Oct 20 2013 19:39 3
Sun Oct 20 2013 19:40 1
Sun Oct 20 2013 19:41 5
Sun Oct 20 2013 19:42 2
Sun Oct 20 2013 19:43 9
Sun Oct 20 2013 19:45 4
Sun Oct 20 2013 19:46 1
Sun Oct 20 2013 19:47 8
Sun Oct 20 2013 19:48 4
Sun Oct 20 2013 19:49 9
Sun Oct 20 2013 19:50 3
Sun Oct 20 2013 19:51 3
Sun Oct 20 2013 19:52 8
Sun Oct 20 2013 19:53 5
Sun Oct 20 2013 19:54 4
Sun Oct 20 2013 19:55 5
Sun Oct 20 2013 19:56 4
Sun Oct 20 2013 19:57 4
Sun Oct 20 2013 19:58 4
Sun Oct 20 2013 19:59 8
Sun Oct 20 2013 20:00 2
Sun Oct 20 2013 20:01 2
Sun Oct 20 2013 20:02 4
Sun Oct 20 2013 20:03 5
Sun Oct 20 2013 20:04 4
Sun Oct 20 2013 20:05 4
Sun Oct 20 2013 20:06 4
Sun Oct 20 2013 20:07 7
Sun Oct 20 2013 20:08 4
Sun Oct 20 2013 20:09 5
Sun Oct 20 2013 20:10 3
Sun Oct 20 2013 20:11 3
Sun Oct 20 2013 20:12 11
Sun Oct 20 2013 20:13 4
Sun Oct 20 2013 20:14 7
Sun Oct 20 2013 20:15 9
Sun Oct 20 2013 20:16 4
Sun Oct 20 2013 20:17 6
Sun Oct 20 2013 20:18 7
Sun Oct 20 2013 20:19 4
Sun Oct 20 2013 20:20 6
Sun Oct 20 2013 20:21 3
Sun Oct 20 2013 20:22 9
Sun Oct 20 2013 20:23 3
Sun Oct 20 2013 20:24 3
Sun Oct 20 2013 20:25 7
Sun Oct 20 2013 20:26 7
Sun Oct 20 2013 20:27 4
Sun Oct 20 2013 20:28 3
Sun Oct 20 2013 20:29 8
Sun Oct 20 2013 20:30 5
Sun Oct 20 2013 20:31 6
Sun Oct 20 2013 20:32 8
Sun Oct 20 2013 20:33 9
Sun Oct 20 2013 20:34 4
Sun Oct 20 2013 20:35 6
Sun Oct 20 2013 20:36 4
Sun Oct 20 2013 20:37 3
Sun Oct 20 2013 20:38 4
Sun Oct 20 2013 20:39 6
Sun Oct 20 2013 20:40 9
Sun Oct 20 2013 20:41 1
Sun Oct 20 2013 20:42 4
Sun Oct 20 2013 20:43 4
Sun Oct 20 2013 20:44 4
Sun Oct 20 2013 20:45 4
Sun Oct 20 2013 20:46 8
Sun Oct 20 2013 20:47 1
Sun Oct 20 2013 20:48 1
Sun Oct 20 2013 20:49 3
Sun Oct 20 2013 20:50 7
Sun Oct 20 2013 20:51 4
Sun Oct 20 2013 20:52 4
Sun Oct 20 2013 20:53 4
Sun Oct 20 2013 20:54 5
Sun Oct 20 2013 20:55 3
Sun Oct 20 2013 20:56 3
Sun Oct 20 2013 20:57 5
Sun Oct 20 2013 20:58 7
Sun Oct 20 2013 20:59 10
Sun Oct 20 2013 21:00 13
Sun Oct 20 2013 21:01 6
Sun Oct 20 2013 21:02 11
Sun Oct 20 2013 21:03 7
Sun Oct 20 2013 21:04 13
Sun Oct 20 2013 21:05 14
Sun Oct 20 2013 21:06 8
Sun Oct 20 2013 21:07 8
Sun Oct 20 2013 21:08 7
Sun Oct 20 2013 21:09 10
Sun Oct 20 2013 21:10 11
Sun Oct 20 2013 21:11 12
Sun Oct 20 2013 21:12 7
Sun Oct 20 2013 21:13 8
Sun Oct 20 2013 21:14 17
Sun Oct 20 2013 21:15 8
Sun Oct 20 2013 21:16 14
Sun Oct 20 2013 21:17 5
Sun Oct 20 2013 21:18 9
Sun Oct 20 2013 21:19 11
Sun Oct 20 2013 21:20 10
Sun Oct 20 2013 21:21 13
Sun Oct 20 2013 21:22 20
Sun Oct 20 2013 21:23 24
Sun Oct 20 2013 21:24 23
Sun Oct 20 2013 21:25 36
Sun Oct 20 2013 21:26 31
Sun Oct 20 2013 21:27 37
Sun Oct 20 2013 21:28 42
Sun Oct 20 2013 21:29 82
Sun Oct 20 2013 21:30 45
Sun Oct 20 2013 21:31 45
Sun Oct 20 2013 21:32 62
Sun Oct 20 2013 21:33 57
Sun Oct 20 2013 21:34 50
Sun Oct 20 2013 21:35 27
Sun Oct 20 2013 21:36 33
Sun Oct 20 2013 21:37 47
Sun Oct 20 2013 21:38 41
Sun Oct 20 2013 21:39 26
Sun Oct 20 2013 21:40 44
Sun Oct 20 2013 21:41 42
Sun Oct 20 2013 21:42 22
Sun Oct 20 2013 21:43 38
Sun Oct 20 2013 21:44 33
Sun Oct 20 2013 21:45 41
Sun Oct 20 2013 21:46 69
Sun Oct 20 2013 21:47 71
Sun Oct 20 2013 21:48 78
Sun Oct 20 2013 21:49 70
Sun Oct 20 2013 21:50 73
Sun Oct 20 2013 21:51 38
Sun Oct 20 2013 21:52 42
Sun Oct 20 2013 21:53 29
Sun Oct 20 2013 21:54 32
Sun Oct 20 2013 21:55 86
Sun Oct 20 2013 21:56 148
Sun Oct 20 2013 21:57 71
Sun Oct 20 2013 21:58 41
Sun Oct 20 2013 21:59 45
Sun Oct 20 2013 22:00 48
Sun Oct 20 2013 22:01 43
Sun Oct 20 2013 22:02 15
Sun Oct 20 2013 22:03 22
Sun Oct 20 2013 22:04 28
Sun Oct 20 2013 22:05 52
Sun Oct 20 2013 22:06 89
Sun Oct 20 2013 22:07 73
Sun Oct 20 2013 22:08 90
Sun Oct 20 2013 22:09 69
Sun Oct 20 2013 22:10 55
Sun Oct 20 2013 22:11 41
Sun Oct 20 2013 22:12 39
Sun Oct 20 2013 22:13 52
Sun Oct 20 2013 22:14 43
Sun Oct 20 2013 22:15 100
Sun Oct 20 2013 22:16 78
Sun Oct 20 2013 22:17 66
Sun Oct 20 2013 22:18 55
Sun Oct 20 2013 22:19 49
Sun Oct 20 2013 22:20 75
Sun Oct 20 2013 22:21 65
Sun Oct 20 2013 22:22 60
Sun Oct 20 2013 22:23 84
Sun Oct 20 2013 22:24 57
Sun Oct 20 2013 22:25 48
Sun Oct 20 2013 22:26 66
Sun Oct 20 2013 22:27 49
Sun Oct 20 2013 22:28 48
Sun Oct 20 2013 22:29 47
Sun Oct 20 2013 22:30 110
Sun Oct 20 2013 22:31 143
Sun Oct 20 2013 22:32 136
Sun Oct 20 2013 22:33 156
Sun Oct 20 2013 22:34 115
Sun Oct 20 2013 22:35 107
Sun Oct 20 2013 22:36 88
Sun Oct 20 2013 22:37 75
Sun Oct 20 2013 22:38 77
Sun Oct 20 2013 22:39 86
Sun Oct 20 2013 22:40 69
Sun Oct 20 2013 22:41 74
Sun Oct 20 2013 22:42 61
Sun Oct 20 2013 22:43 57
Sun Oct 20 2013 22:44 44
Sun Oct 20 2013 22:45 48
Sun Oct 20 2013 22:46 50
Sun Oct 20 2013 22:47 42
Sun Oct 20 2013 22:48 44
Sun Oct 20 2013 22:49 38
Sun Oct 20 2013 22:50 34
Sun Oct 20 2013 22:51 38
Sun Oct 20 2013 22:52 39
Sun Oct 20 2013 22:53 35
Sun Oct 20 2013 22:54 32
Sun Oct 20 2013 22:55 40
Sun Oct 20 2013 22:56 39
Sun Oct 20 2013 22:57 46
Sun Oct 20 2013 22:58 37
Sun Oct 20 2013 22:59 36
Sun Oct 20 2013 23:00 30
Sun Oct 20 2013 23:01 25
Sun Oct 20 2013 23:02 28
Sun Oct 20 2013 23:03 15
Sun Oct 20 2013 23:04 26
Sun Oct 20 2013 23:05 21
Sun Oct 20 2013 23:06 22
Sun Oct 20 2013 23:07 27
Sun Oct 20 2013 23:08 25
Sun Oct 20 2013 23:09 19
Sun Oct 20 2013 23:10 25
Sun Oct 20 2013 23:11 18
Sun Oct 20 2013 23:12 23
Sun Oct 20 2013 23:13 25
Sun Oct 20 2013 23:14 21
Sun Oct 20 2013 23:15 16
Sun Oct 20 2013 23:16 18
Sun Oct 20 2013 23:17 21
Sun Oct 20 2013 23:18 14
Sun Oct 20 2013 23:19 10
Sun Oct 20 2013 23:20 20
Sun Oct 20 2013 23:21 23
Sun Oct 20 2013 23:22 15
Sun Oct 20 2013 23:23 17
Sun Oct 20 2013 23:24 17
Sun Oct 20 2013 23:25 13
Sun Oct 20 2013 23:26 14
Sun Oct 20 2013 23:27 13
Sun Oct 20 2013 23:28 14
Sun Oct 20 2013 23:29 21
Sun Oct 20 2013 23:30 8
Sun Oct 20 2013 23:31 17
Sun Oct 20 2013 23:32 22
Sun Oct 20 2013 23:33 24
Sun Oct 20 2013 23:34 10
Sun Oct 20 2013 23:35 15
Sun Oct 20 2013 23:36 14
Sun Oct 20 2013 23:37 17
Sun Oct 20 2013 23:38 29
Sun Oct 20 2013 23:39 30
Sun Oct 20 2013 23:40 24
Sun Oct 20 2013 23:41 19
Sun Oct 20 2013 23:42 18
Sun Oct 20 2013 23:43 18
Sun Oct 20 2013 23:44 15
Sun Oct 20 2013 23:45 9
Sun Oct 20 2013 23:46 11
Sun Oct 20 2013 23:47 10
Sun Oct 20 2013 23:48 12
Sun Oct 20 2013 23:49 9
Sun Oct 20 2013 23:50 11
Sun Oct 20 2013 23:51 11
Sun Oct 20 2013 23:52 13
Sun Oct 20 2013 23:53 10
Sun Oct 20 2013 23:54 10
Sun Oct 20 2013 23:55 5
Sun Oct 20 2013 23:56 8
Sun Oct 20 2013 23:57 12
Sun Oct 20 2013 23:58 12
Sun Oct 20 2013 23:59 12
Mon Oct 21 2013 00:00 7
Mon Oct 21 2013 00:01 8
Mon Oct 21 2013 00:02 9
Mon Oct 21 2013 00:03 4
Mon Oct 21 2013 00:04 5
Mon Oct 21 2013 00:05 6
Mon Oct 21 2013 00:06 6
Mon Oct 21 2013 00:07 6
Mon Oct 21 2013 00:08 6
Mon Oct 21 2013 00:09 6
Mon Oct 21 2013 00:10 5
Mon Oct 21 2013 00:11 2
Mon Oct 21 2013 00:12 5
Mon Oct 21 2013 00:13 4
Mon Oct 21 2013 00:14 5
Mon Oct 21 2013 00:15 4
Mon Oct 21 2013 00:16 3
Mon Oct 21 2013 00:17 6
Mon Oct 21 2013 00:18 4
Mon Oct 21 2013 00:19 6
Mon Oct 21 2013 00:20 3
Mon Oct 21 2013 00:21 6
Mon Oct 21 2013 00:22 6
Mon Oct 21 2013 00:23 3
Mon Oct 21 2013 00:24 4
Mon Oct 21 2013 00:25 2
Mon Oct 21 2013 00:26 5
Mon Oct 21 2013 00:27 7
Mon Oct 21 2013 00:28 7
Mon Oct 21 2013 00:29 5
Mon Oct 21 2013 00:30 5
Mon Oct 21 2013 00:31 5
Mon Oct 21 2013 00:32 3
Mon Oct 21 2013 00:33 5
Mon Oct 21 2013 00:36 2
Mon Oct 21 2013 00:37 5
Mon Oct 21 2013 00:38 3
Mon Oct 21 2013 00:39 3
Mon Oct 21 2013 00:40 6
Mon Oct 21 2013 00:41 3
Mon Oct 21 2013 00:42 4
Mon Oct 21 2013 00:43 3
Mon Oct 21 2013 00:44 4
Mon Oct 21 2013 00:45 4
Mon Oct 21 2013 00:46 5
Mon Oct 21 2013 00:47 2
Mon Oct 21 2013 00:48 5
Mon Oct 21 2013 00:49 3
Mon Oct 21 2013 00:51 3
Mon Oct 21 2013 00:52 4
Mon Oct 21 2013 00:53 4
Mon Oct 21 2013 00:54 3
Mon Oct 21 2013 00:55 3
Mon Oct 21 2013 00:56 2
Mon Oct 21 2013 00:57 2
Mon Oct 21 2013 00:58 1
Mon Oct 21 2013 00:59 2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment