Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
// mutable w = {
// let _width = 500;
// yield _width;
// while (true) {
// await Promises.delay(500);
// if (_width !== window.innerWidth) {
// _width = window.innerWidth;
// yield _width;
// }
// }
// }
// mutable w = {
// d3.select('#SVG')
// }
mutable w = 900;
// {
// while (true) {
// await Promises.delay(2000);
// yield window.innerWidth;
// }
// }
wrapper = html`<div id="${DOM.uid().id}">`
height = 500
// svg = d3
// .select(wrapper)
// .node()
// .appendChild(View)
md`## Intro`
md`
In Part 4 the chart will tick as option trades take place during the day. This is my favorite part. This gives us an easy look into how the market is situated. This was already in process but I felt stuck and struck with lack of direction and focus before even attempting it when [this came out](https://www.observablehq/@d3/bar-chart-race-explained)
The chart below is a static look at what the chart looked look at the end of the day. But if we bring in the \`SALES-LOG\` we can really piece it all together.
Up until Part 2 we were using live data but now we have to switch to mock data first
The reason is that there is no live \`sales-log\` available.
`
mock_data={
let options=AllOptions;
let salesLog = SalesLog;
return {options,salesLog}
}
MinutesForFrames = d3.groups(SalesLog, d =>
[...(DT + ' ' + d.DT)].fill(0, 17, 19).join('')
)
Calls = AllOptions.filter(x => x.OptionCode.optionType === 'C')
md`## UTILITY`
yAxis = (g, y_scale) =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(
d3
.axisLeft(y_scale)
.ticks(5)
.tickSize(w - (margin.left + margin.right))
.tickSizeOuter(0)
.tickPadding(3)
)
.call(g => g.select(".domain").remove())
.call(g =>
g
.select(".tick:last-of-type text")
.clone()
.attr("y", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.attr('transform', 'rotate(-90)')
.text(d => PROPERTY)
)
//NaN values are at the top of the chart
AllOptions
md`
## Configs
#### Market Parameters`
PROPERTY = 'Volume' //'volume'
md`### Visual Parameters`
margin = ({ top: 20, right: 50, bottom: 20, left: 30 })
padding = ({})
box = [4, 6]
background = '#0A0A0A'
md`## VIEWS`
md`### Option Chains Chart`
OptionChainChart = Chart_OptionSeries(AllOptions)
md`### Call Chart`
CallChart = Chart_OptionSeries(Calls)
md`### Put Chart`
PutChart = Chart_OptionSeries(
AllOptions.filter(x => x.OptionCode.optionType === 'P')
)
md`### Legend`
Legend = {
let seriesLabels = OptionSeries.map(x => {
let obj = d3.timeFormat('%y-%b-%d')(d3.timeParse('%s')(x.expirationDate));
return obj;
});
let seriesScale = d3
.scaleOrdinal()
.range(expirations.map(x => color(x)))
.domain(expirations);
let view = html`<svg style="width:100%; height:auto;">`;
let h = 50;
const svg = d3
.select(view)
.attr('viewBox', [0, 0, w, h])
.style('background', '#222');
yield svg.node();
let legend = svg.append("g").classed('custom-legend', true);
legend
.selectAll('.legend-key')
.data(expirations, d => d)
.join('circle')
.attr('class', d => d + ' legend-key')
.attr('cx', (d, i) => (w / expirations.length) * i + 25)
.attr('cy', 25)
.attr('fill', d => color(d))
.attr('r', 5);
legend
.selectAll('.legend-value')
.data(expirations, d => d)
.join('text')
.attr('class', d => 'legend-value ' + d)
.attr('x', (d, i) => (w / expirations.length) * i + 25)
.attr('y', 35)
.attr('stroke', 'white')
.attr('font-size', '15px')
.text((d, i) => d3.timeFormat('%d %b %Y')(d3.timeParse('%s')(d)))
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle');
}
strikeExtent = d3.extent(AllOptions.map(x => x.Strike))
selectedPropertyExtent = AllOptions.map(x => x[PROPERTY])
expirations = OptionSeries.map(x =>
d3.timeFormat('%s')(d3.timeParse('%d %b %y')(x[0]))
)
strikes = [
...new Set([...AllOptions.map(x => +x.strike)].sort((a, b) => a - b))
]
AllOptions = d3.merge(OptionChain.map(x => d3.merge([x.calls, x.puts])))
OptionChain = OptionSeries.map(a => {
let obj = {};
let alloptions = a[1].map(x => {
x.OptionCode = short_option_code(x["Option Code"]);
x.volume = x.Volume;
x.openInterest = x['Open.Int'];
x.strike = x.Strike;
x.expirationDate = new Date(x.OptionCode.label);
return x;
});
obj.calls = alloptions.filter(y => y.OptionCode.optionType === 'C');
obj.puts = alloptions.filter(y => y.OptionCode.optionType === 'P');
obj.expirationDate = d3.timeFormat('%s')(d3.timeParse('%d %b %y')(a[0]));
return obj;
})
// OptionChain = (await OptionChainFetcher(SYMBOL)).map(
// x => x.optionChain.result[0].options[0]
// )
SYMBOL='IBM'
DT = "2019-10-25"
OptionSeries = StockDay.options
SalesLog = d3.csvParse(
await FileAttachment('IBM-SalesLog-2019-10-25.csv').text(),
d3.autoType
)
// Option Code Volume Open.Int Delta Gamma Theta Vega Rho Impl Vol Theo Price ROC ROR Prob.ITM Prob.Touch Prob.OTM Cov Return Max Cov Return Mark Size BS AS %Change Last LAST LX Open High Low BID BX ASK AX Exp Strike % Change
StockDay = {
return {
...dataCredentials,
info: ListingInfo,
options: OptionChains
};
}
ListingInfo = {
let obj = {
...d3.csvParse(([textRows[3],textRows[4]]).join(`\n`),d3.autoType)[0],
...d3.csvParse(([textRows[7],textRows[8]]).join(`\n`),d3.autoType)[0]
}
obj.Volume=+parseNumbers(obj.Volume)
obj['Ex Div.Date']=exDivParser(obj['Ex Div.Date'])
obj.Shares=+parseNumbers(obj.Shares)
return obj;
}
md`## OPTIONS`
OptionChains = d3.groups(Options,k=>k.Exp)
Options.map(x => Object.keys(x).length)
Options = d3.merge(parseRowArray.map(({call,put})=>{
delete call[""]
delete put[""]
return [call,put]
}))
parseRowArray = option_rows
.map(x=>{
let call={},
put={};
let c=d3.zip( x.slice(0,strikePosition+1),callColumns).forEach(x=> {
call[x[1]]=x[0]
})
call=parseOption(call);
// let call = [x.slice(0,29),callColumns].reduce(function(m,v){m[v.key] = v.value; return m;}, {});
// .reduce(function(m,v){m[v.key] = v.value; return m;}, {})
//
let p= d3.zip( x.slice(34),putColumns).forEach(x=> {
put[x[1]]=x[0]
})
put=parseOption(put);
return {call,put}
}
)
parseOption=(option)=>{
option.Volume=+option.Volume;
option.BID =+option.BID;
option.ASK=+option.ASK;
option.Strike=+option.Strike;
option['Open.Int']=+option['Open.Int'];
option['Theo Price']=+option['Theo Price']
option['Delta']=+option['Delta']
option['Gamma']=+option['Gamma']
option['Vega']=+option['Vega']
option['Theta']=+option['Theta']
option['Rho']=+option['Rho']
option['LAST']=+option['LAST']
option['LX']=+option['LX']
option['LAST']=+option['LAST']
option['Mark']=+option['Mark']
option['Last']=+option['Last']
option['BS']=+option['BS']
option['AS']=+option['AS']
option['% Change']=+option['% Change']
option['ROC']=+option['ROC']
option['ROR']=+option['ROR']
return option;
}
getCall=rowArray=>rowArray.split(',').slice(0,strikePosition+1)
getPut=rowArray=>rowArray.split(',').slice(strikePosition-1)
option_rows=textRows
.filter(x=>x.startsWith(`,,${SYMBOL}`))
.map(d3.csvParse)
.map(x=>[...x.columns])
md`---
## Utilities`
parseNumbers=(str)=>{
if ( !str)return undefined;
let num = str.replace(/,/g,'');
return num;
}
volumeFormat = d3.format(',.0f')
shortDateFormat = d3.timeFormat('%d %b')
timestampFormat = d3.timeFormat('%c')
timeStampParser = d3.timeParse("%m/%d/%y %H:%M:%S")
exDivParser=d3.timeParse('%m/%d/%y')
generate_options_csv = ()=>option_chain_header.concat(`${option_rows.join('\n')}`)
dataCredentials = {
let temp = textRows[0].trim().split(' ');
let symbol = temp[6];
let date = temp[8];
let time = temp[9];
let dt = timeStampParser(date + ' ' + time);
return { Symbol: temp[6], TimeStamped: dt };
}
invalidValues = [""," ",'<empty>']
underlying_header=`LAST,LX,Net Chng,BID,BX,ASK,AX,Size,Volume,Open,High,Low`
option_chain_header = textRows
.filter(x => x.startsWith(',,Option Code'))[0]
.split(',')
//yayy my first working reduce...it's so unnecessary but a step in right direction.
option_chain_header.reduce((a,v)=>a+v+',')
strikePosition=option_chain_header.indexOf('Strike')
callColumns=option_chain_header.slice(0,strikePosition+1)
putColumns=option_chain_header.slice(strikePosition-1)
md`---
## Data`
md`### 1. Using a static mock-file`
text = await FileAttachment('2019-10-25-StockAndOptionQuoteForIBM.csv').text()
md`1. Split file into lines`
textRows=text.split('\n')
OptionSeries_Header = {
return { optionColumns: option_chain_header };
}
md`
---
## ANX`
// import { SalesLog, OptionSeries, DT } from '@stroked/36715851347f6241'
import { short_option_code, long_option_code } from '@stroked/option-code'
import { BigBoldHeading } from '@stroked/texting-titling'
BigBoldHeading
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.
