Published
Edited
Jul 14, 2021
Importers
Insert cell
md`# Ticker Values Main Chart`
Insert cell
chart = {
// define our base line chart of stock prices
const line = vl.markLine()
.params(brush)
.encode(
vl.x().fieldT('Date'),
//vl.y().fieldQ('Close').scale({type: 'log'}),
vl.y().fieldQ('Close'),
vl.color().fieldN('Symbol').scale({ domain: ticker_check, scheme:'category10'}),
vl.tooltip('Close'),
);

return vl.data(ticker_data)
.layer(
line
)
.width(700)
.height(400)
.render()
}

Insert cell
viewof ticker_check = checkbox({options: tickers,
value: ["BTC-USD", "ETH-USD"]
})
Insert cell
viewof event_check = checkbox({options: event_type,
value: ["BTC History"]
})
Insert cell
event_type = ['BTC History', 'Global', 'Elon', 'Financial']
Insert cell
brush = vl
.selectInterval()
.encodings('x')
.name('brush')
Insert cell
tickers = ['BTC-USD','ETH-USD', 'AAPL', 'TSLA', 'MSFT', 'NVDA', 'SQ', 'PYPL', 'MSTR', 'JPM', '^IXIC', '^DJI', '^GSPC', 'GC=F', "CL=F"]
Insert cell
ticker_data = FileAttachment("tickers_full.csv").csv()
Insert cell
event_data = FileAttachment("events.csv").csv()
Insert cell
import {vl} from '@vega/vega-lite-api-v5'
Insert cell
embed = require("vega-embed@6")
Insert cell
import {slider,button,select,text,radio,checkbox,number} from "@jashkenas/inputs"
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