This serves as an example of how to add a zoomable feature to a plot using a "brush". By selecting a window width in the bottom graph, the top graph is redrawn with that window extent. For this data this may not be all that interesting, but in principle it is an interesting technique.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
d3js Multiline chart with brushing and mouseover
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Year | France | Germany | Japan | UK | USA | |
---|---|---|---|---|---|---|
1960 | 1321.93705189402 | 1331.88763810213 | 1010.89873682505 | 2095.84804704804 | 3808.71218956003 | |
1961 | 1407.7746251272 | 1412.58400581988 | 1159.84831071743 | 2224.21531122768 | 3931.22123566206 | |
1962 | 1490.82512902131 | 1501.11535482585 | 1223.1967739045 | 2430.01399572168 | 4171.48270057575 | |
1963 | 1590.0828501506 | 1611.6780110804 | 1402.9720301029 | 2637.24851207459 | 4402.56359581911 | |
1964 | 1714.97558254034 | 1739.05332668074 | 1567.3458540537 | 2748.98984867848 | 4670.20662987456 | |
1965 | 1763.74460554109 | 1861.48173377197 | 1663.88949943374 | 2936.75667194112 | 4910.74105906754 | |
1966 | 1863.0217900557 | 1967.97692622617 | 1861.2371253529 | 3025.15874531047 | 5266.51556776557 | |
1967 | 1941.01788335452 | 2038.4728293501 | 2105.0097565314 | 3098.61256354737 | 5531.61268569588 | |
1968 | 2024.79664837586 | 2248.15998417223 | 2328.76782138117 | 3315.93345057413 | 5994.92063017548 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> /* set the CSS */ | |
body { font: 12px Arial;} | |
path { | |
stroke: steelblue; | |
stroke-width: 2; | |
fill: none; |