Fix time-varying weights plot
This commit is contained in:
2 files changed
+380
-385
No files matched your search
+370
-370
@@ -25933,7 +25933,7 @@ Berrisch, J. <span class="citation" data-cites="berrisch2025rcpptimer">(<a href=
|
||||
<div class="cell-output-display">
|
||||
<div>
|
||||
<figure>
|
||||
<p><img role="img" data-src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBlbmNvZGluZz0nVVRGLTgnID8+CjxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycgY2xhc3M9J3N2Z2xpdGUnIHdpZHRoPSc3MjAuMDBwdCcgaGVpZ2h0PSc1NzYuMDBwdCcgdmlld0JveD0nMCAwIDcyMC4wMCA1NzYuMDAnPgo8ZGVmcz4KICA8c3R5bGUgdHlwZT0ndGV4dC9jc3MnPjwhW0NEQVRBWwogICAgLnN2Z2xpdGUgbGluZSwgLnN2Z2xpdGUgcG9seWxpbmUsIC5zdmdsaXRlIHBvbHlnb24sIC5zdmdsaXRlIHBhdGgsIC5zdmdsaXRlIHJlY3QsIC5zdmdsaXRlIGNpcmNsZSB7CiAgICAgIGZpbGw6IG5vbmU7CiAgICAgIHN0cm9rZTogIzAwMDAwMDsKICAgICAgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kOwogICAgICBzdHJva2UtbGluZWpvaW46IHJvdW5kOwogICAgICBzdHJva2UtbWl0ZXJsaW1pdDogMTAuMDA7CiAgICB9CiAgICAuc3ZnbGl0ZSB0ZXh0IHsKICAgICAgd2hpdGUtc3BhY2U6IHByZTsKICAgIH0KICBdXT48L3N0eWxlPgo8L2RlZnM+CjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHN0eWxlPSdzdHJva2U6IG5vbmU7IGZpbGw6ICNGRkZGRkY7Jy8+CjxkZWZzPgogIDxjbGlwUGF0aCBpZD0nY3BNQzR3TUh3M01qQXVNREI4TUM0d01IdzFOell1TURBPSc+CiAgICA8cmVjdCB4PScwLjAwJyB5PScwLjAwJyB3aWR0aD0nNzIwLjAwJyBoZWlnaHQ9JzU3Ni4wMCcgLz4KICA8L2NsaXBQYXRoPgo8L2RlZnM+CjxnIGNsaXAtcGF0aD0ndXJsKCNjcE1DNHdNSHczTWpBdU1EQjhNQzR3TUh3MU56WXVNREE9KSc+CjwvZz4KPGRlZnM+CiAgPGNsaXBQYXRoIGlkPSdjcE1Ua3VNREY4TWpJd0xqazVmREU1TGpBeGZERTNNaTQ1T1E9PSc+CiAgICA8cmVjdCB4PScxOS4wMScgeT0nMTkuMDEnIHdpZHRoPScyMDEuOTgnIGhlaWdodD0nMTUzLjk4JyAvPgogIDwvY2xpcFBhdGg+CjwvZGVmcz4KPGcgY2xpcC1wYXRoPSd1cmwoI2NwTVRrdU1ERjhNakl3TGprNWZERTVMakF4ZkRFM01pNDVPUT09KSc+Cjxwb2x5bGluZSBwb2ludHM9JzI2LjQ5LDE3Mi44NyAzOS44NSwxNTUuNDcgNTMuMjEsMTU0LjM3IDY2LjU3LDEyMi41MiA3OS45MiwxMjMuNjIgOTMuMjgsMTIzLjY4IDEwNi42NCwxMDEuODQgMTIwLjAwLDg5LjQyIDEzMy4zNiw4MC42OSAxNDYuNzIsNzguMzUgMTYwLjA4LDUxLjk4IDE3My40Myw1MS43OSAxODYuNzksNTAuNjIgMjAwLjE1LDU0LjYzIDIxMy41MSwxNC42OSAnIHN0eWxlPSdzdHJva2Utd2lkdGg6IDMuMDA7IHN0cm9rZTogIzgwQzY4NDsnIC8+CjwvZz4KPGRlZnM+CiAgPGNsaXBQYXRoIGlkPSdjcE1DNHdNSHd5TkRBdU1EQjhNQzR3TUh3eE9USXVNREE9Jz4KICAgIDxyZWN0IHg9JzAuMDAnIHk9JzAuMDAnIHdpZHRoPScyNDAuMDAnIGhlaWdodD0nMTkyLjAwJyAvPgogIDwvY2xpcFBhdGg+CjwvZGVmcz4KPGcgY2xpcC1wYXRoPSd1cmwoI2NwTUM0d01Id3lOREF1TURCOE1DNHdNSHd4T1RJdU1EQT0pJz4KPC9nPgo8ZGVmcz4KICA8Y2xpcFBhdGggaWQ9J2NwTWpVNUxqQXhmRFEyTUM0NU9Yd3hPUzR3TVh3eE56SXVPVGs9Jz4KICAgIDxyZWN0IHg9JzI1OS4wMScgeT0nMTkuMDEnIHdpZHRoPScyMDEuOTgnIGhlaWdodD0nMTUzLjk4JyAvPgogIDwvY2xpcFBhdGg+CjwvZGVmcz4KPGcgY2xpcC1wYXRoPSd1cmwoI2NwTWpVNUxqQXhmRFEyTUM0NU9Yd3hPUzR3TVh3eE56SXVPVGs9KSc+Cjxwb2x5bGluZSBwb2ludHM9JzI2Ni40OSwxNjQuNTAgMjc5Ljg1LDE2MS4wOCAyOTMuMjEsMTU2LjkzIDMwNi41NywxNTEuOTMgMzE5LjkyLDE0NS45MiAzMzMuMjgsMTM4Ljc2IDM0Ni42NCwxMzAuMjggMzYwLjAwLDEyMC4zNyAzNzMuMzYsMTA4Ljk3IDM4Ni43Miw5Ni4yMiA0MDAuMDgsODIuNTMgNDEzLjQzLDY4LjczIDQyNi43OSw1Ni4xNSA0NDAuMTUsNDYuNTIgNDUzLjUxLDQxLjUxICcgc3R5bGU9J3N0cm9rZS13aWR0aDogMy4wMDsgc3Ryb2tlOiAjODBDNjg0OycgLz4KPC9nPgo8ZGVmcz4KICA8Y2xpcFBhdGggaWQ9J2NwTWpRd0xqQXdmRFE0TUM0d01Id3dMakF3ZkRFNU1pNHdNQT09Jz4KICAgIDxyZWN0IHg9JzI0MC4wMCcgeT0nMC4wMCcgd2lkdGg9JzI0MC4wMCcgaGVpZ2h0PScxOTIuMDAnIC8+CiAgPC9jbGlwUGF0aD4KPC9kZWZzPgo8ZyBjbGlwLXBhdGg9J3VybCgjY3BNalF3TGpBd2ZEUTRNQzR3TUh3d0xqQXdmREU1TWk0d01BPT0pJz4KPC9nPgo8ZyBjbGlwLXBhdGg9J3VybCgjY3BNalU1TGpBeGZEUTJNQzQ1T1h3eE9TNHdNWHd4TnpJdU9Uaz0pJz4KPHRleHQgeD0nMzEyLjQ2JyB5PScxMDIuMDAnIHN0eWxlPSdmb250LXNpemU6IDE1Ljg0cHg7ZmlsbDogIzgwQzY4NDsgZm9udC1mYW1pbHk6ICJMaWJlcmF0aW9uIFNhbnMiOycgdGV4dExlbmd0aD0nMTIuOTVweCcgbGVuZ3RoQWRqdXN0PSdzcGFjaW5nQW5kR2x5cGhzJz53PC90ZXh0Pgo8dGV4dCB4PSczMjUuNDAnIHk9JzEwNS4wMycgc3R5bGU9J2ZvbnQtc2l6ZTogMTEuMDlweDtmaWxsOiAjODBDNjg0OyBmb250LWZhbWlseTogIkxpYmVyYXRpb24gU2FucyI7JyB0ZXh0TGVuZ3RoPSc3LjA1cHgnIGxlbmd0aEFkanVzdD0nc3BhY2luZ0FuZEdseXBocyc+MTwvdGV4dD4KPHRleHQgeD0nMzMyLjQ1JyB5PScxMDIuMDAnIHN0eWxlPSdmb250LXNpemU6IDE5LjgwcHg7ZmlsbDogIzgwQzY4NDsgZm9udC1mYW1pbHk6ICJEZWphVnUgU2FucyI7JyB0ZXh0TGVuZ3RoPSc3LjczcHgnIGxlbmd0aEFkanVzdD0nc3BhY2luZ0FuZEdseXBocyc+KDwvdGV4dD4KPHRleHQgeD0nMzQwLjE4JyB5PScxMDIuMDAnIHN0eWxlPSdmb250LXNpemU6IDE1Ljg0cHg7ZmlsbDogIzgwQzY4NDsgZm9udC1mYW1pbHk6ICJMaWJlcmF0aW9uIFNhbnMiOycgdGV4dExlbmd0aD0nNi4yMXB4JyBsZW5ndGhBZGp1c3Q9J3NwYWNpbmdBbmRHbHlwaHMnPnQ8L3RleHQ+Cjx0ZXh0IHg9JzM0Ni4zOCcgeT0nMTAyLjAwJyBzdHlsZT0nZm9udC1zaXplOiAxOS44MHB4O2ZpbGw6ICM4MEM2ODQ7IGZvbnQtZmFtaWx5OiAiRGVqYVZ1IFNhbnMiOycgdGV4dExlbmd0aD0nNy43M3B4JyBsZW5ndGhBZGp1c3Q9J3NwYWNpbmdBbmRHbHlwaHMnPik8L3RleHQ+CjxsaW5lIHgxPSc0MjYuNzknIHkxPScxMzEuNjQnIHgyPSc0NTMuNTEnIHkyPScxNjcuMjknIHN0eWxlPSdzdHJva2Utd2lkdGg6IDMuMDA7IHN0cm9rZTogIzQxNDE0MTsnIC8+Cjxwb2x5bGluZSBwb2ludHM9JzQzNi45NiwxNjAuMjEgNDUzLjUxLDE2Ny4yOSA0NTEuMzYsMTQ5LjQyICcgc3R5bGU9J3N0cm9rZS13aWR0aDogMy4wMDsgc3Ryb2tlOiAjNDE0MTQxOycgLz4KPC9nPgo8ZGVmcz4KICA8Y2xpcFBhdGggaWQ9J2NwTkRrNUxqQXhmRGN3TUM0NU9Yd3hPUzR3TVh3eE56SXVPVGs9Jz4KICAgIDxyZWN0IHg9JzQ5OS4wMScgeT0nMTkuMDEnIHdpZHRoPScyMDEuOTgnIGhlaWdodD0nMTUzLjk4JyAvPgogIDwvY2xpcFBhdGg+CjwvZGVmcz4KPGcgY2xpcC1wYXRoPSd1cmwoI2NwTkRrNUxqQXhmRGN3TUM0NU9Yd3hPUzR3TVh3eE56SXVPVGs9KSc+CjwvZz4KPGRlZnM+CiAgPGNsaXBQYXRoIGlkPSdjcE1Ua3VNREY4TWpJd0xqazVmREl4TVM0d01Yd3pOalF1T1RrPSc+CiAgICA8cmVjdCB4PScxOS4wMScgeT0nMjExLjAxJyB3aWR0aD0nMjAxLjk4JyBoZWlnaHQ9JzE1My45OCcgLz4KICA8L2NsaXBQYXRoPgo8L2RlZnM+CjxnIGNsaXAtcGF0aD0ndXJsKCNjcE1Ua3VNLine truncated
|
||||
<p><img role="img" data-src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBlbmNvZGluZz0nVVRGLTgnID8+CjxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycgY2xhc3M9J3N2Z2xpdGUnIHdpZHRoPSc3MjAuMDBwdCcgaGVpZ2h0PSc1NzYuMDBwdCcgdmlld0JveD0nMCAwIDcyMC4wMCA1NzYuMDAnPgo8ZGVmcz4KICA8c3R5bGUgdHlwZT0ndGV4dC9jc3MnPjwhW0NEQVRBWwogICAgLnN2Z2xpdGUgbGluZSwgLnN2Z2xpdGUgcG9seWxpbmUsIC5zdmdsaXRlIHBvbHlnb24sIC5zdmdsaXRlIHBhdGgsIC5zdmdsaXRlIHJlY3QsIC5zdmdsaXRlIGNpcmNsZSB7CiAgICAgIGZpbGw6IG5vbmU7CiAgICAgIHN0cm9rZTogIzAwMDAwMDsKICAgICAgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kOwogICAgICBzdHJva2UtbGluZWpvaW46IHJvdW5kOwogICAgICBzdHJva2UtbWl0ZXJsaW1pdDogMTAuMDA7CiAgICB9CiAgICAuc3ZnbGl0ZSB0ZXh0IHsKICAgICAgd2hpdGUtc3BhY2U6IHByZTsKICAgIH0KICBdXT48L3N0eWxlPgo8L2RlZnM+CjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHN0eWxlPSdzdHJva2U6IG5vbmU7IGZpbGw6ICNGRkZGRkY7Jy8+CjxkZWZzPgogIDxjbGlwUGF0aCBpZD0nY3BNQzR3TUh3M01qQXVNREI4TUM0d01IdzFOell1TURBPSc+CiAgICA8cmVjdCB4PScwLjAwJyB5PScwLjAwJyB3aWR0aD0nNzIwLjAwJyBoZWlnaHQ9JzU3Ni4wMCcgLz4KICA8L2NsaXBQYXRoPgo8L2RlZnM+CjxnIGNsaXAtcGF0aD0ndXJsKCNjcE1DNHdNSHczTWpBdU1EQjhNQzR3TUh3MU56WXVNREE9KSc+CjwvZz4KPGRlZnM+CiAgPGNsaXBQYXRoIGlkPSdjcE1Ua3VNREY4TWpJd0xqazVmREU1TGpBeGZERTNNaTQ1T1E9PSc+CiAgICA8cmVjdCB4PScxOS4wMScgeT0nMTkuMDEnIHdpZHRoPScyMDEuOTgnIGhlaWdodD0nMTUzLjk4JyAvPgogIDwvY2xpcFBhdGg+CjwvZGVmcz4KPGcgY2xpcC1wYXRoPSd1cmwoI2NwTVRrdU1ERjhNakl3TGprNWZERTVMakF4ZkRFM01pNDVPUT09KSc+Cjxwb2x5bGluZSBwb2ludHM9JzI2LjQ5LDE0Ny43NCAzOS44NSwxNjUuMTYgNTMuMjEsMTQxLjc0IDY2LjU3LDEyNy43MSA3OS45MiwxMjAuNzkgOTMuMjgsMTE3Ljg4IDEwNi42NCw4NC42MyAxMjAuMDAsOTcuMzUgMTMzLjM2LDU3LjA0IDE0Ni43Miw3Ni41MyAxNjAuMDgsNDYuODQgMTczLjQzLDIyLjY2IDE4Ni43OSw2NC44OCAyMDAuMTUsMzguODcgMjEzLjUxLDI2LjYxICcgc3R5bGU9J3N0cm9rZS13aWR0aDogMy4wMDsgc3Ryb2tlOiAjODBDNjg0OycgLz4KPC9nPgo8ZGVmcz4KICA8Y2xpcFBhdGggaWQ9J2NwTUM0d01Id3lOREF1TURCOE1DNHdNSHd4T1RJdU1EQT0nPgogICAgPHJlY3QgeD0nMC4wMCcgeT0nMC4wMCcgd2lkdGg9JzI0MC4wMCcgaGVpZ2h0PScxOTIuMDAnIC8+CiAgPC9jbGlwUGF0aD4KPC9kZWZzPgo8ZyBjbGlwLXBhdGg9J3VybCgjY3BNQzR3TUh3eU5EQXVNREI4TUM0d01Id3hPVEl1TURBPSknPgo8L2c+CjxkZWZzPgogIDxjbGlwUGF0aCBpZD0nY3BNalU1TGpBeGZEUTJNQzQ1T1h3eE9TNHdNWHd4TnpJdU9Uaz0nPgogICAgPHJlY3QgeD0nMjU5LjAxJyB5PScxOS4wMScgd2lkdGg9JzIwMS45OCcgaGVpZ2h0PScxNTMuOTgnIC8+CiAgPC9jbGlwUGF0aD4KPC9kZWZzPgo8ZyBjbGlwLXBhdGg9J3VybCgjY3BNalU1TGpBeGZEUTJNQzQ1T1h3eE9TNHdNWHd4TnpJdU9Uaz0pJz4KPHBvbHlsaW5lIHBvaW50cz0nMjY2LjQ5LDE2My44MiAyNzkuODUsMTU5LjM4IDI5My4yMSwxNTMuNzUgMzA2LjU3LDE0Ni42NyAzMTkuOTIsMTM3Ljg0IDMzMy4yOCwxMjYuOTYgMzQ2LjY0LDExMy43OSAzNjAuMDAsOTguMzIgMzczLjM2LDgwLjk1IDM4Ni43Miw2Mi43NyA0MDAuMDgsNDUuNzYgNDEzLjQzLDMyLjUwIDQyNi43OSwyNS40NiA0NDAuMTUsMjUuODYgNDUzLjUxLDMzLjEyICcgc3R5bGU9J3N0cm9rZS13aWR0aDogMy4wMDsgc3Ryb2tlOiAjODBDNjg0OycgLz4KPC9nPgo8ZGVmcz4KICA8Y2xpcFBhdGggaWQ9J2NwTWpRd0xqQXdmRFE0TUM0d01Id3dMakF3ZkRFNU1pNHdNQT09Jz4KICAgIDxyZWN0IHg9JzI0MC4wMCcgeT0nMC4wMCcgd2lkdGg9JzI0MC4wMCcgaGVpZ2h0PScxOTIuMDAnIC8+CiAgPC9jbGlwUGF0aD4KPC9kZWZzPgo8ZyBjbGlwLXBhdGg9J3VybCgjY3BNalF3TGpBd2ZEUTRNQzR3TUh3d0xqQXdmREU1TWk0d01BPT0pJz4KPC9nPgo8ZyBjbGlwLXBhdGg9J3VybCgjY3BNalU1TGpBeGZEUTJNQzQ1T1h3eE9TNHdNWHd4TnpJdU9Uaz0pJz4KPHRleHQgeD0nMzEyLjQ2JyB5PScxMDIuMDAnIHN0eWxlPSdmb250LXNpemU6IDE1Ljg0cHg7ZmlsbDogIzgwQzY4NDsgZm9udC1mYW1pbHk6ICJMaWJlcmF0aW9uIFNhbnMiOycgdGV4dExlbmd0aD0nMTIuOTVweCcgbGVuZ3RoQWRqdXN0PSdzcGFjaW5nQW5kR2x5cGhzJz53PC90ZXh0Pgo8dGV4dCB4PSczMjUuNDAnIHk9JzEwNS4wMycgc3R5bGU9J2ZvbnQtc2l6ZTogMTEuMDlweDtmaWxsOiAjODBDNjg0OyBmb250LWZhbWlseTogIkxpYmVyYXRpb24gU2FucyI7JyB0ZXh0TGVuZ3RoPSc3LjA1cHgnIGxlbmd0aEFkanVzdD0nc3BhY2luZ0FuZEdseXBocyc+MTwvdGV4dD4KPHRleHQgeD0nMzMyLjQ1JyB5PScxMDIuMDAnIHN0eWxlPSdmb250LXNpemU6IDE5LjgwcHg7ZmlsbDogIzgwQzY4NDsgZm9udC1mYW1pbHk6ICJEZWphVnUgU2FucyI7JyB0ZXh0TGVuZ3RoPSc3LjczcHgnIGxlbmd0aEFkanVzdD0nc3BhY2luZ0FuZEdseXBocyc+KDwvdGV4dD4KPHRleHQgeD0nMzQwLjE4JyB5PScxMDIuMDAnIHN0eWxlPSdmb250LXNpemU6IDE1Ljg0cHg7ZmlsbDogIzgwQzY4NDsgZm9udC1mYW1pbHk6ICJMaWJlcmF0aW9uIFNhbnMiOycgdGV4dExlbmd0aD0nNi4yMXB4JyBsZW5ndGhBZGp1c3Q9J3NwYWNpbmdBbmRHbHlwaHMnPnQ8L3RleHQ+Cjx0ZXh0IHg9JzM0Ni4zOCcgeT0nMTAyLjAwJyBzdHlsZT0nZm9udC1zaXplOiAxOS44MHB4O2ZpbGw6ICM4MEM2ODQ7IGZvbnQtZmFtaWx5OiAiRGVqYVZ1IFNhbnMiOycgdGV4dExlbmd0aD0nNy43M3B4JyBsZW5ndGhBZGp1c3Q9J3NwYWNpbmdBbmRHbHlwaHMnPik8L3RleHQ+CjxsaW5lIHgxPSc0MjYuNzknIHkxPScxMzEuNjQnIHgyPSc0NTMuNTEnIHkyPScxNjcuMjknIHN0eWxlPSdzdHJva2Utd2lkdGg6IDMuMDA7IHN0cm9rZTogIzQxNDE0MTsnIC8+Cjxwb2x5bGluZSBwb2ludHM9JzQzNi45NiwxNjAuMjEgNDUzLjUxLDE2Ny4yOSA0NTEuMzYsMTQ5LjQyICcgc3R5bGU9J3N0cm9rZS13aWR0aDogMy4wMDsgc3Ryb2tlOiAjNDE0MTQxOycgLz4KPC9nPgo8ZGVmcz4KICA8Y2xpcFBhdGggaWQ9J2NwTkRrNUxqQXhmRGN3TUM0NU9Yd3hPUzR3TVh3eE56SXVPVGs9Jz4KICAgIDxyZWN0IHg9JzQ5OS4wMScgeT0nMTkuMDEnIHdpZHRoPScyMDEuOTgnIGhlaWdodD0nMTUzLjk4JyAvPgogIDwvY2xpcFBhdGg+CjwvZGVmcz4KPGcgY2xpcC1wYXRoPSd1cmwoI2NwTkRrNUxqQXhmRGN3TUM0NU9Yd3hPUzR3TVh3eE56SXVPVGs9KSc+CjwvZz4KPGRlZnM+CiAgPGNsaXBQYXRoIGlkPSdjcE1Ua3VNREY4TWpJd0xqazVmREl4TVM0d01Yd3pOalF1T1RrPSc+CiAgICA8cmVjdCB4PScxOS4wMScgeT0nMjExLjAxJyB3aWR0aD0nMjAxLjk4JyBoZWlnaHQ9JzE1My45OCcgLz4KICA8L2NsaXBQYXRoPgo8L2RlZnM+CjxnIGNsaXAtcGF0aD0ndXJsKCNjcE1Ua3VNREY4Line truncated
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25941,7 +25941,7 @@ Berrisch, J. <span class="citation" data-cites="berrisch2025rcpptimer">(<a href=
|
||||
</div>
|
||||
<div id="tabset-1-2">
|
||||
<div class="cell">
|
||||
<div class="sourceCode cell-code hidden" id="cb2" data-startfrom="855" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 854;"><span id="cb2-855"><a href></a>d3 <span class="op">=</span> <span class="pp">require</span>(<span class="st">"d3@7"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="sourceCode cell-code hidden" id="cb2" data-startfrom="850" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 849;"><span id="cb2-850"><a href></a>d3 <span class="op">=</span> <span class="pp">require</span>(<span class="st">"d3@7"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output cell-output-display">
|
||||
<div id="ojs-cell-1" data-nodetype="declaration">
|
||||
|
||||
@@ -25949,7 +25949,7 @@ Berrisch, J. <span class="citation" data-cites="berrisch2025rcpptimer">(<a href=
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="sourceCode cell-code hidden" id="cb3" data-startfrom="859" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 858;"><span id="cb3-859"><a href></a>cdf_data <span class="op">=</span> <span class="fu">FileAttachment</span>(<span class="st">"assets/crps_learning/weights_plot/cdf_data.csv"</span>)<span class="op">.</span><span class="fu">csv</span>({ <span class="dt">typed</span><span class="op">:</span> <span class="kw">true</span> })</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="sourceCode cell-code hidden" id="cb3" data-startfrom="854" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 853;"><span id="cb3-854"><a href></a>cdf_data <span class="op">=</span> <span class="fu">FileAttachment</span>(<span class="st">"assets/crps_learning/weights_plot/cdf_data.csv"</span>)<span class="op">.</span><span class="fu">csv</span>({ <span class="dt">typed</span><span class="op">:</span> <span class="kw">true</span> })</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output cell-output-display">
|
||||
<div id="ojs-cell-2" data-nodetype="declaration">
|
||||
|
||||
@@ -25957,190 +25957,190 @@ Berrisch, J. <span class="citation" data-cites="berrisch2025rcpptimer">(<a href=
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="sourceCode cell-code hidden" id="cb4" data-startfrom="864" data-source-offset="-0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 863;"><span id="cb4-864"><a href></a><span class="kw">function</span> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data) {</span>
|
||||
<span id="cb4-865"><a href></a> <span class="co">// Update axes with transitions</span></span>
|
||||
<span id="cb4-866"><a href></a> x<span class="op">.</span><span class="fu">domain</span>(d3<span class="op">.</span><span class="fu">extent</span>(data<span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">x</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-867"><a href></a> g<span class="op">.</span><span class="fu">select</span>(<span class="st">".x-axis"</span>)<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1500</span>)<span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-868"><a href></a> y<span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> d3<span class="op">.</span><span class="fu">max</span>(data<span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">y</span>)])<span class="op">;</span></span>
|
||||
<span id="cb4-869"><a href></a> g<span class="op">.</span><span class="fu">select</span>(<span class="st">".y-axis"</span>)<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1500</span>)<span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-870"><a href></a></span>
|
||||
<span id="cb4-871"><a href></a> <span class="co">// Group data by basis function</span></span>
|
||||
<span id="cb4-872"><a href></a> <span class="kw">const</span> dataByFunction <span class="op">=</span> <span class="bu">Array</span><span class="op">.</span><span class="fu">from</span>(d3<span class="op">.</span><span class="fu">group</span>(data<span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">b</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-873"><a href></a> <span class="kw">const</span> keyFn <span class="op">=</span> d <span class="kw">=></span> d[<span class="dv">0</span>]<span class="op">;</span></span>
|
||||
<span id="cb4-874"><a href></a></span>
|
||||
<span id="cb4-875"><a href></a> <span class="co">// Update basis function lines</span></span>
|
||||
<span id="cb4-876"><a href></a> <span class="kw">const</span> u <span class="op">=</span> linesGroup<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"path"</span>)<span class="op">.</span><span class="fu">data</span>(dataByFunction<span class="op">,</span> keyFn)<span class="op">;</span></span>
|
||||
<span id="cb4-877"><a href></a> u<span class="op">.</span><span class="fu">join</span>(</span>
|
||||
<span id="cb4-878"><a href></a> enter <span class="kw">=></span> enter<span class="op">.</span><span class="fu">append</span>(<span class="st">"path"</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">"fill"</span><span class="op">,</span><span class="st">"none"</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke-width"</span><span class="op">,</span><span class="dv">3</span>)</span>
|
||||
<span id="cb4-879"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> (_<span class="op">,</span> i) <span class="kw">=></span> <span class="fu">color</span>(i))<span class="op">.</span><span class="fu">attr</span>(<span class="st">"d"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">line</span>(d[<span class="dv">1</span>]<span class="op">.</span><span class="fu">map</span>(pt <span class="kw">=></span> ({<span class="dt">x</span><span class="op">:</span> pt<span class="op">.</span><span class="at">x</span><span class="op">,</span> <span class="dt">y</span><span class="op">:</span> <span class="dv">0</span>}))))</span>
|
||||
<span id="cb4-880"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"opacity"</span><span class="op">,</span><span class="dv">0</span>)<span class="op">,</span></span>
|
||||
<span id="cb4-881"><a href></a> update <span class="kw">=></span> update<span class="op">,</span></span>
|
||||
<span id="cb4-882"><a href></a> exit <span class="kw">=></span> exit<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1000</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"opacity"</span><span class="op">,</span><span class="dv">0</span>)<span class="op">.</span><span class="fu">remove</span>()</span>
|
||||
<span id="cb4-883"><a href></a> )</span>
|
||||
<span id="cb4-884"><a href></a> <span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1000</span>)</span>
|
||||
<span id="cb4-885"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"d"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">line</span>(d[<span class="dv">1</span>]))</span>
|
||||
<span id="cb4-886"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> (_<span class="op">,</span> i) <span class="kw">=></span> <span class="fu">color</span>(i))</span>
|
||||
<span id="cb4-887"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"opacity"</span><span class="op">,</span><span class="dv">1</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-888"><a href></a>}</span>
|
||||
<span id="cb4-889"><a href></a></span>
|
||||
<span id="cb4-890"><a href></a>chart <span class="op">=</span> {</span>
|
||||
<span id="cb4-891"><a href></a> <span class="co">// State variable for selected mu parameter</span></span>
|
||||
<span id="cb4-892"><a href></a> <span class="kw">let</span> selectedMu <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb4-893"><a href></a> </span>
|
||||
<span id="cb4-894"><a href></a> <span class="kw">const</span> filteredData <span class="op">=</span> () <span class="kw">=></span> cdf_data<span class="op">.</span><span class="fu">filter</span>(d <span class="kw">=></span></span>
|
||||
<span id="cb4-895"><a href></a> <span class="bu">Math</span><span class="op">.</span><span class="fu">abs</span>(selectedMu <span class="op">-</span> d<span class="op">.</span><span class="at">mu</span>) <span class="op"><</span> <span class="fl">0.001</span></span>
|
||||
<span id="cb4-896"><a href></a> )<span class="op">;</span></span>
|
||||
<span id="cb4-897"><a href></a> </span>
|
||||
<span id="cb4-898"><a href></a> <span class="kw">const</span> container <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">"div"</span>)</span>
|
||||
<span id="cb4-899"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"max-width"</span><span class="op">,</span> <span class="st">"none"</span>)</span>
|
||||
<span id="cb4-900"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-901"><a href></a> </span>
|
||||
<span id="cb4-902"><a href></a> <span class="kw">const</span> controlsContainer <span class="op">=</span> container<span class="op">.</span><span class="fu">append</span>(<span class="st">"div"</span>)</span>
|
||||
<span id="cb4-903"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"display"</span><span class="op">,</span> <span class="st">"flex"</span>)</span>
|
||||
<span id="cb4-904"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"gap"</span><span class="op">,</span> <span class="st">"20px"</span>)</span>
|
||||
<span id="cb4-905"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"align-items"</span><span class="op">,</span> <span class="st">"center"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-906"><a href></a> </span>
|
||||
<span id="cb4-907"><a href></a> <span class="co">// Single slider control for mu</span></span>
|
||||
<span id="cb4-908"><a href></a> <span class="kw">const</span> sliderContainer <span class="op">=</span> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'div'</span>)</span>
|
||||
<span id="cb4-909"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'display'</span><span class="op">,</span><span class="st">'flex'</span>)</span>
|
||||
<span id="cb4-910"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'align-items'</span><span class="op">,</span><span class="st">'center'</span>)</span>
|
||||
<span id="cb4-911"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'gap'</span><span class="op">,</span><span class="st">'10px'</span>)</span>
|
||||
<span id="cb4-912"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'flex'</span><span class="op">,</span><span class="st">'1'</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-913"><a href></a> </span>
|
||||
<span id="cb4-914"><a href></a> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'label'</span>)</span>
|
||||
<span id="cb4-915"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">'Naive:'</span>)</span>
|
||||
<span id="cb4-916"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span><span class="st">'20px'</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-917"><a href></a> </span>
|
||||
<span id="cb4-918"><a href></a> <span class="kw">const</span> muSlider <span class="op">=</span> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'input'</span>)</span>
|
||||
<span id="cb4-919"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">'type'</span><span class="op">,</span><span class="st">'range'</span>)</span>
|
||||
<span id="cb4-920"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">'min'</span><span class="op">,</span> <span class="dv">0</span>)</span>
|
||||
<span id="cb4-921"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">'max'</span><span class="op">,</span> <span class="dv">1</span>)</span>
|
||||
<span id="cb4-922"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">'step'</span><span class="op">,</span> <span class="fl">0.1</span>)</span>
|
||||
<span id="cb4-923"><a href></a> <span class="op">.</span><span class="fu">property</span>(<span class="st">'value'</span><span class="op">,</span> selectedMu)</span>
|
||||
<span id="cb4-924"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">'input'</span><span class="op">,</span> <span class="kw">function</span>(<span class="bu">event</span>) {</span>
|
||||
<span id="cb4-925"><a href></a> selectedMu <span class="op">=</span> <span class="op">+</span><span class="kw">this</span><span class="op">.</span><span class="at">value</span><span class="op">;</span></span>
|
||||
<span id="cb4-926"><a href></a> muDisplay<span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-927"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb4-928"><a href></a> })</span>
|
||||
<span id="cb4-929"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'width'</span><span class="op">,</span> <span class="st">'100%'</span>)</span>
|
||||
<span id="cb4-930"><a href></a> <span class="co">//.style('-webkit-appearance', 'none')</span></span>
|
||||
<span id="cb4-931"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'appearance'</span><span class="op">,</span> <span class="st">'none'</span>)</span>
|
||||
<span id="cb4-932"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'height'</span><span class="op">,</span> <span class="st">'8px'</span>)</span>
|
||||
<span id="cb4-933"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'background'</span><span class="op">,</span> <span class="st">'#BDBDBDFF'</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-934"><a href></a> </span>
|
||||
<span id="cb4-935"><a href></a> <span class="kw">const</span> muDisplay <span class="op">=</span> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'span'</span>)</span>
|
||||
<span id="cb4-936"><a href></a> <span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))</span>
|
||||
<span id="cb4-937"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span><span class="st">'20px'</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-938"><a href></a> </span>
|
||||
<span id="cb4-939"><a href></a> <span class="co">// Add Reset button</span></span>
|
||||
<span id="cb4-940"><a href></a> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'button'</span>)</span>
|
||||
<span id="cb4-941"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">'Reset'</span>)</span>
|
||||
<span id="cb4-942"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span> <span class="st">'20px'</span>)</span>
|
||||
<span id="cb4-943"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'align-self'</span><span class="op">,</span> <span class="st">'center'</span>)</span>
|
||||
<span id="cb4-944"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'margin-left'</span><span class="op">,</span> <span class="st">'auto'</span>)</span>
|
||||
<span id="cb4-945"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">'click'</span><span class="op">,</span> () <span class="kw">=></span> {</span>
|
||||
<span id="cb4-946"><a href></a> selectedMu <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb4-947"><a href></a> muSlider<span class="op">.</span><span class="fu">property</span>(<span class="st">'value'</span><span class="op">,</span> selectedMu)<span class="op">;</span></span>
|
||||
<span id="cb4-948"><a href></a> muDisplay<span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-949"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb4-950"><a href></a> })<span class="op">;</span></span>
|
||||
<span id="cb4-951"><a href></a></span>
|
||||
<span id="cb4-952"><a href></a> <span class="co">// Build SVG</span></span>
|
||||
<span id="cb4-953"><a href></a> <span class="kw">const</span> width <span class="op">=</span> <span class="dv">600</span><span class="op">;</span></span>
|
||||
<span id="cb4-954"><a href></a> <span class="kw">const</span> height <span class="op">=</span> <span class="dv">450</span><span class="op">;</span></span>
|
||||
<span id="cb4-955"><a href></a> <span class="kw">const</span> margin <span class="op">=</span> {<span class="dt">top</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">right</span><span class="op">:</span> <span class="dv">20</span><span class="op">,</span> <span class="dt">bottom</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">left</span><span class="op">:</span> <span class="dv">40</span>}<span class="op">;</span></span>
|
||||
<span id="cb4-956"><a href></a> <span class="kw">const</span> innerWidth <span class="op">=</span> width <span class="op">-</span> margin<span class="op">.</span><span class="at">left</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">right</span><span class="op">;</span></span>
|
||||
<span id="cb4-957"><a href></a> <span class="kw">const</span> innerHeight <span class="op">=</span> height <span class="op">-</span> margin<span class="op">.</span><span class="at">top</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">bottom</span><span class="op">;</span></span>
|
||||
<span id="cb4-958"><a href></a></span>
|
||||
<span id="cb4-959"><a href></a> <span class="co">// Set controls container width to match SVG plot width</span></span>
|
||||
<span id="cb4-960"><a href></a> controlsContainer<span class="op">.</span><span class="fu">style</span>(<span class="st">"max-width"</span><span class="op">,</span> <span class="st">"none"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-961"><a href></a> <span class="co">// Distribute each control evenly and make sliders full-width</span></span>
|
||||
<span id="cb4-962"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"div"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"flex"</span><span class="op">,</span> <span class="st">"1"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"min-width"</span><span class="op">,</span> <span class="st">"0px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-963"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"input"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"box-sizing"</span><span class="op">,</span> <span class="st">"border-box"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-964"><a href></a> </span>
|
||||
<span id="cb4-965"><a href></a> <span class="co">// Create scales</span></span>
|
||||
<span id="cb4-966"><a href></a> <span class="kw">const</span> x <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
|
||||
<span id="cb4-967"><a href></a> <span class="op">.</span><span class="fu">range</span>([<span class="dv">0</span><span class="op">,</span> innerWidth])<span class="op">;</span></span>
|
||||
<span id="cb4-968"><a href></a> </span>
|
||||
<span id="cb4-969"><a href></a> <span class="kw">const</span> y <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
|
||||
<span id="cb4-970"><a href></a> <span class="op">.</span><span class="fu">range</span>([innerHeight<span class="op">,</span> <span class="dv">0</span>])<span class="op">;</span></span>
|
||||
<span id="cb4-971"><a href></a> </span>
|
||||
<span id="cb4-972"><a href></a> <span class="co">// Create a color scale for the basis functions</span></span>
|
||||
<span id="cb4-973"><a href></a> <span class="kw">const</span> color <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleOrdinal</span>([<span class="st">"#80C684FF"</span><span class="op">,</span> <span class="st">"#FFD44EFF"</span><span class="op">,</span> <span class="st">"#D81A5FFF"</span>])<span class="op">;</span></span>
|
||||
<span id="cb4-974"><a href></a> </span>
|
||||
<span id="cb4-975"><a href></a> <span class="co">// Create SVG</span></span>
|
||||
<span id="cb4-976"><a href></a> <span class="kw">const</span> svg <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">"svg"</span>)</span>
|
||||
<span id="cb4-977"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)</span>
|
||||
<span id="cb4-978"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"height"</span><span class="op">,</span> <span class="st">"auto"</span>)</span>
|
||||
<span id="cb4-979"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"viewBox"</span><span class="op">,</span> [<span class="dv">0</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> width<span class="op">,</span> height])</span>
|
||||
<span id="cb4-980"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"preserveAspectRatio"</span><span class="op">,</span> <span class="st">"xMidYMid meet"</span>)</span>
|
||||
<span id="cb4-981"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"style"</span><span class="op">,</span> <span class="st">"max-width: 100%; height: auto;"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-982"><a href></a> </span>
|
||||
<span id="cb4-983"><a href></a> <span class="co">// Create the chart group</span></span>
|
||||
<span id="cb4-984"><a href></a> <span class="kw">const</span> g <span class="op">=</span> svg<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb4-985"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"transform"</span><span class="op">,</span> <span class="vs">`translate(</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">left</span><span class="sc">}</span><span class="vs">,</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">top</span><span class="sc">}</span><span class="vs">)`</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-986"><a href></a> </span>
|
||||
<span id="cb4-987"><a href></a> <span class="co">// Add axes</span></span>
|
||||
<span id="cb4-988"><a href></a> <span class="kw">const</span> xAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb4-989"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"transform"</span><span class="op">,</span> <span class="vs">`translate(0,</span><span class="sc">${</span>innerHeight<span class="sc">}</span><span class="vs">)`</span>)</span>
|
||||
<span id="cb4-990"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"x-axis"</span>)</span>
|
||||
<span id="cb4-991"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))</span>
|
||||
<div class="sourceCode cell-code hidden" id="cb4" data-startfrom="859" data-source-offset="-0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 858;"><span id="cb4-859"><a href></a><span class="kw">function</span> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data) {</span>
|
||||
<span id="cb4-860"><a href></a> <span class="co">// Update axes with transitions</span></span>
|
||||
<span id="cb4-861"><a href></a> x<span class="op">.</span><span class="fu">domain</span>(d3<span class="op">.</span><span class="fu">extent</span>(data<span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">x</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-862"><a href></a> g<span class="op">.</span><span class="fu">select</span>(<span class="st">".x-axis"</span>)<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1500</span>)<span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-863"><a href></a> y<span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> d3<span class="op">.</span><span class="fu">max</span>(data<span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">y</span>)])<span class="op">;</span></span>
|
||||
<span id="cb4-864"><a href></a> g<span class="op">.</span><span class="fu">select</span>(<span class="st">".y-axis"</span>)<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1500</span>)<span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-865"><a href></a></span>
|
||||
<span id="cb4-866"><a href></a> <span class="co">// Group data by basis function</span></span>
|
||||
<span id="cb4-867"><a href></a> <span class="kw">const</span> dataByFunction <span class="op">=</span> <span class="bu">Array</span><span class="op">.</span><span class="fu">from</span>(d3<span class="op">.</span><span class="fu">group</span>(data<span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">b</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-868"><a href></a> <span class="kw">const</span> keyFn <span class="op">=</span> d <span class="kw">=></span> d[<span class="dv">0</span>]<span class="op">;</span></span>
|
||||
<span id="cb4-869"><a href></a></span>
|
||||
<span id="cb4-870"><a href></a> <span class="co">// Update basis function lines</span></span>
|
||||
<span id="cb4-871"><a href></a> <span class="kw">const</span> u <span class="op">=</span> linesGroup<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"path"</span>)<span class="op">.</span><span class="fu">data</span>(dataByFunction<span class="op">,</span> keyFn)<span class="op">;</span></span>
|
||||
<span id="cb4-872"><a href></a> u<span class="op">.</span><span class="fu">join</span>(</span>
|
||||
<span id="cb4-873"><a href></a> enter <span class="kw">=></span> enter<span class="op">.</span><span class="fu">append</span>(<span class="st">"path"</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">"fill"</span><span class="op">,</span><span class="st">"none"</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke-width"</span><span class="op">,</span><span class="dv">3</span>)</span>
|
||||
<span id="cb4-874"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> (_<span class="op">,</span> i) <span class="kw">=></span> <span class="fu">color</span>(i))<span class="op">.</span><span class="fu">attr</span>(<span class="st">"d"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">line</span>(d[<span class="dv">1</span>]<span class="op">.</span><span class="fu">map</span>(pt <span class="kw">=></span> ({<span class="dt">x</span><span class="op">:</span> pt<span class="op">.</span><span class="at">x</span><span class="op">,</span> <span class="dt">y</span><span class="op">:</span> <span class="dv">0</span>}))))</span>
|
||||
<span id="cb4-875"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"opacity"</span><span class="op">,</span><span class="dv">0</span>)<span class="op">,</span></span>
|
||||
<span id="cb4-876"><a href></a> update <span class="kw">=></span> update<span class="op">,</span></span>
|
||||
<span id="cb4-877"><a href></a> exit <span class="kw">=></span> exit<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1000</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"opacity"</span><span class="op">,</span><span class="dv">0</span>)<span class="op">.</span><span class="fu">remove</span>()</span>
|
||||
<span id="cb4-878"><a href></a> )</span>
|
||||
<span id="cb4-879"><a href></a> <span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1000</span>)</span>
|
||||
<span id="cb4-880"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"d"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">line</span>(d[<span class="dv">1</span>]))</span>
|
||||
<span id="cb4-881"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> (_<span class="op">,</span> i) <span class="kw">=></span> <span class="fu">color</span>(i))</span>
|
||||
<span id="cb4-882"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"opacity"</span><span class="op">,</span><span class="dv">1</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-883"><a href></a>}</span>
|
||||
<span id="cb4-884"><a href></a></span>
|
||||
<span id="cb4-885"><a href></a>chart <span class="op">=</span> {</span>
|
||||
<span id="cb4-886"><a href></a> <span class="co">// State variable for selected mu parameter</span></span>
|
||||
<span id="cb4-887"><a href></a> <span class="kw">let</span> selectedMu <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb4-888"><a href></a> </span>
|
||||
<span id="cb4-889"><a href></a> <span class="kw">const</span> filteredData <span class="op">=</span> () <span class="kw">=></span> cdf_data<span class="op">.</span><span class="fu">filter</span>(d <span class="kw">=></span></span>
|
||||
<span id="cb4-890"><a href></a> <span class="bu">Math</span><span class="op">.</span><span class="fu">abs</span>(selectedMu <span class="op">-</span> d<span class="op">.</span><span class="at">mu</span>) <span class="op"><</span> <span class="fl">0.001</span></span>
|
||||
<span id="cb4-891"><a href></a> )<span class="op">;</span></span>
|
||||
<span id="cb4-892"><a href></a> </span>
|
||||
<span id="cb4-893"><a href></a> <span class="kw">const</span> container <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">"div"</span>)</span>
|
||||
<span id="cb4-894"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"max-width"</span><span class="op">,</span> <span class="st">"none"</span>)</span>
|
||||
<span id="cb4-895"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-896"><a href></a> </span>
|
||||
<span id="cb4-897"><a href></a> <span class="kw">const</span> controlsContainer <span class="op">=</span> container<span class="op">.</span><span class="fu">append</span>(<span class="st">"div"</span>)</span>
|
||||
<span id="cb4-898"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"display"</span><span class="op">,</span> <span class="st">"flex"</span>)</span>
|
||||
<span id="cb4-899"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"gap"</span><span class="op">,</span> <span class="st">"20px"</span>)</span>
|
||||
<span id="cb4-900"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"align-items"</span><span class="op">,</span> <span class="st">"center"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-901"><a href></a> </span>
|
||||
<span id="cb4-902"><a href></a> <span class="co">// Single slider control for mu</span></span>
|
||||
<span id="cb4-903"><a href></a> <span class="kw">const</span> sliderContainer <span class="op">=</span> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'div'</span>)</span>
|
||||
<span id="cb4-904"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'display'</span><span class="op">,</span><span class="st">'flex'</span>)</span>
|
||||
<span id="cb4-905"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'align-items'</span><span class="op">,</span><span class="st">'center'</span>)</span>
|
||||
<span id="cb4-906"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'gap'</span><span class="op">,</span><span class="st">'10px'</span>)</span>
|
||||
<span id="cb4-907"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'flex'</span><span class="op">,</span><span class="st">'1'</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-908"><a href></a> </span>
|
||||
<span id="cb4-909"><a href></a> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'label'</span>)</span>
|
||||
<span id="cb4-910"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">'Naive:'</span>)</span>
|
||||
<span id="cb4-911"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span><span class="st">'20px'</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-912"><a href></a> </span>
|
||||
<span id="cb4-913"><a href></a> <span class="kw">const</span> muSlider <span class="op">=</span> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'input'</span>)</span>
|
||||
<span id="cb4-914"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">'type'</span><span class="op">,</span><span class="st">'range'</span>)</span>
|
||||
<span id="cb4-915"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">'min'</span><span class="op">,</span> <span class="dv">0</span>)</span>
|
||||
<span id="cb4-916"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">'max'</span><span class="op">,</span> <span class="dv">1</span>)</span>
|
||||
<span id="cb4-917"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">'step'</span><span class="op">,</span> <span class="fl">0.1</span>)</span>
|
||||
<span id="cb4-918"><a href></a> <span class="op">.</span><span class="fu">property</span>(<span class="st">'value'</span><span class="op">,</span> selectedMu)</span>
|
||||
<span id="cb4-919"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">'input'</span><span class="op">,</span> <span class="kw">function</span>(<span class="bu">event</span>) {</span>
|
||||
<span id="cb4-920"><a href></a> selectedMu <span class="op">=</span> <span class="op">+</span><span class="kw">this</span><span class="op">.</span><span class="at">value</span><span class="op">;</span></span>
|
||||
<span id="cb4-921"><a href></a> muDisplay<span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-922"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb4-923"><a href></a> })</span>
|
||||
<span id="cb4-924"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'width'</span><span class="op">,</span> <span class="st">'100%'</span>)</span>
|
||||
<span id="cb4-925"><a href></a> <span class="co">//.style('-webkit-appearance', 'none')</span></span>
|
||||
<span id="cb4-926"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'appearance'</span><span class="op">,</span> <span class="st">'none'</span>)</span>
|
||||
<span id="cb4-927"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'height'</span><span class="op">,</span> <span class="st">'8px'</span>)</span>
|
||||
<span id="cb4-928"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'background'</span><span class="op">,</span> <span class="st">'#BDBDBDFF'</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-929"><a href></a> </span>
|
||||
<span id="cb4-930"><a href></a> <span class="kw">const</span> muDisplay <span class="op">=</span> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'span'</span>)</span>
|
||||
<span id="cb4-931"><a href></a> <span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))</span>
|
||||
<span id="cb4-932"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span><span class="st">'20px'</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-933"><a href></a> </span>
|
||||
<span id="cb4-934"><a href></a> <span class="co">// Add Reset button</span></span>
|
||||
<span id="cb4-935"><a href></a> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'button'</span>)</span>
|
||||
<span id="cb4-936"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">'Reset'</span>)</span>
|
||||
<span id="cb4-937"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span> <span class="st">'20px'</span>)</span>
|
||||
<span id="cb4-938"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'align-self'</span><span class="op">,</span> <span class="st">'center'</span>)</span>
|
||||
<span id="cb4-939"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'margin-left'</span><span class="op">,</span> <span class="st">'auto'</span>)</span>
|
||||
<span id="cb4-940"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">'click'</span><span class="op">,</span> () <span class="kw">=></span> {</span>
|
||||
<span id="cb4-941"><a href></a> selectedMu <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb4-942"><a href></a> muSlider<span class="op">.</span><span class="fu">property</span>(<span class="st">'value'</span><span class="op">,</span> selectedMu)<span class="op">;</span></span>
|
||||
<span id="cb4-943"><a href></a> muDisplay<span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))<span class="op">;</span></span>
|
||||
<span id="cb4-944"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb4-945"><a href></a> })<span class="op">;</span></span>
|
||||
<span id="cb4-946"><a href></a></span>
|
||||
<span id="cb4-947"><a href></a> <span class="co">// Build SVG</span></span>
|
||||
<span id="cb4-948"><a href></a> <span class="kw">const</span> width <span class="op">=</span> <span class="dv">600</span><span class="op">;</span></span>
|
||||
<span id="cb4-949"><a href></a> <span class="kw">const</span> height <span class="op">=</span> <span class="dv">450</span><span class="op">;</span></span>
|
||||
<span id="cb4-950"><a href></a> <span class="kw">const</span> margin <span class="op">=</span> {<span class="dt">top</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">right</span><span class="op">:</span> <span class="dv">20</span><span class="op">,</span> <span class="dt">bottom</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">left</span><span class="op">:</span> <span class="dv">40</span>}<span class="op">;</span></span>
|
||||
<span id="cb4-951"><a href></a> <span class="kw">const</span> innerWidth <span class="op">=</span> width <span class="op">-</span> margin<span class="op">.</span><span class="at">left</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">right</span><span class="op">;</span></span>
|
||||
<span id="cb4-952"><a href></a> <span class="kw">const</span> innerHeight <span class="op">=</span> height <span class="op">-</span> margin<span class="op">.</span><span class="at">top</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">bottom</span><span class="op">;</span></span>
|
||||
<span id="cb4-953"><a href></a></span>
|
||||
<span id="cb4-954"><a href></a> <span class="co">// Set controls container width to match SVG plot width</span></span>
|
||||
<span id="cb4-955"><a href></a> controlsContainer<span class="op">.</span><span class="fu">style</span>(<span class="st">"max-width"</span><span class="op">,</span> <span class="st">"none"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-956"><a href></a> <span class="co">// Distribute each control evenly and make sliders full-width</span></span>
|
||||
<span id="cb4-957"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"div"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"flex"</span><span class="op">,</span> <span class="st">"1"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"min-width"</span><span class="op">,</span> <span class="st">"0px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-958"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"input"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"box-sizing"</span><span class="op">,</span> <span class="st">"border-box"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-959"><a href></a> </span>
|
||||
<span id="cb4-960"><a href></a> <span class="co">// Create scales</span></span>
|
||||
<span id="cb4-961"><a href></a> <span class="kw">const</span> x <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
|
||||
<span id="cb4-962"><a href></a> <span class="op">.</span><span class="fu">range</span>([<span class="dv">0</span><span class="op">,</span> innerWidth])<span class="op">;</span></span>
|
||||
<span id="cb4-963"><a href></a> </span>
|
||||
<span id="cb4-964"><a href></a> <span class="kw">const</span> y <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
|
||||
<span id="cb4-965"><a href></a> <span class="op">.</span><span class="fu">range</span>([innerHeight<span class="op">,</span> <span class="dv">0</span>])<span class="op">;</span></span>
|
||||
<span id="cb4-966"><a href></a> </span>
|
||||
<span id="cb4-967"><a href></a> <span class="co">// Create a color scale for the basis functions</span></span>
|
||||
<span id="cb4-968"><a href></a> <span class="kw">const</span> color <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleOrdinal</span>([<span class="st">"#80C684FF"</span><span class="op">,</span> <span class="st">"#FFD44EFF"</span><span class="op">,</span> <span class="st">"#D81A5FFF"</span>])<span class="op">;</span></span>
|
||||
<span id="cb4-969"><a href></a> </span>
|
||||
<span id="cb4-970"><a href></a> <span class="co">// Create SVG</span></span>
|
||||
<span id="cb4-971"><a href></a> <span class="kw">const</span> svg <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">"svg"</span>)</span>
|
||||
<span id="cb4-972"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)</span>
|
||||
<span id="cb4-973"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"height"</span><span class="op">,</span> <span class="st">"auto"</span>)</span>
|
||||
<span id="cb4-974"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"viewBox"</span><span class="op">,</span> [<span class="dv">0</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> width<span class="op">,</span> height])</span>
|
||||
<span id="cb4-975"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"preserveAspectRatio"</span><span class="op">,</span> <span class="st">"xMidYMid meet"</span>)</span>
|
||||
<span id="cb4-976"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"style"</span><span class="op">,</span> <span class="st">"max-width: 100%; height: auto;"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-977"><a href></a> </span>
|
||||
<span id="cb4-978"><a href></a> <span class="co">// Create the chart group</span></span>
|
||||
<span id="cb4-979"><a href></a> <span class="kw">const</span> g <span class="op">=</span> svg<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb4-980"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"transform"</span><span class="op">,</span> <span class="vs">`translate(</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">left</span><span class="sc">}</span><span class="vs">,</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">top</span><span class="sc">}</span><span class="vs">)`</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-981"><a href></a> </span>
|
||||
<span id="cb4-982"><a href></a> <span class="co">// Add axes</span></span>
|
||||
<span id="cb4-983"><a href></a> <span class="kw">const</span> xAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb4-984"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"transform"</span><span class="op">,</span> <span class="vs">`translate(0,</span><span class="sc">${</span>innerHeight<span class="sc">}</span><span class="vs">)`</span>)</span>
|
||||
<span id="cb4-985"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"x-axis"</span>)</span>
|
||||
<span id="cb4-986"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))</span>
|
||||
<span id="cb4-987"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"font-size"</span><span class="op">,</span> <span class="st">"20px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-988"><a href></a> </span>
|
||||
<span id="cb4-989"><a href></a> <span class="kw">const</span> yAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb4-990"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"y-axis"</span>)</span>
|
||||
<span id="cb4-991"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
|
||||
<span id="cb4-992"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"font-size"</span><span class="op">,</span> <span class="st">"20px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-993"><a href></a> </span>
|
||||
<span id="cb4-994"><a href></a> <span class="kw">const</span> yAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb4-995"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"y-axis"</span>)</span>
|
||||
<span id="cb4-996"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
|
||||
<span id="cb4-997"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"font-size"</span><span class="op">,</span> <span class="st">"20px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-998"><a href></a> </span>
|
||||
<span id="cb4-999"><a href></a> <span class="co">// Add a horizontal line at y = 0</span></span>
|
||||
<span id="cb4-1000"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb4-1001"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x1"</span><span class="op">,</span> <span class="dv">0</span>)</span>
|
||||
<span id="cb4-1002"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x2"</span><span class="op">,</span> innerWidth)</span>
|
||||
<span id="cb4-1003"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y1"</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
|
||||
<span id="cb4-1004"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y2"</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
|
||||
<span id="cb4-1005"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> <span class="st">"#000"</span>)</span>
|
||||
<span id="cb4-1006"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke-opacity"</span><span class="op">,</span> <span class="fl">0.2</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-1007"><a href></a> </span>
|
||||
<span id="cb4-1008"><a href></a> <span class="co">// Add gridlines</span></span>
|
||||
<span id="cb4-1009"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb4-1010"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"grid-lines"</span>)</span>
|
||||
<span id="cb4-1011"><a href></a> <span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb4-1012"><a href></a> <span class="op">.</span><span class="fu">data</span>(y<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
|
||||
<span id="cb4-1013"><a href></a> <span class="op">.</span><span class="fu">join</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb4-1014"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x1"</span><span class="op">,</span> <span class="dv">0</span>)</span>
|
||||
<span id="cb4-1015"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x2"</span><span class="op">,</span> innerWidth)</span>
|
||||
<span id="cb4-1016"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y1"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">y</span>(d))</span>
|
||||
<span id="cb4-1017"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y2"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">y</span>(d))</span>
|
||||
<span id="cb4-1018"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> <span class="st">"#ccc"</span>)</span>
|
||||
<span id="cb4-1019"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke-opacity"</span><span class="op">,</span> <span class="fl">0.5</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-1020"><a href></a> </span>
|
||||
<span id="cb4-1021"><a href></a> <span class="co">// Create a line generator</span></span>
|
||||
<span id="cb4-1022"><a href></a> <span class="kw">const</span> line <span class="op">=</span> d3<span class="op">.</span><span class="fu">line</span>()</span>
|
||||
<span id="cb4-1023"><a href></a> <span class="op">.</span><span class="fu">x</span>(d <span class="kw">=></span> <span class="fu">x</span>(d<span class="op">.</span><span class="at">x</span>))</span>
|
||||
<span id="cb4-1024"><a href></a> <span class="op">.</span><span class="fu">y</span>(d <span class="kw">=></span> <span class="fu">y</span>(d<span class="op">.</span><span class="at">y</span>))</span>
|
||||
<span id="cb4-1025"><a href></a> <span class="op">.</span><span class="fu">curve</span>(d3<span class="op">.</span><span class="at">curveBasis</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-1026"><a href></a> </span>
|
||||
<span id="cb4-1027"><a href></a> <span class="co">// Group to contain the basis function lines</span></span>
|
||||
<span id="cb4-1028"><a href></a> <span class="kw">const</span> linesGroup <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb4-1029"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"basis-functions"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-1030"><a href></a> </span>
|
||||
<span id="cb4-1031"><a href></a> <span class="co">// Store the current basis functions for transition</span></span>
|
||||
<span id="cb4-1032"><a href></a> <span class="kw">let</span> currentBasisFunctions <span class="op">=</span> <span class="kw">new</span> <span class="bu">Map</span>()<span class="op">;</span></span>
|
||||
<span id="cb4-994"><a href></a> <span class="co">// Add a horizontal line at y = 0</span></span>
|
||||
<span id="cb4-995"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb4-996"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x1"</span><span class="op">,</span> <span class="dv">0</span>)</span>
|
||||
<span id="cb4-997"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x2"</span><span class="op">,</span> innerWidth)</span>
|
||||
<span id="cb4-998"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y1"</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
|
||||
<span id="cb4-999"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y2"</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
|
||||
<span id="cb4-1000"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> <span class="st">"#000"</span>)</span>
|
||||
<span id="cb4-1001"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke-opacity"</span><span class="op">,</span> <span class="fl">0.2</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-1002"><a href></a> </span>
|
||||
<span id="cb4-1003"><a href></a> <span class="co">// Add gridlines</span></span>
|
||||
<span id="cb4-1004"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb4-1005"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"grid-lines"</span>)</span>
|
||||
<span id="cb4-1006"><a href></a> <span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb4-1007"><a href></a> <span class="op">.</span><span class="fu">data</span>(y<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
|
||||
<span id="cb4-1008"><a href></a> <span class="op">.</span><span class="fu">join</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb4-1009"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x1"</span><span class="op">,</span> <span class="dv">0</span>)</span>
|
||||
<span id="cb4-1010"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x2"</span><span class="op">,</span> innerWidth)</span>
|
||||
<span id="cb4-1011"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y1"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">y</span>(d))</span>
|
||||
<span id="cb4-1012"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y2"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">y</span>(d))</span>
|
||||
<span id="cb4-1013"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> <span class="st">"#ccc"</span>)</span>
|
||||
<span id="cb4-1014"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke-opacity"</span><span class="op">,</span> <span class="fl">0.5</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-1015"><a href></a> </span>
|
||||
<span id="cb4-1016"><a href></a> <span class="co">// Create a line generator</span></span>
|
||||
<span id="cb4-1017"><a href></a> <span class="kw">const</span> line <span class="op">=</span> d3<span class="op">.</span><span class="fu">line</span>()</span>
|
||||
<span id="cb4-1018"><a href></a> <span class="op">.</span><span class="fu">x</span>(d <span class="kw">=></span> <span class="fu">x</span>(d<span class="op">.</span><span class="at">x</span>))</span>
|
||||
<span id="cb4-1019"><a href></a> <span class="op">.</span><span class="fu">y</span>(d <span class="kw">=></span> <span class="fu">y</span>(d<span class="op">.</span><span class="at">y</span>))</span>
|
||||
<span id="cb4-1020"><a href></a> <span class="op">.</span><span class="fu">curve</span>(d3<span class="op">.</span><span class="at">curveBasis</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-1021"><a href></a> </span>
|
||||
<span id="cb4-1022"><a href></a> <span class="co">// Group to contain the basis function lines</span></span>
|
||||
<span id="cb4-1023"><a href></a> <span class="kw">const</span> linesGroup <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb4-1024"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"basis-functions"</span>)<span class="op">;</span></span>
|
||||
<span id="cb4-1025"><a href></a> </span>
|
||||
<span id="cb4-1026"><a href></a> <span class="co">// Store the current basis functions for transition</span></span>
|
||||
<span id="cb4-1027"><a href></a> <span class="kw">let</span> currentBasisFunctions <span class="op">=</span> <span class="kw">new</span> <span class="bu">Map</span>()<span class="op">;</span></span>
|
||||
<span id="cb4-1028"><a href></a> </span>
|
||||
<span id="cb4-1029"><a href></a> <span class="co">// Function to update the chart with new data</span></span>
|
||||
<span id="cb4-1030"><a href></a> <span class="kw">function</span> <span class="fu">updateChart</span>(data) {</span>
|
||||
<span id="cb4-1031"><a href></a> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data)<span class="op">;</span></span>
|
||||
<span id="cb4-1032"><a href></a> }</span>
|
||||
<span id="cb4-1033"><a href></a> </span>
|
||||
<span id="cb4-1034"><a href></a> <span class="co">// Function to update the chart with new data</span></span>
|
||||
<span id="cb4-1035"><a href></a> <span class="kw">function</span> <span class="fu">updateChart</span>(data) {</span>
|
||||
<span id="cb4-1036"><a href></a> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data)<span class="op">;</span></span>
|
||||
<span id="cb4-1037"><a href></a> }</span>
|
||||
<span id="cb4-1038"><a href></a> </span>
|
||||
<span id="cb4-1039"><a href></a> <span class="co">// Store the update function</span></span>
|
||||
<span id="cb4-1040"><a href></a> svg<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="at">update</span> <span class="op">=</span> updateChart<span class="op">;</span></span>
|
||||
<span id="cb4-1041"><a href></a> </span>
|
||||
<span id="cb4-1042"><a href></a> <span class="co">// Initial render</span></span>
|
||||
<span id="cb4-1043"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb4-1044"><a href></a> </span>
|
||||
<span id="cb4-1045"><a href></a> container<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="fu">appendChild</span>(svg<span class="op">.</span><span class="fu">node</span>())<span class="op">;</span></span>
|
||||
<span id="cb4-1046"><a href></a> <span class="cf">return</span> container<span class="op">.</span><span class="fu">node</span>()<span class="op">;</span></span>
|
||||
<span id="cb4-1047"><a href></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<span id="cb4-1034"><a href></a> <span class="co">// Store the update function</span></span>
|
||||
<span id="cb4-1035"><a href></a> svg<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="at">update</span> <span class="op">=</span> updateChart<span class="op">;</span></span>
|
||||
<span id="cb4-1036"><a href></a> </span>
|
||||
<span id="cb4-1037"><a href></a> <span class="co">// Initial render</span></span>
|
||||
<span id="cb4-1038"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb4-1039"><a href></a> </span>
|
||||
<span id="cb4-1040"><a href></a> container<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="fu">appendChild</span>(svg<span class="op">.</span><span class="fu">node</span>())<span class="op">;</span></span>
|
||||
<span id="cb4-1041"><a href></a> <span class="cf">return</span> container<span class="op">.</span><span class="fu">node</span>()<span class="op">;</span></span>
|
||||
<span id="cb4-1042"><a href></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output cell-output-display">
|
||||
<div>
|
||||
<div id="ojs-cell-3-1" data-nodetype="declaration">
|
||||
@@ -27230,7 +27230,7 @@ Y_{t} = \mu + Y_{t-1} + \varepsilon_t \quad \text{with} \quad \varepsilon_t = \
|
||||
<div class="tab-content">
|
||||
<div id="tabset-12-1">
|
||||
<div class="cell">
|
||||
<div class="sourceCode cell-code hidden" id="cb5" data-startfrom="2716" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 2715;"><span id="cb5-2716"><a href></a>bsplineData <span class="op">=</span> <span class="fu">FileAttachment</span>(<span class="st">"assets/mcrps_learning/basis_functions.csv"</span>)<span class="op">.</span><span class="fu">csv</span>({ <span class="dt">typed</span><span class="op">:</span> <span class="kw">true</span> })</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="sourceCode cell-code hidden" id="cb5" data-startfrom="2711" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 2710;"><span id="cb5-2711"><a href></a>bsplineData <span class="op">=</span> <span class="fu">FileAttachment</span>(<span class="st">"assets/mcrps_learning/basis_functions.csv"</span>)<span class="op">.</span><span class="fu">csv</span>({ <span class="dt">typed</span><span class="op">:</span> <span class="kw">true</span> })</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output cell-output-display">
|
||||
<div id="ojs-cell-4" data-nodetype="declaration">
|
||||
|
||||
@@ -27238,194 +27238,194 @@ Y_{t} = \mu + Y_{t-1} + \varepsilon_t \quad \text{with} \quad \varepsilon_t = \
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="sourceCode cell-code hidden" id="cb6" data-startfrom="2720" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 2719;"><span id="cb6-2720"><a href></a><span class="co">// Defined above</span></span>
|
||||
<span id="cb6-2721"><a href></a><span class="co">// function updateChartInner(g, x, y, linesGroup, color, line, data) {</span></span>
|
||||
<span id="cb6-2722"><a href></a><span class="co">// // Update axes with transitions</span></span>
|
||||
<span id="cb6-2723"><a href></a><span class="co">// x.domain([0, d3.max(data, d => d.x)]);</span></span>
|
||||
<span id="cb6-2724"><a href></a><span class="co">// g.select(".x-axis").transition().duration(1500).call(d3.axisBottom(x).ticks(10));</span></span>
|
||||
<span id="cb6-2725"><a href></a><span class="co">// y.domain([0, d3.max(data, d => d.y)]);</span></span>
|
||||
<span id="cb6-2726"><a href></a><span class="co">// g.select(".y-axis").transition().duration(1500).call(d3.axisLeft(y).ticks(5));</span></span>
|
||||
<span id="cb6-2727"><a href></a></span>
|
||||
<span id="cb6-2728"><a href></a><span class="co">// // Group data by basis function</span></span>
|
||||
<span id="cb6-2729"><a href></a><span class="co">// const dataByFunction = Array.from(d3.group(data, d => d.b));</span></span>
|
||||
<span id="cb6-2730"><a href></a><span class="co">// const keyFn = d => d[0];</span></span>
|
||||
<span id="cb6-2731"><a href></a></span>
|
||||
<span id="cb6-2732"><a href></a><span class="co">// // Update basis function lines</span></span>
|
||||
<span id="cb6-2733"><a href></a><span class="co">// const u = linesGroup.selectAll("path").data(dataByFunction, keyFn);</span></span>
|
||||
<span id="cb6-2734"><a href></a><span class="co">// u.join(</span></span>
|
||||
<span id="cb6-2735"><a href></a><span class="co">// enter => enter.append("path").attr("fill","none").attr("stroke-width",3)</span></span>
|
||||
<span id="cb6-2736"><a href></a><span class="co">// .attr("stroke", (_, i) => color(i)).attr("d", d => line(d[1].map(pt => ({x: pt.x, y: 0}))))</span></span>
|
||||
<span id="cb6-2737"><a href></a><span class="co">// .style("opacity",0),</span></span>
|
||||
<span id="cb6-2738"><a href></a><span class="co">// update => update,</span></span>
|
||||
<span id="cb6-2739"><a href></a><span class="co">// exit => exit.transition().duration(1000).style("opacity",0).remove()</span></span>
|
||||
<span id="cb6-2740"><a href></a><span class="co">// )</span></span>
|
||||
<span id="cb6-2741"><a href></a><span class="co">// .transition().duration(1000)</span></span>
|
||||
<span id="cb6-2742"><a href></a><span class="co">// .attr("d", d => line(d[1]))</span></span>
|
||||
<span id="cb6-2743"><a href></a><span class="co">// .attr("stroke", (_, i) => color(i))</span></span>
|
||||
<span id="cb6-2744"><a href></a><span class="co">// .style("opacity",1);</span></span>
|
||||
<span id="cb6-2745"><a href></a><span class="co">// }</span></span>
|
||||
<span id="cb6-2746"><a href></a></span>
|
||||
<span id="cb6-2747"><a href></a>chart0 <span class="op">=</span> {</span>
|
||||
<span id="cb6-2748"><a href></a> <span class="co">// State variables for selected parameters</span></span>
|
||||
<span id="cb6-2749"><a href></a> <span class="kw">let</span> selectedMu <span class="op">=</span> <span class="fl">0.5</span><span class="op">;</span></span>
|
||||
<span id="cb6-2750"><a href></a> <span class="kw">let</span> selectedSig <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb6-2751"><a href></a> <span class="kw">let</span> selectedNonc <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
|
||||
<span id="cb6-2752"><a href></a> <span class="kw">let</span> selectedTailw <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb6-2753"><a href></a> <span class="kw">const</span> filteredData <span class="op">=</span> () <span class="kw">=></span> bsplineData<span class="op">.</span><span class="fu">filter</span>(d <span class="kw">=></span></span>
|
||||
<span id="cb6-2754"><a href></a> <span class="bu">Math</span><span class="op">.</span><span class="fu">abs</span>(selectedMu <span class="op">-</span> d<span class="op">.</span><span class="at">mu</span>) <span class="op"><</span> <span class="fl">0.001</span> <span class="op">&&</span></span>
|
||||
<span id="cb6-2755"><a href></a> d<span class="op">.</span><span class="at">sig</span> <span class="op">===</span> selectedSig <span class="op">&&</span></span>
|
||||
<span id="cb6-2756"><a href></a> d<span class="op">.</span><span class="at">nonc</span> <span class="op">===</span> selectedNonc <span class="op">&&</span></span>
|
||||
<span id="cb6-2757"><a href></a> d<span class="op">.</span><span class="at">tailw</span> <span class="op">===</span> selectedTailw</span>
|
||||
<span id="cb6-2758"><a href></a> )<span class="op">;</span></span>
|
||||
<span id="cb6-2759"><a href></a> <span class="kw">const</span> container <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">"div"</span>)</span>
|
||||
<span id="cb6-2760"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"max-width"</span><span class="op">,</span> <span class="st">"none"</span>)</span>
|
||||
<span id="cb6-2761"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">;;</span></span>
|
||||
<span id="cb6-2762"><a href></a> <span class="kw">const</span> controlsContainer <span class="op">=</span> container<span class="op">.</span><span class="fu">append</span>(<span class="st">"div"</span>)</span>
|
||||
<span id="cb6-2763"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"display"</span><span class="op">,</span> <span class="st">"flex"</span>)</span>
|
||||
<span id="cb6-2764"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"gap"</span><span class="op">,</span> <span class="st">"20px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2765"><a href></a> <span class="co">// slider controls</span></span>
|
||||
<span id="cb6-2766"><a href></a> <span class="kw">const</span> sliders <span class="op">=</span> [</span>
|
||||
<span id="cb6-2767"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">'Mu'</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=></span> selectedMu<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=></span> selectedMu <span class="op">=</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="fl">0.1</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="fl">0.9</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="fl">0.2</span> }<span class="op">,</span></span>
|
||||
<span id="cb6-2768"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">'Sigma'</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=></span> <span class="bu">Math</span><span class="op">.</span><span class="fu">log2</span>(selectedSig)<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=></span> selectedSig <span class="op">=</span> <span class="dv">2</span> <span class="op">**</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">2</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">2</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">1</span> }<span class="op">,</span></span>
|
||||
<span id="cb6-2769"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">'Noncentrality'</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=></span> selectedNonc<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=></span> selectedNonc <span class="op">=</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">4</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">4</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">2</span> }<span class="op">,</span></span>
|
||||
<span id="cb6-2770"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">'Tailweight'</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=></span> <span class="bu">Math</span><span class="op">.</span><span class="fu">log2</span>(selectedTailw)<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=></span> selectedTailw <span class="op">=</span> <span class="dv">2</span> <span class="op">**</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">2</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">2</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">1</span> }</span>
|
||||
<span id="cb6-2771"><a href></a> ]<span class="op">;</span></span>
|
||||
<span id="cb6-2772"><a href></a> <span class="co">// Build slider controls with D3 data join</span></span>
|
||||
<span id="cb6-2773"><a href></a> <span class="kw">const</span> sliderCont <span class="op">=</span> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">'div'</span>)<span class="op">.</span><span class="fu">data</span>(sliders)<span class="op">.</span><span class="fu">join</span>(<span class="st">'div'</span>)</span>
|
||||
<span id="cb6-2774"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'display'</span><span class="op">,</span><span class="st">'flex'</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">'align-items'</span><span class="op">,</span><span class="st">'center'</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">'gap'</span><span class="op">,</span><span class="st">'10px'</span>)</span>
|
||||
<span id="cb6-2775"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'flex'</span><span class="op">,</span><span class="st">'1'</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">'min-width'</span><span class="op">,</span><span class="st">'0px'</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2776"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">'label'</span>)<span class="op">.</span><span class="fu">text</span>(d <span class="kw">=></span> d<span class="op">.</span><span class="at">label</span> <span class="op">+</span> <span class="st">':'</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span><span class="st">'20px'</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2777"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">'input'</span>)</span>
|
||||
<span id="cb6-2778"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">'type'</span><span class="op">,</span><span class="st">'range'</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">'min'</span><span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">min</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">'max'</span><span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">max</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">'step'</span><span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">step</span>)</span>
|
||||
<span id="cb6-2779"><a href></a> <span class="op">.</span><span class="fu">property</span>(<span class="st">'value'</span><span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="fu">get</span>())</span>
|
||||
<span id="cb6-2780"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">'input'</span><span class="op">,</span> <span class="kw">function</span>(<span class="bu">event</span><span class="op">,</span> d) {</span>
|
||||
<span id="cb6-2781"><a href></a> <span class="kw">const</span> val <span class="op">=</span> <span class="op">+</span><span class="kw">this</span><span class="op">.</span><span class="at">value</span><span class="op">;</span> d<span class="op">.</span><span class="fu">set</span>(val)<span class="op">;</span></span>
|
||||
<span id="cb6-2782"><a href></a> d3<span class="op">.</span><span class="fu">select</span>(<span class="kw">this</span><span class="op">.</span><span class="at">parentNode</span>)<span class="op">.</span><span class="fu">select</span>(<span class="st">'span'</span>)<span class="op">.</span><span class="fu">text</span>(d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> <span class="dv">2</span><span class="op">**</span>val <span class="op">:</span> val)<span class="op">;</span></span>
|
||||
<span id="cb6-2783"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2784"><a href></a> })</span>
|
||||
<span id="cb6-2785"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'width'</span><span class="op">,</span> <span class="st">'100%'</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2786"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">'span'</span>)<span class="op">.</span><span class="fu">text</span>(d <span class="kw">=></span> (d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> d<span class="op">.</span><span class="fu">get</span>() <span class="op">:</span> d<span class="op">.</span><span class="fu">get</span>()))</span>
|
||||
<span id="cb6-2787"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span><span class="st">'20px'</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2788"><a href></a> </span>
|
||||
<span id="cb6-2789"><a href></a> <span class="co">// Add Reset button to clear all sliders to their defaults</span></span>
|
||||
<span id="cb6-2790"><a href></a> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'button'</span>)</span>
|
||||
<span id="cb6-2791"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">'Reset'</span>)</span>
|
||||
<span id="cb6-2792"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span> <span class="st">'20px'</span>)</span>
|
||||
<span id="cb6-2793"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'align-self'</span><span class="op">,</span> <span class="st">'center'</span>)</span>
|
||||
<span id="cb6-2794"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'margin-left'</span><span class="op">,</span> <span class="st">'auto'</span>)</span>
|
||||
<span id="cb6-2795"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">'click'</span><span class="op">,</span> () <span class="kw">=></span> {</span>
|
||||
<span id="cb6-2796"><a href></a> <span class="co">// reset state vars</span></span>
|
||||
<span id="cb6-2797"><a href></a> selectedMu <span class="op">=</span> <span class="fl">0.5</span><span class="op">;</span></span>
|
||||
<span id="cb6-2798"><a href></a> selectedSig <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb6-2799"><a href></a> selectedNonc <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
|
||||
<span id="cb6-2800"><a href></a> selectedTailw <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb6-2801"><a href></a> <span class="co">// update input positions</span></span>
|
||||
<span id="cb6-2802"><a href></a> sliderCont<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">'input'</span>)<span class="op">.</span><span class="fu">property</span>(<span class="st">'value'</span><span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="fu">get</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2803"><a href></a> <span class="co">// update displayed labels</span></span>
|
||||
<span id="cb6-2804"><a href></a> sliderCont<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">'span'</span>)</span>
|
||||
<span id="cb6-2805"><a href></a> <span class="op">.</span><span class="fu">text</span>(d <span class="kw">=></span> d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> (<span class="dv">2</span><span class="op">**</span>d<span class="op">.</span><span class="fu">get</span>()) <span class="op">:</span> d<span class="op">.</span><span class="fu">get</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2806"><a href></a> <span class="co">// redraw chart</span></span>
|
||||
<span id="cb6-2807"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2808"><a href></a> })<span class="op">;</span></span>
|
||||
<span id="cb6-2809"><a href></a></span>
|
||||
<span id="cb6-2810"><a href></a> <span class="co">// Build SVG</span></span>
|
||||
<span id="cb6-2811"><a href></a> <span class="kw">const</span> width <span class="op">=</span> <span class="dv">1200</span><span class="op">;</span></span>
|
||||
<span id="cb6-2812"><a href></a> <span class="kw">const</span> height <span class="op">=</span> <span class="dv">450</span><span class="op">;</span></span>
|
||||
<span id="cb6-2813"><a href></a> <span class="kw">const</span> margin <span class="op">=</span> {<span class="dt">top</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">right</span><span class="op">:</span> <span class="dv">20</span><span class="op">,</span> <span class="dt">bottom</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">left</span><span class="op">:</span> <span class="dv">40</span>}<span class="op">;</span></span>
|
||||
<span id="cb6-2814"><a href></a> <span class="kw">const</span> innerWidth <span class="op">=</span> width <span class="op">-</span> margin<span class="op">.</span><span class="at">left</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">right</span><span class="op">;</span></span>
|
||||
<span id="cb6-2815"><a href></a> <span class="kw">const</span> innerHeight <span class="op">=</span> height <span class="op">-</span> margin<span class="op">.</span><span class="at">top</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">bottom</span><span class="op">;</span></span>
|
||||
<span id="cb6-2816"><a href></a></span>
|
||||
<span id="cb6-2817"><a href></a> <span class="co">// Set controls container width to match SVG plot width</span></span>
|
||||
<span id="cb6-2818"><a href></a> controlsContainer<span class="op">.</span><span class="fu">style</span>(<span class="st">"max-width"</span><span class="op">,</span> <span class="st">"none"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2819"><a href></a> <span class="co">// Distribute each control evenly and make sliders full-width</span></span>
|
||||
<span id="cb6-2820"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"div"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"flex"</span><span class="op">,</span> <span class="st">"1"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"min-width"</span><span class="op">,</span> <span class="st">"0px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2821"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"input"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"box-sizing"</span><span class="op">,</span> <span class="st">"border-box"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2822"><a href></a> </span>
|
||||
<span id="cb6-2823"><a href></a> <span class="co">// Create scales</span></span>
|
||||
<span id="cb6-2824"><a href></a> <span class="kw">const</span> x <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
|
||||
<span id="cb6-2825"><a href></a> <span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> <span class="dv">1</span>])</span>
|
||||
<span id="cb6-2826"><a href></a> <span class="op">.</span><span class="fu">range</span>([<span class="dv">0</span><span class="op">,</span> innerWidth])<span class="op">;</span></span>
|
||||
<span id="cb6-2827"><a href></a> </span>
|
||||
<span id="cb6-2828"><a href></a> <span class="kw">const</span> y <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
|
||||
<span id="cb6-2829"><a href></a> <span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> <span class="dv">1</span>])</span>
|
||||
<span id="cb6-2830"><a href></a> <span class="op">.</span><span class="fu">range</span>([innerHeight<span class="op">,</span> <span class="dv">0</span>])<span class="op">;</span></span>
|
||||
<span id="cb6-2831"><a href></a> </span>
|
||||
<span id="cb6-2832"><a href></a> <span class="co">// Create a color scale for the basis functions</span></span>
|
||||
<span id="cb6-2833"><a href></a> <span class="kw">const</span> color <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleOrdinal</span>(d3<span class="op">.</span><span class="at">schemeCategory10</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2834"><a href></a> </span>
|
||||
<span id="cb6-2835"><a href></a> <span class="co">// Create SVG</span></span>
|
||||
<span id="cb6-2836"><a href></a> <span class="kw">const</span> svg <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">"svg"</span>)</span>
|
||||
<span id="cb6-2837"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)</span>
|
||||
<span id="cb6-2838"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"height"</span><span class="op">,</span> <span class="st">"auto"</span>)</span>
|
||||
<span id="cb6-2839"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"viewBox"</span><span class="op">,</span> [<span class="dv">0</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> width<span class="op">,</span> height])</span>
|
||||
<span id="cb6-2840"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"preserveAspectRatio"</span><span class="op">,</span> <span class="st">"xMidYMid meet"</span>)</span>
|
||||
<span id="cb6-2841"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"style"</span><span class="op">,</span> <span class="st">"max-width: 100%; height: auto;"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2842"><a href></a> </span>
|
||||
<span id="cb6-2843"><a href></a> <span class="co">// Create the chart group</span></span>
|
||||
<span id="cb6-2844"><a href></a> <span class="kw">const</span> g <span class="op">=</span> svg<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb6-2845"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"transform"</span><span class="op">,</span> <span class="vs">`translate(</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">left</span><span class="sc">}</span><span class="vs">,</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">top</span><span class="sc">}</span><span class="vs">)`</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2846"><a href></a> </span>
|
||||
<span id="cb6-2847"><a href></a> <span class="co">// Add axes</span></span>
|
||||
<span id="cb6-2848"><a href></a> <span class="kw">const</span> xAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb6-2849"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"transform"</span><span class="op">,</span> <span class="vs">`translate(0,</span><span class="sc">${</span>innerHeight<span class="sc">}</span><span class="vs">)`</span>)</span>
|
||||
<span id="cb6-2850"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"x-axis"</span>)</span>
|
||||
<span id="cb6-2851"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))</span>
|
||||
<div class="sourceCode cell-code hidden" id="cb6" data-startfrom="2715" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 2714;"><span id="cb6-2715"><a href></a><span class="co">// Defined above</span></span>
|
||||
<span id="cb6-2716"><a href></a><span class="co">// function updateChartInner(g, x, y, linesGroup, color, line, data) {</span></span>
|
||||
<span id="cb6-2717"><a href></a><span class="co">// // Update axes with transitions</span></span>
|
||||
<span id="cb6-2718"><a href></a><span class="co">// x.domain([0, d3.max(data, d => d.x)]);</span></span>
|
||||
<span id="cb6-2719"><a href></a><span class="co">// g.select(".x-axis").transition().duration(1500).call(d3.axisBottom(x).ticks(10));</span></span>
|
||||
<span id="cb6-2720"><a href></a><span class="co">// y.domain([0, d3.max(data, d => d.y)]);</span></span>
|
||||
<span id="cb6-2721"><a href></a><span class="co">// g.select(".y-axis").transition().duration(1500).call(d3.axisLeft(y).ticks(5));</span></span>
|
||||
<span id="cb6-2722"><a href></a></span>
|
||||
<span id="cb6-2723"><a href></a><span class="co">// // Group data by basis function</span></span>
|
||||
<span id="cb6-2724"><a href></a><span class="co">// const dataByFunction = Array.from(d3.group(data, d => d.b));</span></span>
|
||||
<span id="cb6-2725"><a href></a><span class="co">// const keyFn = d => d[0];</span></span>
|
||||
<span id="cb6-2726"><a href></a></span>
|
||||
<span id="cb6-2727"><a href></a><span class="co">// // Update basis function lines</span></span>
|
||||
<span id="cb6-2728"><a href></a><span class="co">// const u = linesGroup.selectAll("path").data(dataByFunction, keyFn);</span></span>
|
||||
<span id="cb6-2729"><a href></a><span class="co">// u.join(</span></span>
|
||||
<span id="cb6-2730"><a href></a><span class="co">// enter => enter.append("path").attr("fill","none").attr("stroke-width",3)</span></span>
|
||||
<span id="cb6-2731"><a href></a><span class="co">// .attr("stroke", (_, i) => color(i)).attr("d", d => line(d[1].map(pt => ({x: pt.x, y: 0}))))</span></span>
|
||||
<span id="cb6-2732"><a href></a><span class="co">// .style("opacity",0),</span></span>
|
||||
<span id="cb6-2733"><a href></a><span class="co">// update => update,</span></span>
|
||||
<span id="cb6-2734"><a href></a><span class="co">// exit => exit.transition().duration(1000).style("opacity",0).remove()</span></span>
|
||||
<span id="cb6-2735"><a href></a><span class="co">// )</span></span>
|
||||
<span id="cb6-2736"><a href></a><span class="co">// .transition().duration(1000)</span></span>
|
||||
<span id="cb6-2737"><a href></a><span class="co">// .attr("d", d => line(d[1]))</span></span>
|
||||
<span id="cb6-2738"><a href></a><span class="co">// .attr("stroke", (_, i) => color(i))</span></span>
|
||||
<span id="cb6-2739"><a href></a><span class="co">// .style("opacity",1);</span></span>
|
||||
<span id="cb6-2740"><a href></a><span class="co">// }</span></span>
|
||||
<span id="cb6-2741"><a href></a></span>
|
||||
<span id="cb6-2742"><a href></a>chart0 <span class="op">=</span> {</span>
|
||||
<span id="cb6-2743"><a href></a> <span class="co">// State variables for selected parameters</span></span>
|
||||
<span id="cb6-2744"><a href></a> <span class="kw">let</span> selectedMu <span class="op">=</span> <span class="fl">0.5</span><span class="op">;</span></span>
|
||||
<span id="cb6-2745"><a href></a> <span class="kw">let</span> selectedSig <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb6-2746"><a href></a> <span class="kw">let</span> selectedNonc <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
|
||||
<span id="cb6-2747"><a href></a> <span class="kw">let</span> selectedTailw <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb6-2748"><a href></a> <span class="kw">const</span> filteredData <span class="op">=</span> () <span class="kw">=></span> bsplineData<span class="op">.</span><span class="fu">filter</span>(d <span class="kw">=></span></span>
|
||||
<span id="cb6-2749"><a href></a> <span class="bu">Math</span><span class="op">.</span><span class="fu">abs</span>(selectedMu <span class="op">-</span> d<span class="op">.</span><span class="at">mu</span>) <span class="op"><</span> <span class="fl">0.001</span> <span class="op">&&</span></span>
|
||||
<span id="cb6-2750"><a href></a> d<span class="op">.</span><span class="at">sig</span> <span class="op">===</span> selectedSig <span class="op">&&</span></span>
|
||||
<span id="cb6-2751"><a href></a> d<span class="op">.</span><span class="at">nonc</span> <span class="op">===</span> selectedNonc <span class="op">&&</span></span>
|
||||
<span id="cb6-2752"><a href></a> d<span class="op">.</span><span class="at">tailw</span> <span class="op">===</span> selectedTailw</span>
|
||||
<span id="cb6-2753"><a href></a> )<span class="op">;</span></span>
|
||||
<span id="cb6-2754"><a href></a> <span class="kw">const</span> container <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">"div"</span>)</span>
|
||||
<span id="cb6-2755"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"max-width"</span><span class="op">,</span> <span class="st">"none"</span>)</span>
|
||||
<span id="cb6-2756"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">;;</span></span>
|
||||
<span id="cb6-2757"><a href></a> <span class="kw">const</span> controlsContainer <span class="op">=</span> container<span class="op">.</span><span class="fu">append</span>(<span class="st">"div"</span>)</span>
|
||||
<span id="cb6-2758"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"display"</span><span class="op">,</span> <span class="st">"flex"</span>)</span>
|
||||
<span id="cb6-2759"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"gap"</span><span class="op">,</span> <span class="st">"20px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2760"><a href></a> <span class="co">// slider controls</span></span>
|
||||
<span id="cb6-2761"><a href></a> <span class="kw">const</span> sliders <span class="op">=</span> [</span>
|
||||
<span id="cb6-2762"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">'Mu'</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=></span> selectedMu<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=></span> selectedMu <span class="op">=</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="fl">0.1</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="fl">0.9</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="fl">0.2</span> }<span class="op">,</span></span>
|
||||
<span id="cb6-2763"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">'Sigma'</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=></span> <span class="bu">Math</span><span class="op">.</span><span class="fu">log2</span>(selectedSig)<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=></span> selectedSig <span class="op">=</span> <span class="dv">2</span> <span class="op">**</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">2</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">2</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">1</span> }<span class="op">,</span></span>
|
||||
<span id="cb6-2764"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">'Noncentrality'</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=></span> selectedNonc<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=></span> selectedNonc <span class="op">=</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">4</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">4</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">2</span> }<span class="op">,</span></span>
|
||||
<span id="cb6-2765"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">'Tailweight'</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=></span> <span class="bu">Math</span><span class="op">.</span><span class="fu">log2</span>(selectedTailw)<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=></span> selectedTailw <span class="op">=</span> <span class="dv">2</span> <span class="op">**</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">2</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">2</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">1</span> }</span>
|
||||
<span id="cb6-2766"><a href></a> ]<span class="op">;</span></span>
|
||||
<span id="cb6-2767"><a href></a> <span class="co">// Build slider controls with D3 data join</span></span>
|
||||
<span id="cb6-2768"><a href></a> <span class="kw">const</span> sliderCont <span class="op">=</span> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">'div'</span>)<span class="op">.</span><span class="fu">data</span>(sliders)<span class="op">.</span><span class="fu">join</span>(<span class="st">'div'</span>)</span>
|
||||
<span id="cb6-2769"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'display'</span><span class="op">,</span><span class="st">'flex'</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">'align-items'</span><span class="op">,</span><span class="st">'center'</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">'gap'</span><span class="op">,</span><span class="st">'10px'</span>)</span>
|
||||
<span id="cb6-2770"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'flex'</span><span class="op">,</span><span class="st">'1'</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">'min-width'</span><span class="op">,</span><span class="st">'0px'</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2771"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">'label'</span>)<span class="op">.</span><span class="fu">text</span>(d <span class="kw">=></span> d<span class="op">.</span><span class="at">label</span> <span class="op">+</span> <span class="st">':'</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span><span class="st">'20px'</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2772"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">'input'</span>)</span>
|
||||
<span id="cb6-2773"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">'type'</span><span class="op">,</span><span class="st">'range'</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">'min'</span><span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">min</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">'max'</span><span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">max</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">'step'</span><span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="at">step</span>)</span>
|
||||
<span id="cb6-2774"><a href></a> <span class="op">.</span><span class="fu">property</span>(<span class="st">'value'</span><span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="fu">get</span>())</span>
|
||||
<span id="cb6-2775"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">'input'</span><span class="op">,</span> <span class="kw">function</span>(<span class="bu">event</span><span class="op">,</span> d) {</span>
|
||||
<span id="cb6-2776"><a href></a> <span class="kw">const</span> val <span class="op">=</span> <span class="op">+</span><span class="kw">this</span><span class="op">.</span><span class="at">value</span><span class="op">;</span> d<span class="op">.</span><span class="fu">set</span>(val)<span class="op">;</span></span>
|
||||
<span id="cb6-2777"><a href></a> d3<span class="op">.</span><span class="fu">select</span>(<span class="kw">this</span><span class="op">.</span><span class="at">parentNode</span>)<span class="op">.</span><span class="fu">select</span>(<span class="st">'span'</span>)<span class="op">.</span><span class="fu">text</span>(d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> <span class="dv">2</span><span class="op">**</span>val <span class="op">:</span> val)<span class="op">;</span></span>
|
||||
<span id="cb6-2778"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2779"><a href></a> })</span>
|
||||
<span id="cb6-2780"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'width'</span><span class="op">,</span> <span class="st">'100%'</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2781"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">'span'</span>)<span class="op">.</span><span class="fu">text</span>(d <span class="kw">=></span> (d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> d<span class="op">.</span><span class="fu">get</span>() <span class="op">:</span> d<span class="op">.</span><span class="fu">get</span>()))</span>
|
||||
<span id="cb6-2782"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span><span class="st">'20px'</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2783"><a href></a> </span>
|
||||
<span id="cb6-2784"><a href></a> <span class="co">// Add Reset button to clear all sliders to their defaults</span></span>
|
||||
<span id="cb6-2785"><a href></a> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">'button'</span>)</span>
|
||||
<span id="cb6-2786"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">'Reset'</span>)</span>
|
||||
<span id="cb6-2787"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'font-size'</span><span class="op">,</span> <span class="st">'20px'</span>)</span>
|
||||
<span id="cb6-2788"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'align-self'</span><span class="op">,</span> <span class="st">'center'</span>)</span>
|
||||
<span id="cb6-2789"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">'margin-left'</span><span class="op">,</span> <span class="st">'auto'</span>)</span>
|
||||
<span id="cb6-2790"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">'click'</span><span class="op">,</span> () <span class="kw">=></span> {</span>
|
||||
<span id="cb6-2791"><a href></a> <span class="co">// reset state vars</span></span>
|
||||
<span id="cb6-2792"><a href></a> selectedMu <span class="op">=</span> <span class="fl">0.5</span><span class="op">;</span></span>
|
||||
<span id="cb6-2793"><a href></a> selectedSig <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb6-2794"><a href></a> selectedNonc <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
|
||||
<span id="cb6-2795"><a href></a> selectedTailw <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
|
||||
<span id="cb6-2796"><a href></a> <span class="co">// update input positions</span></span>
|
||||
<span id="cb6-2797"><a href></a> sliderCont<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">'input'</span>)<span class="op">.</span><span class="fu">property</span>(<span class="st">'value'</span><span class="op">,</span> d <span class="kw">=></span> d<span class="op">.</span><span class="fu">get</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2798"><a href></a> <span class="co">// update displayed labels</span></span>
|
||||
<span id="cb6-2799"><a href></a> sliderCont<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">'span'</span>)</span>
|
||||
<span id="cb6-2800"><a href></a> <span class="op">.</span><span class="fu">text</span>(d <span class="kw">=></span> d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> (<span class="dv">2</span><span class="op">**</span>d<span class="op">.</span><span class="fu">get</span>()) <span class="op">:</span> d<span class="op">.</span><span class="fu">get</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2801"><a href></a> <span class="co">// redraw chart</span></span>
|
||||
<span id="cb6-2802"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2803"><a href></a> })<span class="op">;</span></span>
|
||||
<span id="cb6-2804"><a href></a></span>
|
||||
<span id="cb6-2805"><a href></a> <span class="co">// Build SVG</span></span>
|
||||
<span id="cb6-2806"><a href></a> <span class="kw">const</span> width <span class="op">=</span> <span class="dv">1200</span><span class="op">;</span></span>
|
||||
<span id="cb6-2807"><a href></a> <span class="kw">const</span> height <span class="op">=</span> <span class="dv">450</span><span class="op">;</span></span>
|
||||
<span id="cb6-2808"><a href></a> <span class="kw">const</span> margin <span class="op">=</span> {<span class="dt">top</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">right</span><span class="op">:</span> <span class="dv">20</span><span class="op">,</span> <span class="dt">bottom</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">left</span><span class="op">:</span> <span class="dv">40</span>}<span class="op">;</span></span>
|
||||
<span id="cb6-2809"><a href></a> <span class="kw">const</span> innerWidth <span class="op">=</span> width <span class="op">-</span> margin<span class="op">.</span><span class="at">left</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">right</span><span class="op">;</span></span>
|
||||
<span id="cb6-2810"><a href></a> <span class="kw">const</span> innerHeight <span class="op">=</span> height <span class="op">-</span> margin<span class="op">.</span><span class="at">top</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">bottom</span><span class="op">;</span></span>
|
||||
<span id="cb6-2811"><a href></a></span>
|
||||
<span id="cb6-2812"><a href></a> <span class="co">// Set controls container width to match SVG plot width</span></span>
|
||||
<span id="cb6-2813"><a href></a> controlsContainer<span class="op">.</span><span class="fu">style</span>(<span class="st">"max-width"</span><span class="op">,</span> <span class="st">"none"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2814"><a href></a> <span class="co">// Distribute each control evenly and make sliders full-width</span></span>
|
||||
<span id="cb6-2815"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"div"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"flex"</span><span class="op">,</span> <span class="st">"1"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"min-width"</span><span class="op">,</span> <span class="st">"0px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2816"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"input"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">"box-sizing"</span><span class="op">,</span> <span class="st">"border-box"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2817"><a href></a> </span>
|
||||
<span id="cb6-2818"><a href></a> <span class="co">// Create scales</span></span>
|
||||
<span id="cb6-2819"><a href></a> <span class="kw">const</span> x <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
|
||||
<span id="cb6-2820"><a href></a> <span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> <span class="dv">1</span>])</span>
|
||||
<span id="cb6-2821"><a href></a> <span class="op">.</span><span class="fu">range</span>([<span class="dv">0</span><span class="op">,</span> innerWidth])<span class="op">;</span></span>
|
||||
<span id="cb6-2822"><a href></a> </span>
|
||||
<span id="cb6-2823"><a href></a> <span class="kw">const</span> y <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
|
||||
<span id="cb6-2824"><a href></a> <span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> <span class="dv">1</span>])</span>
|
||||
<span id="cb6-2825"><a href></a> <span class="op">.</span><span class="fu">range</span>([innerHeight<span class="op">,</span> <span class="dv">0</span>])<span class="op">;</span></span>
|
||||
<span id="cb6-2826"><a href></a> </span>
|
||||
<span id="cb6-2827"><a href></a> <span class="co">// Create a color scale for the basis functions</span></span>
|
||||
<span id="cb6-2828"><a href></a> <span class="kw">const</span> color <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleOrdinal</span>(d3<span class="op">.</span><span class="at">schemeCategory10</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2829"><a href></a> </span>
|
||||
<span id="cb6-2830"><a href></a> <span class="co">// Create SVG</span></span>
|
||||
<span id="cb6-2831"><a href></a> <span class="kw">const</span> svg <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">"svg"</span>)</span>
|
||||
<span id="cb6-2832"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"width"</span><span class="op">,</span> <span class="st">"100%"</span>)</span>
|
||||
<span id="cb6-2833"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"height"</span><span class="op">,</span> <span class="st">"auto"</span>)</span>
|
||||
<span id="cb6-2834"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"viewBox"</span><span class="op">,</span> [<span class="dv">0</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> width<span class="op">,</span> height])</span>
|
||||
<span id="cb6-2835"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"preserveAspectRatio"</span><span class="op">,</span> <span class="st">"xMidYMid meet"</span>)</span>
|
||||
<span id="cb6-2836"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"style"</span><span class="op">,</span> <span class="st">"max-width: 100%; height: auto;"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2837"><a href></a> </span>
|
||||
<span id="cb6-2838"><a href></a> <span class="co">// Create the chart group</span></span>
|
||||
<span id="cb6-2839"><a href></a> <span class="kw">const</span> g <span class="op">=</span> svg<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb6-2840"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"transform"</span><span class="op">,</span> <span class="vs">`translate(</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">left</span><span class="sc">}</span><span class="vs">,</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">top</span><span class="sc">}</span><span class="vs">)`</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2841"><a href></a> </span>
|
||||
<span id="cb6-2842"><a href></a> <span class="co">// Add axes</span></span>
|
||||
<span id="cb6-2843"><a href></a> <span class="kw">const</span> xAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb6-2844"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"transform"</span><span class="op">,</span> <span class="vs">`translate(0,</span><span class="sc">${</span>innerHeight<span class="sc">}</span><span class="vs">)`</span>)</span>
|
||||
<span id="cb6-2845"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"x-axis"</span>)</span>
|
||||
<span id="cb6-2846"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))</span>
|
||||
<span id="cb6-2847"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"font-size"</span><span class="op">,</span> <span class="st">"20px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2848"><a href></a> </span>
|
||||
<span id="cb6-2849"><a href></a> <span class="kw">const</span> yAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb6-2850"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"y-axis"</span>)</span>
|
||||
<span id="cb6-2851"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
|
||||
<span id="cb6-2852"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"font-size"</span><span class="op">,</span> <span class="st">"20px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2853"><a href></a> </span>
|
||||
<span id="cb6-2854"><a href></a> <span class="kw">const</span> yAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb6-2855"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"y-axis"</span>)</span>
|
||||
<span id="cb6-2856"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
|
||||
<span id="cb6-2857"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">"font-size"</span><span class="op">,</span> <span class="st">"20px"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2858"><a href></a> </span>
|
||||
<span id="cb6-2859"><a href></a> <span class="co">// Add a horizontal line at y = 0</span></span>
|
||||
<span id="cb6-2860"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb6-2861"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x1"</span><span class="op">,</span> <span class="dv">0</span>)</span>
|
||||
<span id="cb6-2862"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x2"</span><span class="op">,</span> innerWidth)</span>
|
||||
<span id="cb6-2863"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y1"</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
|
||||
<span id="cb6-2864"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y2"</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
|
||||
<span id="cb6-2865"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> <span class="st">"#000"</span>)</span>
|
||||
<span id="cb6-2866"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke-opacity"</span><span class="op">,</span> <span class="fl">0.2</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2867"><a href></a> </span>
|
||||
<span id="cb6-2868"><a href></a> <span class="co">// Add gridlines</span></span>
|
||||
<span id="cb6-2869"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb6-2870"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"grid-lines"</span>)</span>
|
||||
<span id="cb6-2871"><a href></a> <span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb6-2872"><a href></a> <span class="op">.</span><span class="fu">data</span>(y<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
|
||||
<span id="cb6-2873"><a href></a> <span class="op">.</span><span class="fu">join</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb6-2874"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x1"</span><span class="op">,</span> <span class="dv">0</span>)</span>
|
||||
<span id="cb6-2875"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x2"</span><span class="op">,</span> innerWidth)</span>
|
||||
<span id="cb6-2876"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y1"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">y</span>(d))</span>
|
||||
<span id="cb6-2877"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y2"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">y</span>(d))</span>
|
||||
<span id="cb6-2878"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> <span class="st">"#ccc"</span>)</span>
|
||||
<span id="cb6-2879"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke-opacity"</span><span class="op">,</span> <span class="fl">0.5</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2880"><a href></a> </span>
|
||||
<span id="cb6-2881"><a href></a> <span class="co">// Create a line generator</span></span>
|
||||
<span id="cb6-2882"><a href></a> <span class="kw">const</span> line <span class="op">=</span> d3<span class="op">.</span><span class="fu">line</span>()</span>
|
||||
<span id="cb6-2883"><a href></a> <span class="op">.</span><span class="fu">x</span>(d <span class="kw">=></span> <span class="fu">x</span>(d<span class="op">.</span><span class="at">x</span>))</span>
|
||||
<span id="cb6-2884"><a href></a> <span class="op">.</span><span class="fu">y</span>(d <span class="kw">=></span> <span class="fu">y</span>(d<span class="op">.</span><span class="at">y</span>))</span>
|
||||
<span id="cb6-2885"><a href></a> <span class="op">.</span><span class="fu">curve</span>(d3<span class="op">.</span><span class="at">curveBasis</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2886"><a href></a> </span>
|
||||
<span id="cb6-2887"><a href></a> <span class="co">// Group to contain the basis function lines</span></span>
|
||||
<span id="cb6-2888"><a href></a> <span class="kw">const</span> linesGroup <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb6-2889"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"basis-functions"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2890"><a href></a> </span>
|
||||
<span id="cb6-2891"><a href></a> <span class="co">// Store the current basis functions for transition</span></span>
|
||||
<span id="cb6-2892"><a href></a> <span class="kw">let</span> currentBasisFunctions <span class="op">=</span> <span class="kw">new</span> <span class="bu">Map</span>()<span class="op">;</span></span>
|
||||
<span id="cb6-2854"><a href></a> <span class="co">// Add a horizontal line at y = 0</span></span>
|
||||
<span id="cb6-2855"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb6-2856"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x1"</span><span class="op">,</span> <span class="dv">0</span>)</span>
|
||||
<span id="cb6-2857"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x2"</span><span class="op">,</span> innerWidth)</span>
|
||||
<span id="cb6-2858"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y1"</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
|
||||
<span id="cb6-2859"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y2"</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
|
||||
<span id="cb6-2860"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> <span class="st">"#000"</span>)</span>
|
||||
<span id="cb6-2861"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke-opacity"</span><span class="op">,</span> <span class="fl">0.2</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2862"><a href></a> </span>
|
||||
<span id="cb6-2863"><a href></a> <span class="co">// Add gridlines</span></span>
|
||||
<span id="cb6-2864"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb6-2865"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"grid-lines"</span>)</span>
|
||||
<span id="cb6-2866"><a href></a> <span class="op">.</span><span class="fu">selectAll</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb6-2867"><a href></a> <span class="op">.</span><span class="fu">data</span>(y<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
|
||||
<span id="cb6-2868"><a href></a> <span class="op">.</span><span class="fu">join</span>(<span class="st">"line"</span>)</span>
|
||||
<span id="cb6-2869"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x1"</span><span class="op">,</span> <span class="dv">0</span>)</span>
|
||||
<span id="cb6-2870"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"x2"</span><span class="op">,</span> innerWidth)</span>
|
||||
<span id="cb6-2871"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y1"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">y</span>(d))</span>
|
||||
<span id="cb6-2872"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"y2"</span><span class="op">,</span> d <span class="kw">=></span> <span class="fu">y</span>(d))</span>
|
||||
<span id="cb6-2873"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke"</span><span class="op">,</span> <span class="st">"#ccc"</span>)</span>
|
||||
<span id="cb6-2874"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"stroke-opacity"</span><span class="op">,</span> <span class="fl">0.5</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2875"><a href></a> </span>
|
||||
<span id="cb6-2876"><a href></a> <span class="co">// Create a line generator</span></span>
|
||||
<span id="cb6-2877"><a href></a> <span class="kw">const</span> line <span class="op">=</span> d3<span class="op">.</span><span class="fu">line</span>()</span>
|
||||
<span id="cb6-2878"><a href></a> <span class="op">.</span><span class="fu">x</span>(d <span class="kw">=></span> <span class="fu">x</span>(d<span class="op">.</span><span class="at">x</span>))</span>
|
||||
<span id="cb6-2879"><a href></a> <span class="op">.</span><span class="fu">y</span>(d <span class="kw">=></span> <span class="fu">y</span>(d<span class="op">.</span><span class="at">y</span>))</span>
|
||||
<span id="cb6-2880"><a href></a> <span class="op">.</span><span class="fu">curve</span>(d3<span class="op">.</span><span class="at">curveBasis</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2881"><a href></a> </span>
|
||||
<span id="cb6-2882"><a href></a> <span class="co">// Group to contain the basis function lines</span></span>
|
||||
<span id="cb6-2883"><a href></a> <span class="kw">const</span> linesGroup <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">"g"</span>)</span>
|
||||
<span id="cb6-2884"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">"class"</span><span class="op">,</span> <span class="st">"basis-functions"</span>)<span class="op">;</span></span>
|
||||
<span id="cb6-2885"><a href></a> </span>
|
||||
<span id="cb6-2886"><a href></a> <span class="co">// Store the current basis functions for transition</span></span>
|
||||
<span id="cb6-2887"><a href></a> <span class="kw">let</span> currentBasisFunctions <span class="op">=</span> <span class="kw">new</span> <span class="bu">Map</span>()<span class="op">;</span></span>
|
||||
<span id="cb6-2888"><a href></a> </span>
|
||||
<span id="cb6-2889"><a href></a> <span class="co">// Function to update the chart with new data</span></span>
|
||||
<span id="cb6-2890"><a href></a> <span class="kw">function</span> <span class="fu">updateChart</span>(data) {</span>
|
||||
<span id="cb6-2891"><a href></a> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data)<span class="op">;</span></span>
|
||||
<span id="cb6-2892"><a href></a> }</span>
|
||||
<span id="cb6-2893"><a href></a> </span>
|
||||
<span id="cb6-2894"><a href></a> <span class="co">// Function to update the chart with new data</span></span>
|
||||
<span id="cb6-2895"><a href></a> <span class="kw">function</span> <span class="fu">updateChart</span>(data) {</span>
|
||||
<span id="cb6-2896"><a href></a> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data)<span class="op">;</span></span>
|
||||
<span id="cb6-2897"><a href></a> }</span>
|
||||
<span id="cb6-2898"><a href></a> </span>
|
||||
<span id="cb6-2899"><a href></a> <span class="co">// Store the update function</span></span>
|
||||
<span id="cb6-2900"><a href></a> svg<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="at">update</span> <span class="op">=</span> updateChart<span class="op">;</span></span>
|
||||
<span id="cb6-2901"><a href></a> </span>
|
||||
<span id="cb6-2902"><a href></a> <span class="co">// Initial render</span></span>
|
||||
<span id="cb6-2903"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2904"><a href></a> </span>
|
||||
<span id="cb6-2905"><a href></a> container<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="fu">appendChild</span>(svg<span class="op">.</span><span class="fu">node</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2906"><a href></a> <span class="cf">return</span> container<span class="op">.</span><span class="fu">node</span>()<span class="op">;</span></span>
|
||||
<span id="cb6-2907"><a href></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<span id="cb6-2894"><a href></a> <span class="co">// Store the update function</span></span>
|
||||
<span id="cb6-2895"><a href></a> svg<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="at">update</span> <span class="op">=</span> updateChart<span class="op">;</span></span>
|
||||
<span id="cb6-2896"><a href></a> </span>
|
||||
<span id="cb6-2897"><a href></a> <span class="co">// Initial render</span></span>
|
||||
<span id="cb6-2898"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2899"><a href></a> </span>
|
||||
<span id="cb6-2900"><a href></a> container<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="fu">appendChild</span>(svg<span class="op">.</span><span class="fu">node</span>())<span class="op">;</span></span>
|
||||
<span id="cb6-2901"><a href></a> <span class="cf">return</span> container<span class="op">.</span><span class="fu">node</span>()<span class="op">;</span></span>
|
||||
<span id="cb6-2902"><a href></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output cell-output-display">
|
||||
<div id="ojs-cell-5" data-nodetype="declaration">
|
||||
|
||||
|
||||
@@ -795,17 +795,15 @@ Berrisch, J., & Ziel, F. [-@BERRISCH2023105221]. *Journal of Econometrics*, 237(
|
||||
|
||||
```{r, echo = FALSE, fig.height=8, cache = TRUE}
|
||||
par(mfrow = c(3, 3), mar = c(2, 2, 2, 2))
|
||||
set.seed(1)
|
||||
set.seed(42)
|
||||
# Data
|
||||
X <- matrix(ncol = 3, nrow = 15)
|
||||
X[, 1] <- seq(from = 8, to = 12, length.out = 15) + 0.25 * rnorm(15)
|
||||
X[, 2] <- 10 + 0.25 * rnorm(15)
|
||||
X[, 3] <- seq(from = 12, to = 8, length.out = 15) + 0.25 * rnorm(15)
|
||||
X <- matrix(ncol = 2, nrow = 15)
|
||||
X[, 1] <- seq(from = 8, to = 12, length.out = 15) + 0.4 * rnorm(15)
|
||||
X[, 2] <- seq(from = 12, to = 8, length.out = 15) + 0.4 * rnorm(15)
|
||||
# Weights
|
||||
w <- matrix(ncol = 3, nrow = 15)
|
||||
w <- matrix(ncol = 2, nrow = 15)
|
||||
w[, 1] <- sin(0.1 * 1:15)
|
||||
w[, 2] <- cos(0.1 * 1:15)
|
||||
w[, 3] <- seq(from = -2, 0.25, length.out = 15)^2
|
||||
w[, 2] <- seq(from = -2, 0.25, length.out = 15)^2
|
||||
w <- (w / rowSums(w))
|
||||
# Vis
|
||||
plot(X[, 1],
|
||||
@@ -825,27 +823,24 @@ plot(w[, 1],
|
||||
xlab = "",
|
||||
ylab = "", xaxt = "n", yaxt = "n", bty = "n", col = "#80C684FF"
|
||||
)
|
||||
text(6, 0.5, TeX("$w_1(t)$"), cex = 2, col = "#80C684FF")
|
||||
text(6, 0.5, latex2exp::TeX("$w_1(t)$"), cex = 2, col = "#80C684FF")
|
||||
arrows(13, 0.25, 15, 0.0, , lwd = 4, bty = "n", col = "#414141FF")
|
||||
plot.new()
|
||||
plot.new()
|
||||
plot.new()
|
||||
|
||||
text(6, 0.6, TeX("$w_2(t)$"), cex = 2, col = "#FFD44EFF")
|
||||
arrows(13, 0.5, 15, 0.5, , lwd = 4, bty = "n", col = "#414141FF")
|
||||
plot(rowSums(X * w), lwd = 4, type = "l", xlab = "", ylab = "", xaxt = "n", yaxt = "n", bty = "n", col = "#D81A5FFF")
|
||||
plot(X[, 3],
|
||||
plot(X[, 2],
|
||||
lwd = 4,
|
||||
type = "l", ylim = c(8, 12),
|
||||
xlab = "", ylab = "", xaxt = "n", yaxt = "n", bty = "n", col = "#FFD44EFF"
|
||||
)
|
||||
plot(w[, 3],
|
||||
plot(w[, 2],
|
||||
lwd = 4, type = "l",
|
||||
ylim = c(0, 1),
|
||||
xlab = "",
|
||||
ylab = "", xaxt = "n", yaxt = "n", bty = "n", col = "#FFD44EFF"
|
||||
)
|
||||
text(6, 0.25, TeX("$w_2(t)$"), cex = 2, col = "#FFD44EFF")
|
||||
text(6, 0.25, latex2exp::TeX("$w_2(t)$"), cex = 2, col = "#FFD44EFF")
|
||||
arrows(13, 0.75, 15, 1, , lwd = 4, bty = "n", col = "#414141FF")
|
||||
|
||||
```
|
||||
|
||||
Reference in new issue
Block a user