25:["$","title",null,{"children":"🏁 Assignment: Upgrade Your Dashboard (Instructions) | Phuong Anh Nguyen | Observable"}] 49:T411,## Preparation 1. Fork your 'Candlestick Chart' notebook and rename it to "🏁 Assignment: Upgrade Your Dashboard" (the flag symbol is optional but nice; you can copy-paste it from here if you wish). 3. Add your new notebook to your "Worksheets: Learn Plot" collection, and position it under the "Candlestick Chart" worksheet. 4. In your new notebook: Delete all cells not related to the last state of the visualizations (i.e. the charts and sliders in the last section of the lab worksheet we covered in the class). - Careful: Make sure you don't delete the cells that the final visualization in the notebook depends on. Some data cells, financial indicators, and other intermediary cells must be left in for the final visualization to work. Telling if you deleted a dependency-cell is easy, though: your final visualization will give you an error, telling you the name of the cell (variable) it depended on but could no longer find. - Deleted a cell and want to undo? You can use the history option from the side bar. 4a:[{"id":"9d1ff307de0186f3dce783bb175c01d04eb069cfd59916160d1cb860abd593a388a9225d5a7b737ca6411695d0c1c430d7c336c23e2134528dd035d9dd13113d","href":"https://static.observableusercontent.com/files/9d1ff307de0186f3dce783bb175c01d04eb069cfd59916160d1cb860abd593a388a9225d5a7b737ca6411695d0c1c430d7c336c23e2134528dd035d9dd13113d","name":"CleanShot 2023-05-03 at 17.34.27-2x.png","type":"image/png","lastModified":1683471309743.819,"size":53427},{"id":"4f905050e01df38ce4aee9367591c0b2d4ee128b40a81f2b445fe8f68d94c7854b9d0461b1d7715c711eab1e48b5d6aedcfcef17b971636477c40e7dc6541d8d","href":"https://static.observableusercontent.com/files/4f905050e01df38ce4aee9367591c0b2d4ee128b40a81f2b445fe8f68d94c7854b9d0461b1d7715c711eab1e48b5d6aedcfcef17b971636477c40e7dc6541d8d","name":"CleanShot 2023-05-03 at 17.42.24-2x.png","type":"image/png","lastModified":1683471309743.819,"size":323378},{"id":"ff6f946a153a4895d5a53e3e83425f09c723a74ef2d64a7757d8450deca63700511fa06be9348eb3e711fb3e4c473a172693f62742b12afd97d02e5d176f0cd7","href":"https://static.observableusercontent.com/files/ff6f946a153a4895d5a53e3e83425f09c723a74ef2d64a7757d8450deca63700511fa06be9348eb3e711fb3e4c473a172693f62742b12afd97d02e5d176f0cd7","name":"CleanShot 2023-05-03 at 18.01.49-2x.png","type":"image/png","lastModified":1683471309743.819,"size":357412},{"id":"225ecc0f0c44ed20a56287cbbd30991dca47f066ec8fffeee4324343c6f8c8c5a41c821eca43a5ac2c77ce82e5fb44f212c7aae0191dafdc84a46a168fba1216","href":"https://static.observableusercontent.com/files/225ecc0f0c44ed20a56287cbbd30991dca47f066ec8fffeee4324343c6f8c8c5a41c821eca43a5ac2c77ce82e5fb44f212c7aae0191dafdc84a46a168fba1216","name":"CleanShot 2023-05-03 at 18.22.09-2x.png","type":"image/png","lastModified":1683471309743.819,"size":382082},{"id":"9d1b3f24971a9a65f1442231a3290953f2c117e4087338c5a0bd9d2496ab804798bfda5e45a56900f055c8f656a489cb08fe34a55b864600608865dba2269cd2","href":"https://static.observableusercontent.com/files/9d1b3f24971a9a65f1442231a3290953f2c117e4087338c5a0bd9d2496ab804798bfda5e45a56900f055c8f656a489cb08fe34a55b864600608865dba2269cd2","name":"CleanShot 2023-05-03 at 18.29.46-2x.png","type":"image/png","lastModified":1683471309743.819,"size":382589}] 29:{"id":"dbb604c188c95ccf","slug":null,"title":"🏁 Assignment: Upgrade Your Dashboard (Instructions)","thumbnail":"f5d1f21c0a0ed876bf8ce3d941ca70c43f2e548fc307161810b4babf8a79e512","access_level":"public","create_time":"$D2023-05-07T14:55:09.743Z","update_time":"$D2023-05-07T15:15:51.497Z","view_time":null,"first_public_time":"$D2023-05-07T14:55:09.743Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d69d83d382494a85","login":"anhon","name":"Phuong Anh Nguyen ","avatar_url":"https://avatars-next.observableusercontent.com/e2a80fa77c426a2fb73bf6a6c57309d30420eb38461fb86145a439531175377b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3900,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2a6e3678bddbe70c","login":"anhphuongnguyen2201","name":"Anh Phuong Nguyen","avatar_url":"https://avatars-next.observableusercontent.com/d8098df7aee1fdb9748045c8d5c1a480ab221f349247ea7544fff3e77013ec56","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d69d83d382494a85","login":"anhon","name":"Phuong Anh Nguyen ","avatar_url":"https://avatars-next.observableusercontent.com/e2a80fa77c426a2fb73bf6a6c57309d30420eb38461fb86145a439531175377b","tier":"starter_2024","role":"editor"},{"type":"individual","id":"2a6e3678bddbe70c","login":"anhphuongnguyen2201","name":"Anh Phuong Nguyen","avatar_url":"https://avatars-next.observableusercontent.com/d8098df7aee1fdb9748045c8d5c1a480ab221f349247ea7544fff3e77013ec56","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"41c50f91c3d1ebaf","slug":"plot","title":"Worksheets - Learn Plot_Phuong Anh Nguyen","owner":{"id":"d69d83d382494a85","login":"anhon","name":"Phuong Anh Nguyen "}},"type":"notebook","body":{"titling":"auto","title":"🏁 Assignment: Upgrade Your Dashboard (Instructions)","cells":[{"id":0,"value":"# 🏁 Assignment: Upgrade Your Dashboard (Instructions)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3185,"value":"## The Assignment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3234,"value":"In this assignment, you will upgrade the Candlestick chart you produced during the last lab session. The chart became a technical analysis dashboard consisting of multiple cells toward the end of the session, hence the name of this assignment.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3237,"value":"The last (and thus the most advanced) charts at the end of your lab workbook depends on many variables and some sliders. Therefore, instead of re-doing all the hard work (i.e., importing the data, copy-pasting tens of cells) on a new checkpoint assignment notebook, it is easier to fork the notebook and continue the assignment from there. This is also good practice if you fork someone else's notebook in the future.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3790,"value":"Important: This is the most advanced personal assignment and its format is different from the previous ones / from our lab work. You have more freedom this time. You can simply submit your final result (i.e., an upgraded dashboard) instead of producing step-by-step results across the sections of your notebook as we did in class. So, no need to create multiple copies of the same visualization to demonstrate small changes to the visualization code. Three (collapsed) notebook cells should comprise the dashboard and are sufficient as your final visualization: \n1. Control panel\n2. Main visualization\n3. Secondary visualization under it (the fear-greed index chart).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3808,"value":"Of course, you have additional cells for data, intermediary calculations, etc. Feel free to structure your assignment notebook as you wish. Still, it is good practice to put the final visualization of a notebook on top (i.e., after the title and maybe some short text), and push everything else to the Appendix section.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3187,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3307,"value":"## Control Panel Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3386,"value":"As you add more sliders, the control panel on the top of your chart will need to get more sophisticated. You can use the code in this section.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3329,"value":"Here is (the image of) an example control panel:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3366,"value":"cleanshot20230503At1734272x = FileAttachment(\"CleanShot 2023-05-03 at 17.34.27-2x.png\").image({width: 650, style: \"border:none\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3332,"value":"It is produced using below code. Please modify this example code for your purposes as needed:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3312,"value":"```html\n\n

\n \n
\n \\${viewof bollingerPeriod_slider} \\${viewof bollingerSD_slider}\n
\n \\${viewof macdSignalPeriod_slider}, \\${viewof macdFastPeriod_slider}, \\${viewof macdSlowPeriod_slider}\n
\n \\${viewof emaPeriod_slider}\n
\n \\${viewof year_slider}\n \n

\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3336,"value":"👆 You should use (e.g., copy-paste) the rendered markdown output here, without entering the edit mode of this cell. \n
(If you enter the edit mode, you may notice that all '$' characters are written as '\\\\$'. The forward slash is the escape character in HTML, Markdown, and many other languages. It is used there for telling the HTML renderer not to actually do the string substitution that normally starts with the '`$\\{\\}`' enclosure, as we have seen. Escape characters are not rendered, and this is why you see the rendered text and its code in the edit mode differently.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3818,"value":"# Step-by-Step Instructions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3820,"value":"To guide you to the final result, below are some step-by-step instructions.\n\nAs a reminder: Differently from the class work we did, you do not need to structure your notebook according to these steps, but simply use the steps I provide below as a guide / benchmark when improving your visualization code. This is also why there are no longer dotted lines around the images, because you are not expected to replicate each image.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3272,"value":"## Move the X Axis on Your Main Chart to Top","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3413,"value":"Putting the x axis on the top prevents it from becoming an interruption between the two charts, and thus, helps with visual continuity.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3410,"value":"cleanshot20230503At1742242x = FileAttachment(\"CleanShot 2023-05-03 at 17.42.24-2x.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3229,"value":"## Add Bollinger Standard Deviation (Multiplier) Parameter to Control Panel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3220,"value":"Add a slider on top of your chart for the Bollinger `multiplier` parameter. (See the cell named '`bollingerColumn`' in the 'Bollinger Band' section of your notebook to locate the `multiplier` parameter). A better name for this parameter is 'Bollinger Standard Deviations', which you can use as your slider's label.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3512,"value":"cleanshot20230503At1801492x = FileAttachment(\"CleanShot 2023-05-03 at 18.01.49-2x.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3527,"value":"👆 When you move the multiplier / 'Bollinger Standard Deviations' slider, the associated elements in the main chart should update.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3226,"value":"## Add the EMA Indicator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3265,"value":"Please add a line mark to superimpose the EMA (exponential moving average) statistic on your main chart. The EMA section in your control panel should control the parameters of the '`emaColumn`' cell of the notebook. And in turn, the EMA slider in your control panel should control the line mark in your main chart. You can use '`goldenrod`' as the color of the EMA mark:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3592,"value":"cleanshot20230503At1822092x = FileAttachment(\"CleanShot 2023-05-03 at 18.22.09-2x.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3834,"value":"👆 When you move the 'EMA period' slider, the EMA line should update.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3263,"value":"## Add 'Current Price' Line","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3632,"value":"### Get Today's Price","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3296,"value":"Retrieve the current Ethereum price data using this query:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3533,"value":"\"https://www.binance.com/api/v3/ticker/price?symbol=ETHUSDT\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3838,"value":"_👆 You can see how we can retrieve data using queries like this in the Candlestick Chart notebook we covered in class together._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3543,"value":"_Tip: You may need to convert the value you retrieved to a number. An easy way to accomplish this is to put a '+' sign in front of it._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3302,"value":"Add the current price as a dotted line mark to your chart. This is not a line mark but a straight line from one end of your chart to the other. (I.e., there is a special mark type for this; it is different from the line mark). This straight line is for visualizing the current price of the asset, so that it can be easily compared to all the other values in the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3652,"value":"cleanshot20230503At1829462x = FileAttachment(\"CleanShot 2023-05-03 at 18.29.46-2x.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3861,"value":"## Additional Challenges","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3867,"value":"The rest is optional, but if you feel like honing your skills further, feel free to:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3871,"value":"- Make your year slider into a range slider with two controllable ends\n- Add more indicators\n- Add a legend\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3878,"value":"_Hint: Some of the code you may write for these additional challenges may be reusable in the upcoming group assignment._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"**Notebook Style**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"import {Wrangler, op} from \"@observablehq/data-wrangler\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2106,"value":"import {howTo} from \"@clokman/howto\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2342,"value":"import {imageToDo} from \"@clokman/student-blocks\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2344,"value":"// imageToDo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null