2f:[{"id":"0c40cd49d90a565e0a4a506d41e314f7c5d17e06e0a8d004a1fd7c56cf04d3b0fc5d14ee448633f9afcd9255fea3d2cc2a05418492eaa44866b93f5a9961a002","href":"https://static.observableusercontent.com/files/0c40cd49d90a565e0a4a506d41e314f7c5d17e06e0a8d004a1fd7c56cf04d3b0fc5d14ee448633f9afcd9255fea3d2cc2a05418492eaa44866b93f5a9961a002","name":"CleanShot 2023-04-28 at 23.32.20-2x.png","type":"image/png","lastModified":1714698774878.622,"size":151010},{"id":"e2539637f4552131f50be95d41de00d41f586351ecf782c1c6dae848ad29c2c4a545906b1d91a08bffd6bbca0b855e05c20e89c6ea3fa41faca15dc0c5b5ab06","href":"https://static.observableusercontent.com/files/e2539637f4552131f50be95d41de00d41f586351ecf782c1c6dae848ad29c2c4a545906b1d91a08bffd6bbca0b855e05c20e89c6ea3fa41faca15dc0c5b5ab06","name":"CleanShot 2024-05-03 at 06@2.56.33-2x.jpg","type":"image/jpeg","lastModified":1714712484299.835,"size":38284},{"id":"0aca34f4e51b15939fe80f98f69896d65ce8b433e42f68fd09549f0a9a574807502947607482d3422f5a9d8e153474b3be047113cc0c3f258db01faf1602267b","href":"https://static.observableusercontent.com/files/0aca34f4e51b15939fe80f98f69896d65ce8b433e42f68fd09549f0a9a574807502947607482d3422f5a9d8e153474b3be047113cc0c3f258db01faf1602267b","name":"CleanShot 2025-04-14 at 06.29.49-2x.jpg","type":"image/jpeg","lastModified":1744605013836.823,"size":109955},{"id":"07d7862697acba6915ed2f9b1b2b8c1d27085358bddc742b0c756eb6323f146640204797020469c259e11b495e96aff159d737e1fb77d5df56c7b793690802a4","href":"https://static.observableusercontent.com/files/07d7862697acba6915ed2f9b1b2b8c1d27085358bddc742b0c756eb6323f146640204797020469c259e11b495e96aff159d737e1fb77d5df56c7b793690802a4","name":"CleanShot 2023-04-28 at 23.32.58-2x.png","type":"image/png","lastModified":1714698774878.622,"size":151798},{"id":"b723e1a1c399337b85fe6f9b2863f4b7511627aff2d6a6e61ce4fc47054667de77d1074e5888e571dffa07af81097f7e5d3ee512ab71ad6449ccace6a477dd4c","href":"https://static.observableusercontent.com/files/b723e1a1c399337b85fe6f9b2863f4b7511627aff2d6a6e61ce4fc47054667de77d1074e5888e571dffa07af81097f7e5d3ee512ab71ad6449ccace6a477dd4c","name":"CleanShot 2023-04-28 at 22.53.47-2x.png","type":"image/png","lastModified":1714698774878.622,"size":25659},{"id":"da04285166fdf625c2cdebd3460aaf12d76702157847f3f285ae0938ca6f5ee73ccf9ca217d3502a1c5ea8e83133abf8e2c9556f92cf93dc041aac76de7b7be5","href":"https://static.observableusercontent.com/files/da04285166fdf625c2cdebd3460aaf12d76702157847f3f285ae0938ca6f5ee73ccf9ca217d3502a1c5ea8e83133abf8e2c9556f92cf93dc041aac76de7b7be5","name":"CleanShot 2023-04-28 at 22.51.14-2x.png","type":"image/png","lastModified":1714698774878.622,"size":31843},{"id":"145a970d01cb95d04be8041db00d93e440271436e0a54b35f5311e8dd30043b2a1c0a0f6e427533c581184db2be80b973f2b610af766c0f8502042b9ef0e63a1","href":"https://static.observableusercontent.com/files/145a970d01cb95d04be8041db00d93e440271436e0a54b35f5311e8dd30043b2a1c0a0f6e427533c581184db2be80b973f2b610af766c0f8502042b9ef0e63a1","name":"CleanShot 2023-04-28 at 23.13.19-2x.png","type":"image/png","lastModified":1714698774878.622,"size":107909},{"id":"0cd3b481dcf3a4840451198dac95f4339135134f9e84a3d941c0fd445d2ea790f6df4a263dd3addaab2b8c9f59ae7a460907aad4c7c5a76abd39710cf22f0a7c","href":"https://static.observableusercontent.com/files/0cd3b481dcf3a4840451198dac95f4339135134f9e84a3d941c0fd445d2ea790f6df4a263dd3addaab2b8c9f59ae7a460907aad4c7c5a76abd39710cf22f0a7c","name":"CleanShot 2023-04-28 at 23.21.49-2x.png","type":"image/png","lastModified":1714698774878.622,"size":7848},{"id":"2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","href":"https://static.observableusercontent.com/files/2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","name":"ETH-USD@3.csv","type":"text/csv","lastModified":1714698774878.622,"size":159091},{"id":"a2f8d5a2bff113cbd381dfd5e04ddd28529b02230cd26ef989aa8a366cd6a878ee449452c7c1918e6e4f59c98d762ae2ce9bc95a2e9384ded88f88b0cc8ba7b7","href":"https://static.observableusercontent.com/files/a2f8d5a2bff113cbd381dfd5e04ddd28529b02230cd26ef989aa8a366cd6a878ee449452c7c1918e6e4f59c98d762ae2ce9bc95a2e9384ded88f88b0cc8ba7b7","name":"CleanShot 2023-04-28 at 22.10.42-2x.png","type":"image/png","lastModified":1714698774878.622,"size":15047},{"id":"3dc6552954ec295d4beddbf96f6016ce93fdfa40fa33bb5e72dab23ec8b8dac403dd6421bc305881840dba2a5bf115a4f26bcd0e7b9950e9b782b988dc43eff3","href":"https://static.observableusercontent.com/files/3dc6552954ec295d4beddbf96f6016ce93fdfa40fa33bb5e72dab23ec8b8dac403dd6421bc305881840dba2a5bf115a4f26bcd0e7b9950e9b782b988dc43eff3","name":"CleanShot 2023-04-28 at 16.16.09-2x.png","type":"image/png","lastModified":1714698774878.622,"size":97582},{"id":"f977ac1530a11de5694b7d26f5672eadcb265ce8bac07c746f5381188fba2f2134d12d8d407bc91e6e9558f147a066906aad7874a1a61aaad7a6be1f8fc6dcbd","href":"https://static.observableusercontent.com/files/f977ac1530a11de5694b7d26f5672eadcb265ce8bac07c746f5381188fba2f2134d12d8d407bc91e6e9558f147a066906aad7874a1a61aaad7a6be1f8fc6dcbd","name":"CleanShot 2023-04-28 at 22.47.12-2x.png","type":"image/png","lastModified":1714698774878.622,"size":84822},{"id":"de369f534f51c449a2c72147c3f78b6ff6a8680df68472e9f47627fc82388f60d01c93476d1e67261713734643cd6b129c49a00ec0ce2d6ecc07b0f17f72fb4d","href":"https://static.observableusercontent.com/files/de369f534f51c449a2c72147c3f78b6ff6a8680df68472e9f47627fc82388f60d01c93476d1e67261713734643cd6b129c49a00ec0ce2d6ecc07b0f17f72fb4d","name":"CleanShot 2023-04-28 at 23.30.43-2x.png","type":"image/png","lastModified":1714698774878.622,"size":100718},{"id":"32eadff8353567cc211306baff197e29b33d9e0a761d9e2d5595ae416d73beb947834b25c063f98d31ce17d99051a976f1750eee09986db37dcec6efa2264e51","href":"https://static.observableusercontent.com/files/32eadff8353567cc211306baff197e29b33d9e0a761d9e2d5595ae416d73beb947834b25c063f98d31ce17d99051a976f1750eee09986db37dcec6efa2264e51","name":"CleanShot 2023-04-28 at 23.30.01-2x.png","type":"image/png","lastModified":1714698774878.622,"size":7769},{"id":"d5c552e14ece5dfc7b6dc95b93ad384926f722cf4438138b40be4583ef2b1372fd236a5a105d5223c2c65604b5f9d91df12ca17d69d6deba60cfa354955e3fa8","href":"https://static.observableusercontent.com/files/d5c552e14ece5dfc7b6dc95b93ad384926f722cf4438138b40be4583ef2b1372fd236a5a105d5223c2c65604b5f9d91df12ca17d69d6deba60cfa354955e3fa8","name":"CleanShot 2023-04-28 at 23.27.35-2x.png","type":"image/png","lastModified":1714698774878.622,"size":108206},{"id":"6693e4862c8384fe9bf69d068779bd6c0c6cb575a762c72aff8625962ea6504baa3ee2952258e085035cb1acbf9015321f7eb41388d7033a2de347972e0db7ed","href":"https://static.observableusercontent.com/files/6693e4862c8384fe9bf69d068779bd6c0c6cb575a762c72aff8625962ea6504baa3ee2952258e085035cb1acbf9015321f7eb41388d7033a2de347972e0db7ed","name":"CleanShot 2023-04-28 at 22.39.48-2x.png","type":"image/png","lastModified":1714698774878.622,"size":311216},{"id":"4ab15f6b60eee161208dff41ae4f92ee993174e99e38b7763b2f8907717eca3d1f937e52a212e3a3bf301b22bd7e45853eff9359e8cf560b6f66e06e761f3229","href":"https://static.observableusercontent.com/files/4ab15f6b60eee161208dff41ae4f92ee993174e99e38b7763b2f8907717eca3d1f937e52a212e3a3bf301b22bd7e45853eff9359e8cf560b6f66e06e761f3229","name":"CleanShot 2023-04-28 at 23.00.06-2x.png","type":"image/png","lastModified":1714698774878.622,"size":174111},{"id":"c8dbd17561d09ed78a1390835f3ca287445d991a2e6bfaa60f9b3c4bfa98b45e2ac7e1e875ebbc7cf865149eaaf2c59e76824a0811a7533f7446030142fb784b","href":"https://static.observableusercontent.com/files/c8dbd17561d09ed78a1390835f3ca287445d991a2e6bfaa60f9b3c4bfa98b45e2ac7e1e875ebbc7cf865149eaaf2c59e76824a0811a7533f7446030142fb784b","name":"CleanShot 2023-04-28 at 22.59.07-2x.png","type":"image/png","lastModified":1714698774878.622,"size":180447},{"id":"4137c271d570ffb4e1f7d8a2894d3d571b237ba2ba630eaa10e60b80fcf4dca88bd7b0fce3333fc9ccb7d5c19fae2d9ac0272ee28b45b821948d4778e7010d17","href":"https://static.observableusercontent.com/files/4137c271d570ffb4e1f7d8a2894d3d571b237ba2ba630eaa10e60b80fcf4dca88bd7b0fce3333fc9ccb7d5c19fae2d9ac0272ee28b45b821948d4778e7010d17","name":"CleanShot 2023-04-28 at 22.57.25-2x.png","type":"image/png","lastModified":1714698774878.622,"size":197455},{"id":"f92545d96fe96853e1e98b0c6ad67f7bcabc873f4fc6ac352a3ab724fd6b739dff22a677d1e03e7f30299257bb76207963c29d437811003892cafa2a9f04e923","href":"https://static.observableusercontent.com/files/f92545d96fe96853e1e98b0c6ad67f7bcabc873f4fc6ac352a3ab724fd6b739dff22a677d1e03e7f30299257bb76207963c29d437811003892cafa2a9f04e923","name":"F76CF941-6A2C-4154-B704-9288963ECC15_1_102_o.jpeg","type":"image/jpeg","lastModified":1714698774878.622,"size":746036},{"id":"84cfd172969464050582888ecf645bc382c34ebbad5253c7041afa0f70bac5f8bb41a131c7478d9b2e11f8243c7f6332dabbb4e2cc7f4ba8ffeab7f6cbbd5785","href":"https://static.observableusercontent.com/files/84cfd172969464050582888ecf645bc382c34ebbad5253c7041afa0f70bac5f8bb41a131c7478d9b2e11f8243c7f6332dabbb4e2cc7f4ba8ffeab7f6cbbd5785","name":"CleanShot 2023-04-28 at 22.56.33-2x.png","type":"image/png","lastModified":1714698774878.622,"size":219973},{"id":"4b65dc1d17eb5a910d46a9b95e34c399c7efdccb8ff31807e100224a6d635aa513b88a41591e010e6df0d27c315f083dd6e8e44740912f5d6d5bf32b65cc9743","href":"https://static.observableusercontent.com/files/4b65dc1d17eb5a910d46a9b95e34c399c7efdccb8ff31807e100224a6d635aa513b88a41591e010e6df0d27c315f083dd6e8e44740912f5d6d5bf32b65cc9743","name":"CleanShot 2023-04-28 at 23.34.38-2x.png","type":"image/png","lastModified":1714698774878.622,"size":10290},{"id":"e0329fdf9b003d74634e56c85121ed6ad18e11c50e77d0a40a06441b4f324576fccddce1ea73c6743439d028489508321ec05c4b449f7a11088124496d736592","href":"https://static.observableusercontent.com/files/e0329fdf9b003d74634e56c85121ed6ad18e11c50e77d0a40a06441b4f324576fccddce1ea73c6743439d028489508321ec05c4b449f7a11088124496d736592","name":"CleanShot 2023-04-28 at 22.54.51-2x.png","type":"image/png","lastModified":1714698774878.622,"size":28954}] 2d:{"title":"🕯️ Candlestick Chart","cells":[{"id":0,"value":"# 🕯️ Candlestick Chart","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"toc({\n headers: 'h2, h3, h4, h5, h6',\n skip: 'Candle Stick Chart'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"## How to Read a Candlestick Chart?","pinned":false,"hidden":false,"mode":"md"},{"id":1616,"value":"cleanshot20230428At1616092x = FileAttachment(\"CleanShot 2023-04-28 at 16.16.09-2x.png\").image({width: 400, style: \"border:none\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2323,"value":"cleanshot20230428At2210422x = FileAttachment(\"CleanShot 2023-04-28 at 22.10.42-2x.png\").image({width: 400, style: \"border:none\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2956,"value":"f76cf9416a2c4154B7049288963ecc15_1_102_o = FileAttachment(\"F76CF941-6A2C-4154-B704-9288963ECC15_1_102_o.jpeg\").image({style: \"border:none\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"## **🕯️1:** Import and Prepare the Dataset","pinned":false,"hidden":false,"mode":"md"},{"id":1197,"value":"_Source: [ETH-USD](https://finance.yahoo.com/quote/ETH-USD/history?period1=1438905600&period2=1652227200&interval=1d&filter=history&frequency=1d&includeAdjustedClose=true) at Yahoo Finance_","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"View and import dataset:","pinned":false,"hidden":false,"mode":"md"},{"id":1594,"value":"data_initial = await FileAttachment(\"ETH-USD@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"Filter data by date, there is roughly a year of data (since the beginning of 2022):","pinned":false,"hidden":false,"mode":"md"},{"id":1633,"value":"*See [Escape](https://uwdata.github.io/arquero/api/#escape) in Arquero documentation and [getFullYear()](https://www.w3schools.com/jsref/jsref_getfullyear.asp) on W3Schools.*","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"// Uncomment to activate\n\n// data_only2023 = aq\n// .from(data_initial)\n// .filter(aq.escape((d) => d[\"Date\"].getFullYear() == 2023))\n// .objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1403,"value":"## **🕯️2:** Make a Simple Candlestick Chart","pinned":false,"hidden":false,"mode":"md"},{"id":1404,"value":"_See [Plot: Bar](https://observablehq.com/@observablehq/plot-bar) and [Plot: Rule](https://observablehq.com/@observablehq/plot-rule) on Observable._","pinned":false,"hidden":false,"mode":"md"},{"id":1417,"value":"To create the bars, specify 'y1' and 'y2' properties of '`Plot.barY()`' instead of only the 'y' property as we have been doing so far. To create the wicks, do the same: specify the 'y1' and 'y2' for the `Plot.ruleX` mark:","pinned":false,"hidden":false,"mode":"md"},{"id":2662,"value":"cleanshot20230428At2332582x = FileAttachment(\"CleanShot 2023-04-28 at 23.32.58-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2749,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"## **🕯️3:** Color the Candles","pinned":false,"hidden":false,"mode":"md"},{"id":1673,"value":"_Colors: `crimson`, `oliveDrab`_","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"Color candles by price change:","pinned":false,"hidden":false,"mode":"md"},{"id":2656,"value":"cleanshot20230428At2332202x = FileAttachment(\"CleanShot 2023-04-28 at 23.32.20-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2737,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"## **🕯️4:** Fix the Tick Labels on the X Axis","pinned":false,"hidden":false,"mode":"md"},{"id":1388,"value":"_See [Plot: Rule](https://observablehq.com/@observablehq/plot-rule) on Observable._","pinned":false,"hidden":false,"mode":"md"},{"id":1204,"value":"There are too many tick labels on the x axis because the bar mark is treating the data it is given as categorical. This leads to the creation of a separate category for each day in our data. When there are so many categories, a warning sign also appears on the right upper side of the chart.","pinned":false,"hidden":false,"mode":"md"},{"id":1702,"value":"The warning is there because bar mark is not the right choice here. Use the `ruleX` mark also for the candle bodies:","pinned":false,"hidden":false,"mode":"md"},{"id":2640,"value":"cleanshot20230428At2330432x = FileAttachment(\"CleanShot 2023-04-28 at 23.30.43-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2724,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":2972,"value":"👆 _In your solution, the exact layout and dates on the x-axis may look different than the image. This is OK as long as you have successfully fixed the overlapping dates issue from the previous step._","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"## **🕯️5:** Abstract the Date","pinned":false,"hidden":false,"mode":"md"},{"id":1716,"value":"*See [Escape](https://uwdata.github.io/arquero/api/#escape) in Arquero documentation and [getFullYear()](https://www.w3schools.com/jsref/jsref_getfullyear.asp) on W3Schools.*","pinned":false,"hidden":false,"mode":"md"},{"id":1844,"value":"First, create a slider that...\n- Has a range between 2017 and 2023.\n- Has the default value of 2023","pinned":false,"hidden":false,"mode":"md"},{"id":1746,"value":"FileAttachment(\"CleanShot 2023-04-28 at 23.30.01-2x.png\").image({width: 350})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2713,"value":"// viewof control_year = ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":1209,"value":"Then filter the date based on the value of the slider. \n\nTo achieve this, you will need to use a variable (instead of value fixed value) in Arquero's `.filter()` method. E.g., instead of `d => d.year === 2000`, you should use `d => d.year === selectedYear`.","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"// Uncomment to enable\n\n// data_filtered = aq.from(data_initial)\n// .filter(aq.escape((d) => d[\"Date\"].getFullYear() === control_year))\n// .objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3363,"value":"*👆 Here, we went back to using `data_initial`, as it has several years in it.*","pinned":false,"hidden":false,"mode":"md"},{"id":1856,"value":"Plug the filtered data into the chart:","pinned":false,"hidden":false,"mode":"md"},{"id":2625,"value":"cleanshot20230428At2327352x = FileAttachment(\"CleanShot 2023-04-28 at 23.27.35-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2699,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":2630,"value":"_👆 2017 is selected in the image for demonstration purposes. You do not need to display the exact same view._","pinned":false,"hidden":false,"mode":"md"},{"id":2164,"value":"## **🕯️6:** Detach the Slider","pinned":false,"hidden":false,"mode":"md"},{"id":2617,"value":"*See '[A Brief Introduction to `viewof`](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof)' and '[Introduction to Views](https://observablehq.com/@observablehq/views)' on Observable.*","pinned":false,"hidden":false,"mode":"md"},{"id":2185,"value":"As an alternative to having to manually move the slider throughout the notebook, you can summon it if you call it from Markdown or HTML code, using the `viewof` keyword:","pinned":false,"hidden":false,"mode":"md"},{"id":2610,"value":"cleanshot20230428At2321492x = FileAttachment(\"CleanShot 2023-04-28 at 23.21.49-2x.png\").image({width: 400})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2683,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":2193,"value":"_👆 **Note**: For this to work, `viewof` keyword must be used both when creating the slider and when calling it from within Markdown/HTML._","pinned":false,"hidden":false,"mode":"md"},{"id":244,"value":"## **🕯️7:** Adjust Candle Sizes Dynamically","pinned":false,"hidden":false,"mode":"md"},{"id":1230,"value":"*See [Array.length](https://www.w3schools.com/jsref/jsref_length_array.asp) in W3 schools.*","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"When there are many candles, the candles overlap; they shouldn't. Let the `strokeWidth` parameter have a dynamic value that adapts to the number of candles in the chart.","pinned":false,"hidden":false,"mode":"md"},{"id":1763,"value":"Start by counting the number of observations in the filtered dataset, and assign it to a variable:","pinned":false,"hidden":false,"mode":"md"},{"id":2667,"value":"cleanshot20230428At2334382x = FileAttachment(\"CleanShot 2023-04-28 at 23.34.38-2x.png\").image({width: 250})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2674,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":3379,"value":"Assign a desirable width value to a `chartWidth` variable (hint: 1200 is a good value):","pinned":false,"hidden":false,"mode":"md"},{"id":3382,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":1775,"value":"Let the variables you just created determine the `strokeWidth` property of the candle bodies (hint: dividing the chart width by the number of days in a given year, and then subtracting a small value to create some distance between the candles seems to do the trick):","pinned":false,"hidden":false,"mode":"md"},{"id":2576,"value":"cleanshot20230428At2313192x = FileAttachment(\"CleanShot 2023-04-28 at 23.13.19-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2678,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":2581,"value":"_👆 **Note**: In the above image, the slider is dragged on top of this and it was set to 2017, so that you can see the effect of dynamic candle widths in a year, where they were especially problematic before. You do not need to make a new slider with 2017 as its default value, and you do not need to fix the view of your chart to 2017 to match the image perfectly. What matters is that the candle sizes can indeed be set dynamically and displayed well for all years._","pinned":false,"hidden":false,"mode":"md"},{"id":371,"value":"## **🕯️8:** Add Tooltips","pinned":false,"hidden":false,"mode":"md"},{"id":429,"value":"*See: [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) on MDN Web Docs and [Intl.DateTimeFormat Cheatsheet](https://devhints.io/wip/intl-datetime) on Devhints.io. For number formatting, see [Tick Formatting](https://observablehq.com/d/93c789be8f819caf#cell-2380) in the Scales cheatsheet on Observable.*","pinned":false,"hidden":false,"mode":"md"},{"id":3725,"value":"_For precise adjustment of tooltip content, see [Marks Have Channels](https://observablehq.com/plot/features/marks#marks-have-channels) on Observable. Channels serve as the link between the dataset and the marks. When you provide a column name as a value for properties like x, y, or stroke (or provide a function), channels are implicitly created, establishing a connection between the property and a column in the data. By default, tooltips display channels that has already been opened in a chart. If you want to include more columns in the tooltips, you must explicitly open these channels. This means you should inform Plot that the specified column names in the channels property are also active parts of the visualization. Once this is done, the tooltips will display these as well._","pinned":false,"hidden":false,"mode":"md"},{"id":3735,"value":"Code snippet for formatting tooltips:\n\n\n```js\nPlot.plot({\n ...\n Plot.ruleX({\n ...\n tip: {\n format:{\n x: d => dateFormat.format(d),\n y: false,\n Open: d => d3.format(\".3s\")(d),\n Close: d => d3.format(\".3s\")(d),\n High: d => d3.format(\".3s\")(d),\n Low: d => d3.format(\".3s\")(d)\n }\n }\n })\n})\n```\n👆 _This should to be copy-pasted into the right location in your code._","pinned":false,"hidden":false,"mode":"md"},{"id":3404,"value":"Helper function for formatting dates:\n","pinned":false,"hidden":false,"mode":"md"},{"id":1837,"value":"dateFormat = new Intl.DateTimeFormat('en-US', { \n weekday: 'short', // 'narrow' | 'short' | 'long'\n year: 'numeric', // numeric' | '2-digit',\n month: 'short', // 'numeric' | '2-digit' | 'narrow' | 'short' | 'long',\n day: 'numeric' // 'numeric' | '2-digit',\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3749,"value":"👆 _This is a helper function used by the tooltip formatting snippet provided further above. There is no need to also copy-paste this._","pinned":false,"hidden":false,"mode":"md"},{"id":3396,"value":"cleanshot20250414At0629492x = FileAttachment(\"CleanShot 2025-04-14 at 06.29.49-2x.jpg\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2758,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"## **🕯️9:** Add Financial Indicators","pinned":false,"hidden":false,"mode":"md"},{"id":1244,"value":"_For implementation, see [d3fc-technical-indicator](https://github.com/d3fc/d3fc/blob/master/packages/d3fc-technical-indicator/README.md) in D3FC API. For the theory behind the indicators, see [EMA](https://www.investopedia.com/terms/e/ema.asp), [Bollinger Bands](https://www.investopedia.com/terms/b/bollingerbands.asp), and [MACD](https://www.investopedia.com/terms/m/macd.asp) on Investopedia_.","pinned":false,"hidden":false,"mode":"md"},{"id":1993,"value":"Financial data is often visualized with `moving window` statistics. You will implement some of such financial indicators in this section.","pinned":false,"hidden":false,"mode":"md"},{"id":1239,"value":"First, require the `d3fc` library:","pinned":false,"hidden":false,"mode":"md"},{"id":469,"value":"fc = require('d3fc@15.2.6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2000,"value":"### Generate Indicator Data","pinned":false,"hidden":false,"mode":"md"},{"id":549,"value":"#### Exponential Moving Average (EMA)","pinned":false,"hidden":false,"mode":"md"},{"id":1256,"value":"Create a 9-period EMA column of `close` values:","pinned":false,"hidden":false,"mode":"md"},{"id":547,"value":"// Uncoment to enable\n\n// emaColumn = fc.indicatorExponentialMovingAverage()\n// .period( 9 )\n// .value(d => d[\"Close\"])\n// ( data_filtered )","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"#### Bollinger Band","pinned":false,"hidden":false,"mode":"md"},{"id":1262,"value":"Create a 7-period Bollinger band column of `close` values; let it have 2 standard deviations (set using the `multiplier` method):","pinned":false,"hidden":false,"mode":"md"},{"id":539,"value":"// Uncoment to enable\n\n// bollingerColumn = fc.indicatorBollingerBands()\n// .value( d => d[\"Close\"] )\n// .period( control_bollingerPeriod )\n// .multiplier( 2 )\n// ( data_filtered )","pinned":true,"hidden":false,"mode":"ojs"},{"id":2015,"value":"Control the Bollinger period parameter with a slider","pinned":false,"hidden":false,"mode":"md"},{"id":2021,"value":"viewof control_bollingerPeriod = Inputs.range([0, 100], {\n label: \"Bollinger Period\",\n step: 1,\n value: 7\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"#### Moving Average Convergence Divergence (MACD)","pinned":false,"hidden":false,"mode":"md"},{"id":1266,"value":"Create a MACD column with a signal period of 9, fast period of 12, and a slow period of 26:","pinned":false,"hidden":false,"mode":"md"},{"id":555,"value":"// Uncoment to enable\n\n// macdColumn = fc.indicatorMacd()\n// .value( d => d[\"Close\"] )\n// .signalPeriod( 9 )\n// .fastPeriod( 12 )\n// .slowPeriod( 26 )\n// ( data_filtered )","pinned":true,"hidden":false,"mode":"ojs"},{"id":569,"value":"### Join the Indicator Data with the Main Dataset","pinned":false,"hidden":false,"mode":"md"},{"id":1284,"value":"_See: [JS spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spreadsyntax) at MDN._","pinned":false,"hidden":false,"mode":"md"},{"id":1273,"value":"Join the indicator columns you have created with the main dataset:","pinned":false,"hidden":false,"mode":"md"},{"id":2509,"value":"// Uncoment to enable\n\n// data_filtered_withIndicators = data_filtered.map( (d, i) => ({ \n// ema: emaColumn[i],\n// macd: macdColumn[i].macd,\n// macdSignal: macdColumn[i].signal,\n// macdDivergence: macdColumn[i].divergence,\n// bollingerUpper: bollingerColumn[i].upper, \n// bollingerAverage: bollingerColumn[i].average,\n// bollingerLower: bollingerColumn[i].lower,\n// ...d\n// }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2494,"value":"Show the merged data in a table:","pinned":false,"hidden":false,"mode":"md"},{"id":2498,"value":"cleanshot20230428At2300062x = FileAttachment(\"CleanShot 2023-04-28 at 23.00.06-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2867,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":575,"value":"### Add the Bollinger Band to the Chart","pinned":false,"hidden":false,"mode":"md"},{"id":1293,"value":"Create the Bollinger bands, using `Plot.areaY` (for the band) and `Plot.line` (for the average line):","pinned":false,"hidden":false,"mode":"md"},{"id":1939,"value":"displayCaution(`Warning: Do not forget to change the data source; it should be the dataset with indicators that you just created.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2109,"value":"howTo(`It is best to draw marks for the financial indicators before the main marks (i.e., the candle bodies and candle wicks), so that the indicators are not visualized on top of the candles. The earlier you add a mark in the marks list, the earlier it will be drawn, and thus will be at a lower layer. So: if you draw the indicators first, they will be drawn under the candles and won't obscure them.`, {title: 'Hint: You can control the order in which the marks are drawn'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2489,"value":"cleanshot20230428At2259072x = FileAttachment(\"CleanShot 2023-04-28 at 22.59.07-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2895,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":2121,"value":"## **🕯️10:** Make a Control Panel","pinned":false,"hidden":false,"mode":"md"},{"id":2133,"value":"Use Markdown to place your control widgets within a custom layout:","pinned":false,"hidden":false,"mode":"md"},{"id":2139,"value":"// Uncomment and CONVERT TO MARKDOWN cell to activate\n\n// | | |\n// | --------------------- | -------------------------------- |\n// | ${viewof control_year} | ${viewof control_bollingerPeriod} |","pinned":false,"hidden":false,"mode":"ojs"},{"id":2161,"value":"Use HTML to place your control widgets within a custom layout:","pinned":false,"hidden":false,"mode":"md"},{"id":2086,"value":"// Uncomment and CONVERT TO HTML cell to activate\n\n//

\n//

${viewof control_year}

\n//

${viewof control_bollingerPeriod}

\n//

","pinned":true,"hidden":false,"mode":"ojs"},{"id":2476,"value":"cleanshot20230428At2257252x = FileAttachment(\"CleanShot 2023-04-28 at 22.57.25-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2483,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":1180,"value":"## **🕯️11:** Add an External Indicator","pinned":false,"hidden":false,"mode":"md"},{"id":1307,"value":"_See: [Fear and Greed Index](https://alternative.me/crypto/fear-and-greed-index/) on Alternative.me._","pinned":false,"hidden":false,"mode":"md"},{"id":1312,"value":"Show the current index:","pinned":false,"hidden":false,"mode":"md"},{"id":2423,"value":"cleanshot20230428At2247122x = FileAttachment(\"CleanShot 2023-04-28 at 22.47.12-2x.png\").image({width: 250})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2418,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1316,"value":"Get historical data using the API call: \"https://api.alternative.me/fng/?limit=0&format=json\":","pinned":false,"hidden":false,"mode":"md"},{"id":2433,"value":"cleanshot20230428At2251142x = FileAttachment(\"CleanShot 2023-04-28 at 22.51.14-2x.png\").image({width: 850})","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"// Complete the code\n\n// data_fearGreedIndex_raw = d3.json(...)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1321,"value":"Convert '`timestamp`' strings to date objects and make '`values`' numeric:","pinned":false,"hidden":false,"mode":"md"},{"id":2449,"value":"cleanshot20230428At2253472x = FileAttachment(\"CleanShot 2023-04-28 at 22.53.47-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"// Uncomment to activate\n\n// data_fearGreedIndex = aq.from(data_fearGreedIndex_raw.data)\n// .derive({ date: aq.escape(d => new Date(+d[\"timestamp\"] * 1000)) })\n// .derive({ valueAsNumber: d => +d[\"value\"] })\n// .select('value_classification','date','valueAsNumber')\n// .rename({valueAsNumber: \"FearGreedValue\"})\n// .rename({value_classification: \"FearGreedClass\"})\n// .rename({date: \"FearGreedDate\"})\n// .objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3041,"value":"Add this new data as columns to the dataset we have been visualizing:","pinned":false,"hidden":false,"mode":"md"},{"id":2457,"value":"cleanshot20230428At2254512x = FileAttachment(\"CleanShot 2023-04-28 at 22.54.51-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2249,"value":"// Uncomment to activate\n\n// data_filtered_withIndicators_withFearGreedIndex = aq.from(data_filtered_withIndicators)\n// \t.join(aq.from(data_fearGreedIndex), [\"Date\", \"FearGreedDate\"])\n// \t.objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3431,"value":"👆 _If this results in an empty dataset, please refresh the page in your browser._","pinned":false,"hidden":false,"mode":"md"},{"id":2470,"value":"cleanshot20230428At2256332x = FileAttachment(\"CleanShot 2023-04-28 at 22.56.33-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2256,"value":"// Uncomment to activate\n\n// Inputs.table(data_filtered_withIndicators_withFearGreedIndex)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1446,"value":"## **🕯️12:** Plot the Fear & Greed Index Under the Main Chart
and Add Finishing Touches","pinned":false,"hidden":false,"mode":"md"},{"id":2277,"value":"Please also add finishing touches to the main chart: \n1. Right-aligned y axes\n2. Y axis labels\n1. Grids\n3. Control panel _(you can reuse the same code with HTML/Markdown control panel from above; this would detach the previous instance and bring it here.)_","pinned":false,"hidden":false,"mode":"md"},{"id":2240,"value":"_Hint: To align dates between the two charts, you should make sure that both their y axes have been moved to the right side._","pinned":false,"hidden":false,"mode":"md"},{"id":2374,"value":"cleanshot20230428At2239482x = FileAttachment(\"CleanShot 2023-04-28 at 22.39.48-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2922,"value":"// ... your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":3051,"value":"# Further Steps","pinned":false,"hidden":false,"mode":"md"},{"id":3054,"value":"The two other financial indicators we have previously added to the dataset can also be visualized. To do this, please...\n\n1. Add the Exponential Moving Average (the `ema` column) to the main chart.\n \n2. Add MACD as another small chart between the main chart and the Fear-Greed Index chart. While doing this, please make sure this chart also is styled in a way comparable to the Fear-Greed Index chart (e.g., height of chart, y axis position, grid). However, the color of the line should be different than the other lines. The MACD chart should contain these elements:\n \n - A line mark for the `macd` column\n - A line mark (of a different color) for the `macdSignal` column\n - A rule mark for the `macdDivergence` column, with rules (bars) for negative values in a different color than the positive ones.\n \n3. After you are done, make sure to unpin all cells, so that your visualization looks like a seamless user interface.","pinned":false,"hidden":false,"mode":"md"},{"id":3107,"value":"An example for the MACD chart described in item 2:","pinned":false,"hidden":false,"mode":"md"},{"id":3094,"value":"cleanshot20240503At06256332x = FileAttachment(\"CleanShot 2024-05-03 at 06@2.56.33-2x.jpg\").image({width: 700})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3050,"value":"// ... your control panel code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":3062,"value":"// ... your main chart code here (with MA added)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3059,"value":"// ... your MACD chart code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":3060,"value":"// ... your FGI chart code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"**Notebook Style**","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":781,"value":"import {Wrangler, op} from \"@observablehq/data-wrangler\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2106,"value":"import {howTo} from \"@clokman/howto\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2342,"value":"import {imageToDo} from \"@clokman/student-blocks\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2989,"value":"import {displayCaution} from \"@mkfreeman/utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2344,"value":"imageToDo","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}