├── .gitignore ├── thumb.jpg ├── Makefile ├── README.md ├── package.json ├── index.coffee └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/**/* 2 | /bundle.js 3 | /index.js 4 | -------------------------------------------------------------------------------- /thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/some1else/life/HEAD/thumb.jpg -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | index.js: index.coffee 2 | coffee -c index.coffee 3 | bundle.js: index.js 4 | browserify index.js > bundle.js 5 | 6 | bundle: node_modules index.js bundle.js 7 | 8 | node_modules: package.json 9 | npm install 10 | 11 | .PHONY: bundle -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Your life 2 | 3 | This HTML infographic was inspired by Tim Urban's [Life Calendar](http://waitbutwhy.com/2014/05/life-weeks.html). 4 | 5 | ![your life](http://some1else.github.io/life/thumb.jpg) 6 | 7 | ## Features 8 | 9 | - Looks nice 10 | - Clicking on a week toggles it red 11 | 12 | ## Wishlist 13 | 14 | - [ ] Make it squares 15 | - [ ] Notes 16 | - [ ] Persistence -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bro", 3 | "version": "1.0.0", 4 | "description": "browserify test", 5 | "main": "index.js", 6 | "scripts": { 7 | "bundle": "make bundle" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": {}, 12 | "devDependencies": { 13 | "browserify": "^13.0.0", 14 | "chroma-js": "^1.1.1", 15 | "coffee-script": "^1.10.0", 16 | "jquery": "^2.2.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /index.coffee: -------------------------------------------------------------------------------- 1 | $ = require('jquery') 2 | chroma = require('chroma-js') 3 | 4 | scale = ["#F6CE59", "#BDCF5E", "#87CA74", "#56C08F", "#37B2A6", "#45A1B2", "#688CAF", "#85769E", "#956282", "#975162"] 5 | 6 | $ -> 7 | $('.week').each (index, week) -> 8 | 9 | progress = index / 52 / 10 10 | decade = Math.floor(progress) + 1 11 | start_color = scale[decade - 1] 12 | end_color = scale[decade] 13 | progress = progress % 1 14 | color = chroma.interpolate(start_color, end_color, progress, 'lch').hex() 15 | 16 | $(week).css(backgroundColor: color) 17 | if index % 52 == 0 18 | year = Math.ceil((index + 1) / 52) 19 | $(week).text(year) 20 | 21 | $('.week').click (e) -> 22 | $(e.currentTarget).toggleClass('clicked') 23 | $('.week').addClass('interactive') -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | your life 8 | 9 | 10 | 11 | 12 | 59 | 60 | 61 |

your life

62 |

every rectangle represents a week,
every row represents a year

63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 | 336 | --------------------------------------------------------------------------------