Timemaps of my latest tweets with d3-returntimemap. Plain version and heatmap version with d3-heatmap.
The peak around the 8 hour mark is due to my use of Buffer.
Built with blockbuilder.org
forked from fabid's block: d3-heatmap
Timemaps of my latest tweets with d3-returntimemap. Plain version and heatmap version with d3-heatmap.
The peak around the 8 hour mark is due to my use of Buffer.
Built with blockbuilder.org
forked from fabid's block: d3-heatmap
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script src="https://cdn.rawgit.com/fabid/d3-heatmap/master/heatmap.js"></script> | |
<script src="https://cdn.rawgit.com/fabid/d3-returntimemap/master/returntimemap.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { width:50%; height: 100% } | |
line {stroke-width: 1px; stroke: black;} | |
path {stroke-width: 1px;} | |
</style> | |
</head> | |
<body> | |
<script> | |
d3.csv('tweets.csv', function(error, data){ | |
var margin = { | |
top: 20, | |
right: 20, | |
bottom: 80, | |
left: 80 | |
}; | |
var dim = 480; | |
var width = dim - margin.left - margin.right; | |
var height = dim - margin.top - margin.bottom; | |
var format = d3.time.format("%Y-%m-%d %H:%M:%S"); | |
var dateAccessor = function (d) {return format.parse(d.date)}; | |
var timemap = d3.returntimemap() | |
.values(dateAccessor); | |
var timemapData = timemap(data); | |
var svg = d3.select('body') | |
.append('svg') | |
.attr('width', dim) | |
.attr('height', dim); | |
var scatter = svg.append('g'); | |
var xScale = d3.scale.log(); | |
var yScale = d3.scale.log(); | |
timemapData.map | |
var delta = 1000; | |
xScale.domain(d3.extent(timemapData, function(d) { return d.x; })) | |
.range([margin.left, width + margin.left]); | |
yScale.domain(d3.extent(timemapData, function(d) { return d.y; })) | |
.range([height, margin.top]); | |
var day = 1000 * 3600 * 24; | |
var minute = 1000 * 60; | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.innerTickSize([10]) | |
.outerTickSize([1]) | |
.tickValues([4 * minute, 60 * 8 * minute, 14 * day]) | |
.tickFormat(function(d){return moment.duration(d).humanize()}); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left") | |
.innerTickSize([10]) | |
.outerTickSize([1]) | |
.tickValues([4 * minute, 60 * 8 * minute, 14 * day]) | |
.tickFormat(function(d){return moment.duration(d).humanize()}); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (height) + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + margin.left + ",0)") | |
.call(yAxis); | |
scatter.selectAll('circle').data(timemapData).enter() | |
.append('circle') | |
.attr('r', 3) | |
.style('fill', 'black') | |
.style('fill-opacity', 0.6) | |
.attr('cx', function(d) {return xScale(d.x)}) | |
.attr('cy', function(d) {return yScale(d.y)}); | |
svg.append("text") | |
.attr("text-anchor", "middle") | |
.attr("transform", "translate("+ (margin.left/5) +","+(3*height/4)+")rotate(-90)") | |
.style('font-family', 'sans-serif') | |
.text("Time after event"); | |
svg.append("text") | |
.attr("text-anchor", "middle") | |
.attr("transform", "translate("+ (width/2) +","+(height + margin.top + margin.bottom/2)+")") | |
.style('font-family', 'sans-serif') | |
.text("Time before event"); | |
var size = 5; | |
var heatmap = d3.heatmap() | |
.std(2) | |
.x(function(d) { return xScale(d.x); }) | |
.y(function(d) { return yScale(d.y); }) | |
.dx(size) | |
.dy(size); | |
// the result of the heatmap layout | |
var heatmapData = heatmap(timemapData); | |
var color = d3.scale.linear() | |
.domain([0, d3.max(heatmapData, function(d) { | |
return d.v; | |
})]) | |
.range(["white", "steelblue"]) | |
.interpolate(d3.interpolateLab); | |
var svg2 = d3.select('body') | |
.append('svg') | |
.attr('width', size) | |
.attr('height', size); | |
svg2.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (height) + ")") | |
.call(xAxis); | |
svg2.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + margin.left + ",0)") | |
.call(yAxis); | |
svg2.append("g") | |
.selectAll(".square") | |
.data(heatmapData) | |
.enter().append("rect") | |
.attr("class", "square") | |
.attr("x", function(d) { return d.x; }) | |
.attr("y", function(d) { return d.y - size; }) | |
.attr("width", size) | |
.attr("height", size) | |
.style("fill", function(d) { | |
return color(d.v) | |
}) | |
.style("stroke", "none"); | |
}) | |
</script> | |
</body> |
id | date | |
---|---|---|
0 | 2016-03-01 16:48:42 | |
1 | 2016-03-01 15:48:50 | |
2 | 2016-02-28 12:21:49 | |
3 | 2016-02-24 00:03:04 | |
4 | 2016-02-23 22:46:05 | |
5 | 2016-02-23 22:28:09 | |
6 | 2016-02-21 18:18:56 | |
7 | 2016-02-20 00:03:03 | |
8 | 2016-02-18 00:03:06 | |
9 | 2016-02-17 00:03:25 | |
10 | 2016-02-15 15:29:24 | |
11 | 2016-02-15 08:13:00 | |
12 | 2016-02-15 00:03:16 | |
13 | 2016-02-14 08:13:03 | |
14 | 2016-02-14 00:03:02 | |
15 | 2016-02-04 00:03:14 | |
16 | 2016-01-29 21:07:16 | |
17 | 2016-01-25 17:05:20 | |
18 | 2016-01-16 00:03:06 | |
19 | 2016-01-15 13:04:21 | |
20 | 2016-01-14 18:42:04 | |
21 | 2016-01-14 08:52:53 | |
22 | 2016-01-13 17:33:45 | |
23 | 2016-01-10 08:13:14 | |
24 | 2016-01-10 02:40:31 | |
25 | 2016-01-10 01:15:39 | |
26 | 2016-01-09 15:29:04 | |
27 | 2016-01-02 08:13:02 | |
28 | 2016-01-02 00:03:04 | |
29 | 2016-01-01 15:29:01 | |
30 | 2016-01-01 08:13:03 | |
31 | 2016-01-01 06:04:46 | |
32 | 2015-12-21 05:22:23 | |
33 | 2015-12-20 15:29:00 | |
34 | 2015-12-15 15:29:15 | |
35 | 2015-12-15 08:13:00 | |
36 | 2015-12-14 15:29:06 | |
37 | 2015-12-10 02:31:24 | |
38 | 2015-11-30 15:29:13 | |
39 | 2015-11-26 08:13:06 | |
40 | 2015-11-26 00:03:02 | |
41 | 2015-11-25 23:48:07 | |
42 | 2015-11-25 15:29:01 | |
43 | 2015-11-21 15:29:12 | |
44 | 2015-11-19 15:29:20 | |
45 | 2015-11-19 14:54:14 | |
46 | 2015-11-19 08:13:13 | |
47 | 2015-11-18 08:13:00 | |
48 | 2015-11-17 08:13:08 | |
49 | 2015-11-16 00:03:06 | |
50 | 2015-11-15 15:29:01 | |
51 | 2015-11-14 00:03:06 | |
52 | 2015-11-13 15:29:18 | |
53 | 2015-11-13 08:13:09 | |
54 | 2015-11-13 00:03:15 | |
55 | 2015-11-12 15:29:15 | |
56 | 2015-11-12 08:13:09 | |
57 | 2015-11-12 06:20:18 | |
58 | 2015-10-23 23:03:07 | |
59 | 2015-10-11 23:03:00 | |
60 | 2015-10-03 14:29:00 | |
61 | 2015-09-29 23:03:10 | |
62 | 2015-09-29 22:28:11 | |
63 | 2015-09-29 14:29:02 | |
64 | 2015-09-26 18:11:59 | |
65 | 2015-09-26 17:56:56 | |
66 | 2015-09-15 07:13:02 | |
67 | 2015-09-14 23:03:02 | |
68 | 2015-09-12 14:29:21 | |
69 | 2015-09-11 14:29:09 | |
70 | 2015-09-10 23:03:06 | |
71 | 2015-09-10 14:29:14 | |
72 | 2015-09-10 07:13:00 | |
73 | 2015-09-09 23:03:03 | |
74 | 2015-09-09 14:29:06 | |
75 | 2015-09-05 07:13:04 | |
76 | 2015-09-04 23:03:07 | |
77 | 2015-09-04 14:29:09 | |
78 | 2015-09-04 11:53:01 | |
79 | 2015-09-02 14:29:07 | |
80 | 2015-09-02 07:13:01 | |
81 | 2015-09-01 23:03:06 | |
82 | 2015-09-01 14:29:22 | |
83 | 2015-09-01 07:55:42 | |
84 | 2015-09-01 07:13:01 | |
85 | 2015-08-31 23:03:14 | |
86 | 2015-08-31 14:29:02 | |
87 | 2015-08-30 14:29:13 | |
88 | 2015-08-30 10:39:50 | |
89 | 2015-08-29 14:29:01 | |
90 | 2015-08-29 07:13:08 | |
91 | 2015-08-28 23:03:11 | |
92 | 2015-08-28 07:13:01 | |
93 | 2015-08-27 23:03:07 | |
94 | 2015-08-27 14:29:17 | |
95 | 2015-08-22 12:07:31 | |
96 | 2015-08-20 01:06:22 | |
97 | 2015-08-19 13:44:07 | |
98 | 2015-08-19 07:05:07 | |
99 | 2015-08-19 01:06:06 | |
100 | 2015-08-18 19:56:05 | |
101 | 2015-08-18 13:44:15 | |
102 | 2015-08-18 07:05:16 | |
103 | 2015-08-18 01:06:10 | |
104 | 2015-08-17 19:56:03 | |
105 | 2015-08-16 19:56:11 | |
106 | 2015-08-16 13:44:02 | |
107 | 2015-08-16 07:05:11 | |
108 | 2015-08-16 01:06:00 | |
109 | 2015-08-15 19:56:01 | |
110 | 2015-08-15 13:44:12 | |
111 | 2015-08-15 07:05:06 | |
112 | 2015-08-15 01:06:10 | |
113 | 2015-08-14 19:56:02 | |
114 | 2015-08-14 18:45:22 | |
115 | 2015-08-14 13:44:20 | |
116 | 2015-08-14 13:20:51 | |
117 | 2015-08-14 07:05:07 | |
118 | 2015-08-14 01:06:29 | |
119 | 2015-08-13 21:28:55 | |
120 | 2015-08-13 19:56:10 | |
121 | 2015-08-13 17:33:02 | |
122 | 2015-08-13 15:16:09 | |
123 | 2015-08-13 07:13:39 | |
124 | 2015-08-12 19:56:13 | |
125 | 2015-08-12 13:44:01 | |
126 | 2015-08-12 07:46:29 | |
127 | 2015-08-12 01:06:05 | |
128 | 2015-08-11 19:56:02 | |
129 | 2015-08-11 13:44:07 | |
130 | 2015-08-11 01:06:19 | |
131 | 2015-08-10 20:29:20 | |
132 | 2015-08-10 13:44:04 | |
133 | 2015-08-10 08:14:27 | |
134 | 2015-08-09 19:56:03 | |
135 | 2015-08-09 13:44:01 | |
136 | 2015-08-09 08:24:07 | |
137 | 2015-08-09 08:20:42 | |
138 | 2015-08-09 07:05:00 | |
139 | 2015-08-09 01:06:05 | |
140 | 2015-08-08 19:56:15 | |
141 | 2015-08-08 13:44:09 | |
142 | 2015-08-07 13:51:00 | |
143 | 2015-08-07 01:06:02 | |
144 | 2015-08-06 19:56:03 | |
145 | 2015-08-06 16:09:18 | |
146 | 2015-08-06 13:44:05 | |
147 | 2015-08-06 10:12:53 | |
148 | 2015-08-06 07:05:10 | |
149 | 2015-08-06 01:06:02 | |
150 | 2015-08-05 19:56:02 | |
151 | 2015-08-05 18:08:28 | |
152 | 2015-08-05 13:44:19 | |
153 | 2015-08-05 12:32:01 | |
154 | 2015-08-05 08:17:10 | |
155 | 2015-08-05 01:06:18 | |
156 | 2015-08-04 23:43:42 | |
157 | 2015-08-04 19:56:04 | |
158 | 2015-08-04 14:15:41 | |
159 | 2015-08-04 07:05:03 | |
160 | 2015-08-04 01:06:00 | |
161 | 2015-08-03 19:56:01 | |
162 | 2015-08-03 10:54:20 | |
163 | 2015-08-03 07:05:34 | |
164 | 2015-08-03 01:06:02 | |
165 | 2015-08-02 19:56:03 | |
166 | 2015-08-02 13:44:01 | |
167 | 2015-08-02 07:05:08 | |
168 | 2015-08-02 01:06:05 | |
169 | 2015-08-01 19:56:25 | |
170 | 2015-08-01 13:44:02 | |
171 | 2015-08-01 12:25:27 | |
172 | 2015-08-01 09:26:35 | |
173 | 2015-08-01 07:05:17 | |
174 | 2015-07-31 19:56:01 | |
175 | 2015-07-31 15:05:11 | |
176 | 2015-07-31 09:57:20 | |
177 | 2015-07-31 08:35:09 | |
178 | 2015-07-30 12:02:42 | |
179 | 2015-07-30 08:56:43 | |
180 | 2015-07-30 07:34:33 | |
181 | 2015-07-29 12:44:49 | |
182 | 2015-07-29 10:21:32 | |
183 | 2015-07-29 07:51:33 | |
184 | 2015-07-28 10:27:02 | |
185 | 2015-07-14 15:38:55 | |
186 | 2015-07-13 21:52:12 | |
187 | 2015-07-13 16:51:51 | |
188 | 2015-07-13 15:39:36 | |
189 | 2015-07-13 15:27:47 | |
190 | 2015-07-01 13:11:35 |