Converted the Brush & Zoom area chart block to work with line charts. Combining d3-brush and d3-zoom to implement Focus + Context.
Hourly temparature data from CIMIS station 125
Converted the Brush & Zoom area chart block to work with line charts. Combining d3-brush and d3-zoom to implement Focus + Context.
Hourly temparature data from CIMIS station 125
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> |