25:["$","title",null,{"children":"Candlestick Chart | AndreWorkspace | Observable"}] 49:T444,Plot.plot({ width: 1000, grid: true, tooltip: { stroke: d => d["Open"] < d["Close"] ? "oliveDrab" : "crimson", }, y: { label: "Price ↑", axis: "right" }, marks: [ Plot.areaY(data_filtered_withIndicators, { x: "Date", y1: "bollingerUpper", y2: "bollingerLower", fill: "dodgerblue", fillOpacity: 0.3, strokeOpacity: 0.5, stroke: "dodgerblue" }), Plot.line(data_filtered_withIndicators, { x: "Date", y: "bollingerAverage", stroke: "blue", strokeWidth: 1 }), Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "Open", y2: "Close", stroke: d => d["Open"] < d["Close"] ? "oliveDrab" : "crimson", strokeWidth: 1000/ numberofDaysInFiltedData, title: createTooltipContent }), Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "High", y2: "Low", stroke: d => d["Open"] < d["Close"] ? "oliveDrab" : "crimson", title: createTooltipContent }) ] }) // ... your code here4a:[{"id":"ceb89d030c2b3aeb672eafd83fdcc5d99d2d397ba691d8ebbe20edfdf48ceeaf47c8708bc88670f33cbb064e1d08be4c9c4c70b927a7446f1ed351ba1005134e","href":"https://static.observableusercontent.com/files/ceb89d030c2b3aeb672eafd83fdcc5d99d2d397ba691d8ebbe20edfdf48ceeaf47c8708bc88670f33cbb064e1d08be4c9c4c70b927a7446f1ed351ba1005134e","name":"CleanShot 2023-04-28 at 23.06.02-2x.png","type":"image/png","lastModified":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"size":113821},{"id":"2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","href":"https://static.observableusercontent.com/files/2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","name":"ETH-USD@3.csv","type":"text/csv","lastModified":1682767362401.257,"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":1682767362401.257,"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":1682767362401.257,"size":97582}] 29:{"id":"af179591f14a7b32","slug":null,"title":"Candlestick Chart","thumbnail":"8956eeb71265431e634ca1eeb5e1300b356a5088814d3cce22c0aa2ca59acc3d","access_level":"public","create_time":"$D2023-04-29T11:22:42.401Z","update_time":"$D2023-05-08T11:05:41.047Z","view_time":null,"first_public_time":"$D2023-04-29T11:22:42.401Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c9ab2d58307bccf1","login":"andreworkspace","name":"AndreWorkspace","avatar_url":"https://avatars-next.observableusercontent.com/02f070d9b2141fcff84d0a7a240003f3897556b477a80c4fcc42403bcfa06ad4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3093,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a3ae2042e2a8be73","login":"wagnerandre603","name":"Andre Wagner","avatar_url":"https://avatars-next.observableusercontent.com/02cc1808e7b895c1087d8cec8e9ff0393dfe3116fe6477649ed3f06b1e160b1f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"c9ab2d58307bccf1","login":"andreworkspace","name":"AndreWorkspace","avatar_url":"https://avatars-next.observableusercontent.com/02f070d9b2141fcff84d0a7a240003f3897556b477a80c4fcc42403bcfa06ad4","tier":"starter_2024","role":"editor"},{"type":"individual","id":"a3ae2042e2a8be73","login":"wagnerandre603","name":"Andre Wagner","avatar_url":"https://avatars-next.observableusercontent.com/02cc1808e7b895c1087d8cec8e9ff0393dfe3116fe6477649ed3f06b1e160b1f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"5e52b6f368b40fb2","slug":"worksheets-learn-plot-andre-wagner","title":"Worksheets: Learn Plot - Andre Wagner","owner":{"id":"c9ab2d58307bccf1","login":"andreworkspace","name":"AndreWorkspace"}},"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\n data_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":2973,"value":"Plot.plot({\n width: 1000,\n marks: [\n Plot.barY(data_forAroundOneYear, {x: \"Date\", y1: \"Open\", y2: \"Close\" }),\n Plot.ruleX(data_forAroundOneYear, {x: \"Date\", y1: \"High\", y2: \"Low\"})\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":2737,"value":"Plot.plot({\n width: 1000,\n marks: [\n Plot.barY(data_forAroundOneYear, {\n x: \"Date\", \n y1: \"Close\", \n y2: \"Open\", \n fill: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\"}),\n Plot.ruleX(data_forAroundOneYear, {\n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\"\n })\n ]\n})\n// ... your code here","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":2724,"value":"Plot.plot({\n width: 1000,\n marks: [\n \n Plot.ruleX(data_forAroundOneYear, {\n x: \"Date\", \n y1: \"Open\", \n y2: \"Close\", \n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n strokeWidth: 5,\n }),\n Plot.ruleX(data_forAroundOneYear, {\n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n \n })\n ]\n})\n// ... your code here","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":2986,"value":"viewof year_Slider = Inputs.range([2017, 2023], {label: \"Year\", step: 1, value: 2023})","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\n data_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":2699,"value":"Plot.plot({\n width: 1000,\n marks: [\n \n Plot.ruleX(data_filtered, {\n x: \"Date\", \n y1: \"Open\", \n y2: \"Close\", \n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n strokeWidth: 5,\n }),\n Plot.ruleX(data_filtered, {\n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n \n })\n ]\n})// ... your code here","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":2683,"value":"$${viewof year_Slider}\n","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":2674,"value":"numberofDaysInFiltedData = data_filtered.length\n// ... your code here","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":2678,"value":"Plot.plot({\n width: 1000,\n marks: [\n \n Plot.ruleX(data_filtered, {\n x: \"Date\", \n y1: \"Open\", \n y2: \"Close\", \n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n strokeWidth: 1000/ numberofDaysInFiltedData,\n }),\n Plot.ruleX(data_filtered, {\n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n \n })\n ]\n})\n// ... your code here","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":2758,"value":"Plot.plot({\n width: 1000,\n marks: [\n \n Plot.ruleX(data_filtered, {\n x: \"Date\", \n y1: \"Open\", \n y2: \"Close\", \n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n strokeWidth: 1000/ numberofDaysInFiltedData,\n title: 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 Plot.ruleX(data_filtered, {\n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n title: 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 \n ]\n})// ... your code here","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\n createTooltipContent = (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":2856,"value":"Plot.plot({\n width: 1000,\n tooltip: {\n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n },\n marks: [\n \n Plot.ruleX(data_filtered, {\n x: \"Date\", \n y1: \"Open\", \n y2: \"Close\", \n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n strokeWidth: 1000/ numberofDaysInFiltedData,\n title: createTooltipContent\n }),\n Plot.ruleX(data_filtered, {\n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n title: createTooltipContent\n \n })\n ]\n})\n// ... your code here","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\n emaColumn = 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\n bollingerColumn = 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\n macdColumn = fc.indicatorMacd()\n .value( d => d[\"Close\"] )\n .signalPeriod( 9 )\n .fastPeriod( 12 )\n .slowPeriod( 26 )\n ( data_filtered )","pinned":true,"hidden":false,"mode":"ojs","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\n data_filtered_withIndicators = data_filtered.map( (d, i) => ({ \n ema: emaColumn[i],\n macd: macdColumn[i].macd,\n macdSignal: macdColumn[i].signal,\n macdDivergence: macdColumn[i].divergence,\n bollingerUpper: bollingerColumn[i].upper, \n bollingerAverage: bollingerColumn[i].average,\n bollingerLower: bollingerColumn[i].lower,\n ...d\n }))","pinned":true,"hidden":false,"mode":"ojs","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":2867,"value":"Inputs.table(data_filtered_withIndicators) // ... your code here","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":2895,"value":"Plot.plot({\n width: 1000,\n tooltip: {\n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n },\n marks: [\n\n Plot.areaY(data_filtered_withIndicators, {\n x: \"Date\",\n y1: \"bollingerUpper\",\n y2: \"bollingerLower\",\n fill: \"dodgerblue\",\n fillOpacity: 0.3,\n strokeOpacity: 0.5,\n stroke: \"dodgerblue\"\n \n }),\n\n Plot.line(data_filtered_withIndicators, {\n x: \"Date\",\n y: \"bollingerAverage\",\n stroke: \"blue\",\n strokeWidth: 1\n }),\n \n Plot.ruleX(data_filtered_withIndicators, {\n x: \"Date\", \n y1: \"Open\", \n y2: \"Close\", \n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n strokeWidth: 1000/ numberofDaysInFiltedData,\n title: createTooltipContent\n }),\n Plot.ruleX(data_filtered_withIndicators, {\n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n title: createTooltipContent\n \n })\n ]\n})\n// ... your code here","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":"// Uncomment and CONVERT TO HTML cell to activate\n\n

${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":2483,"value":"Plot.plot({\n width: 1000,\n tooltip: {\n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n },\n marks: [\n\n Plot.areaY(data_filtered_withIndicators, {\n x: \"Date\",\n y1: \"bollingerUpper\",\n y2: \"bollingerLower\",\n fill: \"dodgerblue\",\n fillOpacity: 0.3,\n strokeOpacity: 0.5,\n stroke: \"dodgerblue\"\n \n }),\n\n Plot.line(data_filtered_withIndicators, {\n x: \"Date\",\n y: \"bollingerAverage\",\n stroke: \"blue\",\n strokeWidth: 1\n }),\n \n Plot.ruleX(data_filtered_withIndicators, {\n x: \"Date\", \n y1: \"Open\", \n y2: \"Close\", \n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n strokeWidth: 1000/ numberofDaysInFiltedData,\n title: createTooltipContent\n }),\n Plot.ruleX(data_filtered_withIndicators, {\n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d[\"Open\"] < d[\"Close\"] ? \"oliveDrab\" : \"crimson\",\n title: createTooltipContent\n \n })\n ]\n})// ... your code here","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":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":759,"value":"// Complete the code\n\n 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":794,"value":"// Uncomment to activate\n\n data_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 \t.objects()","pinned":true,"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\n data_filtered_withIndicators_withFearGreedIndex = aq.from(data_filtered_withIndicators)\n \t.join(aq.from(data_fearGreedIndex), [\"Date\", \"FearGreedDate\"])\n \t.objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2256,"value":"// Uncomment to activate\n\n Inputs.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":3091,"value":"$${viewof year_Slider}\n${viewof bollingerPeriod_slider}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2922,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3069,"value":"Plot.plot({\n height: 125,\n width: 1000,\n grid: true,\n y: {\n label: \"FearGreedValue ↑\",\n axis: \"right\"\n },\n marks: [\n\n Plot.lineY(data_filtered_withIndicators_withFearGreedIndex, {\n x: \"Date\",\n y: \"FearGreedValue\",\n stroke: \"forestgreen\"\n \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":"$W4a","stdlib":"1"}} 24:null