Owner of Hammies, former Jupyter core developer and co-lead of Jupyter Notebook and JupyterLab teams
Published
Edited
Oct 21, 2021
2 stars
candlestick(data)
data = await getQuoteHistory(ticker, range)
lineChart = data => {
const hover = vl
.selectSingle()
.encodings('x')
.on('mouseover')
.nearest(true)
.empty('none');
const line = vl.markLine().encode(
vl.x().fieldT('date'),
vl
.y()
.fieldQ('close')
.scale({ type: 'log', base: 10 }),
vl
.color()
.fieldN('symbol')
.legend(null)
);
const base = line.transform(vl.filter(hover));
const label = { align: 'left', dx: 5, dy: -5 };
const white = { stroke: 'white', strokeWidth: 2 };
return vl
.data(data)
.layer(
line.select(
vl
.selectInterval()
.bind('scales')
.encodings('x')
),
vl
.markRule({ color: '#aaa' })
.transform(vl.filter(hover))
.encode(vl.x().fieldT('date')),
line
.markCircle()
.select(hover)
.encode(
vl
.opacity()
.if(hover, vl.value(1))
.value(0)
),
base.markText(label, white).encode(vl.text().fieldQ('close')),
base.markText(label).encode(vl.text().fieldQ('close'))
)
.width(width - 50)
.height(400)
.render();
}
candlestick = data => {
return vl
.data(data)
.encode(
vl.x().fieldT('date'),
vl
.color({ value: '#ae1325' })
.condition({
test: 'datum.open < datum.close',
value: '#06982d'
})
.legend(null)
)
.layer(
vl.markRule().encode(
vl
.y()
.fieldQ('low')
.scale({ zero: false }),
vl.y2().fieldQ('high')
),
vl.markBar().encode(vl.y().fieldQ('open'), vl.y2().fieldQ('close'))
)
.width(width - 50)
.height(400)
.render();
}
import { getQuote, getQuoteHistory, symbols } from "@gnestor/yahoo-finance"
import { autoSelect, select } from '@observablehq/legacy-inputs'
import { vl } from '@vega/vega-lite-api'
d3 = require('d3')
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.
