Public
Edited
Apr 26
Paused
33 forks
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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_only2023 = aq
// .from(data_initial)
// .filter(aq.escape((d) => d["Date"].getFullYear() == 2023))
// .objects()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// control_year = ... your code here
Insert cell
Insert cell
// Uncomment to enable

// data_filtered = aq.from(data_initial)
// .filter(aq.escape((d) => d["Date"].getFullYear() === control_year))
// .objects()
Insert cell
Insert cell
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
dateFormat = new Intl.DateTimeFormat('en-US', {
weekday: 'short', // 'narrow' | 'short' | 'long'
year: 'numeric', // numeric' | '2-digit',
month: 'short', // 'numeric' | '2-digit' | 'narrow' | 'short' | 'long',
day: 'numeric' // 'numeric' | '2-digit',
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
fc = require('d3fc@15.2.6')
Insert cell
Insert cell
Insert cell
Insert cell
// Uncoment to enable

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

// bollingerColumn = fc.indicatorBollingerBands()
// .value( d => d["Close"] )
// .period( control_bollingerPeriod )
// .multiplier( 2 )
// ( data_filtered )
Insert cell
Insert cell
viewof control_bollingerPeriod = Inputs.range([0, 100], {
label: "Bollinger Period",
step: 1,
value: 7
})
Insert cell
Insert cell
Insert cell
// Uncoment to enable

// macdColumn = fc.indicatorMacd()
// .value( d => d["Close"] )
// .signalPeriod( 9 )
// .fastPeriod( 12 )
// .slowPeriod( 26 )
// ( data_filtered )
Insert cell
Insert cell
Insert cell
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
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
// Uncomment and CONVERT TO MARKDOWN cell to activate

// | | |
// | --------------------- | -------------------------------- |
// | ${viewof control_year} | ${viewof control_bollingerPeriod} |
Insert cell
Insert cell
// Uncomment and CONVERT TO HTML cell to activate

// <div style="display: flex">
// <div>${viewof control_year}</div>
// <div style="margin-left: 50px">${viewof control_bollingerPeriod}</div>
// </div>
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<!-- ... your code here -->
Insert cell
Insert cell
Insert cell
// Complete the code

// data_fearGreedIndex_raw = d3.json(...)
Insert cell
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
Insert cell
Insert cell
// Uncomment to activate

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

// Inputs.table(data_filtered_withIndicators_withFearGreedIndex)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// ... your control panel code here
Insert cell
// ... your main chart code here (with MA added)
Insert cell
// ... your MACD chart code here
Insert cell
// ... your FGI chart code here
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
import {displayCaution} from "@mkfreeman/utilities"
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