25:["$","title",null,{"children":"Candlestick Chart | Phuong Anh Nguyen | Observable"}] 49:T46e,Plot.plot({ tooltip: { stroke: d => d["Open"] < d["Close"] ? "green" : "red" // avoids that bars turn blue & narrow when scrolling over }, width: 1200, marks: [ // Bollinger cloud Plot.areaY(data_filtered_withIndicators, { x: "Date", y1: "bollingerUpper", y2: "bollingerLower", fill: "lightblue", stroke: "lightblue", fillOpacity: 0.3, strokeOpacity: 1 }), // average line Plot.lineY(data_filtered_withIndicators, { x: "Date", y: "bollingerAverage", stroke: "dodgerblue" }), // Wicks Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "High", y2: "Low", stroke: d => d["Open"] < d["Close"] ? "oliveDrab" : "crimson", title: d => createTooltipContent(d) }), // Candle Body Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "Open", y2: "Close", strokeWidth: 1_000 / numberOfDaysInFilteredData, stroke: d => d["Open"] < d["Close"] ? "oliveDrab" : "crimson", title: d => createTooltipContent(d) }) ] }) 4a:T46b,Plot.plot({ tooltip: { stroke: d => d["Open"] < d["Close"] ? "green" : "red" // avoids that bars turn blue & narrow when scrolling over }, width: 1200, marks: [ // Bollinger cloud Plot.areaY(data_filtered_withIndicators, { x: "Date", y1: "bollingerUpper", y2: "bollingerLower", fill: "lightblue", stroke: "lightblue", fillOpacity: 0.3, strokeOpacity: 1 }), // average line Plot.lineY(data_filtered_withIndicators, { x: "Date", y: "bollingerAverage", stroke: "dodgerblue" }), // Wicks Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "High", y2: "Low", stroke: d => d["Open"] < d["Close"] ? "oliveDrab" : "crimson", title: d => createTooltipContent(d) }), // Candle Body Plot.ruleX(data_filtered_withIndicators, { x: "Date", y1: "Open", y2: "Close", strokeWidth: 1_000 / numberOfDaysInFilteredData, stroke: d => d["Open"] < d["Close"] ? "oliveDrab" : "crimson", title: d => createTooltipContent(d) }) ] })4b:T429,Plot.plot({ tooltip: { stroke: (d) => (d["Open"] > d["Close"] ? "red" : "green") }, width: 1100, grid: true, y: { label: "Price", axis: "right"}, marks: [ // Bollinger cloud Plot.areaY(data_filtered_withIndicators, { x: "Date", y1: "bollingerUpper", y2: "bollingerLower", fill: "lightblue", fillOpacity: 0.35, stroke: "dodgerblue", strokeOpacity: 1 }), Plot.lineY(data_filtered_withIndicators, {x: "Date", y: "bollingerAverage", stroke: "dodgerblue", strokeWidth: 1.5}), // Wicks Plot.ruleX(data_filtered, { x: "Date", y1: "High", y2: "Low", stroke: (d) => (d["Open"] > d["Close"] ? "crimson" : "olivedrab"), title: (d) => createTooltipContent(d) }), // Candle Body Plot.ruleX(data_filtered, { x: "Date", y1: "Open", y2: "Close", strokeWidth: 1000 / numberOfDaysInFilteredData, stroke: (d) => (d["Open"] > d["Close"] ? "crimson" : "olivedrab"), title: (d) => createTooltipContent(d) }) ] })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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"size":113821},{"id":"2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","href":"https://static.observableusercontent.com/files/2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","name":"ETH-USD@3.csv","type":"text/csv","lastModified":1682767549178.383,"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":1682767549178.383,"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":1682767549178.383,"size":97582}] 29:{"id":"782c7a6f6d16e6da","slug":null,"title":"Candlestick Chart","thumbnail":"8956eeb71265431e634ca1eeb5e1300b356a5088814d3cce22c0aa2ca59acc3d","access_level":"public","create_time":"$D2023-04-29T11:25:49.178Z","update_time":"$D2023-05-08T13:04:37.419Z","view_time":null,"first_public_time":"$D2023-04-29T11:25:49.178Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d69d83d382494a85","login":"anhon","name":"Phuong Anh Nguyen ","avatar_url":"https://avatars-next.observableusercontent.com/e2a80fa77c426a2fb73bf6a6c57309d30420eb38461fb86145a439531175377b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3114,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2a6e3678bddbe70c","login":"anhphuongnguyen2201","name":"Anh Phuong Nguyen","avatar_url":"https://avatars-next.observableusercontent.com/d8098df7aee1fdb9748045c8d5c1a480ab221f349247ea7544fff3e77013ec56","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d69d83d382494a85","login":"anhon","name":"Phuong Anh Nguyen ","avatar_url":"https://avatars-next.observableusercontent.com/e2a80fa77c426a2fb73bf6a6c57309d30420eb38461fb86145a439531175377b","tier":"starter_2024","role":"editor"},{"type":"individual","id":"2a6e3678bddbe70c","login":"anhphuongnguyen2201","name":"Anh Phuong Nguyen","avatar_url":"https://avatars-next.observableusercontent.com/d8098df7aee1fdb9748045c8d5c1a480ab221f349247ea7544fff3e77013ec56","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"41c50f91c3d1ebaf","slug":"plot","title":"Worksheets - Learn Plot_Phuong Anh Nguyen","owner":{"id":"d69d83d382494a85","login":"anhon","name":"Phuong Anh Nguyen "}},"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":2749,"value":"Plot.plot({\n marks: [\n Plot.barY(data_forAroundOneYear, {x: \"Date\", y1: \"Close\", y2:\"Open\" }),\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 marks: [\n\n\n // Wicks\n Plot.ruleX(data_forAroundOneYear, { \n x: \"Date\", \n y1: \"High\", \n y2: \"Low\" \n }),\n \n // Candle Body \n Plot.barY(data_forAroundOneYear, {\n x: \"Date\",\n y1: \"Close\", \n y2: \"Open\",\n strokeWidth: 5,\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\"\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":2724,"value":"Plot.plot({\n marks: [\n\n // Wicks\n Plot.ruleX(data_forAroundOneYear, { \n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\"\n }),\n \n // Candle Body \n Plot.ruleX(data_forAroundOneYear, {\n x: \"Date\",\n y1: \"Close\", \n y2: \"Open\",\n strokeWidth: 5,\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\"\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":2980,"value":"year_slider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"Then filter the date based on the value of the slider. \n\nTo achieve this, you will need to use a variable (instead of value fixed value) in Arquero's `.filter()` method. E.g., instead of `d => d.year === 2000`, you should use `d => d.year === selectedYear`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"// Uncomment to enable\ndata_filtered = aq.from(data_initial)\n .filter(aq.escape((d) => d[\"Date\"].getFullYear() === year_slider))\n .objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1856,"value":"Plug the filtered data into the chart:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2713,"value":"viewof year_slider = Inputs.range([2017, 2023], {label: \"Amount\", 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":2699,"value":"Plot.plot({\n marks: [\n\n // Wicks\n Plot.ruleX(data_filtered, { \n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\"\n }),\n \n // Candle Body \n Plot.ruleX(data_filtered, {\n x: \"Date\",\n y1: \"Close\", \n y2: \"Open\",\n strokeWidth: 5,\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\"\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":3096,"value":"$${viewof year_slider}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2193,"value":"_👆 **Note**: For this to work, `viewof` keyword must be used both when creating the slider and when calling it from within Markdown/HTML._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"## Adjust Candle Sizes Dynamically","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1230,"value":"*See [Array.length](https://www.w3schools.com/jsref/jsref_length_array.asp) in W3 schools.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":254,"value":"When there are many candles, the candles overlap; they shouldn't. Let the `strokeWidth` parameter have a dynamic value that adapts to the number of candles in the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1763,"value":"Start by counting the number of observations in the filtered dataset, and assign it to a variable:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2667,"value":"cleanshot20230428At2334382x = FileAttachment(\"CleanShot 2023-04-28 at 23.34.38-2x.png\").image({width: 250})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2674,"value":"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":3038,"value":"$${viewof year_slider} ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2678,"value":"Plot.plot({\n\n width: 1100,\n marks: [\n\n // Wicks\n Plot.ruleX(data_filtered, { \n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\"\n }),\n \n // Candle Body \n Plot.ruleX(data_filtered, {\n x: \"Date\",\n y1: \"Close\", \n y2: \"Open\",\n strokeWidth: 1000 / numberOfDaysInFilteredData,\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\"\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":3036,"value":"$${viewof year_slider} ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2758,"value":"Plot.plot({\n\n width: 1100,\n marks: [\n\n // Wicks\n Plot.ruleX(data_filtered, { \n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\",\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 }),\n \n // Candle Body \n Plot.ruleX(data_filtered, {\n x: \"Date\",\n y1: \"Close\", \n y2: \"Open\",\n strokeWidth: 1000 / numberOfDaysInFilteredData,\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\",\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})","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\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 tooltip:{\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\",\n },\n width: 1100,\n marks: [\n\n // Wicks\n Plot.ruleX(data_filtered, { \n x: \"Date\", \n y1: \"High\", \n y2: \"Low\",\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\",\n title: d => createTooltipContent( d ) \n \n }),\n \n // Candle Body \n Plot.ruleX(data_filtered, {\n x: \"Date\",\n y1: \"Close\", \n y2: \"Open\",\n strokeWidth: 1000 / numberOfDaysInFilteredData,\n stroke: d => d['Open'] < d['Close'] ? \"green\" : \"red\",\n title: d => createTooltipContent( d ) \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 ) // 2 standard deviations to plot\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":true,"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)","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":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3004,"value":"data_filtered_withIndicators","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":"\n| | |\n| --------------------- | -------------------------------- |\n| ${viewof year_slider} | ${viewof bollingerPeriod_slider} |","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2161,"value":"Use HTML to place your control widgets within a custom layout:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2086,"value":"\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":"$4a","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":3049,"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\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":"// Uncomment to activate\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 \t.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":"// Uncomment to activate\n\ndata_filtered_withIndicators_withFearGreedIndex = aq.from(data_filtered_withIndicators)\n\t.join(aq.from(data_fearGreedIndex), [\"Date\", \"FearGreedDate\"])\n\t.objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2256,"value":"// Uncomment to activate\n\nInputs.table(data_filtered_withIndicators_withFearGreedIndex)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"## Plot the Fear & Greed Index Under the Main Chart","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":3030,"value":"\n

${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":2922,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3027,"value":"Plot.plot({\n height: 150,\n width: 1100,\n grid: true,\n y: {\n label: \"Fear-Greed-Value\",\n axis: \"right\"\n },\n marks: [\n Plot.lineY(data_filtered_withIndicators_withFearGreedIndex, {\n x: \"Date\",\n y: \"FearGreedValue\",\n stroke: \"forestgreen\",\n strokeWidth: 1.5\n })\n ]\n})","pinned":true,"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