The avatar for @nilsfischer1310
nilsfischer
Public
Worksheets: Plot - Nils Fischer
Edited
May 27, 2023
Fork of Candlestick Chart
20
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

data_forAroundOneYear = aq.from(data_initial)
.filter( aq.escape(d => d["Date"].getFullYear() > 2022 ) )
.objects()
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(data_forAroundOneYear, {x: "Date", y1: "Close", y2:"Open" }),
Plot.ruleX(data_forAroundOneYear, {x:"Date", y1: "High", y2:"Low"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [


// Wicks
Plot.ruleX(data_forAroundOneYear, {
x: "Date",
y1: "High",
y2: "Low"
}),
// Candle Body
Plot.ruleX(data_forAroundOneYear, {
x: "Date",
y1: "Close",
y2: "Open",
strokeWidth: 5,
stroke: d => d['Open'] < d['Close'] ? "green" : "red"
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [

// Wicks
Plot.ruleX(data_forAroundOneYear, {
x: "Date",
y1: "High",
y2: "Low",
stroke: d => d['Open'] < d['Close'] ? "green" : "red"

}),
// Candle Body
Plot.ruleX(data_forAroundOneYear, {
x: "Date",
y1: "Close",
y2: "Open",
strokeWidth: 5,
stroke: d => d['Open'] < d['Close'] ? "green" : "red"
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
year_slider
Insert cell
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
Plot.plot({
marks: [

// Wicks
Plot.ruleX(data_filtered, {
x: "Date",
y1: "High",
y2: "Low",
stroke: d => d['Open'] < d['Close'] ? "green" : "red"
}),
// Candle Body
Plot.ruleX(data_filtered, {
x: "Date",
y1: "Close",
y2: "Open",
strokeWidth: 5,
stroke: d => d['Open'] < d['Close'] ? "green" : "red"
})
]
})
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
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell
import {Plot} from "@mkfreeman/plot-tooltip"
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell

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"]) }`
Insert cell
Insert cell
Insert cell
// ... your code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
fc = require('d3fc')
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
bollingerColumn = fc.indicatorBollingerBands()
.value( d => d["Close"] )
.period( bollingerPeriod_slider )
.multiplier( 2 )
( data_filtered )
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell


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 year_slider} | ${viewof bollingerPeriod_slider} |
Insert cell
Insert cell
// Uncomment and CONVERT TO HTML cell to activate

// <div style="display: flex">
// <div>${viewof year_slider}</div>
// <div style="margin-left: 50px">${viewof bollingerPeriod_slider}</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
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
// Uncomment to activate
data_filtered_withIndicators_withFearGreedIndex = aq.from(data_filtered_withIndicators)
.join(aq.from(data_fearGreedIndex), ["Date", "FearGreedDate"])
.objects()
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
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