Public
Edited
May 8, 2023
3 forks
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof year_slider = Inputs.range([2017, 2023], { label: "Year", step: 1 })
Insert cell
viewof emaPeriod_slider = Inputs.range([1, 100], {
label: "EMA Period",
step: 1,
value: 9
})
Insert cell
viewof bollingerSD_slider = Inputs.range([1, 4], {
label: "Bollinger Standard Deviations",
step: 1,
value: 2
})
Insert cell
viewof macdSignalPeriod_slider = Inputs.range([1, 100], {
label: "MACD Signal Period",
step: 1,
value: 9
})
Insert cell
viewof macdFastPeriod_slider = Inputs.range([1, 100], {
label: "MACD Fast Period",
step: 1,
value: 12
})
Insert cell
viewof macdSlowPeriod_slider = Inputs.range([1, 100], {
label: "MACD Slow Period",
step: 1,
value: 26
})

Insert cell
Etherum_price = d3.json(
"https://www.binance.com/api/v3/ticker/price?symbol=ETHUSDT"
)
Insert cell
(Etherum_price.price = +Etherum_price.price)
Insert cell
ETH-USD@3.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
// Uncomment to activate

data_forAroundOneYear = aq
.from(data_initial)
.filter(aq.escape((d) => d["Date"].getFullYear() > 2022))
.objects()
Insert cell
// Uncomment to enable
data_filtered = aq.from(data_initial)
.filter(aq.escape((d) => d["Date"].getFullYear() === year_slider))
.objects()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
numberOfDaysInFilteresData = data_filtered.length
Insert cell
Insert cell
import {Plot} from "@mkfreeman/plot-tooltip"
Insert cell
Insert cell
// Uncomment the first block to enable

createTooltipContent = (d) =>
`${ d["Date"].toLocaleString('default', { month: 'long' }) } ${d["Date"].getDate()}
Close: ${ d3.format('.3s')(d["Close"]) }
High: ${ d3.format('.3s')(d["High"]) }
Open: ${ d3.format('.3s')(d["Open"]) }
Low: ${ d3.format('.3s')(d["Low"]) }`


// The same function created with classic fuction syntax:

// createTooltipContent = function (d) {
// `${ d["Date"].toLocaleString('default', { month: 'long' }) } ${d["Date"].getDate()}
// Close: ${ d3.format('.3s')(d["Close"]) }
// High: ${ d3.format('.3s')(d["High"]) }
// Open: ${ d3.format('.3s')(d["Open"]) }
// Low: ${ d3.format('.3s')(d["Low"]) }`
// }
Insert cell
fc = require('d3fc')
Insert cell
// Uncoment to enable

emaColumn = fc
.indicatorExponentialMovingAverage()
.period(emaPeriod_slider)
.value((d) => d["Close"])(data_filtered)
Insert cell
// Uncoment to enable

bollingerColumn = fc
.indicatorBollingerBands()
.value((d) => d["Close"])
.period(bollingerPeriod_slider)
.multiplier(bollingerSD_slider)(data_filtered)
Insert cell
Insert cell
Insert cell
// Uncoment to enable

macdColumn = fc
.indicatorMacd()
.value((d) => d["Close"])
.signalPeriod(macdSignalPeriod_slider)
.fastPeriod(macdFastPeriod_slider)
.slowPeriod(macdSlowPeriod_slider)(data_filtered)
Insert cell
// Uncoment to enable

data_filtered_withIndicators = data_filtered.map( (d, i) => ({
ema: emaColumn[i],
macd: macdColumn[i].macd,
macdSignal: macdColumn[i].signal,
macdDivergence: macdColumn[i].divergence,
bollingerUpper: bollingerColumn[i].upper,
bollingerAverage: bollingerColumn[i].average,
bollingerLower: bollingerColumn[i].lower,
...d
}))
Insert cell
Insert cell
Inputs.table(data_filtered_withIndicators)
Insert cell
// Complete the code

data_fearGreedIndex_raw = d3.json(
"https://api.alternative.me/fng/?limit=0&format=json"
)
Insert cell
Insert cell
// Uncomment to activate

data_fearGreedIndex = aq.from(data_fearGreedIndex_raw.data)
.derive({ date: aq.escape(d => new Date(+d["timestamp"] * 1000)) })
.derive({ valueAsNumber: d => +d["value"] })
.select('value_classification','date','valueAsNumber')
.rename({valueAsNumber: "FearGreedValue"})
.rename({value_classification: "FearGreedClass"})
.rename({date: "FearGreedDate"})
.objects()
Insert cell
// Uncomment to activate

data_filtered_withIndicators_withFearGreedIndex = aq.from(data_filtered_withIndicators)
.join(aq.from(data_fearGreedIndex), ["Date", "FearGreedDate"])
.objects()
Insert cell
// Uncomment to activate

Inputs.table(data_filtered_withIndicators_withFearGreedIndex)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {toc} from "@nebrius/indented-toc"
Insert cell
import {Wrangler, op} from "@observablehq/data-wrangler"
Insert cell
import {howTo} from "@clokman/howto"
Insert cell
import {imageToDo} from "@clokman/student-blocks"
Insert cell
imageToDo
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more