25:["$","title",null,{"children":"Candlestick Chart | MyWorkspace | Observable"}] 49:T408,Plot.plot({ tooltip : { // tooltip fix stroke: d => d["Close"] < d["Open"] ? "red" : "lawngreen", strokeWidth: innerWidth/data_filtered.length }, width: 1200, marks: [ Plot.line(data_filtered_withIndicators, { // AVERAGE LINE x: "Date", y: "bollingerAverage", stroke: "blue" }), Plot.areaY(data_filtered_withIndicators, { // BOLLINGER BAND x: "Date", y1: "bollingerLower", y2: "bollingerUpper", fill: "dodgerblue", fillOpacity: 0.25, stroke: "dodgerblue", strokeOpacity: 0.5 }), Plot.ruleX(data_filtered_withIndicators, { // CANDLE BODY x: "Date", y1: "Open", y2: "Close", stroke: d => d["Close"] < d["Open"] ? "red" : "green", strokeWidth: innerWidth/data_filtered.length, title: d => createTooltipContent(d) }), Plot.ruleX(data_filtered_withIndicators, { // WICKS x: "Date", y1: "High", y2: "Low", stroke: d => d["Close"] < d["Open"] ? "red" : "green" }) ] })4a:T408,Plot.plot({ tooltip : { // tooltip fix stroke: d => d["Close"] < d["Open"] ? "red" : "lawngreen", strokeWidth: innerWidth/data_filtered.length }, width: 1200, marks: [ Plot.line(data_filtered_withIndicators, { // AVERAGE LINE x: "Date", y: "bollingerAverage", stroke: "blue" }), Plot.areaY(data_filtered_withIndicators, { // BOLLINGER BAND x: "Date", y1: "bollingerLower", y2: "bollingerUpper", fill: "dodgerblue", fillOpacity: 0.25, stroke: "dodgerblue", strokeOpacity: 0.5 }), Plot.ruleX(data_filtered_withIndicators, { // CANDLE BODY x: "Date", y1: "Open", y2: "Close", stroke: d => d["Close"] < d["Open"] ? "red" : "green", strokeWidth: innerWidth/data_filtered.length, title: d => createTooltipContent(d) }), Plot.ruleX(data_filtered_withIndicators, { // WICKS x: "Date", y1: "High", y2: "Low", stroke: d => d["Close"] < d["Open"] ? "red" : "green" }) ] })4b:T434,Plot.plot({ tooltip : { // tooltip fix stroke: d => d["Close"] < d["Open"] ? "red" : "lawngreen", strokeWidth: innerWidth/data_filtered.length }, width: 1200, grid: true, y: { axis: "right" }, marks: [ Plot.line(data_filtered_withIndicators, { // AVERAGE LINE x: "Date", y: "bollingerAverage", stroke: "blue" }), Plot.areaY(data_filtered_withIndicators, { // BOLLINGER BAND x: "Date", y1: "bollingerLower", y2: "bollingerUpper", fill: "dodgerblue", fillOpacity: 0.25, stroke: "dodgerblue", strokeOpacity: 0.5 }), Plot.ruleX(data_filtered_withIndicators, { // CANDLE BODY x: "Date", y1: "Open", y2: "Close", stroke: d => d["Close"] < d["Open"] ? "red" : "green", strokeWidth: innerWidth/data_filtered.length, title: d => createTooltipContent(d) }), Plot.ruleX(data_filtered_withIndicators, { // WICKS x: "Date", y1: "High", y2: "Low", stroke: d => d["Close"] < d["Open"] ? "red" : "green" }) ] })4c:[{"id":"ceb89d030c2b3aeb672eafd83fdcc5d99d2d397ba691d8ebbe20edfdf48ceeaf47c8708bc88670f33cbb064e1d08be4c9c4c70b927a7446f1ed351ba1005134e","href":"https://static.observableusercontent.com/files/ceb89d030c2b3aeb672eafd83fdcc5d99d2d397ba691d8ebbe20edfdf48ceeaf47c8708bc88670f33cbb064e1d08be4c9c4c70b927a7446f1ed351ba1005134e","name":"CleanShot 2023-04-28 at 23.06.02-2x.png","type":"image/png","lastModified":1682753892918.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":1682753892918.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":1682753892918.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":1682753892918.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":1682753892918.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":1682753892918.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":1682753892918.032,"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":1682753892918.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":1682753892918.032,"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":1682753892918.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":1682753892918.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":1682753892918.032,"size":151010},{"id":"f977ac1530a11de5694b7d26f5672eadcb265ce8bac07c746f5381188fba2f2134d12d8d407bc91e6e9558f147a066906aad7874a1a61aaad7a6be1f8fc6dcbd","href":"https://static.observableusercontent.com/files/f977ac1530a11de5694b7d26f5672eadcb265ce8bac07c746f5381188fba2f2134d12d8d407bc91e6e9558f147a066906aad7874a1a61aaad7a6be1f8fc6dcbd","name":"CleanShot 2023-04-28 at 22.47.12-2x.png","type":"image/png","lastModified":1682753892918.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":1682753892918.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":1682753892918.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":1682753892918.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":1682753892918.032,"size":311216},{"id":"145a970d01cb95d04be8041db00d93e440271436e0a54b35f5311e8dd30043b2a1c0a0f6e427533c581184db2be80b973f2b610af766c0f8502042b9ef0e63a1","href":"https://static.observableusercontent.com/files/145a970d01cb95d04be8041db00d93e440271436e0a54b35f5311e8dd30043b2a1c0a0f6e427533c581184db2be80b973f2b610af766c0f8502042b9ef0e63a1","name":"CleanShot 2023-04-28 at 23.13.19-2x.png","type":"image/png","lastModified":1682753892918.032,"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":1682753892918.032,"size":7848},{"id":"5d8ff6efdf97816cc005775f540820a736d3420f6b447083ab3b8957e7a9d5f80ab58eb8d60ac441ee3a2b6db0cb5143b7b623feacfd5c7aad01d06fe8e9454f","href":"https://static.observableusercontent.com/files/5d8ff6efdf97816cc005775f540820a736d3420f6b447083ab3b8957e7a9d5f80ab58eb8d60ac441ee3a2b6db0cb5143b7b623feacfd5c7aad01d06fe8e9454f","name":"CleanShot 2023-04-28 at 23.09.38-2x.png","type":"image/png","lastModified":1682753892918.032,"size":113821},{"id":"2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","href":"https://static.observableusercontent.com/files/2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","name":"ETH-USD@3.csv","type":"text/csv","lastModified":1682753892918.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":1682753892918.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":1682753892918.032,"size":97582}] 29:{"id":"a113fc28054b0e2a","slug":null,"title":"Candlestick Chart","thumbnail":"8956eeb71265431e634ca1eeb5e1300b356a5088814d3cce22c0aa2ca59acc3d","access_level":"public","create_time":"$D2023-04-29T07:38:12.918Z","update_time":"$D2023-05-01T08:26:45.043Z","view_time":null,"first_public_time":"$D2023-04-29T07:38:12.918Z","has_unpublished_edits":null,"fork":{"id":"148db54089f06544","slug":null,"title":"Candlestick Chart","owner":{"id":"a052f5d21e4cd617","login":"lucas2109","name":"MyWorkspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a052f5d21e4cd617","login":"lucas2109","name":"MyWorkspace","avatar_url":"https://avatars-next.observableusercontent.com/9595d69f6ad4ae370a3600036829e9f1dfdf40dba028a6b52580a3bf1f66e564","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3163,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7301395826986d06","login":"lmw2109","name":"Lucas","avatar_url":"https://avatars-next.observableusercontent.com/83e3a52e223b285c9a3362d06cbd2780f46d782c1f77812e5e2f629473307b55","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7301395826986d06","login":"lmw2109","name":"Lucas","avatar_url":"https://avatars-next.observableusercontent.com/83e3a52e223b285c9a3362d06cbd2780f46d782c1f77812e5e2f629473307b55","tier":null,"role":"editor"},{"type":"team","id":"a052f5d21e4cd617","login":"lucas2109","name":"MyWorkspace","avatar_url":"https://avatars-next.observableusercontent.com/9595d69f6ad4ae370a3600036829e9f1dfdf40dba028a6b52580a3bf1f66e564","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"afd3b8f9c656b08c","slug":"worksheets-plot","title":"Worksheets: Learn Plot - Lucas Wagner","owner":{"id":"a052f5d21e4cd617","login":"lucas2109","name":"MyWorkspace"}},"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":2976,"value":"Plot.plot({\n width: 1200,\n marks: [\n Plot.barY(data_forAroundOneYear, {\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\"\n }),\n Plot.ruleX(data_forAroundOneYear, {\n x: \"Date\",\n y1: \"High\",\n y2: \"Low\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":2749,"value":"// ... your code here","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: 1200,\n marks: [\n Plot.barY(data_forAroundOneYear, {\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\",\n fill: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\"\n }),\n Plot.ruleX(data_forAroundOneYear, {\n x: \"Date\",\n y1: \"High\",\n y2: \"Low\",\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\"\n })\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: data_forAroundOneYear.length * 10,\n marks: [\n Plot.ruleX(data_forAroundOneYear, { // CANDLE BODY\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\",\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\",\n strokeWidth: 10\n }),\n Plot.ruleX(data_forAroundOneYear, { // WICKS\n x: \"Date\",\n y1: \"High\",\n y2: \"Low\",\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":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":2713,"value":"viewof year_slider = Inputs.range([2017, 2023], {\n step: 1,\n value: [2023],\n label: \"Year\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3038,"value":"$${viewof year_slider}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":2699,"value":"Plot.plot({\n width: 1200,\n marks: [\n Plot.ruleX(data_filtered, { // CANDLE BODY\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\",\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\",\n strokeWidth: 10\n }),\n Plot.ruleX(data_filtered, { // WICKS\n x: \"Date\",\n y1: \"High\",\n y2: \"Low\",\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\"\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":"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":"// numberOfDaysInFilteredData = 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:","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":"Plot.plot({\n width: 1200,\n marks: [\n Plot.ruleX(data_filtered, { // CANDLE BODY\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\",\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\",\n strokeWidth: innerWidth/data_filtered.length // plot width / n days\n }),\n Plot.ruleX(data_filtered, { // WICKS\n x: \"Date\",\n y1: \"High\",\n y2: \"Low\",\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\"\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**: The slider is dragged on top of this chart and set to 2017 in the above image for you to see the effect of dynamic candle widths in a year where they make a difference. 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._","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*","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":"Plot.plot({\n width: 1200,\n marks: [\n Plot.ruleX(data_filtered, { // CANDLE BODY\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\",\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\",\n strokeWidth: innerWidth/data_filtered.length, // plot width / n days\n title: d => \n `${ d[\"Date\"].toLocaleString('default', { month: 'long' }) } ${ d[\"Date\"].getDate() } \n Close: ${ d3.format('.3s')(d[\"Close\"]) }\n Open: ${ d3.format('.3s')(d[\"Open\"]) }\n High: ${ d3.format('.3s')(d[\"High\"]) }\n Low: ${ d3.format('.3s')(d[\"Low\"]) }` \n }),\n Plot.ruleX(data_filtered, { // WICKS\n x: \"Date\",\n y1: \"High\",\n y2: \"Low\",\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\"\n })\n ]\n})","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})\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// 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 tooltip : { // tooltip fix\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\",\n strokeWidth: innerWidth/data_filtered.lengthe\n },\n width: 1200,\n marks: [\n Plot.ruleX(data_filtered, { // CANDLE BODY\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\",\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\",\n strokeWidth: innerWidth/data_filtered.length,\n title: d => createTooltipContent(d) // apply function for code readability\n }),\n Plot.ruleX(data_filtered, { // WICKS\n x: \"Date\",\n y1: \"High\",\n y2: \"Low\",\n stroke: d => d[\"Close\"] < d[\"Open\"] ? \"red\" : \"lawngreen\"\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":"_See: [d3fc-technical-indicator](https://github.com/d3fc/d3fc/blob/master/packages/d3fc-technical-indicator/README.md)_ in D3FC API.","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([2, 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":2867,"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":"_Do not forget to change the data source; it should be the dataset with indicators that you just created._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"$49","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2483,"value":"$4a","pinned":false,"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":"// Complete the code\n\ndata_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":"// Data preprocessing\n\ndata_fearGreedIndex = aq.from(data_fearGreedIndex_raw.data)\n\t.derive({ date: aq.escape(d => new Date(+d[\"timestamp\"] * 1000)) })\n\t.derive({ valueAsNumber: d => +d[\"value\"] })\n .select('value_classification','date','valueAsNumber')\n\t.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":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":"// join data\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":"// Look at data\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","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2277,"value":"_**Also add finishing touches to the main chart: a grid and a y axis label**_","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, you will need to move the y axis of the main chart 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":3134,"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":2922,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3139,"value":"Plot.plot({\n tooltip: {\n stroke: \"red\"\n },\n width: 1200,\n height: 200,\n grid: true,\n y: {\n axis: \"right\"\n },\n marks: [\n Plot.line(data_filtered_withIndicators_withFearGreedIndex, {\n x: \"Date\",\n y: \"FearGreedValue\",\n stroke: \"green\",\n strokeWidth: 3,\n title: \"FearGreedClass\"\n })\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":2344,"value":"imageToDo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null