31:T5bf,Chart_OptionSeries = options => { let svgID = DOM.uid('optionChart'); const svg = d3 .create("svg") .attr("height", height) .attr("width", '100%') .style('background-color', background) .attr('id', svgID); const chart_underlay = svg .append('rect') .attr('x', margin.left) .attr('y', margin.top) .attr('height', height - margin.top - margin.bottom) .attr('width', () => { // mutable temp = // d3.select(`#${svgID}`).attr('width') - margin.left - margin.right; return w - margin.right - margin.left; // return temp; }) .style('fill', chart_bg); let x = xScale.copy(); let y = yScale.copy(); yAxis(svg.append('g'), y); xAxis(svg.append("g"), x) .selectAll("text") .attr("transform", "rotate(45) translate(5,2)") .style("text-anchor", "start") .style("dominant-baseline", "middle"); let optionBox = svg .selectAll('rect .option-box') .data(options) .enter() .append('rect') .attr('class', 'option-box') .attr('title', d => d[PROPERTY]) .attr('x', (d, i) => x(d.Strike)) .attr('y', (d, i) => y(d[PROPERTY])) .attr('stroke', function(d, i) { return color(d3.timeFormat('%s')(new Date(d.OptionCode.label))); }) .attr('fill', function(d, i) { return d.OptionCode.optionType === 'C' ? 'silver' : 'gold'; }) .attr('fill-opacity', 0.5) .attr('height', 5) .attr('width', 3); return svg.node(); }32:T4c5,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`

Stock quote and option quote for ${StockDay.Symbol} on ${ timestampFormat(StockDay.TimeStamped).split(',')[0] }


LAST	LX	Net Chng	BID	BX	ASK	AX	Size	Volume	Open	High	Low
${ListingInfo['LAST']}	${ListingInfo['LX']}	${ListingInfo['Net Chng']}	${ListingInfo['BID']}	${ListingInfo['BX']}	${ListingInfo['ASK']}	${ListingInfo['AX']}	${ListingInfo['Size']}	${volumeFormat(ListingInfo['Volume'])}	${ListingInfo['Open']}	${ListingInfo['High']}	${ListingInfo['Low']}


Yield	PE	Div	Div.Freq	Ex Div.Date	52High	52Low	Shares	FastBeta
${ListingInfo["Yield"]}	${ListingInfo["PE"]}	${ListingInfo["Div"]}	${ListingInfo["Div.Freq"]}	${shortDateFormat(ListingInfo["Ex Div.Date"])}	${ListingInfo["52High"]}	${ListingInfo["52Low"]}	${volumeFormat(ListingInfo["Shares"])}	${ListingInfo["FastBeta"]}

`34:[{"id":"57a500a7fd80a5eca1c7b960dd1da515cd137e258774058f3cca604d9df8a5aef1e19d0109a65ef5a0df9ac15e912e989074d396f2799dcf23df5f406ea7d4fa","href":"https://static.observableusercontent.com/files/57a500a7fd80a5eca1c7b960dd1da515cd137e258774058f3cca604d9df8a5aef1e19d0109a65ef5a0df9ac15e912e989074d396f2799dcf23df5f406ea7d4fa","name":"2019-10-25-StockAndOptionQuoteForIBM.csv","type":"text/csv","lastModified":1574209636977.672,"size":181016},{"id":"fc7d34c354a7046cb332694398044e24a854e5b674cdb8f6984736362f951324b11d8e7fcdcd9d29371872b71506d32e42d3c7a3de57e3fc263db42b0b7e81ac","href":"https://static.observableusercontent.com/files/fc7d34c354a7046cb332694398044e24a854e5b674cdb8f6984736362f951324b11d8e7fcdcd9d29371872b71506d32e42d3c7a3de57e3fc263db42b0b7e81ac","name":"IBM-SalesLog-2019-10-25.csv","type":"text/csv","lastModified":1574209441912.775,"size":415944}] 2f:{"title":"Option Chains - Product Depth 4","cells":[{"id":0,"value":"md`

Option Chains - Product Depth 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2779,"value":"Full = {\n const button = html`

Option Chains - Product Depth 4

Option Series