data_raw = FileAttachment("ETH-USD.csv").csv({ typed: true })
Inputs.table(data_raw)
// To use copied code replace "data" with your own variable
data_renamed = aq
.from(data_raw)
.rename({ Date: "date" })
.rename({ Open: "open" })
.rename({ High: "high" })
.rename({ Low: "low" })
.rename({ Close: "close" })
.rename({ "Adj Close": "adjustedClose" })
.rename({ Volume: "volume" })
.objects()
// ... For this, you will need to filter the dataset using the Wrangler.
// ... the filter command should specity `d["date"].getFullYear() > 2021`
// ... (.getFullYear gets the year as a number)
// ... Because the statement is not simple, it will need to be wrapped in aq.escape()
Plot.plot({
marks: [Plot.barY(data_filtered, { x: "date", y: "close" }), Plot.ruleY([0])]
})
Plot.plot({
width: 1200,
marks: [
Plot.barY(data_filtered, { x: "date", y1: "open", y2: "close" }),
Plot.ruleX(data_filtered, { x: "date", y1: "high", y2: "low" })
]
})
// To use copied code replace "data" with your own variable
data_colored = aq
.from(data_filtered)
.derive({ color: (d) => (d.close < d.open ? "crimson" : "oliveDrab") })
.objects() // Uncomment to return an array of objects
// ... if close < open, then the color should be 'crimson', otherwise 'oliveDrab'
// ... you will need to use Wrangler's derive method for this.
Plot.plot({
width: 1200,
marks: [
Plot.barY(data_colored, {
x: "date",
y1: "open",
y2: "close",
fill: "color"
}),
Plot.ruleX(data_colored, {
x: "date",
y1: "high",
y2: "low",
stroke: "color"
})
]
})
Plot.plot({
width: 1200,
marks: [
Plot.ruleX(data_colored, {
x: "date",
y1: "open",
y2: "close",
stroke: "color",
strokeWidth: 8
}),
Plot.ruleX(data_colored, {
x: "date",
y1: "high",
y2: "low",
stroke: "color"
})
]
})
// ...
range
Plot.plot({
width: 1200,
marks: [
Plot.ruleX(data_parameterized, {
x: "date",
y1: "open",
y2: "close",
stroke: "color",
strokeWidth: 8
}),
Plot.ruleX(data_parameterized, {
x: "date",
y1: "high",
y2: "low",
stroke: "color"
})
]
})
Plot.plot({
width: 1200,
marks: [
Plot.ruleX(data_parameterized, {
x: "date",
y1: "open",
y2: "close",
stroke: "color",
strokeWidth: 8,
strokeWidth: (d) =>
(1200 - 300) /
data_parameterized.filter((d) => d["date"].getFullYear() === range)
.length
}),
Plot.ruleX(data_parameterized, {
x: "date",
y1: "high",
y2: "low",
stroke: "color"
})
]
})
import {Plot} from "@mkfreeman/plot-tooltip"
// ...
// Please uncomment
//
// makeCandleStickChartTitle = (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) }
// `
fc = require("d3fc")
emaColumn = fc
.indicatorExponentialMovingAverage()
.period(emaPeriode)
.value((d) => d.close)(data_parameterized)
bollingerColumn = fc
.indicatorBollingerBands()
.period(7)
.multiplier(2)
.value((d) => d.close)(data_parameterized)
macdColumn = fc
.indicatorMacd()
.signalPeriod(9)
.fastPeriod(12)
.slowPeriod(26)
.value((d) => d.close)(data_parameterized)
data_withIndicators = data_parameterized.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
}))
<!-- Please uncomment when chart below is completed and put a '$' sign in front of {viewof ...} -->
<!-- {viewof control_year} -->
// ... this should be an HTML cell. You can find the embed code at the Alternative.me's Fear and Greed index website
// ... d3.json can be used for this
// ... You can use Wrangler to generate the code
// ... Plot.line is for the main line, Plot.ruleY is for the dotted one
// ...
// ...
// ...
// ...
// ...
// ...
// ...
// ...
<!-- Once all sliders are set, please add a $ sign before {viewof ...} statements to enable this code-->
<style>
.controlPanel form{
display:inline-block;
vertical-align:top;
padding: 10px;
max-width:190px;
}
</style>
<div class="controlPanel">
<br/>
{viewof control_bollingerPeriod} {viewof control_bollingerSD}
<br/>
{viewof control_emaPeriod}
<br/>
{viewof control_macdSignalPeriod}, {viewof control_macdFastPeriod}, {viewof control_macdSlowPeriod}
<br/>
{viewof control_year}
</div>
// ...
// ...
// ...
import {toc} from "@nebrius/indented-toc"
import {Wrangler, op} from "@observablehq/data-wrangler"
import {imageToDo} from "@clokman/student-blocks"
imageToDo
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.
