3e:null 3f:["$","title",null,{"children":"🏠 Assignment: Technical Analysis Dashboard | redon | Observable"}] 45:Td39,Plot.plot({ width: 1100, height: 350, grid: true, tooltip: { opacity: 0, stroke: "" }, y: { axis: "right", label: "Price" }, x: { axis: null }, marks: [ control_indicators.includes("Fear & Greed Index") ? Plot.rectY(data_withFearGreedIndex, { x: { interval: "day", value: "date" }, y: d => Math.max(...data_withFearGreedIndex.map(p => p.high)), stroke: d => d3.interpolateRdYlGn(d.fearGreedIndex / 100), strokeOpacity: 0.3, strokeWidth: 4, title: d => `${d3.timeFormat("%A, %B %d, %Y")(d.date)} ${d.fearGreedIndex} ${d.fearGreedIndexClassification}` }) : null, control_indicators.includes("Bollinger Band") ? Plot.areaY(data_withFearGreedIndex, { x: "date", y1: "bollingerUpper", y2: "bollingerLower", fill: "dodgerblue", opacity: 0.2, stroke: "blue", strokeWidth: 1 }) : null, control_indicators.includes("Bollinger Band") ? Plot.lineY(data_withFearGreedIndex, { x: "date", y: "bollingerAverage", stroke: "blue", strokeWidth: 0.5, strokeOpacity: 0.8 }) : null, control_indicators.includes("MA") ? Plot.lineY(data_withFearGreedIndex, { x: "date", y: "ma", stroke: "crimson", strokeWidth: 1, strokeOpacity: 0.8 }) : null, Plot.ruleX(data_withFearGreedIndex, { x: "date", y1: "low", y2: "high", stroke: d => d.open > d.close ? "crimson" : "oliveDrab", title: d => `${d3.timeFormat("%A, %B %d, %Y")(d.date)} Close: ${Math.ceil(d.close)} Open: ${Math.ceil(d.open)} High: ${Math.ceil(d.high)} Low: ${Math.ceil(d.low)} Fear & Greed Index: ${d.fearGreedIndex} Fear & Greed Category: ${d.fearGreedIndexClassification}` }), Plot.ruleX(data_withFearGreedIndex, { x: "date", y1: "open", y2: "close", stroke: d => d.open > d.close ? "crimson" : "oliveDrab", strokeWidth: 1000 / data_yahooFiltered.length, title: d => `${d3.timeFormat("%A, %B %d, %Y")(d.date)} Close: ${Math.ceil(d.close)} Open: ${Math.ceil(d.open)} High: ${Math.ceil(d.high)} Low: ${Math.ceil(d.low)} Fear & Greed Index: ${d.fearGreedIndex} Fear & Greed Category: ${d.fearGreedIndexClassification}` }), Plot.ruleY(data_withFearGreedIndex, { y: currentEthereumPrice, stroke: "crimson", strokeWidth: 1, strokeOpacity: 0.01, strokeDasharray: "10", title: `Current Price: ${currentEthereumPrice}` }), Plot.line(data_withFearGreedIndex, { x: "date", y: "bollingerAverage", stroke: control_indicators.includes("Bollinger Band") ? "dodgerblue" : null }), Plot.line(data_withFearGreedIndex, { x: "date", y: "ma", stroke: control_indicators.includes("MA") ? "crimson" : null }), Plot.areaY(data_withFearGreedIndex, { x: "date", y1: "bollingerUpper", y2: "bollingerLower", fillOpacity: 0.15, strokeOpacity: 1, fill: control_indicators.includes("Bollinger Band") ? "dodgerblue" : null, stroke: control_indicators.includes("Bollinger Band") ? "dodgerblue" : null }) ].filter(Boolean) }); 46:T73b,Main chart: - The main chart's colored background represents the [Fear and Greed Index](https://alternative.me/crypto/fear-and-greed-index/) (FGI) values. If the columns in the dataset related to FGI show a high 'fear' value, indicating that people are considering selling, the background should be red. Conversely, if FGI column(s) show a high 'greed' value, suggesting that people are thinking of buying, the background should be green. For FGI values that fall in between, the background should transition through a gradient from red to green, or simply be yellow (unless you can't implement the gradient). Additional details are available in the hints provided below. - The key feature of the main chart is the candlesticks. If the price decreased during a specific period, the candlestick should appear red; if it increased, it should be green. - Around the candlestick chart, a blue [Bollinger band](https://www.investopedia.com/terms/b/bollingerbands.asp) is displayed, consisting of three parts: an upper band, a lower band, and a simple moving average (SMA). These bands expand and contract in response to changes in the asset's volatility. - A red [exponential moving average (EMA)](https://www.investopedia.com/terms/e/ema.asp) line crosses through the center of the candlesticks, closely paralleling the blue Bollinger simple moving average line, which also runs through the middle. Unlike the simple moving average, the EMA emphasizes more recent transactions, creating a distinct line. - The dashed horizontal line indicates the [current price](https://www.investopedia.com/terms/c/currentprice.asp). Similar to the Fear and Greed Index, this information is sourced externally. The process for fetching this data is completed in the Appendix section; your task is simply to integrate this data into your visualizations. 47:T43d,MACD chart: - Under the volume chart, there is the [moving average convergence-divergence (MACD)](https://www.investopedia.com/terms/m/macd.asp) chart. This indicator features two lines: the orange 'MACD' line, which represents the difference between two exponential moving averages (EMAs)—one longer (or 'slow') and one shorter (or 'fast'). The second line, the purple 'signal' line, is based on an even shorter-period exponential moving average. This chart is generally used for spotting shifts in market direction. Particularly noteworthy are the points where the MACD and signal lines intersect, as these crossings are often used to decide the optimal times to enter or exit the market. - The bar chart illustrates the difference between the MACD line and the signal line over a specific period, as represented by the `macdDivergence` column in the data. If the value is less than 0, the bar is colored red, indicating that the MACD line is below the signal line. If the value is greater than 0, the bar is colored green, showing that the MACD line is above the signal line. 48:T521,Interactivity: - Every chart in the dashboard should visualize the same time period. That is, the 'Time Range' slider should change the data for all cells of the visualization. - When a checkbox is toggled, the corresponding chart element should either appear or disappear based on the checkbox's value. - When the value of a slider is changed, the related chart should update. (The underlying data already changes when you move a slider; this has been taken care of for you in the Appendix section of this notebook. You should focus on connecting the sliders and other interface elements to the visualization.) - The main chart should feature three distinct tooltips that appear when you hover over specific chart elements: 1. Hovering over a candle in the candlestick element should display the date, close, open, high, and low prices for that period, along with the fear and greed category (e.g., 'Extreme Fear'). 2. Moving the mouse cursor over the background bars in the main chart, which represents the Fear and Greed Index, should show the date of the bar, the FGI index value, and its meaning (e.g., 'Extreme Fear'). 3. Hovering over the current price line should reveal the current price. These tooltips are showcased via a screenshot in the 'Dashboard' section below.49:T41d,howTo(` - '**Plot.line**' for various lines in charts - '**Plot.areaY**' for the Bollinger Band - '**Plot.ruleY**' for the candlesticks and the background bars (i.e., the Fear & Greed Indicator) - '**Plot.ruleX**' for the current price indicator **Why no 'bar' marks?** We 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 (resulting in ±365 labels for a full year) and unwanted spaces between bars. Using 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. `,{ title: `What mark types should I use in my charts? (Hint: No bar charts)`})4a: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"} } )4b:T6dd,howTo(` You can create the Fear and Greed Index (FGI) areas 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 in a new column (using the Wrangler), or [b] you can specify a function as the value of the ‘stroke’ (color) option of the mark that creates the FGI lines (similar to how we used color in the Candlestick Chart notebook). 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/@clokman/plot-cheatsheets-colors?collection=@clokman/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 areas in the background of the main chart?`})4c:T452,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 referring 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 one's head around: Using 'viewof' *detaches* the display of the interface element from its original cell, making the original cell's output appear blank (or, more precisely replaced with a text that says 'detached'). 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 or 'detached' 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?`})4d:T62d,howTo( `Previously, in the Candlestick Chart notebook, 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?"} )4e: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?"} )4f:[{"id":"efa409bde0aff8d4d6f7cc8b3c0e78f73427eb807abd8a611eb7199f0f1dce0ec49c768ca90342c44154160a80f74f53e264c015abc80cc177ef6c9662d16800","href":"https://static.observableusercontent.com/files/efa409bde0aff8d4d6f7cc8b3c0e78f73427eb807abd8a611eb7199f0f1dce0ec49c768ca90342c44154160a80f74f53e264c015abc80cc177ef6c9662d16800","name":"CleanShot 2022-05-30 at 18.28.40-2x.png","type":"image/png","lastModified":1715953790967.892,"size":44118},{"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":1715953790967.892,"size":31695},{"id":"cbc02878dd5b460ca82343ac8caeca6f615d34efa6e3e67a603f4925f7b7a58f2acd189f16db1e3468de60b2293de78845ecf828adc7f58e53f79d1071d3fc06","href":"https://static.observableusercontent.com/files/cbc02878dd5b460ca82343ac8caeca6f615d34efa6e3e67a603f4925f7b7a58f2acd189f16db1e3468de60b2293de78845ecf828adc7f58e53f79d1071d3fc06","name":"CleanShot 2022-05-30 at 18.12.36-2x.png","type":"image/png","lastModified":1715953790967.892,"size":114316},{"id":"e65330832cbebe9f3e64cd0d6ff30dc57a98ba61dcc1e279c77cc086f62c9c1f1948103cbee2896c5cff48f137a1f936984c652bacfedd690646521d0b908b86","href":"https://static.observableusercontent.com/files/e65330832cbebe9f3e64cd0d6ff30dc57a98ba61dcc1e279c77cc086f62c9c1f1948103cbee2896c5cff48f137a1f936984c652bacfedd690646521d0b908b86","name":"CleanShot 2024-05-05 at 02@1.50.35-2x.jpg","type":"image/jpeg","lastModified":1715953790967.892,"size":564874},{"id":"5b866cfa06928eae11a8a765d73e604ce0b452dc1363e1f1a84fd67e61a733b503d07e98565c63aac559603689494c3e5b738fabd340fded830e2f03db9bbc4f","href":"https://static.observableusercontent.com/files/5b866cfa06928eae11a8a765d73e604ce0b452dc1363e1f1a84fd67e61a733b503d07e98565c63aac559603689494c3e5b738fabd340fded830e2f03db9bbc4f","name":"CleanShot 2022-05-30 at 18.11.23-2x.png","type":"image/png","lastModified":1715953790967.892,"size":99744},{"id":"2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","href":"https://static.observableusercontent.com/files/2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","name":"ETH-USD-3.csv","type":"text/csv","lastModified":1715953790967.892,"size":159091},{"id":"fe0d14c7c77e75e024551adda0823f6c449c2e66b06174f55bea89f98fd1b864fddeca718a761d1d315831d48d26c4babb361c4d6b532d36a218f775d92cdb7c","href":"https://static.observableusercontent.com/files/fe0d14c7c77e75e024551adda0823f6c449c2e66b06174f55bea89f98fd1b864fddeca718a761d1d315831d48d26c4babb361c4d6b532d36a218f775d92cdb7c","name":"CleanShot 2022-05-30 at 18.09.48-2x.png","type":"image/png","lastModified":1715953790967.892,"size":39582},{"id":"1a02e5573607b03cd365389919471be010d55053623862ade9542701892063986ae1cf8eb6847f143f5a2d7643517ec756dfd8a02b7a0e98c98b90b48f0d9a2e","href":"https://static.observableusercontent.com/files/1a02e5573607b03cd365389919471be010d55053623862ade9542701892063986ae1cf8eb6847f143f5a2d7643517ec756dfd8a02b7a0e98c98b90b48f0d9a2e","name":"CleanShot 2022-05-30 at 18.09.00-2x.png","type":"image/png","lastModified":1715953790967.892,"size":28208},{"id":"7faa102511c3d58576319f859a562e8c08de0337fa0c89d13dfdd223926ea1b1caf3d5637ef736deafd0ce89dc79bc4530377828cd62e7113d83664533c82671","href":"https://static.observableusercontent.com/files/7faa102511c3d58576319f859a562e8c08de0337fa0c89d13dfdd223926ea1b1caf3d5637ef736deafd0ce89dc79bc4530377828cd62e7113d83664533c82671","name":"CleanShot 2022-05-30 at 18.07.19-2x.png","type":"image/png","lastModified":1715953790967.892,"size":813465},{"id":"69baa3a2b0c6e6693f3684b594e6c14078ab68cff04047e5e09994ce6307e480341697f2c96fcc41e4cbf1ead9a6b82d87a2846d0df9c4db9a4d50147f8ccf5e","href":"https://static.observableusercontent.com/files/69baa3a2b0c6e6693f3684b594e6c14078ab68cff04047e5e09994ce6307e480341697f2c96fcc41e4cbf1ead9a6b82d87a2846d0df9c4db9a4d50147f8ccf5e","name":"CleanShot 2022-05-30 at 18.22.28-2x.png","type":"image/png","lastModified":1715953790967.892,"size":18312}] 43:{"id":"45a582e1a390f237","slug":null,"title":"🏠 Assignment: Technical Analysis Dashboard","thumbnail":"95fdac9ce6b55e799b5d2364770318def158e398c3445a43f3c5fe29115b503f","access_level":"public","create_time":"$D2024-05-17T13:49:50.967Z","update_time":"$D2024-05-17T14:59:56.963Z","view_time":null,"first_public_time":"$D2024-05-17T13:49:50.967Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"66fe4c67f9c3caec","login":"workspace-redon-krasniqi","name":"redon","avatar_url":"https://avatars-next.observableusercontent.com/afa43e27327e5e410c2239f7486e823bc158d3a2f88701a386d3c0562116aba6","tier":"starter_2024","bio":"","following":false},"version":6541,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e3f0e9e62a1c5430","login":"redon-krasniqi","name":"Redon Krasniqi","avatar_url":"https://avatars-next.observableusercontent.com/b71c30021409cfbf60c940c04f92aa59814b2f1c8edd09103714f863013b0f45","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"e3f0e9e62a1c5430","login":"redon-krasniqi","name":"Redon Krasniqi","avatar_url":"https://avatars-next.observableusercontent.com/b71c30021409cfbf60c940c04f92aa59814b2f1c8edd09103714f863013b0f45","tier":null,"role":"editor"},{"type":"team","id":"66fe4c67f9c3caec","login":"workspace-redon-krasniqi","name":"redon","avatar_url":"https://avatars-next.observableusercontent.com/afa43e27327e5e410c2239f7486e823bc158d3a2f88701a386d3c0562116aba6","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"98e23ff00995d70e","slug":"assignment-5","title":"Assignment 5","owner":{"id":"66fe4c67f9c3caec","login":"workspace-redon-krasniqi","name":"redon"}},"type":"notebook","body":{"titling":"auto","title":"🏠 Assignment: Technical Analysis Dashboard","cells":[{"id":0,"value":"# 🏠 Assignment: Technical Analysis Dashboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6470,"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

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6524,"value":"additional_indicators.includes(\"MACD\") ?\n \n Plot.plot({\n width: 1150,\n height: 100,\n y: {\n axis: \"right\",\n label: \"MACD\"\n },\n x: {\n axis: null\n },\n marks: [\n Plot.lineY(data_withFearGreedIndex, {\n x: \"date\",\n y: \"macd\",\n stroke: \"orange\",\n strokeOpacity: 0.6,\n strokeWidth: 2\n }),\n Plot.lineY(data_withFearGreedIndex, {\n x: \"date\",\n y: \"macdSignal\",\n stroke: \"purple\",\n strokeOpacity: 0.6,\n strokeWidth: 2\n }),\n Plot.rectY(data_withFearGreedIndex, {\n x: \"date\",\n y: \"macdDivergence\",\n interval: d3.utcDay,\n fill: (d) => (d.macdDivergence < 0 ? \"oliveDrab\" : \"crimson\"),\n fillOpacity: 0.7\n })\n ].filter(Boolean)\n})\n\n: htl.html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6529,"value":"additional_indicators.includes(\"RSI\") ?\n \nPlot.plot({\n width: 1150,\n height: 100,\n y: {\n axis: \"right\",\n label: \"RSI\",\n ticks: [30, 70]\n },\n color: {\n type: \"threshold\",\n domain: [30, 70],\n range: [\"red\", \"green\", \"red\"],\n },\n x: {\n axis: null\n },\n marks: [\n Plot.lineY(data_withFearGreedIndex, { \n x: \"date\", \n y: \"rsi\",\n z:0,\n stroke: \"rsi\",\n strokeWidth: 1,\n strokeOpacity: 0.6\n }),\n Plot.areaY(data_withFearGreedIndex, {\n x: \"date\",\n y1: 30,\n y2: 70,\n fill: \"dodgerblue\",\n opacity: 0.1,\n }),\n Plot.ruleY([30, 70], {\n stroke: \"dodgerblue\",\n strokeWidth: 0.5,\n strokeDasharray: \"3\",\n strokeOpacity: 0.7,\n })\n ].filter(Boolean),\n})\n\n: htl.html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6532,"value":"additional_indicators.includes(\"Stochastic Oscillator\") ?\n \nPlot.plot({\n width: 1150,\n height: 100,\n y: {\n axis: \"right\",\n label: \"Stochastic Oscillator\",\n ticks: [30, 70]\n },\n x: {\n axis: null\n },\n marks: [\n Plot.rectY(data_withFearGreedIndex, {\n x: { interval: \"day\", value: \"date\" },\n y: 100,\n stroke: d => d.stochasticOscillatorK < d.stochasticOscillatorD ? \"red\" : \"green\",\n strokeOpacity: 0.08,\n inset: 0.8,\n strokeWidth: 5,\n }),\n Plot.lineY(data_withFearGreedIndex, {\n x: \"date\",\n y: \"stochasticOscillatorD\",\n stroke: \"purple\",\n strokeOpacity: 0.7,\n strokeWidth: 1,\n }),\n Plot.lineY(data_withFearGreedIndex, {\n x: \"date\",\n y: \"stochasticOscillatorK\",\n stroke: \"orange\",\n strokeOpacity: 0.6,\n strokeWidth: 1\n })\n ].filter(Boolean),\n})\n\n: htl.html`

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

\n \n $\"CleanShot$ \n \n

\n PREVIEW\n

\n\n

\n PREVIEW\n

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6248,"value":"👆 _Please note that some cells have been omitted from this preview. The complete set of cells is listed in the 'Dashboard' section._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5878,"value":"## Specifics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6318,"value":"General:\n\n- The dashboard above features a main chart at the top, followed by a bar chart that visualizes trading volume. Below the bar chart, there are various [moving averages](https://www.investopedia.com/articles/active-trading/052014/how-use-moving-average-buy-stocks.asp) and similar measures that help track the [momentum](https://www.investopedia.com/terms/m/marketmomentum.asp) of buying and selling actions, specifically focusing on the quantity of units traded and the speed of these transactions.\n\n- The dashboard consists of multiple notebook cells; the entire dashboard is not realized within a single cell.\n \n- Please note that the y-axes are positioned on the right side to align closely with the most recent data period, which typically attracts the most interest. The indicator names are described as the labels of the y axes (e.g., 'Volume').","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5836,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6320,"value":"Volume chart:\n\n- Below the main chart, there is the [volume](https://www.investopedia.com/terms/v/volume.asp) chart, which shows the number of units of an asset traded during a specific period. This chart helps determine the significance of price movements. A decrease in price corresponds to a red volume bar, while an increase in price corresponds to a green volume bar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6325,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6327,"value":"RSI chart:\n\n- The [Relative Strength Index (RSI)](https://www.investopedia.com/terms/r/rsi.asp) serves as a tool to estimate the momentum of price movements. Typically, an asset is deemed overbought when the RSI exceeds 70 and oversold when it falls below 30. Overbought and oversold conditions typically suggest that a price change in the opposite direction may be imminent. In the current visualization, the RSI line is shown in green. The overbought and oversold thresholds are marked by dotted lines, with the range between highlighted in blue. When the RSI line reaches 70, that segment of the line mark turns red, signaling that the asset is overbought; similarly, when it hits 30, the line mark segment also turns red, indicating an oversold condition.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6329,"value":"Stochastic oscillator chart:\n\n- A [stochastic oscillator](https://www.investopedia.com/terms/s/stochasticoscillator.asp) evaluates recent prices on a scale from 0 to 100. Readings above 80—or 70 for increased sensitivity—suggest that an asset is overbought, while readings below 20—or 30 for more sensitivity—indicate it is oversold. This assists in forecasting potential reversals in market trends. The oscillator is depicted with two lines on the chart: the K-line, often called the fast stochastic indicator (orange on the current chart), and the D-line, a 3-period moving average of the K-line, known as the slow stochastic indicator (purple on the chart). The point where these two lines intersect signals a potential reversal. In the current chart, a red background where the fast line (K) is below the slow line (D) suggests a potential downward trend starting, whereas a green background with the fast line (K) above the slow line (D) indicates the possible start of an upward trend.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6373,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6376,"value":"_**Hint**: You can start this assignment by recycling some of your visualization code from your Candlestick Chart lab notebook._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5556,"value":"# Dashboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5485,"value":"displayCaution(`Please set up your technical analysis dashboard in this section. After completion, unpin all dashboard cells and move them to the top of the notebook (after the notebook title). Transfer all other cells (instuctions, tips, etc.) to the Appendix, organizing it under relevant sections you create.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6400,"value":"_You can click on the yellow \"How-To\" boxes below and in other sections, typically labeled 'How Do I...', to expand or collapse them. You are recommend to read the content of the How-To boxes thoroughly, as they provide additional details and tips about the dashboard elements. After reviewing them, please move the How-To boxes to the Appendix to maintain the dashboard's cohesive appearance. They should not interrupt the flow between dashboard cells.\n_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5033,"value":"howTo(`\nThis is already taken care of for you; the range slider below should be already functional. 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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5202,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5043,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5971,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5247,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6033,"value":"_**Note**: The charts below are for communicating the expected functionality; they are for illustration purposes. Actual data/dates may differ in your version (i.e., you may have data from this year, or you may choose another asset than the one provided in this notebook)._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5582,"value":"cleanshot20220530At1807192x = FileAttachment(\"CleanShot 2022-05-30 at 18.07.19-2x.png\").image({width: 1100, style: \"padding: 10px; border: 2px dotted gray;\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5587,"value":"cleanshot20220530At1809002x = FileAttachment(\"CleanShot 2022-05-30 at 18.09.00-2x.png\").image({width: 1100, style: \"padding: 10px; border: 2px dotted gray;\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5591,"value":"cleanshot20220530At1809482x = FileAttachment(\"CleanShot 2022-05-30 at 18.09.48-2x.png\").image({width: 1100, style: \"padding: 10px; border: 2px dotted gray;\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5597,"value":"cleanshot20220530At18110322x = FileAttachment(\"CleanShot 2022-05-30 at 18@1.10.32-2x.png\").image({width: 1100, style: \"padding: 10px; border: 2px dotted gray;\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5602,"value":"cleanshot20220530At1811232x = FileAttachment(\"CleanShot 2022-05-30 at 18.11.23-2x.png\").image({width: 1100, style: \"padding: 10px; border: 2px dotted gray;\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5644,"value":"cleanshot20220530At1822282x = FileAttachment(\"CleanShot 2022-05-30 at 18.22.28-2x.png\").image({width: 500, style: \"padding: 10px; border: 2px dotted gray;\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5706,"value":"cleanshot20220530At1828402x = FileAttachment(\"CleanShot 2022-05-30 at 18.28.40-2x.png\").image({width: 500, style: \"padding: 10px; border: 2px dotted gray;\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5606,"value":"cleanshot20220530At1812362x = FileAttachment(\"CleanShot 2022-05-30 at 18.12.36-2x.png\").image({width: 300, style: \"padding: 10px; border: 2px dotted gray;\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6001,"value":"**Important**: When you are finished, please...\n\n1. Delete all template/placeholder images,\n\n2. And unpin all your cells...\n\n ...so that your final product looks like a dashboard: i.e., multiple cells looking like one entity, uninterrupted by code or placeholder images.\n\n Additionally, please...\n\n3. Move your dashboard, along with all related cells, to the top of your notebook, just below the notebook title.\n\n4. Move all remaining cells, such as instructions and checkboxes, to the Appendix section and organize them under section titles you create.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5906,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5544,"value":"displayCaution(`\nDO NOT MODIFY THE CODE AFTER THIS POINT\n
This part is taken care of for you.\n
However, you should still read the Appendix, as you need to use the data it contains.\n
\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
(E.g., the last cell may be the first step of a cleaning process, but not a very important one, while the first cell may be the last step of preprocesing, for instance, the final dataset, and thus the most important/relevant one for the reader). \n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5537,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4629,"value":"### Final Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4632,"value":"data_final = data_withFearGreedIndex","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4758,"value":"Inputs.table(data_final)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4372,"value":"### Explore the Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"data_yahooRaw = FileAttachment(\"ETH-USD-3.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"SummaryTable(data_yahooRaw)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"Inputs.table(data_yahooRaw)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4376,"value":"### Preprocessing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4382,"value":"### Year Filter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"Inputs.table(data_yahooFiltered)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"lookingAtOneYear = control_timeRange[1] - control_timeRange[0] === 1\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"lookingAtAYearWithFewTicks = lookingAtOneYear && (control_timeRange[0] === 2022 || control_timeRange[0] === 2017)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"lookingAtTwoYears = control_timeRange[1] - control_timeRange[0] === 2\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"lookingAtMoreThanTwoYears = control_timeRange[1] - control_timeRange[0] > 2\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"xAxisGridIsOn = lookingAtOneYear","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4595,"value":"## Control Panel Elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5900,"value":"displayCaution(\"This is taken care of for you.
(But please read the paragraph below.)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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 'detach' the graphical output of these elements. This is why some cells here have some code but no output other than a text saying 'detached'; 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 should also say 'detached' instead of displaying the actual interface elements. See [How do I make sliders, checkboxes, etc. appear side by side instead of in different cells?](https://observablehq.com/d/bdd92cd06fe307ea#cell-5247) cell in this notebook for more information.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3054,"value":"viewof control_maLookbackPeriod = Inputs.range([1, 200], {label: \"MA Period\", value: 9, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3080,"value":"viewof control_macdFastPeriod = Inputs.range([1, 200], {label: \"MACD Fast Period\", value: 12, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3078,"value":"viewof control_macdSlowPeriod = Inputs.range([1, 200], {label: \"MACD Slow Period\", value: 26, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3195,"value":"viewof control_rsiPeriod = Inputs.range([1, 200], {label: \"RSI Period\", value: 14, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2629,"value":"## Indicators","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4568,"value":"#### Calculate the Indicators ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4542,"value":"#### [Moving Average](https://www.investopedia.com/terms/m/movingaverage.asp) (MA)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2648,"value":"maColumn = fc.indicatorMovingAverage()\n .period(control_maLookbackPeriod)\n .value(d => d.close)\n (data_yahooFiltered)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4546,"value":"#### [Exponential Moving Average](https://www.investopedia.com/terms/e/ema.asp) (EMA)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2667,"value":"emaColumn = fc.indicatorExponentialMovingAverage()\n .period(9)\n .value(d => d.close)\n (data_yahooFiltered)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4553,"value":"#### [Relative Strength Index](https://www.investopedia.com/terms/r/rsi.asp) (RSI)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2603,"value":"rsiColumn = fc.indicatorRelativeStrengthIndex()\n .value(d => d.close)\n .period(control_rsiPeriod)\n (data_yahooFiltered)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4557,"value":"#### [Bollinger Band](https://www.investopedia.com/terms/b/bollingerbands.asp)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4563,"value":"#### [Moving Average Convergence Divergence](https://www.investopedia.com/terms/m/macd.asp) (MACD)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4565,"value":"#### [Stochastic Oscillator](https://www.investopedia.com/terms/s/stochasticoscillator.asp)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2618,"value":"### Join the Indicators to the Main Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4464,"value":"### Current Ethereum Price","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5436,"value":"Get the current Ethereum price:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3499,"value":"### [Fear & Greed Index](https://alternative.me/crypto/fear-and-greed-index/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5481,"value":"displayCaution(\"This data is already retrieved for you.\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3726,"value":"Fetch historical Fear & Greed Index data using API:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3387,"value":"data_fearGreedIndex_raw = d3.json(\"https://api.alternative.me/fng/?limit=0&format=json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3743,"value":"Join the Fear & Greed Index data to the main dataset using Wrangler:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4078,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4095,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3494,"value":"viewof table = Inputs.table(data_withFearGreedIndex)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"## Miscellaneous","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4881,"value":"width = 1200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1774,"value":"### Get Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1862,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"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":262,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3247,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3357,"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":2181,"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":3945,"value":"## Notebook Enhancements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5367,"value":"Control panel styling to put elements side by side:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5261,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2173,"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":3842,"value":"import {showMe} from \"@observablehq/show-me\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3943,"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":5442,"value":"import { displayCaution } from \"@mkfreeman/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:"$43:body"