Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Brush & Zoom line chart
Date Eto Precip Sol_Rad Vap_Pres Air_Temp Rel_Hum Wind_Speed Wind_Dir Soil_Temp
1/1/2014 01:00 0 0 0 0.5 3.1 70 1.4 50 10.6
1/1/2014 02:00 0 0 0 0.5 3.2 68 1.2 51 10.4
1/1/2014 03:00 0 0 0 0.5 1.6 75 0.9 44 10.3
1/1/2014 04:00 0 0 0 0.5 1 77 1 47 10.1
1/1/2014 05:00 0 0 0 0.5 2.3 69 1.2 73 10
1/1/2014 06:00 0 0 0 0.5 0.7 75 0.9 54 9.8
1/1/2014 07:00 0 0 1 0.5 1 74 1.1 64 9.7
1/1/2014 08:00 0 0 20 0.5 1.3 73 1 48 9.6
1/1/2014 09:00 0.07 0 199 0.6 5 69 1 356 9.5
1/1/2014 10:00 0.15 0 311 0.6 10.1 52 1.1 210 9.3
1/1/2014 11:00 0.23 0 435 0.6 12.2 45 1 212 9.3
1/1/2014 12:00 0.3 0 493 0.6 14.4 38 1.6 206 9.3
1/1/2014 13:00 0.31 0 487 0.7 15.7 38 1.8 183 9.5
1/1/2014 14:00 0.26 0 423 0.7 16.6 36 1.3 245 9.7
1/1/2014 15:00 0.19 0 310 0.7 17 35 1.3 210 9.9
1/1/2014 16:00 0.1 0 162 0.7 17.2 33 1 191 10.1
1/1/2014 17:00 0.05 0 26 0.6 14.3 40 1.3 144 10.3
1/1/2014 18:00 0.02 0 0 0.6 10 52 1.6 74 10.4
1/1/2014 19:00 0.02 0 0 0.6 9.6 54 1.3 67 10.5
1/1/2014 20:00 0 0 0 0.6 6.7 65 0.8 47 10.4
1/1/2014 21:00 0.01 0 0 0.6 6.8 64 1.3 49 10.4
1/1/2014 22:00 0 0 0 0.6 5.3 69 1.1 33 10.3
1/1/2014 23:00 0 0 0 0.6 5 69 1.1 34 10.2
1/2/2014 00:00 0 0 0 0.6 4 74 0.9 50 10.1
1/2/2014 01:00 0 0 0 0.6 3.7 76 1.3 55 10
1/2/2014 02:00 0 0 0 0.6 4.1 75 1.1 75 9.9
1/2/2014 03:00 0 0 0 0.6 3 79 0.8 51 9.7
1/2/2014 04:00 0 0 0 0.6 2.8 80 0.9 54 9.6
1/2/2014 05:00 0 0 0 0.6 1.3 85 0.7 17 9.5
1/2/2014 06:00 0 0 0 0.5 0.4 86 0.9 48 9.4
1/2/2014 07:00 0 0 1 0.6 1.1 86 1 41 9.3
1/2/2014 08:00 0 0 16 0.6 2 84 1 50 9.2
1/2/2014 09:00 0.06 0 175 0.7 5.9 73 1.1 136 9.1
1/2/2014 10:00 0.16 0 324 0.7 10.4 57 1.3 337 9
1/2/2014 11:00 0.25 0 432 0.7 14.2 46 1.4 242 9
1/2/2014 12:00 0.3 0 487 0.8 16 41 1.6 218 9
1/2/2014 13:00 0.3 0 480 0.7 17.2 38 1.4 220 9.2
1/2/2014 14:00 0.26 0 410 0.7 17.8 37 1.4 259 9.4
1/2/2014 15:00 0.18 0 263 0.8 18.1 36 1.5 210 9.7
1/2/2014 16:00 0.08 0 114 0.7 17.8 35 1 214 9.9
1/2/2014 17:00 0.05 0 17 0.7 14.2 45 1.2 87 10.1
1/2/2014 18:00 0.02 0 0 0.7 10.2 56 1.5 73 10.2
1/2/2014 19:00 0.02 0 0 0.7 8.8 59 1.2 66 10.3
1/2/2014 20:00 0.01 0 0 0.7 7.5 63 0.8 27 10.3
1/2/2014 21:00 0 0 0 0.6 5.8 70 0.8 63 10.2
1/2/2014 22:00 0 0 0 0.6 4.8 75 0.9 63 10.1
1/2/2014 23:00 0 0 0 0.6 4.9 74 0.9 37 10
1/3/2014 00:00 0 0 0 0.6 3.3 79 0.8 38 9.9
1/3/2014 01:00 0 0 0 0.6 3.7 79 0.8 67 9.8
1/3/2014 02:00 0 0 0 0.6 3.8 79 1.2 31 9.7
1/3/2014 03:00 0 0 0 0.6 3.2 82 0.8 25 9.6
1/3/2014 04:00 0 0 0 0.6 3 83 1.1 94 9.4
1/3/2014 05:00 0 0 0 0.6 2.2 85 0.8 50 9.3
1/3/2014 06:00 0 0 0 0.6 2.2 86 1.3 64 9.2
1/3/2014 07:00 0 0 1 0.6 2.5 84 1.1 55 9.1
1/3/2014 08:00 0 0 27 0.6 1.9 87 0.8 53 9
1/3/2014 09:00 0.06 0 183 0.7 6.7 75 0.8 111 8.9
1/3/2014 10:00 0.14 0 299 0.8 10.3 62 1.1 195 8.9
1/3/2014 11:00 0.21 0 388 0.8 13.3 53 1 221 8.8
1/3/2014 12:00 0.25 0 420 0.8 15.3 46 1.3 201 8.9
1/3/2014 13:00 0.29 0 468 0.8 16.9 41 1.3 201 9.1
1/3/2014 14:00 0.25 0 395 0.8 17.7 39 1.3 233 9.3
1/3/2014 15:00 0.21 0 350 0.8 18.3 39 1.3 297 9.6
1/3/2014 16:00 0.11 0 162 0.8 18.5 36 1.3 255 10.4
1/3/2014 17:00 0.05 0 19 0.8 15.8 43 1.6 164 11.2
1/3/2014 18:00 0.02 0 0 0.7 11.3 55 1.5 69 11.8
1/3/2014 19:00 0.01 0 0 0.7 10.3 57 1.2 46 12.1
1/3/2014 20:00 0 0 0 0.7 7.6 66 0.8 37 12.2
1/3/2014 21:00 0 0 0 0.7 6.3 70 1 62 12.2
1/3/2014 22:00 0 0 0 0.7 7 68 1.3 58 12.1
1/3/2014 23:00 0 0 0 0.7 7.1 65 1.2 68 12
1/4/2014 00:00 0 0 0 0.6 5.4 72 1 26 11.8
1/4/2014 01:00 0 0 0 0.6 4.7 75 0.9 78 11.7
1/4/2014 02:00 0 0 0 0.7 4.7 78 0.9 76 11.5
1/4/2014 03:00 0 0 0 0.6 4.4 77 1.1 52 11.4
1/4/2014 04:00 0 0 0 0.6 5.1 72 1 90 11.2
1/4/2014 05:00 0 0 0 0.6 3 80 0.8 52 11
1/4/2014 06:00 0 0 0 0.6 2.3 82 0.9 66 10.9
1/4/2014 07:00 0 0 0 0.6 1.9 82 0.8 51 10.7
1/4/2014 08:00 0 0 21 0.6 2.2 83 0.8 69 10.6
1/4/2014 09:00 0.06 0 175 0.7 6.8 71 0.9 126 10.4
1/4/2014 10:00 0.16 0 327 0.7 11.4 54 1.1 338 10.3
1/4/2014 11:00 0.25 0 443 0.7 14.4 45 1 251 10.2
1/4/2014 12:00 0.31 0 500 0.7 17 38 1.1 199 10.2
1/4/2014 13:00 0.32 0 498 0.8 17.8 39 1.6 211 10.3
1/4/2014 14:00 0.28 0 438 0.8 18.9 36 1.3 216 10.6
1/4/2014 15:00 0.21 0 304 0.8 19 36 1.9 200 10.8
1/4/2014 16:00 0.1 0 151 0.8 18.9 35 1.1 243 11
1/4/2014 17:00 0.06 0 27 0.8 15.9 42 1.3 123 11.2
1/4/2014 18:00 0.02 0 0 0.7 11.5 54 1.5 76 11.3
1/4/2014 19:00 0.02 0 0 0.7 9.9 56 1.4 55 11.3
1/4/2014 20:00 0.01 0 0 0.7 8.4 62 1.1 23 11.2
1/4/2014 21:00 0 0 0 0.7 7 68 0.9 100 11.2
1/4/2014 22:00 0 0 0 0.7 5.6 73 0.9 36 11
1/4/2014 23:00 0 0 0 0.7 5 76 0.8 70 10.9
1/5/2014 00:00 0 0 0 0.6 3.4 81 0.7 63 10.8
1/5/2014 01:00 0 0 0 0.6 3.7 80 1.1 50 10.6
1/5/2014 02:00 0 0 0 0.6 3.9 79 1.2 53 10.5
1/5/2014 03:00 0 0 0 0.6 3.5 80 0.9 37 10.3
1/5/2014 04:00 0 0 0 0.6 2.5 83 1.1 78 10.2
1/5/2014 05:00 0 0 0 0.6 2.6 84 1 37 10.1
1/5/2014 06:00 0 0 0 0.6 2.3 83 1.3 40 9.9
1/5/2014 07:00 0 0 1 0.6 2 84 0.9 61 9.8
1/5/2014 08:00 0 0 18 0.6 1.7 86 1 22 9.7
1/5/2014 09:00 0.06 0 177 0.7 6.3 76 1 130 9.5
1/5/2014 10:00 0.16 0 330 0.8 10.8 62 1.2 196 9.4
1/5/2014 11:00 0.25 0 445 0.8 13.5 55 1.6 201 9.4
1/5/2014 12:00 0.3 0 504 0.9 15.4 49 1.3 210 9.4
1/5/2014 13:00 0.31 0 502 0.8 17.2 42 1.3 231 9.6
1/5/2014 14:00 0.28 0 440 0.8 18.6 37 1.4 222 9.8
1/5/2014 15:00 0.21 0 332 0.8 19.9 33 1 247 10.1
1/5/2014 16:00 0.13 0 182 0.8 19.3 35 1.7 220 10.3
1/5/2014 17:00 0.07 0 39 0.8 16.7 41 1.8 175 10.5
1/5/2014 18:00 0.02 0 0 0.7 11 55 1.5 77 10.6
1/5/2014 19:00 0.02 0 0 0.7 10.3 54 1.6 75 10.7
1/5/2014 20:00 0.01 0 0 0.7 9.6 56 1.7 75 10.7
1/5/2014 21:00 0.01 0 0 0.6 8.6 57 1.2 77 10.6
1/5/2014 22:00 0 0 0 0.6 6 66 0.9 43 10.5
1/5/2014 23:00 0 0 0 0.6 4.5 71 1.1 49 10.4
1/6/2014 00:00 0 0 0 0.6 3.8 74 1 56 10.3
1/6/2014 01:00 0 0 0 0.6 3.6 75 0.9 84 10.2
1/6/2014 02:00 0 0 0 0.6 2.4 79 1.1 44 10
1/6/2014 03:00 0 0 0 0.6 2.9 75 1.1 51 9.9
1/6/2014 04:00 0 0 0 0.5 1.7 78 1.1 76 9.7
1/6/2014 05:00 0 0 0 0.6 1.9 80 1.3 70 9.6
1/6/2014 06:00 0 0 0 0.6 1.8 79 1.1 54 9.4
1/6/2014 07:00 0 0 1 0.6 1.4 83 1.2 78 9.3
1/6/2014 08:00 0 0 17 0.5 0.7 86 0.9 58 9.2
1/6/2014 09:00 0.06 0 191 0.7 5.3 76 0.9 231 9
1/6/2014 10:00 0.16 0 348 0.7 9.1 63 1.1 256 8.9
1/6/2014 11:00 0.24 0 459 0.8 11.6 55 1.5 223 8.9
1/6/2014 12:00 0.26 0 455 0.8 14 48 1.2 209 8.9
1/6/2014 13:00 0.29 0 472 0.7 15.8 41 1.3 226 9.1
1/6/2014 14:00 0.24 0 379 0.7 17.3 36 1.1 287 9.3
1/6/2014 15:00 0.2 0 283 0.7 18.7 31 1.6 174 9.6
1/6/2014 16:00 0.15 0 199 0.7 17.9 35 2.2 204 9.9
1/6/2014 17:00 0.05 0 45 0.7 15.9 41 1.3 316 10.1
1/6/2014 18:00 0.01 0 1 0.7 10.8 52 1.5 71 10.2
1/6/2014 19:00 0.01 0 0 0.6 9 55 1.5 68 10.3
1/6/2014 20:00 0.01 0 0 0.6 8.5 52 1.3 74 10.3
1/6/2014 21:00 0 0 0 0.6 6.2 61 1.3 36 10.2
1/6/2014 22:00 0 0 0 0.6 6.4 61 1.1 40 10.1
1/6/2014 23:00 0 0 0 0.6 6.3 61 1.3 48 10
1/7/2014 00:00 0 0 0 0.6 5.6 64 1.1 22 9.9
1/7/2014 01:00 0.01 0 0 0.6 6.4 57 1.2 74 9.8
1/7/2014 02:00 0 0 0 0.6 4.4 69 1.3 85 9.7
1/7/2014 03:00 0 0 0 0.6 3.5 73 1.4 8 9.6
1/7/2014 04:00 0 0 0 0.5 3.3 68 1.3 26 9.5
1/7/2014 05:00 0 0 0 0.5 3.7 65 1.6 126 9.3
1/7/2014 06:00 0 0 0 0.5 2 74 1.1 89 9.2
1/7/2014 07:00 0 0 0 0.5 2.1 72 1.2 29 9.1
1/7/2014 08:00 0.01 0 29 0.5 3.8 67 0.9 36 9
1/7/2014 09:00 0.07 0 184 0.6 5.3 67 1.6 170 8.9
1/7/2014 10:00 0.14 0 299 0.6 8.2 56 1.2 324 8.8
1/7/2014 11:00 0.16 0 277 0.6 10 51 2.1 184 8.8
1/7/2014 12:00 0.29 0 502 0.6 13 43 1.4 226 8.8
1/7/2014 13:00 0.28 0 455 0.6 15.2 36 1.2 254 9
1/7/2014 14:00 0.17 0 252 0.6 15.8 33 1.6 209 9.2
1/7/2014 15:00 0.13 0 182 0.6 15.8 34 1.4 198 9.5
1/7/2014 16:00 0.06 0 96 0.6 15.9 34 0.7 248 9.7
1/7/2014 17:00 0.05 0 27 0.6 13.7 40 0.7 34 9.9
1/7/2014 18:00 0.03 0 0 0.6 9.1 51 1.3 64 10
1/7/2014 19:00 0.03 0 0 0.6 7.9 52 1.5 67 10.1
1/7/2014 20:00 0.02 0 0 0.5 7.2 52 1.1 72 10.1
1/7/2014 21:00 0.01 0 0 0.5 4.5 62 0.9 94 10
1/7/2014 22:00 0.01 0 0 0.5 4.1 64 1 110 9.9
1/7/2014 23:00 0.01 0 0 0.5 2.1 70 0.9 48 9.7
1/8/2014 00:00 0.01 0 0 0.5 1.9 70 1 41 9.6
1/8/2014 01:00 0 0 0 0.5 1.8 72 0.9 73 9.5
1/8/2014 02:00 0 0 0 0.5 2.4 73 1.3 16 9.3
1/8/2014 03:00 0 0 0 0.5 3.1 68 1.2 29 9.2
1/8/2014 04:00 0 0 0 0.5 1.9 72 0.8 45 9
1/8/2014 05:00 0 0 0 0.5 1.2 76 1.1 49 8.9
1/8/2014 06:00 0 0 0 0.5 1.8 73 0.9 74 8.8
1/8/2014 07:00 0 0 0 0.5 0.8 76 0.9 45 8.7
1/8/2014 08:00 0.01 0 27 0.5 1.3 75 0.8 36 8.6
1/8/2014 09:00 0.05 0 137 0.6 5.2 67 0.9 136 8.5
1/8/2014 10:00 0.13 0 280 0.6 8.8 56 1.4 183 8.4
1/8/2014 11:00 0.23 0 418 0.6 11.9 46 1.4 188 8.4
1/8/2014 12:00 0.27 0 456 0.6 14.2 38 1.4 210 8.4
1/8/2014 13:00 0.26 0 422 0.6 15.6 36 1.3 251 8.6
1/8/2014 14:00 0.26 0 419 0.6 16.6 34 1.3 273 8.8
1/8/2014 15:00 0.22 0 326 0.6 16.8 33 2.1 254 9
1/8/2014 16:00 0.12 0 183 0.7 16.4 36 1.5 273 9.3
1/8/2014 17:00 0.05 0 33 0.7 14.8 41 1.3 221 9.9
1/8/2014 18:00 0.02 0 0 0.6 10.8 50 1.5 83 10.6
1/8/2014 19:00 0.02 0 0 0.7 10.9 52 1.3 65 11.5
1/8/2014 20:00 0.01 0 0 0.7 8.4 59 1.2 26 12.2
1/8/2014 21:00 0 0 0 0.6 7.4 61 1 52 12.7
1/8/2014 22:00 0 0 0 0.6 7.1 63 0.9 107 12.9
1/8/2014 23:00 0 0 0 0.6 6.4 67 1.1 44 12.9
1/9/2014 00:00 0.01 0 0 0.6 7.5 62 1.3 64 12.8
1/9/2014 01:00 0.01 0 0 0.6 5.3 72 1.3 113 12.7
1/9/2014 02:00 0 0 0 0.6 4.2 76 1.1 36 12.5
1/9/2014 03:00 0 0 0 0.7 4.5 79 1.5 42 12.3
1/9/2014 04:00 0.01 0 0 0.8 7.2 75 1.1 359 12.1
1/9/2014 05:00 0 0 0 0.8 6.8 79 1.3 23 11.9
1/9/2014 06:00 0 0 0 0.7 4.5 82 1.2 19 11.7
1/9/2014 07:00 0 0 1 0.7 3.8 87 1.1 8 11.6
1/9/2014 08:00 0.01 0 26 0.7 3.8 87 0.7 33 11.4
1/9/2014 09:00 0.03 0 79 0.7 5.1 84 1.3 140 11.3
1/9/2014 10:00 0.07 0 162 0.8 8.8 75 1.3 317 11.1
1/9/2014 11:00 0.13 0 270 0.9 10.4 70 1.4 277 11
1/9/2014 12:00 0.24 0 444 1 12.7 69 1.7 240 11
1/9/2014 13:00 0.22 0 381 1 13.7 63 1.6 200 11.1
1/9/2014 14:00 0.22 0 364 1 14.1 61 2.1 223 11.2
1/9/2014 15:00 0.13 0 226 1 14.1 60 2 252 11.4
1/9/2014 16:00 0.05 0 88 1 14 60 1 211 11.5
1/9/2014 17:00 0.04 0 27 0.9 12.9 62 1 93 11.7
1/9/2014 18:00 0.02 0 0 0.9 10.4 70 1.6 72 11.7
1/9/2014 19:00 0.02 0 0 0.9 10.3 68 1.7 70 11.7
1/9/2014 20:00 0 0 0 0.8 7.8 77 0.9 20 11.7
1/9/2014 21:00 0 0 0 0.8 7.4 81 1.2 104 11.6
1/9/2014 22:00 0 0 0 0.8 6.2 83 1.1 36 11.5
1/9/2014 23:00 0 0 0 0.8 5.4 85 1 45 11.3
1/10/2014 00:00 0 0 0 0.8 5.1 88 1 20 11.2
1/10/2014 01:00 0 0 0 0.7 3.4 91 0.8 76 11
1/10/2014 02:00 0 0 0 0.7 3 92 1 58 10.9
1/10/2014 03:00 0 0 0 0.7 3.9 92 1.2 22 10.7
1/10/2014 04:00 0 0 0 0.7 3.8 91 1.1 42 10.6
1/10/2014 05:00 0 0 0 0.7 3.7 91 1 69 10.4
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.zoom {
cursor: move;
fill: none;
pointer-events: all;
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 110, left: 40},
margin2 = {top: 430, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
height2 = +svg.attr("height") - margin2.top - margin2.bottom;
var parseDate = d3.timeParse("%m/%d/%Y %H:%M");
var x = d3.scaleTime().range([0, width]),
x2 = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
y2 = d3.scaleLinear().range([height2, 0]);
var xAxis = d3.axisBottom(x),
xAxis2 = d3.axisBottom(x2),
yAxis = d3.axisLeft(y);
var brush = d3.brushX()
.extent([[0, 0], [width, height2]])
.on("brush end", brushed);
var zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
var line = d3.line()
.x(function (d) { return x(d.Date); })
.y(function (d) { return y(d.Air_Temp); });
var line2 = d3.line()
.x(function (d) { return x2(d.Date); })
.y(function (d) { return y2(d.Air_Temp); });
var clip = svg.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", width)
.attr("height", height)
.attr("x", 0)
.attr("y", 0);
var Line_chart = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("clip-path", "url(#clip)");
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
d3.csv("CIMIS_Station_125.csv", type, function (error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.Date; }));
y.domain([0, d3.max(data, function (d) { return d.Air_Temp; })]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
Line_chart.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
context.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line2);
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, x.range());
svg.append("rect")
.attr("class", "zoom")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
console.log(data);
});
function brushed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
var s = d3.event.selection || x2.range();
x.domain(s.map(x2.invert, x2));
Line_chart.select(".line").attr("d", line);
focus.select(".axis--x").call(xAxis);
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(width / (s[1] - s[0]))
.translate(-s[0], 0));
}
function zoomed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
var t = d3.event.transform;
x.domain(t.rescaleX(x2).domain());
Line_chart.select(".line").attr("d", line);
focus.select(".axis--x").call(xAxis);
context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}
function type(d) {
d.Date = parseDate(d.Date);
d.Air_Temp = +d.Air_Temp;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.