viewof chart_returns = {
const hover = vl.selectPoint('hover')
.encodings('x')
.on('mouseover')
.toggle(false)
.nearest(true);
const isHovered = hover.empty(false);
const line = vl.markLine()
.title('Returns')
.encode(
vl.x().fieldT('Date'),
vl.y().fieldQ('Returns').title('Returns (%)'),
vl.color().fieldN('Symbol').scale({ domain: local_ticker_check, scheme:'category10'}),
);
const base = line.transform(vl.filter(isHovered));
const label = {align: 'left', dx: 5, dy: -5};
const white = {align: 'left', dx: 5, dy: -5, stroke: 'white', strokeWidth: 2};
return vl.data(filtered_data)
.layer(
line,
vl.markRule({color: '#000'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('Date')),
line.markCircle()
.params(hover)
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
base.markText(label, white).encode(vl.text().fieldQ('Returns').format('.000')),
base.markText(label).encode(vl.text().fieldQ('Returns').format('.000')),
)
.width(700)
.height(400)
.render();
}
vl
.data(filtered_data)
.title('Volatility')
.encode(
vl
.x()
.type('temporal')
.field('Date')
.axis({
title: "Time",
format: "%m/%d/%y"
}),
vl
.y()
.type('quantitative')
.scale({ zero: false, type: 'log' })
.axis({
title: "Closing Price ($)"
}),
vl
.color()
.condition({
test: "datum.Open < datum.Close",
value: "#06982d"
})
.value("#ae1325"),
vl.tooltip([
{ field: "Symbol", type: "ordinal", title: "Symbol" },
{ field: "Date", type: "temporal", title: "Date" },
{ field: "Close", type: "quantitative", title: "Close", format: ".0f" },
{ field: "Close", type: "quantitative", title: "Close", format: ".0f" },
{ field: "Open", type: "quantitative", title: "Open", format: ".0f" },
{ field: "High", type: "quantitative", title: "High", format: ".0f" },
{ field: "Low", type: "quantitative", title: "Low", format: ".0f" }
])
)
.layer(
vl
.markBar()
.select(vl.selectInterval().bind('scales'))
.encode(vl.y().field('Open'), vl.y2().field('Close')),
vl.markRule().encode(vl.y().field('Low'), vl.y2().field('High'))
)
.width(700)
.height(400)
.render()
md `## Global Configuration `
debug = true
W0 = 1200
w = width >= W0 ? Math.floor(width * 0.4) : width * 0.75 // for fullscreen
height_sankey = 800 * 0.6
colorVega = "#4C78A8"
// candle chart interval
interval = '1d'
md `## Internal Functions`
md `## Data`
filtered_data = temp_filter.filter(d => d.Date >= d1 && d.Date <= d2 && d.Close > 0 && d.Low > 0)
temp_filter_2 = temp_filter.filter(d => d.Close > 0)
temp_filter = local_data.filter(d => tickers2.has(d.Symbol))
tickers2 = new Set(local_ticker_check)
local_data = FileAttachment("tickers_full.csv").csv()
filtered_event_data = local_event_data.filter(d => d.Date >= d1 && d.Date <= d2)
local_event_data = FileAttachment("events@2.csv").csv()
symbol = 'BTCUSD_PERP'
candle_data = candles(symbol, interval)
factsExample = crossfilter(local_data)
sportDim = factsExample.dimension(d => d.Close)
function sampleArray(a, n, random) {
return a.slice(0, n);
}
tickers = ['BTC-USD','ETH-USD', 'AAPL', 'TSLA', 'MSFT', 'NVDA', 'SQ', 'PYPL', 'MSTR', 'JPM', '^IXIC', '^DJI', '^GSPC', 'GC=F', "CL=F"]
type = ['BTC History', 'Global', 'Elon', 'Financial']
md `## Import Libraries `
vegalite = require("@observablehq/vega-lite@0.3")
import {vegaSync} from "@pierreleripoll/vegasync"
import {createFacts} from "@pierreleripoll/vegasync"
//crossfilter = require("crossfilter2")
crossfilter = require("crossfilter2@1.5.4")
import {fullscreen} from "@pierreleripoll/vegasync"
import {slider,button,select,text,radio,checkbox,number,date} from "@jashkenas/inputs"
import {candles, forwardRate} from "@pandawhisperer/binance-futures-with-forward-rate"
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.
