Owner of Hammies, former Jupyter core developer and co-lead of Jupyter Notebook and JupyterLab teams
Published
Edited
Jul 13, 2020
2 forks
Importers
1 star
stockChart([
'NDAQ',
'SHOP',
'NVDA',
'AMD',
'NFLX',
'BRKB',
'ARKW',
'ARKK',
'ARKG',
'ARKQ'
])
stockChart(['ZM', 'AMZN', 'GOOGL', 'PTON', 'SHOP', 'NFLX', 'FB'])
stockChart(['UBER', 'BYND', 'DIS', 'SPCE'])
stockChart(['FORD', 'TM', 'VWAGY', 'HMC', 'FUJHY'])
stockChart([
'BA',
'EADSY',
'JETS',
'DAL',
'AAL',
'LUV',
'UAL',
'SKYW',
'ALK',
'SAVE',
'JBLU'
])
stockChart(['CCL', 'NCLH', 'RCL', 'MGM'])
stockChart(['H', 'WYND', 'HLT', 'MAR'])
stockChart(['HGV', 'VAC'])
stockChart(['RPAI', 'XRT', 'NNN', 'SBUX', 'BBBY', 'PLAY', 'GPS', 'M', 'AMC'])
stockChart(['BP', 'UCO', 'CVX', 'MRO', 'XOM', 'USO'])
stockChart(['CGC', 'CRON', 'ACB'])
stockChart(['IVR', 'NRZ'])
stockChart(['GE', 'LMT', 'RTX'])
stockChart = async symbols => {
const data = await symbols.reduce(async (result, symbol) => {
const data = await getQuoteHistory(symbol, range);
return [
...(await result),
...data.map(({ date, close }) => ({
symbol,
date: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
close
}))
];
}, Promise.resolve([]));
const element = lineChart(data);
element.value = data;
return element;
}
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'),
vl.color().fieldN('symbol')
);
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 - 120)
.height(400)
.render();
}
import { getQuote, getQuoteHistory } from '@gnestor/yahoo-finance'
import {select} from '@jashkenas/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.
