31:T81b,Plot.plot({ marks: [ Plot.ruleX(data_final, { x: "date", stroke: (d) => d3.interpolateRdYlGn(d.fearGreedIndex / 100), strokeWidth: (d) => 1150 / data_final.filter((d) => d.date).length, title: (d) => `${d.date}\n${d.fearGreedIndex}\n${d.fearGreedIndexClassification}`, opacity: control_indicators.includes("Fear & Greed Index") ? 0.25 : 0 }), Plot.ruleX(data_final, { x: "date", y1: "open", y2: "close", stroke: "color", strokeWidth: (d) => (1000 - 200) / data_final.filter((d) => d.date).length, title: (d) => `${d.date.toLocaleString("default", { month: "long" })} ${d.date.getDate()} Open: ${Math.round(d.open)} Close: ${Math.round(d.close)} High: ${Math.round(d.high)} Low: ${Math.round(d.low)} Fear & Greed Index: ${d.fearGreedIndex} Fear & Greed Category: ${d.fearGreedIndexClassification} ` }), Plot.areaY(data_final, { x: "date", y1: "bollingerUpper", y2: "bollingerLower", z: null, fill: control_indicators.includes("Bollinger Band") ? "dodgerBlue" : null, stroke: control_indicators.includes("Bollinger Band") ? "navy" : null, strokeWidth: 0.77, opacity: 0.44 }), Plot.ruleX(data_final, { x: "date", y1: "high", y2: "low", stroke: "color" }), Plot.ruleY([currentEthereumPrice], { stroke: "#ff0000", strokeDasharray: [20, 5], opacity: 0.44, title: (d) => `Current Price ${currentEthereumPrice}` }), Plot.lineY(data_final, { x: "date", y: "bollingerAverage", stroke: "#0000FF", strokeWidth: 0.77 }), Plot.lineY(data_final, { x: "date", y: "ma", stroke: control_indicators.includes("MA") ? "#ff0000" : null, strokeWidth: 0.77 }) ], width: 1000, x: { grid: false }, y: { grid: true, axis: "right", label: "Price ↑" } })32:T6b0,howTo(` You can create the Fear and Greed Index (FGI) lines in the background using the **same method you used when creating the candles**. The main difference is that the heights of the FGI lines are not determined by the open and close prices, but rather, each line spans the entire height of the chart. As for **coloring the lines**: you can either [a] assign a color to each row as we did in the Candlestick Chart notebook (using the Wrangler), or [b] you can specify a function as the value of the ‘stroke’ option of the mark that creates the FGI lines. Such a function should assign a color value based on the magnitude of the FGI. It is acceptable to have only three colors (green, yellow, and red), but it's better if you can assign a **gradient color**—a color scale that varies between green, yellow, and red, and can give in-between colors. To do this, you can specify a function for the ’stroke’ option of the mark that creates the FGI. The function could include the expression ‘d3.interpolateRdYlGn( ~some value between 0 and 1 here~ )’. Please see [here](https://observablehq.com/@clokman/how-to-use-d3-interpolaterdylgn) if you could use further explanation and a refresher on how to assign parameter values in Plot dynamically, using methods such as 'd3.interpolateRdYlGn'. Note that this is only one way; there could be other solutions. For more information and possibilities, see [Colors Cheatsheet](https://observablehq.com/@observablehq/plot-cheatsheets-colors?collection=@observablehq/plot-cheatsheets) and [Working with Color](https://observablehq.com/@d3/working-with-color) on Observable. `,{ title: `How do I make the Fear and Greed Index lines in the background?`})33:T408,howTo(`Please use the cell below as a template when creating new control panels. When you enter the edit mode for the cell below, notice that the 'viewof' keyword is used before each referrring to each interface element (e.g., a slider). Think of 'viewof' as a 'summon' command: it summons the visual output of the cell that it refers to. One thing that may be hard to get your head around: Using 'viewof' *steals* the display of the interface element from its original cell, making the original cell's output appear blank. The original cell where the interface element is created is still necessary for things to work, though, so don't delete it. Cells with empty outputs look strange, so it is a good idea to (1) 'pin' them, so that their inner code is always visible, and (2) move any cells with empty outputs somewhere out of the way, such as under a 'Control Panel Elements' heading towards the end of the notebook. `,{ title: `How do I make sliders, checkboxes, etc. appear side by side instead of in different cells?`})34:T56d,showMe(`~~~javascript // you can ignore this line, and the last line // If you have a checkbox cell like this(which can be generated automatically // using the 'checkbox' snippet/template in Observable)... viewof control_myIndicators = Inputs.checkbox(['MA', 'MACD'], { label: "Display These Indicators:", value: ["MA", "MACD"] }) // ... then you can make the exisence of a specific value in 'control_myIndicators' // variable a necessary condition for displaying a mark: Plot.line(data_final, { x: "date", y: "ma", stroke: control_myIndicators.includes('MA') // if 'MA' checkbox is selected ? 'red' // make the stroke color red : null, // otherwise, don't give it a color, making it invisible }) // You can also determine which code will be run for a cell based on whether a certain // value exists in the 'control_myIndicators' variable: control_myIndicators.includes('MACD') // if this value exists (i.e., the checkbox is selected) ? Plot.plot({ ... }) // run this code : htl.html'

' // otherwise, run this code. htl.html'

' part creates // an empty cell. Note: You must use the tick key on your keyboard instead of // the single quotation marks for this line to work. ~~~ `, { label: 'How do I make a chart or mark disappear when its checkbox is unchecked?', evaluate: false, styles: {maxWidth:width + "px"} } )35:T60a,howTo( `Previously, while we were joining the other indicators (e.g., EMA) to the main dataset, we used a method that assumed that the nth row (i.e., datum) of the indicator data corresponding to the nth row of the main dataset. We knew this was true because we generated the indicator data directly from the main dataset. Our previous join code simply stitched the first value of such generated indicator data to the first row of the main dataset, the second value to the second row, and so on. We can't do that this time. Because the main dataset and the Fear & Greed Index data are pulled from different sources, there is no guarantee that these datasets will have the exact same number of rows, and therefore, there is also no guarantee that the nth row in one dataset will correspond to the nth row in the other. For instance, Fear & Greed Index data may start on a different date or it may have a day or two missing; these may not be the cases for the main dataset. This is why it's not a good idea to just join the two datasets while trusting that order of the rows in both datasets is the same. The datasets should be joined more carefully, using an index column: a column that has the same values in both datasets for the rows that should be joined. In the case of the Fear & Greed Index, we have such an index column that exists in both datasets: 'date'. Joining the datasets by the date column ensures that each Fear & Greed index value goes to the right row in the main dataset.`, {title: "Why use Wrangler to join?"} )36:T4bb,howTo( `Wrangler allows you to join datasets in different ways. Assuming that the main dataset is the first one (i.e., left) and the Fear & Greed Index is the second one (i.e., right) in the wrangler arguments, this is what different join operations do: Join (intersection): Let the merged dataset have only rows for dates that are present in both dataset. Same as the intersection of two sets: mainDataset ∩ fearAndGreedDataset. Join left: Keep all the rows from the main (i.e., left) dataset. Don't add the rows from the Fear & Greed (i.e., right) dataset if they don't have the same date in the main dataset. Join right: Keep all the rows from the Fear & Greed (i.e., right) dataset. Don't add the rows from the main (i.e., left) dataset if they don't have the same date in the main dataset. Join full: Add all the rows from the main (i.e., left) dataset AND the Fear & Greed (i.e., right) dataset. Same as the union of two sets: mainDataset ∪ fearAndGreedDataset. See [An Illustrated Guide to Arquero Verbs ](https://observablehq.com/@uwdata/an-illustrated-guide-to-arquero-verbs#join) for a visual explanation / cheatsheet. `, {title: "What is join, left join, and right join?"} )37:[{"id":"b78cae6e80d82f25af20616fff0e01ad9b3750c9bf72117e2b137603eee5e55a5617ba92f9bc21b2719f17c8e7123d4a96fb904facfd2b788b412c8d72b6f8fe","href":"https://static.observableusercontent.com/files/b78cae6e80d82f25af20616fff0e01ad9b3750c9bf72117e2b137603eee5e55a5617ba92f9bc21b2719f17c8e7123d4a96fb904facfd2b788b412c8d72b6f8fe","name":"ETH-USD@3.csv","type":"text/csv","lastModified":1656399892358.119,"size":131524},{"id":"7faa102511c3d58576319f859a562e8c08de0337fa0c89d13dfdd223926ea1b1caf3d5637ef736deafd0ce89dc79bc4530377828cd62e7113d83664533c82671","href":"https://static.observableusercontent.com/files/7faa102511c3d58576319f859a562e8c08de0337fa0c89d13dfdd223926ea1b1caf3d5637ef736deafd0ce89dc79bc4530377828cd62e7113d83664533c82671","name":"CleanShot 2022-05-30 at 18.07.19-2x.png","type":"image/png","lastModified":1656399892358.119,"size":813465},{"id":"1a02e5573607b03cd365389919471be010d55053623862ade9542701892063986ae1cf8eb6847f143f5a2d7643517ec756dfd8a02b7a0e98c98b90b48f0d9a2e","href":"https://static.observableusercontent.com/files/1a02e5573607b03cd365389919471be010d55053623862ade9542701892063986ae1cf8eb6847f143f5a2d7643517ec756dfd8a02b7a0e98c98b90b48f0d9a2e","name":"CleanShot 2022-05-30 at 18.09.00-2x.png","type":"image/png","lastModified":1656399892358.119,"size":28208},{"id":"fe0d14c7c77e75e024551adda0823f6c449c2e66b06174f55bea89f98fd1b864fddeca718a761d1d315831d48d26c4babb361c4d6b532d36a218f775d92cdb7c","href":"https://static.observableusercontent.com/files/fe0d14c7c77e75e024551adda0823f6c449c2e66b06174f55bea89f98fd1b864fddeca718a761d1d315831d48d26c4babb361c4d6b532d36a218f775d92cdb7c","name":"CleanShot 2022-05-30 at 18.09.48-2x.png","type":"image/png","lastModified":1656399892358.119,"size":39582},{"id":"c4ecf64d000e485654ec8fac59ad14c4a2262ffc242bb9eb3e0ef843d48979c4760e40c7bc46837f9779ea551bb51924439c1f8f30ddd44696acb5b4787c5542","href":"https://static.observableusercontent.com/files/c4ecf64d000e485654ec8fac59ad14c4a2262ffc242bb9eb3e0ef843d48979c4760e40c7bc46837f9779ea551bb51924439c1f8f30ddd44696acb5b4787c5542","name":"CleanShot 2022-05-30 at 18@1.10.32-2x.png","type":"image/png","lastModified":1656399892358.119,"size":31695},{"id":"5b866cfa06928eae11a8a765d73e604ce0b452dc1363e1f1a84fd67e61a733b503d07e98565c63aac559603689494c3e5b738fabd340fded830e2f03db9bbc4f","href":"https://static.observableusercontent.com/files/5b866cfa06928eae11a8a765d73e604ce0b452dc1363e1f1a84fd67e61a733b503d07e98565c63aac559603689494c3e5b738fabd340fded830e2f03db9bbc4f","name":"CleanShot 2022-05-30 at 18.11.23-2x.png","type":"image/png","lastModified":1656399892358.119,"size":99744},{"id":"cbc02878dd5b460ca82343ac8caeca6f615d34efa6e3e67a603f4925f7b7a58f2acd189f16db1e3468de60b2293de78845ecf828adc7f58e53f79d1071d3fc06","href":"https://static.observableusercontent.com/files/cbc02878dd5b460ca82343ac8caeca6f615d34efa6e3e67a603f4925f7b7a58f2acd189f16db1e3468de60b2293de78845ecf828adc7f58e53f79d1071d3fc06","name":"CleanShot 2022-05-30 at 18.12.36-2x.png","type":"image/png","lastModified":1656399892358.119,"size":114316},{"id":"69baa3a2b0c6e6693f3684b594e6c14078ab68cff04047e5e09994ce6307e480341697f2c96fcc41e4cbf1ead9a6b82d87a2846d0df9c4db9a4d50147f8ccf5e","href":"https://static.observableusercontent.com/files/69baa3a2b0c6e6693f3684b594e6c14078ab68cff04047e5e09994ce6307e480341697f2c96fcc41e4cbf1ead9a6b82d87a2846d0df9c4db9a4d50147f8ccf5e","name":"CleanShot 2022-05-30 at 18.22.28-2x.png","type":"image/png","lastModified":1656399892358.119,"size":18312},{"id":"efa409bde0aff8d4d6f7cc8b3c0e78f73427eb807abd8a611eb7199f0f1dce0ec49c768ca90342c44154160a80f74f53e264c015abc80cc177ef6c9662d16800","href":"https://static.observableusercontent.com/files/efa409bde0aff8d4d6f7cc8b3c0e78f73427eb807abd8a611eb7199f0f1dce0ec49c768ca90342c44154160a80f74f53e264c015abc80cc177ef6c9662d16800","name":"CleanShot 2022-05-30 at 18.28.40-2x.png","type":"image/png","lastModified":1656399892358.119,"size":44118}] 2f:{"title":"Worksheet: Technical Analysis Dashboard (Assignment)","cells":[{"id":0,"value":"# Worksheet: Technical Analysis Dashboard (Assignment)","pinned":false,"hidden":false,"mode":"md"},{"id":4070,"value":"toc( {skip: \"Worksheet: Technical Analysis Dashboard (Assignment)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2395,"value":"_**Disclaimer**: The visualizations in this notebook are produced solely for educational purposes. The author makes absolutely no claims about the accuracy of the calculations and cannot be held responsible for any financial loss that may occur due to the their use._\n\n_The information provided on this notebook does not constitute investment advice, financial advice, trading advice, or any other sort of advice and you should not treat any of the notebook or course content as such. The author does not recommend that any cryptocurrency should be bought, sold, or held by you. Do conduct your own due diligence and consult your financial advisor before making any investment decisions._","pinned":false,"hidden":false,"mode":"md"},{"id":5848,"value":"# Assignment Info","pinned":false,"hidden":false,"mode":"md"},{"id":5872,"value":"**Task**: Replicate the functionality depicted in the images (that have dashed lines around them), resulting in a [technical analysis](https://www.investopedia.com/terms/t/technicalanalysis.asp) dashboard.","pinned":false,"hidden":false,"mode":"md"},{"id":5878,"value":"Specifics:","pinned":false,"hidden":false,"mode":"md"},{"id":5836,"value":"- When the value of a slider is changed, the related chart should update.\n(The underlying data already changes when you move a slider; this has been taken care of for you. You should focus on connecting the data to the visualization.)\n\n- Every chart in the dashboard should visualize the same time period.\n Consequently, 'Time Range' slider should change the data for all cells of the visualization.\n\n- The dashboard consists of multiple notebook cells; the entire dashboard is not realized within a single cell.\n\n- You can click on the How-To boxes (i.e., the yellow ones that start with 'How Do I...') to expand or collapse them.\nPlease move 'How-To' boxes out of the way (e.g., to Appendix) once you are done with them. They should not get between the dashboard cells (and thus, not prevent making the dashboard look like a single entity).\n\n- **Hint**: You can start this assignment by recycling your code from the candlestick chart workbook.","pinned":false,"hidden":false,"mode":"md"},{"id":5556,"value":"# Dashboard","pinned":false,"hidden":false,"mode":"md"},{"id":2420,"value":"\n\n\n

\n\n\n \n ${viewof control_bollingerPeriod} ${viewof control_bollingerSD}\n\n
\n \n \n ${viewof control_maLookbackPeriod}\n\n\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":5787,"value":"viewof control_timeRange = rangeSlider({\n min: 2017,\n max: 2023,\n value: [2022, 2023],\n step: 1,\n title: 'Time Range',\n description: 'Adjust the time range to zoom in/out along the x axis',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2730,"value":"viewof control_indicators = Inputs.checkbox([\"Bollinger Band\", \"MA\", \"Fear & Greed Index\"], {label: \"Indicators on chart:\", value: [\"Bollinger Band\", \"MA\", \"Fear & Greed Index\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5582,"value":"cleanshot20220530At1807192x = FileAttachment(\"CleanShot 2022-05-30 at 18.07.19-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5993,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5644,"value":"cleanshot20220530At1822282x = FileAttachment(\"CleanShot 2022-05-30 at 18.22.28-2x.png\").image({width: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6075,"value":"Please check the boxes to see additional indicators","pinned":false,"hidden":false,"mode":"md"},{"id":6006,"value":"viewof additional_indicators = Inputs.checkbox(\n [\"Volume\", \"MACD\", \"RSI\", \"Stochastic Oscillator\"],\n { label: \"Additional Indicators\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5587,"value":"cleanshot20220530At1809002x = FileAttachment(\"CleanShot 2022-05-30 at 18.09.00-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5995,"value":"additional_indicators.includes(\"Volume\")\n ? Plot.plot({\n y: { grid: true, axis: \"right\", label: \"Volume ↑\" },\n marks: [\n Plot.ruleX(data_withFcIndicators, {\n x: \"date\",\n y: \"volume\",\n stroke: \"color\",\n strokeWidth: 850 / data_final.filter((d) => d.date).length,\n opacity: 0.7\n })\n ],\n width: 1200,\n height: 100\n })\n : html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":5591,"value":"cleanshot20220530At1809482x = FileAttachment(\"CleanShot 2022-05-30 at 18.09.48-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5997,"value":"additional_indicators.includes(\"MACD\")\n ? Plot.plot({\n marks: [\n Plot.lineY(data_withFcIndicators, {\n x: \"date\",\n y: \"macd\",\n stroke: \"#FFAE42\"\n }),\n Plot.lineY(data_withFcIndicators, {\n x: \"date\",\n y: \"macdSignal\",\n stroke: \"#800080\"\n }),\n Plot.rectY(data_withFcIndicators, {\n x: \"date\",\n y: \"macdDivergence\",\n interval: d3.utcDay,\n fill: (d) => (d.macdDivergence >= 0 ? \"#228B22\" : \"#ff0000\"),\n opacity: 0.7\n })\n ],\n width: 1000,\n height: 100,\n x: { grid: true },\n y: { grid: true, axis: \"right\", label: \"MACD\" }\n })\n : html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":5597,"value":"cleanshot20220530At18110322x = FileAttachment(\"CleanShot 2022-05-30 at 18@1.10.32-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5999,"value":"additional_indicators.includes(\"RSI\")\n ? Plot.plot({\n marks: [\n Plot.lineY(data_withFcIndicators, {\n x: \"date\",\n y: \"rsi\",\n z: null,\n stroke: (d) => (d.rsi > 70 || d.rsi < 30 ? \"#ff0000\" : \"#228B22\")\n }),\n Plot.ruleY([70], {\n strokeDasharray: [10, 5],\n opacity: 1,\n stroke: \"#ADD8E6\"\n }),\n\n Plot.ruleY([30], {\n strokeDasharray: [10, 5],\n opacity: 1,\n stroke: \"#ADD8E6\"\n }),\n Plot.areaY(rsi_upper_lower, {\n x: \"date\",\n y1: \"30\",\n y2: \"70\",\n fill: \"#a8daeb\",\n opacity: 0.3\n })\n ],\n width: 1110,\n height: 100,\n x: { grid: true },\n y: { grid: true, axis: \"right\", label: \"RSI ↑\" }\n })\n : html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":5602,"value":"cleanshot20220530At1811232x = FileAttachment(\"CleanShot 2022-05-30 at 18.11.23-2x.png\").image({width: 1100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6001,"value":"additional_indicators.includes(\"Stochastic Oscillator\")\n ? Plot.plot({\n marks: [\n Plot.lineY(data_withFcIndicators, {\n x: \"date\",\n y: \"stochasticOscillatorK\",\n z: null,\n stroke: \"#FFAE42\"\n }),\n Plot.lineY(data_withFcIndicators, {\n x: \"date\",\n y: \"stochasticOscillatorD\",\n z: null,\n stroke: \"#800080\",\n strokeOpacity: 0.5\n }),\n Plot.ruleX(data_withFearGreedIndex, {\n x: \"date\",\n stroke: (d) =>\n d.stochasticOscillatorK >= d.stochasticOscillatorD\n ? \"green\"\n : \"red\",\n strokeWidth: 7,\n opacity: 0.08\n })\n ],\n width: 1110,\n height: 100,\n x: { grid: true },\n y: { grid: true, axis: \"right\", label: \"Stochastic Oscillator\" }\n })\n : html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":5706,"value":"cleanshot20220530At1828402x = FileAttachment(\"CleanShot 2022-05-30 at 18.28.40-2x.png\").image({width: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6009,"value":"

\n${viewof control_macdSignalPeriod} , ${viewof control_macdFastPeriod} , ${viewof control_macdSlowPeriod} \n
\n${viewof control_rsiPeriod} ,\n
\n${viewof control_stochasticOscillatorKPeriod} , ${viewof control_stochasticOscillatorDPeriod} \n

","pinned":false,"hidden":false,"mode":"html"},{"id":5606,"value":"cleanshot20220530At1812362x = FileAttachment(\"CleanShot 2022-05-30 at 18.12.36-2x.png\").image({width: 300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6012,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":5906,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":5796,"value":"howTo(`You can find out how you can get the daily Fear & Greed Index image from https://alternative.me/crypto/fear-and-greed-index/ . Once you're on the web page, find the 'Embed Self-Updating Image' section and copy paste the *embed code* in an **HTML** cell of this notebook.\n\n**Note**: Make sure you do not just copy paste an image file. If you have used the embed code correctly, the image should update every day automatically.\n\n`,{\n title: `How do I embed this external image to my notebook?`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5202,"value":"howTo(`\n- '**Plot.line**' for various lines in charts\n- '**Plot.areaY**' for the Bollinger Band\n- '**Plot.ruleY**' for the candlesticks and the background bars (i.e., the Fear & Greed Indicator)\n- '**Plot.ruleX**' for the indicator\n\n**Why no 'bar' marks?**\n\nWe are not dealing with categorical data here, and thus, using a bar mark/chart (which is a visualization technique designed for categorical data) creates problems. Two of these problems are having a label appear on the x axis for each day and unwanted spaces between bars.\n\nUsing a [ruleX](https://observablehq.com/@observablehq/plot-rule?collection=@observablehq/plot) mark instead of a bar mark allows more flexibility because this technique is more suitable for continuous data. Please note that because ruleX marks are simply lines, they have no fill color. To make these lines appear like bars, you need to specify their 'strokeWidth' property. \n\n`,{\n title: `What mark types should I use in my charts? (Hint: No bar charts)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5971,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":5968,"value":"showMe(`~~~javascript // you can ignore this line, and the last line\nPlot.plot( ...\n...\n y: {\n label: 'My Y Axis Label',\n ticks: [10, 20, 30, 100] // <-- Only these values will appear as ticks on the y axis.\n },\n...\n)\n\n~~~\n`, {\n label: 'How do I specify at which exact points axis ticks should appear?', \n evaluate: false,\n styles: {maxWidth:width + \"px\"}\n} \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5247,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":5033,"value":"howTo(`\nThis is already taken care of for you. In case you'd like to do it on another notebook in the future:\nYou need to import the 'Range Slider' function to your notebook.\nSee [Range Slider](https://observablehq.com/@mootari/range-slider) for import and usage instructions.\n\nNote that when the time range changes, all charts should update to accomodate the new time range, even if the charts are in separate cells.\n`, {\n title: 'How do I add a slider for specifying the time range?'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5043,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":5544,"value":"displayCaution(`\nDO NOT MODIFY THE CODE AFTER THIS POINT\n
This part is taken care of for you.
\n
\nNote\n
Headings in this notebook are ordered based on their relevance for the final visualization.\n
The order of the headings are not necessarily based on the order of the steps taken to produce the results. \n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5537,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":4629,"value":"### Final Dataset","pinned":false,"hidden":false,"mode":"md"},{"id":4632,"value":"data_final = data_withFearGreedIndex","pinned":true,"hidden":false,"mode":"ojs"},{"id":4758,"value":"Inputs.table(data_final)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4372,"value":"### Explore the Dataset","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"data_yahooRaw = FileAttachment(\"ETH-USD@3.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"👆 Source: [Yahoo Finance](https://finance.yahoo.com/quote/ETH-USD/history?period1=1438905600&period2=1651881600&interval=1d&filter=history&frequency=1d&includeAdjustedClose=true)","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"SummaryTable(data_yahooRaw)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"Inputs.table(data_yahooRaw)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4376,"value":"### Preprocessing","pinned":false,"hidden":false,"mode":"md"},{"id":2305,"value":"data_yahooWithRenamedColumns = aq.from(data_yahooRaw)\n .rename({Date: \"date\"})\n\t.rename({Open: \"open\"})\n\t.rename({High: \"high\"})\n\t.rename({Low: \"low\"})\n\t.rename({Close: \"close\"})\n\t.rename({\"Adj Close\": \"adjClose\"})\n\t.rename({Volume: \"volume\"})\n\t.objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4382,"value":"### Year Filter","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"data_yahooFiltered = aq.from(data_yahooWithRenamedColumns)\n .params({\n yearStart: new Date(+control_timeRange[0], 0, 1).getTime(),\n yearEnd: new Date(+control_timeRange[1], 0, 0).getTime()\n })\n .filter ( (d, params) => d[\"date\"] > params.yearStart)\n .filter ( (d, params) => d[\"date\"] < params.yearEnd)\n .derive ({color: d => d.close < d.open ? \"crimson\" : \"oliveDrab\"})\n\t.objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"Inputs.table(data_yahooFiltered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1326,"value":"lookingAtOneYear = control_timeRange[1] - control_timeRange[0] === 1\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"lookingAtAYearWithFewTicks = lookingAtOneYear && (control_timeRange[0] === 2022 || control_timeRange[0] === 2017)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"lookingAtTwoYears = control_timeRange[1] - control_timeRange[0] === 2\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"lookingAtMoreThanTwoYears = control_timeRange[1] - control_timeRange[0] > 2\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"xAxisGridIsOn = lookingAtOneYear","pinned":false,"hidden":false,"mode":"ojs"},{"id":1309,"value":"configureTicks = d => {\n const dayOfMonth = d.getDate() \n const month = d.toLocaleString('default', { month: 'long' })\n const year = d.getFullYear() \n\n let label\n\n // Month level\n if(lookingAtAYearWithFewTicks){\n if(dayOfMonth >= 5 && dayOfMonth <= 25){label = dayOfMonth}\n if(dayOfMonth === 1){label = month}\n }\n\n if(!lookingAtAYearWithFewTicks || lookingAtOneYear){\n if(dayOfMonth === 1){label = month.slice(0,3)}\n }\n\n // Two-year level \n if(lookingAtTwoYears){\n if(dayOfMonth === 1){label = month.slice(0,3)}\n }\n\n // Years level\n if(lookingAtMoreThanTwoYears){\n if(month === 'January' && dayOfMonth === 1){label = year}\n }\n return label\n\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":4595,"value":"## Control Panel Elements","pinned":false,"hidden":false,"mode":"md"},{"id":5900,"value":"displayCaution(\"This is taken care of for you.\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5814,"value":"This is where the control panel elements actually reside. The code that displayed these elements side by side (above and below the charts) will 'steal' the graphical output of these elements. This is why some cells here have some code but no output; their output, which is a slider element, appears on top of the dashboard. Once you finish your dashboard, the outputs of other cells in this section will also look empty. See [How do I make sliders, checkboxes, etc. appear side by side instead of in different cells?](https://observablehq.com/d/789eaddc7d221037#cell-5247) cell in this notebook for more information.","pinned":false,"hidden":false,"mode":"md"},{"id":2342,"value":"viewof control_bollingerPeriod = Inputs.range([2, 200], {\n value: 7,\n step: 1,\n label: \"Bollinger Period\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2338,"value":"viewof control_bollingerSD = Inputs.range([0.5, 4], {\n value: 2,\n label: \"Bollinger SD\",\n step: 0.1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3054,"value":"viewof control_maLookbackPeriod = Inputs.range([1, 200], {label: \"MA Period\", value: 9, step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3083,"value":"viewof control_macdSignalPeriod = Inputs.range([1, 200], {label: \"MACD Signal Period\", value: 9, step: 1, width: 300})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3080,"value":"viewof control_macdFastPeriod = Inputs.range([1, 200], {label: \"MACD Fast Period\", value: 12, step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3078,"value":"viewof control_macdSlowPeriod = Inputs.range([1, 200], {label: \"MACD Slow Period\", value: 26, step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3195,"value":"viewof control_rsiPeriod = Inputs.range([1, 200], {label: \"RSI Period\", value: 14, step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3222,"value":"viewof control_stochasticOscillatorKPeriod = Inputs.range([1, 200], {label: \"Stochastic Oscillator K Period\", value: 5, step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3224,"value":"viewof control_stochasticOscillatorDPeriod = Inputs.range([1, 200], {label: \"Stochastic Oscillator D Period\", value: 3, step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2629,"value":"## Indicators","pinned":false,"hidden":false,"mode":"md"},{"id":5444,"value":"displayCaution(\"In this section, the indicators are calculated and then joined to the main dataset. This is already done.\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4568,"value":"#### Calculate the Indicators ","pinned":false,"hidden":false,"mode":"md"},{"id":2592,"value":"_See [d3fc technical indicator API](https://github.com/d3fc/d3fc/blob/master/packages/d3fc-technical-indicator/README.md#macd)_\n\n_See [Tutorial for fc indicators](https://blog.scottlogic.com/2018/09/21/d3-financial-chart.html)_\n\nYou can click on indicator titles to read about what they mean on Investopedia.","pinned":false,"hidden":false,"mode":"md"},{"id":4542,"value":"#### [Moving Average](https://www.investopedia.com/terms/m/movingaverage.asp) (MA)","pinned":false,"hidden":false,"mode":"md"},{"id":5447,"value":"showMe(`maColumn = fc.indicatorMovingAverage()\n .period(control_maLookbackPeriod)\n .value(d => d.close)\n (data_yahooFiltered)`,{\n\n label: 'How do I calculate an indicator?',\n dependencies: {fc, data_yahooFiltered, control_maLookbackPeriod}\n \n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2648,"value":"maColumn = fc.indicatorMovingAverage()\n .period(control_maLookbackPeriod)\n .value(d => d.close)\n (data_yahooFiltered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4546,"value":"#### [Exponential Moving Average](https://www.investopedia.com/terms/e/ema.asp) (EMA)","pinned":false,"hidden":false,"mode":"md"},{"id":2667,"value":"emaColumn = fc.indicatorExponentialMovingAverage()\n .period(9)\n .value(d => d.close)\n (data_yahooFiltered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4553,"value":"#### [Relative Strength Index](https://www.investopedia.com/terms/r/rsi.asp) (RSI)","pinned":false,"hidden":false,"mode":"md"},{"id":2603,"value":"rsiColumn = fc.indicatorRelativeStrengthIndex()\n .value(d => d.close)\n .period(control_rsiPeriod)\n (data_yahooFiltered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4557,"value":"#### [Bollinger Band](https://www.investopedia.com/terms/b/bollingerbands.asp)","pinned":false,"hidden":false,"mode":"md"},{"id":2655,"value":"bollingerColumn = fc.indicatorBollingerBands()\n .value(d => d.close)\n .period(control_bollingerPeriod)\n .multiplier(control_bollingerSD)\n (data_yahooFiltered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4563,"value":"#### [Moving Average Convergence Divergence](https://www.investopedia.com/terms/m/macd.asp) (MACD)","pinned":false,"hidden":false,"mode":"md"},{"id":2674,"value":"macdColumn = fc.indicatorMacd()\n .value(d => d.close)\n .fastPeriod(d => control_macdFastPeriod)\n .slowPeriod(d => control_macdSlowPeriod)\n .signalPeriod(d => control_macdSignalPeriod)\n (data_yahooFiltered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4565,"value":"#### [Stochastic Oscillator](https://www.investopedia.com/terms/s/stochasticoscillator.asp)","pinned":false,"hidden":false,"mode":"md"},{"id":2682,"value":"stochasticOscillatorColumn = fc.indicatorStochasticOscillator()\n.lowValue(d => d.low)\n.highValue(d => d.high)\n.closeValue(d => d.close)\n.kPeriod( control_stochasticOscillatorKPeriod )\n.dPeriod( control_stochasticOscillatorDPeriod )\n(data_yahooFiltered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2618,"value":"### Join the Indicators to the Main Dataset","pinned":false,"hidden":false,"mode":"md"},{"id":2614,"value":"data_withFcIndicators = data_yahooFiltered.map( (d, i) => ({ \n ma: maColumn[i],\n ema: emaColumn[i],\n macd: macdColumn[i].macd,\n macdSignal: macdColumn[i].signal,\n macdDivergence: macdColumn[i].divergence,\n rsi: rsiColumn[i],\n stochasticOscillatorK: stochasticOscillatorColumn[i].k,\n stochasticOscillatorD: stochasticOscillatorColumn[i].d,\n bollingerUpper: bollingerColumn[i].upper, \n bollingerAverage: bollingerColumn[i].average,\n bollingerLower: bollingerColumn[i].lower,\n ...d \n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4464,"value":"### Current Ethereum Price","pinned":false,"hidden":false,"mode":"md"},{"id":5431,"value":"howTo(`This is taken care of for you. In case you'd need to do it yourself in the future: You can use d3.json method to get data from various APIs available on the web. The API command to get the latest Ethereum price is 'https://www.binance.com/api/v3/ticker/price?symbol=ETHUSDT'.`, {\n title: 'How do I get the live price of a commodity?'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5436,"value":"Get the current Ethereum price:","pinned":false,"hidden":false,"mode":"md"},{"id":1411,"value":"currentEthereumPrice = d3.json( \"https://www.binance.com/api/v3/ticker/price?symbol=ETHUSDT\").then( response => {\n return +response.price\n} )","pinned":true,"hidden":false,"mode":"ojs"},{"id":3499,"value":"### Fear & Greed Index","pinned":false,"hidden":false,"mode":"md"},{"id":5481,"value":"displayCaution(\"This data is already retrieved for you.\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3726,"value":"Fetch historical Fear & Greed Index data using API:","pinned":false,"hidden":false,"mode":"md"},{"id":3387,"value":"data_fearGreedIndex_raw = d3.json(\"https://api.alternative.me/fng/?limit=0&format=json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3424,"value":"data_fearGreedIndex = aq.from(data_fearGreedIndex_raw.data)\n\t.derive({date: aq.escape(d => new Date(+d.timestamp * 1000))})\n .filter ( aq.escape( d => \n d[\"date\"].getFullYear() >= control_timeRange[0] &&\n d[\"date\"].getFullYear() <= control_timeRange[1]\n ))\n\t.derive({value: d => +d.value}) // make numeric\n .select('value_classification','date','value')\n\t.rename({value: \"fearGreedIndex\"})\n\t.rename({value_classification: \"fearGreedIndexClassification\"})\n\t.objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3743,"value":"Join the Fear & Greed Index data to the main dataset using Wrangler:","pinned":false,"hidden":false,"mode":"md"},{"id":3486,"value":"data_withFearGreedIndex = aq.from(data_withFcIndicators)\n\t.join_left(aq.from(data_fearGreedIndex), [\"date\", \"date\"])\n\t.objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4078,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":4095,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3757,"value":"showMe(`datasetA = [\n {open: 100, year: 2017},\n {open: 200, year: 2018},\n {open: 300, year: 2019}\n]\n\ndatasetB = [\n {close: 150, year: 2017},\n {close: 250, year: 2018},\n {close: 350, year: 2019}\n]\n\n// The Arquero code generated by Wrangler:\ncombinedDataset = aq.from(datasetA)\n .join(aq.from(datasetB), [\"year\", \"year\"])\n .objects()\n`,{dependencies:{aq}, label: 'How do you (left) join two datasets?', evaluate: false} \n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3494,"value":"viewof table = Inputs.table(data_withFearGreedIndex)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6042,"value":"rsi_upper_lower = aq\n .from(data_withFcIndicators)\n .derive({ 30: (d) => 30 })\n .derive({ 70: (d) => 70 })\n .objects() // Uncomment to return an array of objects","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"## Misc.","pinned":false,"hidden":false,"mode":"md"},{"id":4881,"value":"width = 1200","pinned":false,"hidden":false,"mode":"ojs"},{"id":1774,"value":"### Get Data","pinned":false,"hidden":false,"mode":"md"},{"id":1820,"value":"_See [Get OHLC data](https://docs.kraken.com/rest/#operation/getOHLCData) in Kraken API._\n\n_See [Kraken API trade aggregation](https://observablehq.com/@gotjoshua/kraken-api-trade-aggregation) by @gotjoshua on Observable._","pinned":false,"hidden":false,"mode":"md"},{"id":1862,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"import {Wrangler, op} from \"@observablehq/data-wrangler\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":3247,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3357,"value":"fc = require('d3fc')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2181,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3945,"value":"### Notebook Enhancements","pinned":false,"hidden":false,"mode":"md"},{"id":5367,"value":"Control panel styling to put elements side by side:","pinned":false,"hidden":false,"mode":"md"},{"id":5261,"value":"\n\n","pinned":true,"hidden":false,"mode":"html"},{"id":2173,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3842,"value":"import {showMe} from \"@observablehq/show-me\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3943,"value":"import {howTo} from \"@clokman/howto\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5442,"value":"import { displayCaution } from \"@mkfreeman/utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5567,"value":"import {imageToDo} from \"@clokman/student-blocks\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5569,"value":"imageToDo","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}