Skip to content

Instantly share code, notes, and snippets.

@curran
Last active December 5, 2015 03:01
Show Gist options
  • Save curran/716e5ed6b01e5bfa8a8c to your computer and use it in GitHub Desktop.
Save curran/716e5ed6b01e5bfa8a8c to your computer and use it in GitHub Desktop.
Negative Relative Time Ticks

This example shows one solution for how to get d3 axis ticks to display relative time (durations) into the past by hour and minute [-01:30, -01:00, -00:30, 00:00, 00:30, 01:30].

forked from mbostock's block: Time of Day

web counter
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.dots path {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis--y line {
stroke-opacity: 0.2;
}
.axis--y path {
stroke: none;
}
.axis text {
font: 10px sans-serif;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
// This custom tick mark formatter displays signed hours and minutes
// relative to the given "zeroTime" date.
function relativeTimeFormatter(zeroTime){
return function (d){
var minutesNegative = d3.time.minutes(d, zeroTime).length;
var minutesPositive = d3.time.minutes(zeroTime, d).length;
var minutes = minutesNegative ? minutesNegative : minutesPositive;
var hours = Math.floor(minutes / 60);
var sign = minutesNegative ? "-" : "";
hours = addLeadingZero(hours);
minutes = (minutes % 60);
minutes = addLeadingZero(minutes);
return sign + hours + ":" + minutes;
}
}
function addLeadingZero(number){
return (number < 10 ? "0" : "") + number;
}
var parseTime = d3.time.format.utc("%H:%M").parse,
zeroTime = parseTime("10:00");
var margin = {top: 30, right: 30, bottom: 30, left: 30},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale.utc()
.domain([
// 3 hours before zero time.
d3.time.hour.utc.offset(zeroTime, -3),
// 2 hours after zero time.
d3.time.hour.utc.offset(zeroTime, 2)
])
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
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("tweets.csv", type, function(error, data) {
if (error) throw error;
y.domain([0, d3.max(data, function(d) { return d.rate; })]);
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(relativeTimeFormatter(zeroTime)));
svg.append("g")
.attr("class", "dots")
.selectAll("path")
.data(data)
.enter().append("path")
.attr("transform", function(d) { return "translate(" + x(d.time) + "," + y(d.rate) + ")"; })
.attr("d", d3.svg.symbol()
.size(40));
var tick = svg.append("g")
.attr("class", "axis axis--y")
.call(d3.svg.axis()
.scale(y)
.tickSize(-width)
.orient("left"))
.select(".tick:last-of-type");
var title = tick.append("text")
.attr("dy", ".32em")
.text("tweets per hour");
tick.select("line")
.attr("x1", title.node().getBBox().width + 6);
});
function type(d) {
d.rate = +d.count / 327 * 60; // January 8 to November 30
d.time = parseTime(d.time);
d.time.setUTCHours((d.time.getUTCHours() + 24 - 7) % 24);
return d;
}
</script>
count time
358 00:00
372 00:01
344 00:02
388 00:03
324 00:04
349 00:05
389 00:06
368 00:07
358 00:08
309 00:09
357 00:10
349 00:11
374 00:12
336 00:13
338 00:14
380 00:15
326 00:16
363 00:17
347 00:18
377 00:19
390 00:20
355 00:21
304 00:22
328 00:23
338 00:24
374 00:25
340 00:26
367 00:27
339 00:28
349 00:29
384 00:30
404 00:31
362 00:32
337 00:33
353 00:34
343 00:35
343 00:36
349 00:37
351 00:38
389 00:39
347 00:40
352 00:41
383 00:42
351 00:43
347 00:44
323 00:45
371 00:46
357 00:47
360 00:48
357 00:49
337 00:50
369 00:51
370 00:52
372 00:53
361 00:54
351 00:55
387 00:56
324 00:57
358 00:58
340 00:59
337 01:00
336 01:01
346 01:02
314 01:03
339 01:04
334 01:05
326 01:06
329 01:07
336 01:08
338 01:09
359 01:10
330 01:11
359 01:12
331 01:13
366 01:14
311 01:15
352 01:16
373 01:17
360 01:18
375 01:19
339 01:20
358 01:21
330 01:22
361 01:23
352 01:24
339 01:25
329 01:26
318 01:27
342 01:28
322 01:29
355 01:30
332 01:31
356 01:32
377 01:33
373 01:34
344 01:35
344 01:36
357 01:37
338 01:38
342 01:39
352 01:40
334 01:41
346 01:42
315 01:43
334 01:44
329 01:45
324 01:46
374 01:47
358 01:48
361 01:49
368 01:50
314 01:51
332 01:52
322 01:53
326 01:54
373 01:55
349 01:56
365 01:57
355 01:58
339 01:59
345 02:00
355 02:01
365 02:02
353 02:03
342 02:04
360 02:05
373 02:06
321 02:07
333 02:08
320 02:09
335 02:10
364 02:11
319 02:12
331 02:13
330 02:14
321 02:15
321 02:16
309 02:17
320 02:18
329 02:19
332 02:20
335 02:21
320 02:22
340 02:23
324 02:24
341 02:25
343 02:26
322 02:27
305 02:28
298 02:29
312 02:30
334 02:31
316 02:32
327 02:33
311 02:34
315 02:35
334 02:36
312 02:37
342 02:38
303 02:39
332 02:40
339 02:41
338 02:42
348 02:43
342 02:44
317 02:45
312 02:46
311 02:47
332 02:48
288 02:49
324 02:50
333 02:51
278 02:52
319 02:53
353 02:54
312 02:55
333 02:56
317 02:57
278 02:58
285 02:59
321 03:00
305 03:01
302 03:02
309 03:03
301 03:04
304 03:05
296 03:06
297 03:07
277 03:08
283 03:09
293 03:10
279 03:11
295 03:12
310 03:13
314 03:14
303 03:15
340 03:16
314 03:17
321 03:18
302 03:19
310 03:20
314 03:21
329 03:22
312 03:23
328 03:24
313 03:25
288 03:26
315 03:27
291 03:28
357 03:29
311 03:30
299 03:31
281 03:32
327 03:33
315 03:34
317 03:35
296 03:36
429 03:37
355 03:38
326 03:39
312 03:40
304 03:41
307 03:42
296 03:43
272 03:44
291 03:45
299 03:46
284 03:47
265 03:48
279 03:49
279 03:50
292 03:51
302 03:52
283 03:53
295 03:54
301 03:55
308 03:56
297 03:57
303 03:58
279 03:59
283 04:00
255 04:01
280 04:02
293 04:03
279 04:04
283 04:05
286 04:06
306 04:07
288 04:08
285 04:09
279 04:10
284 04:11
308 04:12
300 04:13
292 04:14
310 04:15
294 04:16
277 04:17
271 04:18
264 04:19
269 04:20
266 04:21
269 04:22
268 04:23
271 04:24
256 04:25
289 04:26
235 04:27
252 04:28
260 04:29
283 04:30
259 04:31
244 04:32
273 04:33
252 04:34
298 04:35
268 04:36
321 04:37
310 04:38
258 04:39
254 04:40
269 04:41
278 04:42
283 04:43
279 04:44
271 04:45
246 04:46
254 04:47
290 04:48
274 04:49
236 04:50
253 04:51
250 04:52
247 04:53
229 04:54
225 04:55
272 04:56
245 04:57
246 04:58
251 04:59
262 05:00
263 05:01
271 05:02
220 05:03
222 05:04
231 05:05
258 05:06
268 05:07
249 05:08
232 05:09
234 05:10
229 05:11
259 05:12
260 05:13
198 05:14
227 05:15
225 05:16
224 05:17
236 05:18
265 05:19
238 05:20
218 05:21
204 05:22
224 05:23
212 05:24
220 05:25
239 05:26
206 05:27
203 05:28
216 05:29
247 05:30
199 05:31
211 05:32
217 05:33
228 05:34
231 05:35
187 05:36
214 05:37
208 05:38
204 05:39
216 05:40
207 05:41
209 05:42
225 05:43
204 05:44
202 05:45
201 05:46
210 05:47
173 05:48
192 05:49
194 05:50
194 05:51
201 05:52
187 05:53
194 05:54
226 05:55
208 05:56
227 05:57
193 05:58
193 05:59
211 06:00
202 06:01
182 06:02
210 06:03
186 06:04
178 06:05
188 06:06
176 06:07
197 06:08
178 06:09
170 06:10
186 06:11
189 06:12
208 06:13
195 06:14
188 06:15
164 06:16
187 06:17
164 06:18
152 06:19
177 06:20
176 06:21
142 06:22
179 06:23
173 06:24
169 06:25
199 06:26
185 06:27
167 06:28
156 06:29
145 06:30
134 06:31
153 06:32
160 06:33
152 06:34
165 06:35
147 06:36
148 06:37
179 06:38
169 06:39
136 06:40
161 06:41
139 06:42
138 06:43
144 06:44
150 06:45
146 06:46
147 06:47
125 06:48
133 06:49
121 06:50
132 06:51
131 06:52
126 06:53
130 06:54
130 06:55
115 06:56
118 06:57
134 06:58
115 06:59
110 07:00
105 07:01
115 07:02
118 07:03
118 07:04
116 07:05
127 07:06
116 07:07
120 07:08
99 07:09
104 07:10
109 07:11
106 07:12
131 07:13
108 07:14
110 07:15
114 07:16
108 07:17
98 07:18
111 07:19
103 07:20
94 07:21
112 07:22
104 07:23
93 07:24
81 07:25
104 07:26
87 07:27
76 07:28
84 07:29
100 07:30
76 07:31
83 07:32
68 07:33
95 07:34
84 07:35
87 07:36
76 07:37
92 07:38
76 07:39
72 07:40
68 07:41
62 07:42
83 07:43
54 07:44
59 07:45
64 07:46
60 07:47
82 07:48
71 07:49
78 07:50
64 07:51
76 07:52
73 07:53
67 07:54
74 07:55
53 07:56
72 07:57
71 07:58
65 07:59
76 08:00
63 08:01
68 08:02
67 08:03
70 08:04
51 08:05
58 08:06
42 08:07
60 08:08
46 08:09
53 08:10
56 08:11
61 08:12
54 08:13
53 08:14
56 08:15
56 08:16
54 08:17
53 08:18
55 08:19
53 08:20
60 08:21
47 08:22
42 08:23
53 08:24
63 08:25
34 08:26
51 08:27
41 08:28
41 08:29
43 08:30
53 08:31
50 08:32
52 08:33
36 08:34
31 08:35
41 08:36
44 08:37
41 08:38
55 08:39
47 08:40
57 08:41
40 08:42
49 08:43
37 08:44
38 08:45
52 08:46
38 08:47
46 08:48
42 08:49
41 08:50
48 08:51
36 08:52
18 08:53
58 08:54
30 08:55
41 08:56
42 08:57
30 08:58
48 08:59
35 09:00
45 09:01
44 09:02
34 09:03
39 09:04
32 09:05
47 09:06
41 09:07
45 09:08
31 09:09
43 09:10
35 09:11
41 09:12
37 09:13
26 09:14
24 09:15
40 09:16
36 09:17
33 09:18
31 09:19
35 09:20
35 09:21
40 09:22
32 09:23
24 09:24
20 09:25
41 09:26
37 09:27
42 09:28
32 09:29
39 09:30
33 09:31
23 09:32
29 09:33
38 09:34
25 09:35
45 09:36
43 09:37
29 09:38
38 09:39
39 09:40
35 09:41
35 09:42
38 09:43
33 09:44
30 09:45
31 09:46
31 09:47
33 09:48
21 09:49
29 09:50
26 09:51
37 09:52
31 09:53
29 09:54
32 09:55
32 09:56
42 09:57
31 09:58
35 09:59
29 10:00
41 10:01
29 10:02
29 10:03
36 10:04
45 10:05
36 10:06
33 10:07
40 10:08
29 10:09
29 10:10
19 10:11
27 10:12
17 10:13
26 10:14
40 10:15
31 10:16
38 10:17
21 10:18
25 10:19
25 10:20
33 10:21
27 10:22
29 10:23
26 10:24
27 10:25
25 10:26
36 10:27
35 10:28
46 10:29
37 10:30
40 10:31
25 10:32
51 10:33
31 10:34
30 10:35
32 10:36
36 10:37
52 10:38
36 10:39
40 10:40
55 10:41
88 10:42
32 10:43
38 10:44
41 10:45
31 10:46
25 10:47
31 10:48
29 10:49
36 10:50
24 10:51
40 10:52
29 10:53
40 10:54
35 10:55
39 10:56
38 10:57
47 10:58
42 10:59
38 11:00
42 11:01
31 11:02
28 11:03
49 11:04
38 11:05
64 11:06
37 11:07
52 11:08
46 11:09
35 11:10
53 11:11
40 11:12
52 11:13
45 11:14
50 11:15
58 11:16
51 11:17
40 11:18
39 11:19
46 11:20
49 11:21
61 11:22
54 11:23
47 11:24
57 11:25
48 11:26
54 11:27
58 11:28
52 11:29
47 11:30
44 11:31
50 11:32
57 11:33
63 11:34
62 11:35
42 11:36
42 11:37
58 11:38
47 11:39
50 11:40
59 11:41
96 11:42
64 11:43
57 11:44
55 11:45
49 11:46
75 11:47
71 11:48
69 11:49
83 11:50
59 11:51
57 11:52
62 11:53
76 11:54
73 11:55
66 11:56
73 11:57
65 11:58
65 11:59
150 12:00
108 12:01
89 12:02
83 12:03
87 12:04
62 12:05
60 12:06
72 12:07
77 12:08
75 12:09
85 12:10
87 12:11
94 12:12
83 12:13
95 12:14
107 12:15
81 12:16
98 12:17
85 12:18
111 12:19
114 12:20
97 12:21
118 12:22
101 12:23
119 12:24
110 12:25
84 12:26
95 12:27
99 12:28
107 12:29
103 12:30
119 12:31
104 12:32
87 12:33
93 12:34
101 12:35
119 12:36
110 12:37
122 12:38
86 12:39
157 12:40
97 12:41
142 12:42
109 12:43
114 12:44
119 12:45
109 12:46
128 12:47
108 12:48
115 12:49
135 12:50
127 12:51
105 12:52
115 12:53
131 12:54
127 12:55
129 12:56
128 12:57
153 12:58
142 12:59
185 13:00
188 13:01
161 13:02
150 13:03
157 13:04
160 13:05
145 13:06
152 13:07
160 13:08
141 13:09
162 13:10
161 13:11
151 13:12
175 13:13
147 13:14
170 13:15
150 13:16
146 13:17
260 13:18
151 13:19
150 13:20
205 13:21
146 13:22
165 13:23
184 13:24
165 13:25
182 13:26
146 13:27
159 13:28
184 13:29
168 13:30
180 13:31
183 13:32
173 13:33
188 13:34
171 13:35
174 13:36
195 13:37
195 13:38
191 13:39
227 13:40
200 13:41
177 13:42
184 13:43
189 13:44
201 13:45
190 13:46
192 13:47
203 13:48
193 13:49
209 13:50
205 13:51
233 13:52
223 13:53
207 13:54
228 13:55
188 13:56
242 13:57
217 13:58
187 13:59
216 14:00
247 14:01
257 14:02
223 14:03
233 14:04
255 14:05
237 14:06
240 14:07
237 14:08
246 14:09
248 14:10
237 14:11
251 14:12
222 14:13
223 14:14
239 14:15
236 14:16
248 14:17
266 14:18
249 14:19
253 14:20
292 14:21
237 14:22
258 14:23
271 14:24
278 14:25
255 14:26
287 14:27
271 14:28
271 14:29
307 14:30
270 14:31
276 14:32
287 14:33
298 14:34
289 14:35
275 14:36
274 14:37
275 14:38
275 14:39
286 14:40
313 14:41
340 14:42
285 14:43
277 14:44
303 14:45
308 14:46
317 14:47
326 14:48
330 14:49
336 14:50
296 14:51
314 14:52
350 14:53
323 14:54
353 14:55
353 14:56
342 14:57
328 14:58
346 14:59
454 15:00
360 15:01
287 15:02
304 15:03
312 15:04
350 15:05
369 15:06
336 15:07
319 15:08
371 15:09
343 15:10
311 15:11
331 15:12
349 15:13
355 15:14
361 15:15
374 15:16
379 15:17
353 15:18
402 15:19
376 15:20
390 15:21
376 15:22
358 15:23
362 15:24
383 15:25
372 15:26
392 15:27
346 15:28
397 15:29
500 15:30
399 15:31
354 15:32
380 15:33
414 15:34
417 15:35
419 15:36
395 15:37
444 15:38
428 15:39
438 15:40
387 15:41
422 15:42
422 15:43
415 15:44
418 15:45
414 15:46
432 15:47
455 15:48
404 15:49
425 15:50
453 15:51
427 15:52
462 15:53
436 15:54
403 15:55
426 15:56
412 15:57
412 15:58
445 15:59
613 16:00
427 16:01
468 16:02
412 16:03
482 16:04
530 16:05
488 16:06
457 16:07
446 16:08
421 16:09
416 16:10
429 16:11
460 16:12
468 16:13
454 16:14
524 16:15
476 16:16
487 16:17
486 16:18
462 16:19
497 16:20
510 16:21
446 16:22
502 16:23
485 16:24
498 16:25
439 16:26
468 16:27
433 16:28
469 16:29
626 16:30
451 16:31
465 16:32
488 16:33
491 16:34
475 16:35
489 16:36
465 16:37
478 16:38
463 16:39
515 16:40
485 16:41
458 16:42
489 16:43
493 16:44
492 16:45
511 16:46
465 16:47
470 16:48
478 16:49
521 16:50
450 16:51
481 16:52
439 16:53
519 16:54
471 16:55
492 16:56
506 16:57
488 16:58
471 16:59
657 17:00
489 17:01
516 17:02
462 17:03
478 17:04
512 17:05
479 17:06
476 17:07
505 17:08
465 17:09
501 17:10
501 17:11
468 17:12
505 17:13
511 17:14
519 17:15
457 17:16
455 17:17
457 17:18
498 17:19
480 17:20
451 17:21
490 17:22
475 17:23
458 17:24
481 17:25
476 17:26
507 17:27
497 17:28
532 17:29
520 17:30
475 17:31
471 17:32
514 17:33
489 17:34
418 17:35
476 17:36
476 17:37
459 17:38
556 17:39
502 17:40
476 17:41
530 17:42
538 17:43
514 17:44
532 17:45
494 17:46
467 17:47
519 17:48
499 17:49
508 17:50
534 17:51
503 17:52
470 17:53
507 17:54
555 17:55
529 17:56
473 17:57
515 17:58
453 17:59
573 18:00
487 18:01
484 18:02
505 18:03
425 18:04
522 18:05
453 18:06
470 18:07
499 18:08
476 18:09
430 18:10
478 18:11
468 18:12
488 18:13
484 18:14
511 18:15
511 18:16
471 18:17
477 18:18
492 18:19
525 18:20
526 18:21
498 18:22
492 18:23
436 18:24
452 18:25
497 18:26
466 18:27
453 18:28
465 18:29
513 18:30
462 18:31
448 18:32
485 18:33
477 18:34
480 18:35
473 18:36
515 18:37
473 18:38
489 18:39
494 18:40
453 18:41
454 18:42
494 18:43
494 18:44
503 18:45
487 18:46
479 18:47
478 18:48
474 18:49
488 18:50
434 18:51
488 18:52
510 18:53
507 18:54
527 18:55
452 18:56
441 18:57
454 18:58
467 18:59
483 19:00
473 19:01
480 19:02
462 19:03
491 19:04
462 19:05
448 19:06
444 19:07
471 19:08
453 19:09
466 19:10
427 19:11
439 19:12
483 19:13
418 19:14
420 19:15
421 19:16
442 19:17
439 19:18
409 19:19
458 19:20
457 19:21
420 19:22
448 19:23
424 19:24
448 19:25
446 19:26
406 19:27
510 19:28
447 19:29
451 19:30
456 19:31
461 19:32
468 19:33
392 19:34
394 19:35
409 19:36
377 19:37
429 19:38
419 19:39
424 19:40
412 19:41
421 19:42
437 19:43
401 19:44
427 19:45
483 19:46
425 19:47
414 19:48
453 19:49
459 19:50
462 19:51
432 19:52
455 19:53
437 19:54
416 19:55
438 19:56
436 19:57
429 19:58
414 19:59
410 20:00
474 20:01
404 20:02
490 20:03
441 20:04
425 20:05
429 20:06
408 20:07
460 20:08
445 20:09
387 20:10
427 20:11
406 20:12
406 20:13
396 20:14
435 20:15
416 20:16
401 20:17
438 20:18
421 20:19
427 20:20
464 20:21
411 20:22
425 20:23
431 20:24
442 20:25
436 20:26
440 20:27
421 20:28
420 20:29
407 20:30
403 20:31
418 20:32
402 20:33
402 20:34
414 20:35
455 20:36
405 20:37
440 20:38
418 20:39
437 20:40
386 20:41
416 20:42
383 20:43
405 20:44
389 20:45
424 20:46
446 20:47
441 20:48
401 20:49
414 20:50
461 20:51
404 20:52
389 20:53
403 20:54
455 20:55
411 20:56
404 20:57
420 20:58
430 20:59
435 21:00
381 21:01
390 21:02
445 21:03
442 21:04
400 21:05
395 21:06
402 21:07
370 21:08
421 21:09
393 21:10
404 21:11
418 21:12
428 21:13
413 21:14
442 21:15
383 21:16
422 21:17
426 21:18
410 21:19
382 21:20
411 21:21
406 21:22
429 21:23
384 21:24
372 21:25
409 21:26
397 21:27
364 21:28
382 21:29
415 21:30
385 21:31
369 21:32
380 21:33
391 21:34
413 21:35
371 21:36
361 21:37
422 21:38
394 21:39
393 21:40
372 21:41
370 21:42
434 21:43
411 21:44
441 21:45
422 21:46
394 21:47
382 21:48
395 21:49
383 21:50
402 21:51
370 21:52
381 21:53
373 21:54
393 21:55
366 21:56
400 21:57
398 21:58
380 21:59
392 22:00
406 22:01
377 22:02
405 22:03
381 22:04
405 22:05
401 22:06
377 22:07
362 22:08
409 22:09
398 22:10
373 22:11
408 22:12
398 22:13
367 22:14
410 22:15
391 22:16
369 22:17
360 22:18
348 22:19
338 22:20
376 22:21
311 22:22
340 22:23
381 22:24
346 22:25
372 22:26
352 22:27
361 22:28
325 22:29
340 22:30
359 22:31
342 22:32
346 22:33
364 22:34
341 22:35
360 22:36
403 22:37
376 22:38
392 22:39
370 22:40
376 22:41
395 22:42
356 22:43
352 22:44
357 22:45
404 22:46
397 22:47
374 22:48
342 22:49
355 22:50
374 22:51
346 22:52
379 22:53
368 22:54
378 22:55
367 22:56
382 22:57
393 22:58
376 22:59
382 23:00
378 23:01
375 23:02
378 23:03
369 23:04
357 23:05
371 23:06
350 23:07
350 23:08
372 23:09
343 23:10
391 23:11
380 23:12
407 23:13
368 23:14
391 23:15
351 23:16
370 23:17
349 23:18
386 23:19
432 23:20
355 23:21
384 23:22
365 23:23
367 23:24
363 23:25
372 23:26
374 23:27
347 23:28
360 23:29
372 23:30
358 23:31
356 23:32
328 23:33
347 23:34
365 23:35
340 23:36
359 23:37
359 23:38
368 23:39
350 23:40
342 23:41
420 23:42
386 23:43
339 23:44
349 23:45
369 23:46
395 23:47
343 23:48
368 23:49
427 23:50
368 23:51
370 23:52
334 23:53
369 23:54
373 23:55
352 23:56
390 23:57
366 23:58
330 23:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment