Skip to content

Instantly share code, notes, and snippets.

@fabid

fabid/README.md

Last active July 23, 2016 12:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fabid/024452c42b94723b401d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fabid/024452c42b94723b401d to your computer and use it in GitHub Desktop.
Download ZIP
d3-returntimemap
Raw
README.md
Raw
index.html
<!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>
Raw
tweets.csv
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment