3e:null 3f:["$","title",null,{"children":"Candlestick Chart | Workplace Name | Observable"}] 45:T523,Plot.plot({ width: 1200, fooltip: { stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), strokeWidth: (d) => 1000 / numberOfDaysInFilterdData}, // BlUE THINGS SHOULD GONE? marks: [ Plot.ruleX(data_filtered, { x: "Date", y1: "Low", y2: "High", stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), title: (d) => `${d["Date"].toLocaleString("default", {month: "long"})} ${d["Date"].getDate()} Close: ${d3.format(".3s")(d["Close"])} Open: ${d3.format(".3s")(d["Open"])} High: ${d3.format(".3s")(d["High"])} Low: ${d3.format(".3s")(d["Low"])}` }), Plot.ruleX(data_filtered, { x: "Date", y1: "Open", y2: "Close", stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), strokeWidth: (d) => 1000 / numberOfDaysInFilterdData, title: (d) => `${d["Date"].toLocaleString("default", {month: "long"})} ${d["Date"].getDate()} Close: ${d3.format(".3s")(d["Close"])} Open: ${d3.format(".3s")(d["Open"])} High: ${d3.format(".3s")(d["High"])} Low: ${d3.format(".3s")(d["Low"])}` }) ] })46:T47d,Plot.plot({ width: 1200, fooltip: { stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), strokeWidth: (d) => 1000 / numberOfDaysInFilterdData}, // BlUE THINGS SHOULD GONE? marks: [ Plot.areaY(data_filtered_withIndicators,{ x: "Date", y1: "bollingerLower", y2: "bollingerUpper", fill: "dodgerblue", fillOpacity: 0.2, stroke: "blue", strokeOpacity: 0.3}), Plot.line(data_filtered_withIndicators, { x: "Date", y: "bollingerAverage", stroke: "blue", strokeOpacity: 0.7}), Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "Low", y2: "High", stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), title: createTooltipContent }), Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "Open", y2: "Close", stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), strokeWidth: (d) => 1000 / numberOfDaysInFilterdData, title: createTooltipContent }) ] })47:T47d,Plot.plot({ width: 1200, fooltip: { stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), strokeWidth: (d) => 1000 / numberOfDaysInFilterdData}, // BlUE THINGS SHOULD GONE? marks: [ Plot.areaY(data_filtered_withIndicators,{ x: "Date", y1: "bollingerLower", y2: "bollingerUpper", fill: "dodgerblue", fillOpacity: 0.2, stroke: "blue", strokeOpacity: 0.3}), Plot.line(data_filtered_withIndicators, { x: "Date", y: "bollingerAverage", stroke: "blue", strokeOpacity: 0.7}), Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "Low", y2: "High", stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), title: createTooltipContent }), Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "Open", y2: "Close", stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), strokeWidth: (d) => 1000 / numberOfDaysInFilterdData, title: createTooltipContent }) ] })48:T4fe,Plot.plot({ width: 1200, y: { label: "Price", grid: true, gridOpacity: 0.2, }, x: { grid: true, gridOpacity: 0.2, }, fooltip: { stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), strokeWidth: (d) => 1000 / numberOfDaysInFilterdData}, marks: [ Plot.axisY({anchor: "right"}), Plot.areaY(data_filtered_withIndicators,{ x: "Date", y1: "bollingerLower", y2: "bollingerUpper", fill: "dodgerblue", fillOpacity: 0.2, stroke: "blue", strokeOpacity: 0.2,}), Plot.line(data_filtered_withIndicators, { x: "Date", y: "bollingerAverage", stroke: "blue", strokeOpacity: 0.7}), Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "Low", y2: "High", stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), title: createTooltipContent }), Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "Open", y2: "Close", stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), strokeWidth: (d) => 1000 / numberOfDaysInFilterdData, title: createTooltipContent }) ] })49:T5af,// Main chart with EMA Plot.plot({ width: 1200, y: { label: "Price", grid: true, gridOpacity: 0.2, }, x: { grid: true, gridOpacity: 0.2, }, fooltip: { stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), strokeWidth: (d) => 1000 / numberOfDaysInFilterdData}, marks: [ Plot.axisY({anchor: "right"}), Plot.areaY(data_filtered_withIndicators,{ x: "Date", y1: "bollingerLower", y2: "bollingerUpper", fill: "dodgerblue", fillOpacity: 0.2, stroke: "blue", strokeOpacity: 0.2,}), Plot.line(data_filtered_withIndicators, { x: "Date", y: "bollingerAverage", stroke: "blue", strokeOpacity: 0.7}), Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "Low", y2: "High", stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), title: createTooltipContent }), Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "Open", y2: "Close", stroke: (d) => (d.Close < d.Open ? "crimson" : "olivedrab"), strokeWidth: (d) => 1000 / numberOfDaysInFilterdData, title: createTooltipContent }), Plot.line(data_filtered_withIndicators, { x: "Date", y: "ema", // Add EMA line stroke: "orange", strokeOpacity: 0.7, }), ] })4a:[{"id":"5d8ff6efdf97816cc005775f540820a736d3420f6b447083ab3b8957e7a9d5f80ab58eb8d60ac441ee3a2b6db0cb5143b7b623feacfd5c7aad01d06fe8e9454f","href":"https://static.observableusercontent.com/files/5d8ff6efdf97816cc005775f540820a736d3420f6b447083ab3b8957e7a9d5f80ab58eb8d60ac441ee3a2b6db0cb5143b7b623feacfd5c7aad01d06fe8e9454f","name":"CleanShot 2023-04-28 at 23.09.38-2x.png","type":"image/png","lastModified":1714722307881.032,"size":113821},{"id":"f977ac1530a11de5694b7d26f5672eadcb265ce8bac07c746f5381188fba2f2134d12d8d407bc91e6e9558f147a066906aad7874a1a61aaad7a6be1f8fc6dcbd","href":"https://static.observableusercontent.com/files/f977ac1530a11de5694b7d26f5672eadcb265ce8bac07c746f5381188fba2f2134d12d8d407bc91e6e9558f147a066906aad7874a1a61aaad7a6be1f8fc6dcbd","name":"CleanShot 2023-04-28 at 22.47.12-2x.png","type":"image/png","lastModified":1714722307881.032,"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":1714722307881.032,"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":1714722307881.032,"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":1714722307881.032,"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":1714722307881.032,"size":311216},{"id":"ceb89d030c2b3aeb672eafd83fdcc5d99d2d397ba691d8ebbe20edfdf48ceeaf47c8708bc88670f33cbb064e1d08be4c9c4c70b927a7446f1ed351ba1005134e","href":"https://static.observableusercontent.com/files/ceb89d030c2b3aeb672eafd83fdcc5d99d2d397ba691d8ebbe20edfdf48ceeaf47c8708bc88670f33cbb064e1d08be4c9c4c70b927a7446f1ed351ba1005134e","name":"CleanShot 2023-04-28 at 23.06.02-2x.png","type":"image/png","lastModified":1714722307881.032,"size":114743},{"id":"4ab15f6b60eee161208dff41ae4f92ee993174e99e38b7763b2f8907717eca3d1f937e52a212e3a3bf301b22bd7e45853eff9359e8cf560b6f66e06e761f3229","href":"https://static.observableusercontent.com/files/4ab15f6b60eee161208dff41ae4f92ee993174e99e38b7763b2f8907717eca3d1f937e52a212e3a3bf301b22bd7e45853eff9359e8cf560b6f66e06e761f3229","name":"CleanShot 2023-04-28 at 23.00.06-2x.png","type":"image/png","lastModified":1714722307881.032,"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":1714722307881.032,"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":1714722307881.032,"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":1714722307881.032,"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":1714722307881.032,"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":1714722307881.032,"size":10290},{"id":"b723e1a1c399337b85fe6f9b2863f4b7511627aff2d6a6e61ce4fc47054667de77d1074e5888e571dffa07af81097f7e5d3ee512ab71ad6449ccace6a477dd4c","href":"https://static.observableusercontent.com/files/b723e1a1c399337b85fe6f9b2863f4b7511627aff2d6a6e61ce4fc47054667de77d1074e5888e571dffa07af81097f7e5d3ee512ab71ad6449ccace6a477dd4c","name":"CleanShot 2023-04-28 at 22.53.47-2x.png","type":"image/png","lastModified":1714722307881.032,"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":1714722307881.032,"size":31843},{"id":"0c40cd49d90a565e0a4a506d41e314f7c5d17e06e0a8d004a1fd7c56cf04d3b0fc5d14ee448633f9afcd9255fea3d2cc2a05418492eaa44866b93f5a9961a002","href":"https://static.observableusercontent.com/files/0c40cd49d90a565e0a4a506d41e314f7c5d17e06e0a8d004a1fd7c56cf04d3b0fc5d14ee448633f9afcd9255fea3d2cc2a05418492eaa44866b93f5a9961a002","name":"CleanShot 2023-04-28 at 23.32.20-2x.png","type":"image/png","lastModified":1714722307881.032,"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":1714722307881.032,"size":38284},{"id":"e0329fdf9b003d74634e56c85121ed6ad18e11c50e77d0a40a06441b4f324576fccddce1ea73c6743439d028489508321ec05c4b449f7a11088124496d736592","href":"https://static.observableusercontent.com/files/e0329fdf9b003d74634e56c85121ed6ad18e11c50e77d0a40a06441b4f324576fccddce1ea73c6743439d028489508321ec05c4b449f7a11088124496d736592","name":"CleanShot 2023-04-28 at 22.54.51-2x.png","type":"image/png","lastModified":1714722307881.032,"size":28954},{"id":"07d7862697acba6915ed2f9b1b2b8c1d27085358bddc742b0c756eb6323f146640204797020469c259e11b495e96aff159d737e1fb77d5df56c7b793690802a4","href":"https://static.observableusercontent.com/files/07d7862697acba6915ed2f9b1b2b8c1d27085358bddc742b0c756eb6323f146640204797020469c259e11b495e96aff159d737e1fb77d5df56c7b793690802a4","name":"CleanShot 2023-04-28 at 23.32.58-2x.png","type":"image/png","lastModified":1714722307881.032,"size":151798},{"id":"2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","href":"https://static.observableusercontent.com/files/2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","name":"ETH-USD@3.csv","type":"text/csv","lastModified":1714722307881.032,"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":1714722307881.032,"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":1714722307881.032,"size":97582},{"id":"0cd3b481dcf3a4840451198dac95f4339135134f9e84a3d941c0fd445d2ea790f6df4a263dd3addaab2b8c9f59ae7a460907aad4c7c5a76abd39710cf22f0a7c","href":"https://static.observableusercontent.com/files/0cd3b481dcf3a4840451198dac95f4339135134f9e84a3d941c0fd445d2ea790f6df4a263dd3addaab2b8c9f59ae7a460907aad4c7c5a76abd39710cf22f0a7c","name":"CleanShot 2023-04-28 at 23.21.49-2x.png","type":"image/png","lastModified":1714722307881.032,"size":7848},{"id":"145a970d01cb95d04be8041db00d93e440271436e0a54b35f5311e8dd30043b2a1c0a0f6e427533c581184db2be80b973f2b610af766c0f8502042b9ef0e63a1","href":"https://static.observableusercontent.com/files/145a970d01cb95d04be8041db00d93e440271436e0a54b35f5311e8dd30043b2a1c0a0f6e427533c581184db2be80b973f2b610af766c0f8502042b9ef0e63a1","name":"CleanShot 2023-04-28 at 23.13.19-2x.png","type":"image/png","lastModified":1714722307881.032,"size":107909}] 43:{"id":"486c420a3a920578","slug":null,"title":"Candlestick Chart","thumbnail":"11997c3ea4d5a2b7c5f835aae3120a542d52dd16243054e8cc8362f24dad7dba","access_level":"public","create_time":"$D2024-05-03T07:45:07.881Z","update_time":"$D2024-05-17T10:08:18.211Z","view_time":null,"first_public_time":"$D2024-05-03T07:45:07.881Z","has_unpublished_edits":null,"fork":{"id":"9a798cd9f7716d04","slug":null,"title":"🕯️ Candlestick Chart","owner":{"id":"224c51aa36864e8b","login":"clokman","name":"John C. Lokman"}},"stars":0,"starred":false,"owner":{"type":"team","id":"79040ab1e0cc12ed","login":"data-vis-1","name":"Workplace Name","avatar_url":"https://avatars-next.observableusercontent.com/d43a4b6e6a7a93e3c2fa427d620bb7ad05bb13f9e15cf118218976e3c2e6e955","tier":"starter_2024","bio":"","following":false},"version":3455,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2e4665e171f0188","login":"irina-kartseva","name":"Irina Kartseva","avatar_url":"https://avatars-next.observableusercontent.com/dbd0e6bff87019765b597f4683765ad1123d925256de9a6e46e8426a83e5fbd6","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"79040ab1e0cc12ed","login":"data-vis-1","name":"Workplace Name","avatar_url":"https://avatars-next.observableusercontent.com/d43a4b6e6a7a93e3c2fa427d620bb7ad05bb13f9e15cf118218976e3c2e6e955","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e2e4665e171f0188","login":"irina-kartseva","name":"Irina Kartseva","avatar_url":"https://avatars-next.observableusercontent.com/dbd0e6bff87019765b597f4683765ad1123d925256de9a6e46e8426a83e5fbd6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"ea75b8b0bf808c67","slug":"lab-notebooks-plot-irina","title":"Lab Notebooks: Plot (Irina)","owner":{"id":"79040ab1e0cc12ed","login":"data-vis-1","name":"Workplace Name"}},"type":"notebook","body":{"titling":"auto","title":"Candlestick Chart","cells":[{"id":0,"value":"# Candlestick Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"toc({\n headers: 'h2, h3, h4, h5, h6',\n skip: 'Candle Stick Chart'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1629,"value":"## How to Read a Candlestick Chart?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"## Dataset Import and Preparation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"View and import dataset:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1594,"value":"data_initial = await FileAttachment(\"ETH-USD@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data_initial","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"// Uncomment to activate\n\ndata_forAroundOneYear = aq.from(data_initial)\n .filter( aq.escape(d => d[\"Date\"].getFullYear() > 2022 ) )\n\t.objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"## Make a Simple Candlestick Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2662,"value":"cleanshot20230428At2332582x = FileAttachment(\"CleanShot 2023-04-28 at 23.32.58-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3119,"value":"Plot.plot({\n width,\n marks: [\n Plot.barY(data_forAroundOneYear, { x: \"Date\", y1: \"Open\", y2: \"Close\" }), \n Plot.ruleX(data_forAroundOneYear, {x: \"Date\", y1: \"Low\", y2: \"High\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"## Color the Candles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1673,"value":"_Colors: `crimson`, `oliveDrab`_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"Color candles by price change:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2656,"value":"cleanshot20230428At2332202x = FileAttachment(\"CleanShot 2023-04-28 at 23.32.20-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2737,"value":"Plot.plot({\n width,\n color: {type: \"threshold\", range: [\"crimson\", \"olivedrab\"]},\n marks: [\n Plot.barY(data_forAroundOneYear, { x: \"Date\", y1: \"Open\", y2: \"Close\", fill: d => d.Close - d.Open,}), \n Plot.ruleX(data_forAroundOneYear, {x: \"Date\", y1: \"Low\", y2: \"High\", stroke: (d) => d.Close - d.Open})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"## Fix the Tick Labels on the X Axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1388,"value":"_See [Plot: Rule](https://observablehq.com/@observablehq/plot-rule) on Observable._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1702,"value":"Bar mark is not the right choice here. Use the `ruleX` mark also for the candle bodies:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2640,"value":"cleanshot20230428At2330432x = FileAttachment(\"CleanShot 2023-04-28 at 23.30.43-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2724,"value":"Plot.plot({\n width,\n marks: [\n Plot.ruleX(data_forAroundOneYear, {\n x: \"Date\",\n y1: \"Low\",\n y2: \"High\",\n stroke: (d) => (d.Close < d.Open ? \"crimson\" : \"olivedrab\")\n }),\n\n Plot.ruleX(data_forAroundOneYear, {\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\",\n stroke: (d) => (d.Close < d.Open ? \"crimson\" : \"olivedrab\"),\n strokeWidth: 7\n }),\n\n // ALTERNATIVE SOLUTION\n // Plot.barY(data_forAroundOneYear, {\n // x: \"Date\",\n // y1: \"Open\",\n // y2: \"Close\",\n // interval: 1,\n // fill: (d) => (d.Close < d.Open ? \"crimson\" : \"olivedrab\")\n // })\n ]\n})\n\n// option + up to move lines of code\n// option + shift + F nice code allocation\n// inset: 5 distance between bars ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"## Abstract the Date","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1746,"value":"FileAttachment(\"CleanShot 2023-04-28 at 23.30.01-2x.png\").image({width: 350})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3200,"value":"viewof year_slider = Inputs.range([2017, 2023], {label: \"Year\", step: 1})\n//value: 2023 default value ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3203,"value":"year_slider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"// Uncomment to enable\ndata_filtered = aq.from(data_initial)\n .filter(aq.escape((d) => d[\"Date\"].getFullYear() === year_slider))\n .objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1856,"value":"Plug the filtered data into the chart:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2625,"value":"cleanshot20230428At2327352x = FileAttachment(\"CleanShot 2023-04-28 at 23.27.35-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2699,"value":"Plot.plot({\n width,\n marks: [\n Plot.ruleX(data_filtered, {\n x: \"Date\",\n y1: \"Low\",\n y2: \"High\",\n stroke: (d) => (d.Close < d.Open ? \"crimson\" : \"olivedrab\")\n }),\n\n Plot.ruleX(data_filtered, {\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\",\n stroke: (d) => (d.Close < d.Open ? \"crimson\" : \"olivedrab\"),\n strokeWidth: 7\n }),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2630,"value":"_👆 2017 is selected in the image for demonstration purposes. You do not need to submit the exact same view._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2164,"value":"## Detach the Slider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2610,"value":"cleanshot20230428At2321492x = FileAttachment(\"CleanShot 2023-04-28 at 23.21.49-2x.png\").image({width: 400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2683,"value":"$${viewof year_slider}","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3220,"value":"option + Shift + down \n\nwith selected sell - dublicates it ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"## Adjust Candle Sizes Dynamically","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1230,"value":"*See [Array.length](https://www.w3schools.com/jsref/jsref_length_array.asp) in W3 schools.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2667,"value":"cleanshot20230428At2334382x = FileAttachment(\"CleanShot 2023-04-28 at 23.34.38-2x.png\").image({width: 250})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2674,"value":"numberOfDaysInFilterdData = data_filtered.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1775,"value":"Let the variable you just created determine the `strokeWidth` property of the candle bodies (hint: dividing 1000 by the number of days in a given year seems to do the trick):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2576,"value":"cleanshot20230428At2313192x = FileAttachment(\"CleanShot 2023-04-28 at 23.13.19-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2678,"value":"$${viewof year_slider}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3231,"value":"Plot.plot({\n width,\n marks: [\n Plot.ruleX(data_filtered, {\n x: \"Date\",\n y1: \"Low\",\n y2: \"High\",\n stroke: (d) => (d.Close < d.Open ? \"crimson\" : \"olivedrab\")\n }),\n\n Plot.ruleX(data_filtered, {\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\",\n stroke: (d) => (d.Close < d.Open ? \"crimson\" : \"olivedrab\"),\n strokeWidth: d => 1000 / numberOfDaysInFilterdData \n }),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"## Add Tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":429,"value":"_See: [Plot Tooltip](https://observablehq.com/@mkfreeman/plot-tooltip) on Observable and [Get month name from date](https://stackoverflow.com/a/18648314/3102060) on Stack Overflow. For time formatting, see [Tick Formatting](https://observablehq.com/d/93c789be8f819caf#cell-2380) in the Scales cheatsheet on Observable._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":402,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2548,"value":"cleanshot20230428At2309382x = FileAttachment(\"CleanShot 2023-04-28 at 23.09.38-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2758,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"You can use this code for your tooltip content:\n\n```js\ntitle: d => \n`\\${ d[\"Date\"].toLocaleString('default', { month: 'long' }) } \\${ d[\"Date\"].getDate() } \nClose: \\${ d3.format('.3s')(d[\"Close\"]) }\nOpen: \\${ d3.format('.3s')(d[\"Open\"]) }\nHigh: \\${ d3.format('.3s')(d[\"High\"]) }\nLow: \\${ d3.format('.3s')(d[\"Low\"]) }` \n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"## Abstract the Title Template","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1868,"value":"The code we used for the tooltips (i.e., the value of the `title` property) is ugly it is repeated. \n\nPut the title code outside the visualization, into a function of its own:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":478,"value":"// Uncomment the first block to enable\n\ncreateTooltipContent = (d) => \n`${ d[\"Date\"].toLocaleString('default', { month: 'long' }) } ${d[\"Date\"].getDate()}\n Close: ${ d3.format('.3s')(d[\"Close\"]) }\n High: ${ d3.format('.3s')(d[\"High\"]) }\n Open: ${ d3.format('.3s')(d[\"Open\"]) }\n Low: ${ d3.format('.3s')(d[\"Low\"]) }`\n\n\n// The same function created with classic fuction syntax:\n\n// createTooltipContent = function (d) { \n// `${ d[\"Date\"].toLocaleString('default', { month: 'long' }) } ${d[\"Date\"].getDate()}\n// Close: ${ d3.format('.3s')(d[\"Close\"]) }\n// High: ${ d3.format('.3s')(d[\"High\"]) }\n// Open: ${ d3.format('.3s')(d[\"Open\"]) }\n// Low: ${ d3.format('.3s')(d[\"Low\"]) }`\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1880,"value":"Call the function you just created form the visualization code, replacing the previous title code:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2518,"value":"cleanshot20230428At2306022x = FileAttachment(\"CleanShot 2023-04-28 at 23.06.02-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2856,"value":"Plot.plot({\n width: 1200,\n fooltip: { stroke: (d) => (d.Close < d.Open ? \"crimson\" : \"olivedrab\"),\n strokeWidth: (d) => 1000 / numberOfDaysInFilterdData},\n // BlUE THINGS SHOULD GONE?\n marks: [\n Plot.ruleX(data_filtered, {\n x: \"Date\",\n y1: \"Low\",\n y2: \"High\",\n stroke: (d) => (d.Close < d.Open ? \"crimson\" : \"olivedrab\"),\n title: createTooltipContent\n }),\n\n Plot.ruleX(data_filtered, {\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\",\n stroke: (d) => (d.Close < d.Open ? \"crimson\" : \"olivedrab\"),\n strokeWidth: (d) => 1000 / numberOfDaysInFilterdData,\n title: createTooltipContent\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"## Add Financial Indicators","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1239,"value":"First, require the `d3fc` library:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"fc = require('d3fc')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2000,"value":"### Generate Indicator Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"#### Exponential Moving Average (EMA)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1256,"value":"Create a 9-period EMA column of `close` values:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":547,"value":"// Uncoment to enable\n\nemaColumn = fc.indicatorExponentialMovingAverage()\n .period( 9 )\n .value(d => d[\"Close\"])\n ( data_filtered )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"#### Bollinger Band","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":539,"value":"// Uncoment to enable\n\nbollingerColumn = fc.indicatorBollingerBands()\n .value( d => d[\"Close\"] )\n .period( bollingerPeriod_slider )\n .multiplier( 2 )\n ( data_filtered )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2015,"value":"Control the Bollinger period parameter with a slider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2021,"value":"viewof bollingerPeriod_slider = Inputs.range([0, 100], {\n label: \"Bollinger Period\",\n step: 1,\n value: 7\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"#### Moving Average Convergence Divergence (MACD)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"// Uncoment to enable\n\nmacdColumn = 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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"### Join the Indicator Data with the Main Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1273,"value":"Join the indicator columns you have created with the main dataset:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2509,"value":"// Uncoment to enable\n\ndata_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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2494,"value":"Show the merged data in a table:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2498,"value":"cleanshot20230428At2300062x = FileAttachment(\"CleanShot 2023-04-28 at 23.00.06-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3280,"value":"Inputs.table(data_filtered_withIndicators)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"### Add the Bollinger Band to the Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2489,"value":"cleanshot20230428At2259072x = FileAttachment(\"CleanShot 2023-04-28 at 22.59.07-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2895,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2121,"value":"## Make a Control Panel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2133,"value":"Use Markdown to place your control widgets within a custom layout:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2139,"value":"// Uncomment and CONVERT TO MARKDOWN cell to activate\n\n| | |\n| --------------------- | -------------------------------- |\n| ${viewof year_slider} | ${viewof bollingerPeriod_slider} |","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2161,"value":"Use HTML to place your control widgets within a custom layout:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2086,"value":"

${viewof year_slider}

${viewof bollingerPeriod_slider}

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2476,"value":"cleanshot20230428At2257252x = FileAttachment(\"CleanShot 2023-04-28 at 22.57.25-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3338,"value":"

${viewof year_slider}

${viewof bollingerPeriod_slider}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2483,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"## Add an External Indicator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1312,"value":"Show the current index:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2423,"value":"cleanshot20230428At2247122x = FileAttachment(\"CleanShot 2023-04-28 at 22.47.12-2x.png\").image({width: 250})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2418,"value":" $\"Latest$ ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2433,"value":"cleanshot20230428At2251142x = FileAttachment(\"CleanShot 2023-04-28 at 22.51.14-2x.png\").image({width: 850})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"data_fearGreedIndex_raw = d3.json(\"https://api.alternative.me/fng/?limit=0&format=json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"Convert '`timestamp`' strings to date objects and make '`values`' numeric:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2449,"value":"cleanshot20230428At2253472x = FileAttachment(\"CleanShot 2023-04-28 at 22.53.47-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"// Uncomment to activate\n\ndata_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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3041,"value":"Add this new data as columns to the dataset we have been visualizing:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2457,"value":"cleanshot20230428At2254512x = FileAttachment(\"CleanShot 2023-04-28 at 22.54.51-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2249,"value":"// Uncomment to activate\n\ndata_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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2470,"value":"cleanshot20230428At2256332x = FileAttachment(\"CleanShot 2023-04-28 at 22.56.33-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2256,"value":"// Uncomment to activate\n\nInputs.table(data_filtered_withIndicators_withFearGreedIndex)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"## Plot the Fear & Greed Index Under the Main Chart
and Add Finishing Touches","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2374,"value":"cleanshot20230428At2239482x = FileAttachment(\"CleanShot 2023-04-28 at 22.39.48-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2922,"value":"| | | |\n| --------------------- | |-------------------------------- |\n| ${viewof year_slider} | |${viewof bollingerPeriod_slider} |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3374,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3403,"value":"Plot.plot({\n width: 1200,\n height: 150,\n y: {\n label: \"Greed\", \n grid: true, \n gridOpacity: 0.2,\n },\n x: {\n grid: true,\n gridOpacity: 0.2, \n },\n marks: [\n Plot.axisY({anchor: \"right\"}),\n Plot.line(data_filtered_withIndicators_withFearGreedIndex, {\n x: \"Date\",\n y: \"FearGreedValue\",\n stroke: \"green\"})]\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3051,"value":"# Further Steps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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 bar mark for the `macdDivergence` column, with 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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3107,"value":"An example for the MACD chart described in item 2:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3450,"value":"| | | |\n| --------------------- | |-------------------------------- |\n| ${viewof year_slider} | |${viewof bollingerPeriod_slider} |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3062,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3059,"value":"Plot.plot({\n width: 1200,\n height: 150,\n y: {\n label: \"MACD\"\n },\n marks: [\n Plot.axisY({anchor: \"right\"}),\n Plot.line(data_filtered_withIndicators, {\n x: \"Date\",\n y: \"macd\",\n stroke: \"purple\", // Color for MACD line\n strokeOpacity: 0.7,\n }),\n Plot.line(data_filtered_withIndicators, {\n x: \"Date\",\n y: \"macdSignal\",\n stroke: \"red\", // Different color for MACD Signal line\n strokeOpacity: 0.7,\n }),\n Plot.barY(data_filtered_withIndicators, {\n x: \"Date\",\n y: \"macdDivergence\",\n fill: (d) => (d.macdDivergence < 0 ? \"crimson\" : \"green\"), // Different colors for negative and positive values\n fillOpacity: 0.7,\n }),\n ],\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3060,"value":"Plot.plot({\n width: 1200,\n height: 150,\n y: {\n label: \"Greed\", \n grid: true, \n gridOpacity: 0.2,\n },\n x: {\n grid: true,\n gridOpacity: 0.2, \n },\n marks: [\n Plot.axisY({anchor: \"right\"}),\n Plot.line(data_filtered_withIndicators_withFearGreedIndex, {\n x: \"Date\",\n y: \"FearGreedValue\",\n stroke: \"green\"})]\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"**Notebook Style**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"import {Wrangler, op} from \"@observablehq/data-wrangler\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2106,"value":"import {howTo} from \"@clokman/howto\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2342,"value":"import {imageToDo} from \"@clokman/student-blocks\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2989,"value":"import {displayCaution} from \"@mkfreeman/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2344,"value":"imageToDo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"