25:["$","title",null,{"children":"🏁 Assignment: Upgrade Your Dashboard | Phuong Anh Nguyen | Observable"}] 49:T591,Plot.plot({ tooltip: { stroke: (d) => (d["Open"] > d["Close"] ? "red" : "green") }, width: 1100, grid: true, x:{ axis: "top"}, y: { label: "Price", axis: "right"}, marks: [ // Bollinger cloud Plot.areaY(data_filtered_withIndicators, { x: "Date", y1: "bollingerUpper", y2: "bollingerLower", fill: "lightblue", fillOpacity: 0.35, stroke: "dodgerblue", strokeOpacity: 1 }), // average line Plot.lineY(data_filtered_withIndicators, { x: "Date", y: "ema", stroke: "yellow" }), // EMA line Plot.lineY(data_filtered_withIndicators, { x: "Date", y: "bollingerAverage", stroke: "dodgerblue" }), // current price line, Plot.lineY(data_filtered_withIndicators, { x: "Date", y: currentPrice, stroke: "black", strokeDasharray: 6 }), // Wicks Plot.ruleX(data_filtered, { x: "Date", y1: "High", y2: "Low", stroke: (d) => (d["Open"] > d["Close"] ? "crimson" : "olivedrab"), title: (d) => createTooltipContent(d) }), // Candle Body Plot.ruleX(data_filtered, { x: "Date", y1: "Open", y2: "Close", strokeWidth: 1000 / numberOfDaysInFilteredData, stroke: (d) => (d["Open"] > d["Close"] ? "crimson" : "olivedrab"), title: (d) => createTooltipContent(d) }) ] })4a:[{"id":"f92545d96fe96853e1e98b0c6ad67f7bcabc873f4fc6ac352a3ab724fd6b739dff22a677d1e03e7f30299257bb76207963c29d437811003892cafa2a9f04e923","href":"https://static.observableusercontent.com/files/f92545d96fe96853e1e98b0c6ad67f7bcabc873f4fc6ac352a3ab724fd6b739dff22a677d1e03e7f30299257bb76207963c29d437811003892cafa2a9f04e923","name":"F76CF941-6A2C-4154-B704-9288963ECC15_1_102_o.jpeg","type":"image/jpeg","lastModified":1683551115296.03,"size":746036},{"id":"4b65dc1d17eb5a910d46a9b95e34c399c7efdccb8ff31807e100224a6d635aa513b88a41591e010e6df0d27c315f083dd6e8e44740912f5d6d5bf32b65cc9743","href":"https://static.observableusercontent.com/files/4b65dc1d17eb5a910d46a9b95e34c399c7efdccb8ff31807e100224a6d635aa513b88a41591e010e6df0d27c315f083dd6e8e44740912f5d6d5bf32b65cc9743","name":"CleanShot 2023-04-28 at 23.34.38-2x.png","type":"image/png","lastModified":1683551115296.03,"size":10290},{"id":"e0329fdf9b003d74634e56c85121ed6ad18e11c50e77d0a40a06441b4f324576fccddce1ea73c6743439d028489508321ec05c4b449f7a11088124496d736592","href":"https://static.observableusercontent.com/files/e0329fdf9b003d74634e56c85121ed6ad18e11c50e77d0a40a06441b4f324576fccddce1ea73c6743439d028489508321ec05c4b449f7a11088124496d736592","name":"CleanShot 2023-04-28 at 22.54.51-2x.png","type":"image/png","lastModified":1683551115296.03,"size":28954},{"id":"b723e1a1c399337b85fe6f9b2863f4b7511627aff2d6a6e61ce4fc47054667de77d1074e5888e571dffa07af81097f7e5d3ee512ab71ad6449ccace6a477dd4c","href":"https://static.observableusercontent.com/files/b723e1a1c399337b85fe6f9b2863f4b7511627aff2d6a6e61ce4fc47054667de77d1074e5888e571dffa07af81097f7e5d3ee512ab71ad6449ccace6a477dd4c","name":"CleanShot 2023-04-28 at 22.53.47-2x.png","type":"image/png","lastModified":1683551115296.03,"size":25659},{"id":"0cd3b481dcf3a4840451198dac95f4339135134f9e84a3d941c0fd445d2ea790f6df4a263dd3addaab2b8c9f59ae7a460907aad4c7c5a76abd39710cf22f0a7c","href":"https://static.observableusercontent.com/files/0cd3b481dcf3a4840451198dac95f4339135134f9e84a3d941c0fd445d2ea790f6df4a263dd3addaab2b8c9f59ae7a460907aad4c7c5a76abd39710cf22f0a7c","name":"CleanShot 2023-04-28 at 23.21.49-2x.png","type":"image/png","lastModified":1683551115296.03,"size":7848},{"id":"2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","href":"https://static.observableusercontent.com/files/2d4a1ee8f7cc3cbdda333dd4a3c3f31de08f050a13b74089d87646fd9012d824532150850c0f7c76884dd8f99e8b0598646da331d579e104a0d2f02f6d83efda","name":"ETH-USD@3.csv","type":"text/csv","lastModified":1683551115296.03,"size":159091},{"id":"a2f8d5a2bff113cbd381dfd5e04ddd28529b02230cd26ef989aa8a366cd6a878ee449452c7c1918e6e4f59c98d762ae2ce9bc95a2e9384ded88f88b0cc8ba7b7","href":"https://static.observableusercontent.com/files/a2f8d5a2bff113cbd381dfd5e04ddd28529b02230cd26ef989aa8a366cd6a878ee449452c7c1918e6e4f59c98d762ae2ce9bc95a2e9384ded88f88b0cc8ba7b7","name":"CleanShot 2023-04-28 at 22.10.42-2x.png","type":"image/png","lastModified":1683551115296.03,"size":15047},{"id":"3dc6552954ec295d4beddbf96f6016ce93fdfa40fa33bb5e72dab23ec8b8dac403dd6421bc305881840dba2a5bf115a4f26bcd0e7b9950e9b782b988dc43eff3","href":"https://static.observableusercontent.com/files/3dc6552954ec295d4beddbf96f6016ce93fdfa40fa33bb5e72dab23ec8b8dac403dd6421bc305881840dba2a5bf115a4f26bcd0e7b9950e9b782b988dc43eff3","name":"CleanShot 2023-04-28 at 16.16.09-2x.png","type":"image/png","lastModified":1683551115296.03,"size":97582}] 29:{"id":"5ac8f4e014fbea0d","slug":null,"title":"🏁 Assignment: Upgrade Your Dashboard","thumbnail":"127a3499f52b4b8332a766982f2561e940176c5eb7cb95ef2ecb77ad68baa1cb","access_level":"public","create_time":"$D2023-05-08T13:05:15.296Z","update_time":"$D2023-05-08T13:54:52.355Z","view_time":null,"first_public_time":"$D2023-05-08T13:05:15.296Z","has_unpublished_edits":null,"fork":{"id":"782c7a6f6d16e6da","slug":null,"title":"Candlestick Chart","owner":{"id":"d69d83d382494a85","login":"anhon","name":"Phuong Anh Nguyen "}},"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":3306,"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","cells":[{"id":0,"value":"# 🏁 Assignment: Upgrade Your Dashboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3221,"value":"## Main Assignment \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3162,"value":"\n

\n\n
\n ${viewof bollingerPeriod_slider} ${viewof bollingerSD_slider}\n
\n ${viewof emaPeriod_slider}\n
\n ${viewof year_slider}\n\n

\n\n
\n ${viewof macdSignalPeriod_slider}, ${viewof macdFastPeriod_slider}, ${viewof macdSlowPeriod_slider}\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3182,"value":"## Current Price","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3184,"value":"currentPrice_data = d3.json(\"https://www.binance.com/api/v3/ticker/price?symbol=ETHUSDT\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3186,"value":"currentPrice = +currentPrice_data.price","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"// Uncomment to enable\ndata_filtered = aq.from(data_initial)\n .filter(aq.escape((d) => d[\"Date\"].getFullYear() === year_slider))\n .objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"## Add Tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":402,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"// Uncomment the first block to enable\n\ncreateTooltipContent = (d) => \n`${ d[\"Date\"].toLocaleString('default', { month: 'long' }) } ${d[\"Date\"].getDate()}\n Close: ${ d3.format('.3s')(d[\"Close\"]) }\n High: ${ d3.format('.3s')(d[\"High\"]) }\n Open: ${ d3.format('.3s')(d[\"Open\"]) }\n Low: ${ d3.format('.3s')(d[\"Low\"]) }`\n\n\n// The same function created with classic fuction syntax:\n\n// createTooltipContent = function (d) { \n// `${ d[\"Date\"].toLocaleString('default', { month: 'long' }) } ${d[\"Date\"].getDate()}\n// Close: ${ d3.format('.3s')(d[\"Close\"]) }\n// High: ${ d3.format('.3s')(d[\"High\"]) }\n// Open: ${ d3.format('.3s')(d[\"Open\"]) }\n// Low: ${ d3.format('.3s')(d[\"Low\"]) }`\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"## Add Financial Indicators","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"fc = require('d3fc')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2000,"value":"### Generate Indicator Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"#### Exponential Moving Average (EMA)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1256,"value":"Create a 9-period EMA column of `close` values:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":547,"value":"// Uncoment to enable\n\nemaColumn = fc.indicatorExponentialMovingAverage()\n .period( 9 )\n .value(d => d[\"Close\"])\n ( data_filtered )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"#### Bollinger Band","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1262,"value":"Create a 7-period Bollinger band column of `close` values; let it have 2 standard deviations (set using the `multiplier` method):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":539,"value":"// Uncoment to enable\n\nbollingerColumn = fc.indicatorBollingerBands()\n .value( d => d[\"Close\"] )\n .period( bollingerPeriod_slider )\n .multiplier( 2 ) // 2 standard deviations to plot\n ( data_filtered )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2015,"value":"Control the Bollinger period parameter with a slider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":563,"value":"#### Moving Average Convergence Divergence (MACD)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1266,"value":"Create a MACD column with a signal period of 9, fast period of 12, and a slow period of 26:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"// Uncoment to enable\n\n macdColumn = fc.indicatorMacd()\n .value( d => d[\"Close\"] )\n .signalPeriod( 9 )\n .fastPeriod( 12 )\n .slowPeriod( 26 )\n ( data_filtered )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"### Join the Indicator Data with the Main Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2509,"value":"// Uncoment to enable\n\n data_filtered_withIndicators = data_filtered.map( (d, i) => ({ \n ema: emaColumn[i],\n macd: macdColumn[i].macd,\n macdSignal: macdColumn[i].signal,\n macdDivergence: macdColumn[i].divergence,\n bollingerUpper: bollingerColumn[i].upper, \n bollingerAverage: bollingerColumn[i].average,\n bollingerLower: bollingerColumn[i].lower,\n ...d\n })) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2867,"value":"Inputs.table(data_filtered_withIndicators)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3004,"value":"data_filtered_withIndicators","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"### Add an External Indicator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3049,"value":" $\"Latest$ ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":759,"value":"// Complete the code\n\ndata_fearGreedIndex_raw = d3.json(\"https://api.alternative.me/fng/?limit=0&format=json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"// Uncomment to activate\n\ndata_fearGreedIndex = aq.from(data_fearGreedIndex_raw.data)\n\t.derive({ date: aq.escape(d => new Date(+d[\"timestamp\"] * 1000)) })\n \t.derive({ valueAsNumber: d => +d[\"value\"] })\n .select('value_classification','date','valueAsNumber')\n \t.rename({valueAsNumber: \"FearGreedValue\"})\n .rename({value_classification: \"FearGreedClass\"})\n .rename({date: \"FearGreedDate\"})\n \t.objects()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2249,"value":"// Uncomment to activate\n\ndata_filtered_withIndicators_withFearGreedIndex = aq.from(data_filtered_withIndicators)\n\t.join(aq.from(data_fearGreedIndex), [\"Date\", \"FearGreedDate\"])\n\t.objects()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2256,"value":"// Uncomment to activate\n\nInputs.table(data_filtered_withIndicators_withFearGreedIndex)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3030,"value":"\n

${viewof year_slider}

${viewof bollingerPeriod_slider}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":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