imageToDo // <- comment out or remove this to prevent this notebook from drawing dashed lines around all images.
createTooltipContent = (d) => {
const date = new Date(d.date);
const weekday = date.toLocaleString("en-US", { weekday: "long" });
const month = date.toLocaleString("en-US", { month: "long" });
const day = date.getDate();
const year = date.getFullYear();
const formattedDate = `${weekday} ${month} ${day}, ${year}`;
return `${formattedDate}
Close: ${d3.format(".0f")(d["close"])}
Open: ${d3.format(".0f")(d["open"])}
High: ${d3.format(".0f")(d["high"])}
Low: ${d3.format(".0f")(d["low"])}
Fear & Greed Index: ${d["fearGreedIndex"]}
Fear & Greed Category: ${d["fearGreedIndexClassification"]}`;
};
createTooltipContentFearGreed = (d) => {
const date = new Date(d.date);
const weekday = date.toLocaleString("en-US", { weekday: "long" });
const month = date.toLocaleString("en-US", { month: "long" });
const day = date.getDate();
const year = date.getFullYear();
const formattedDate = `${weekday} ${month} ${day}, ${year}`;
return `${formattedDate}
${d["fearGreedIndex"]}
${d["fearGreedIndexClassification"]}`
};
colorScale = d3.scaleSequential(d3.interpolateRdYlGn)
.domain([0, 100]); // Set the domain of the fear-greed index
data_final = data_withFearGreedIndex
Inputs.table(data_final)
data_yahooRaw = FileAttachment("ETH-USD@2.csv").csv({typed: true})
SummaryTable(data_yahooRaw)
Inputs.table(data_yahooRaw)
data_yahooWithRenamedColumns = aq.from(data_yahooRaw)
.rename({Date: "date"})
.rename({Open: "open"})
.rename({High: "high"})
.rename({Low: "low"})
.rename({Close: "close"})
.rename({"Adj Close": "adjClose"})
.rename({Volume: "volume"})
.objects()
// We modified the filter to include the data from all the years selected by a slider
// For example: selecting 2022-2023 will now include the data from both 2022 and 2023
// To display data for only one year, the user should select 2022-2022 for example
data_yahooFiltered = aq.from(data_yahooWithRenamedColumns)
.params({
dateStart: new Date(+control_timeRange[0], 0, 1).getTime(),
dateEnd: new Date(+control_timeRange[1], 11, 31, 23, 59, 59).getTime()
})
.filter((d, params) => d["date"] >= params.dateStart && d["date"] <= params.dateEnd)
.derive({ color: d => d.close < d.open ? "crimson" : "oliveDrab" })
.objects();
Inputs.table(data_yahooFiltered)
configureTicks = d => {
const dayOfMonth = d.getDate()
const month = d.toLocaleString('default', { month: 'long' })
const year = d.getFullYear()
let label
// Month level
if(lookingAtAYearWithFewTicks){
if(dayOfMonth >= 5 && dayOfMonth <= 25){label = dayOfMonth}
if(dayOfMonth === 1){label = month}
}
if(!lookingAtAYearWithFewTicks || lookingAtOneYear){
if(dayOfMonth === 1){label = month.slice(0,3)}
}
// Two-year level
if(lookingAtTwoYears){
if(dayOfMonth === 1){label = month.slice(0,3)}
}
// Years level
if (lookingAtMoreThanTwoYears) {
if (month === 'January' && dayOfMonth === 1) {
label = year.toString();
}
}
return label;
};
viewof control_bollingerPeriod = Inputs.range([2, 200], {
value: 7,
step: 1,
label: "Bollinger Period"
})
viewof control_bollingerSD = Inputs.range([0.5, 4], {
value: 2,
label: "Bollinger SD",
step: 0.1
})
viewof control_maLookbackPeriod = Inputs.range([1, 200], {label: "MA Period", value: 9, step: 1})
viewof control_macdSignalPeriod = Inputs.range([1, 200], {label: "MACD Signal Period", value: 9, step: 1, width: 300})
viewof control_macdFastPeriod = Inputs.range([1, 200], {label: "MACD Fast Period", value: 12, step: 1})
viewof control_macdSlowPeriod = Inputs.range([1, 200], {label: "MACD Slow Period", value: 26, step: 1})
viewof control_rsiPeriod = Inputs.range([1, 200], {label: "RSI Period", value: 14, step: 1})
viewof control_stochasticOscillatorKPeriod = Inputs.range([1, 200], {label: "Stochastic Oscillator K Period", value: 5, step: 1})
viewof control_stochasticOscillatorDPeriod = Inputs.range([1, 200], {label: "Stochastic Oscillator D Period", value: 3, step: 1})
showMe(`maColumn = fc.indicatorMovingAverage()
.period(control_maLookbackPeriod)
.value(d => d.close)
(data_yahooFiltered)`,{
label: 'How do I calculate an indicator?',
dependencies: {fc, data_yahooFiltered, control_maLookbackPeriod}
}
)
maColumn = fc.indicatorMovingAverage()
.period(control_maLookbackPeriod)
.value(d => d.close)
(data_yahooFiltered)
emaColumn = fc.indicatorExponentialMovingAverage()
.period(9)
.value(d => d.close)
(data_yahooFiltered)
rsiColumn = fc.indicatorRelativeStrengthIndex()
.value(d => d.close)
.period(control_rsiPeriod)
(data_yahooFiltered)
bollingerColumn = fc.indicatorBollingerBands()
.value(d => d.close)
.period(control_bollingerPeriod)
.multiplier(control_bollingerSD)
(data_yahooFiltered)
macdColumn = fc.indicatorMacd()
.value(d => d.close)
.fastPeriod(d => control_macdFastPeriod)
.slowPeriod(d => control_macdSlowPeriod)
.signalPeriod(d => control_macdSignalPeriod)
(data_yahooFiltered)
stochasticOscillatorColumn = fc.indicatorStochasticOscillator()
.lowValue(d => d.low)
.highValue(d => d.high)
.closeValue(d => d.close)
.kPeriod( control_stochasticOscillatorKPeriod )
.dPeriod( control_stochasticOscillatorDPeriod )
(data_yahooFiltered)
data_withFcIndicators = data_yahooFiltered.map( (d, i) => ({
ma: maColumn[i],
ema: emaColumn[i],
macd: macdColumn[i].macd,
macdSignal: macdColumn[i].signal,
macdDivergence: macdColumn[i].divergence,
rsi: rsiColumn[i],
stochasticOscillatorK: stochasticOscillatorColumn[i].k,
stochasticOscillatorD: stochasticOscillatorColumn[i].d,
bollingerUpper: bollingerColumn[i].upper,
bollingerAverage: bollingerColumn[i].average,
bollingerLower: bollingerColumn[i].lower,
...d
}))
currentEthereumPrice = d3.json( "https://www.binance.com/api/v3/ticker/price?symbol=ETHUSDT").then( response => {
return +response.price
} )
data_fearGreedIndex_raw = d3.json("https://api.alternative.me/fng/?limit=0&format=json")
data_fearGreedIndex = aq.from(data_fearGreedIndex_raw.data)
.derive({date: aq.escape(d => new Date(+d.timestamp * 1000))})
.filter ( aq.escape( d =>
d["date"].getFullYear() >= control_timeRange[0] &&
d["date"].getFullYear() <= control_timeRange[1]
))
.derive({value: d => +d.value}) // make numeric
.select('value_classification','date','value')
.rename({value: "fearGreedIndex"})
.rename({value_classification: "fearGreedIndexClassification"})
.objects()
data_withFearGreedIndex = aq.from(data_withFcIndicators)
.join_left(aq.from(data_fearGreedIndex), ["date", "date"])
.objects()
viewof table = Inputs.table(data_withFearGreedIndex)
import {Wrangler, op} from "@observablehq/data-wrangler"
import {rangeSlider} from '@mootari/range-slider'
import { SummaryTable } from "@observablehq/summary-table"
fc = require('d3fc')
import {Plot} from "@mkfreeman/plot-tooltip"
<!-- Style tells the cell to put any elements side by side. -->
<!-- You don't need to modify the style. -->
<style>
.controlPanel form{
display: inline-block;
vertical-align: top;
padding: 10px;
max-width: 140px;
}
</style>
import {toc} from "@nebrius/indented-toc"
import {showMe} from "@observablehq/show-me"
import {howTo} from "@clokman/howto"
import { displayCaution } from "@mkfreeman/utilities"
import {imageToDo} from "@clokman/student-blocks"
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.
