31:T91c,ChartingAllPuts = { let puts = OptionChain.map(x => [...x.puts]).reduce(function(arr, value) { return (arr = [...value, ...arr]); }, []); let options = puts.map(x => x[PROPERTY]); let strikes = puts.map(x => x.strike); if (options.length !== strikes.length) throw 'diff num of options and strikes'; let x = d3 .scaleLinear() .domain(d3.extent(strikes)) .range([ width / 2 + DIM.CHART_LEFT_PADDING, width / 2 + DIM.CHART_LEFT_PADDING + CHART_WIDTH ]); let y = d3 .scaleLinear() .domain(d3.extent(options)) .nice() .range([ height - DIM.BOTTOM_MARGIN - DIM.CHART_BOTTOM_PADDING, DIM.TOP_MARGIN + DIM.CHART_TOP_PADDING ]) .clamp(true) .unknown(height - DIM.BOTTOM_MARGIN - box[1]); let xAxis = g => g .attr( "transform", `translate(${0}, ${DIM.TOP_MARGIN + DIM.CHART_TOP_PADDING})` ) .call( d3 .axisBottom(x) .tickSize(CHART_HEIGHT) .tickPadding(5) .tickValues(strikes) .tickFormat(function(d, i) { return strikes.includes(d) ? d3.format('3,.4')(d) : ""; }) ); let yAxis = g => g .attr( "transform", `translate(${width / 2 + DIM.CHART_LEFT_PADDING}, ${0})` ) .call(d3.axisLeft(y).tickSize(-CHART_WIDTH)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(d => "y-axis units") ); d3.select(Puts) .selectAll('.xAxis') .data(['_'], d => d) .join('g') .classed('xAxis', true) .call(xAxis); d3.select(Puts) .selectAll('.yAxis') .data(['_'], d => d) .join('g') .classed('yAxis', true) .call(yAxis); d3.select(Puts) .selectAll('.put-box') .data(strikes, (d, i) => i) .join('rect') .attr('class', 'put-box') .attr('x', d => x(d) - box[0] / 2) .attr('width', box[0]) .attr('y', (d, i) => { let value = puts[i][PROPERTY] ? puts[i][PROPERTY] : 'null'; return y(value) - box[1] / 2; }) .attr('height', box[1]) .attr('stroke', 'white'); }32:T8be,ChartingPuts = { let puts = OptionChain[0].puts; let options = puts.map(x => x[PROPERTY]); let strikes = puts.map(x => x.strike); if (options.length !== strikes.length) throw 'diff num of options and strikes'; let x = d3 .scaleLinear() .domain(d3.extent(strikes)) .range([ width / 2 + DIM.CHART_LEFT_PADDING, width / 2 + DIM.CHART_LEFT_PADDING + CHART_WIDTH ]); let y = d3 .scaleLinear() .domain(d3.extent(options)) .nice() .range([ height - DIM.BOTTOM_MARGIN - DIM.CHART_BOTTOM_PADDING, DIM.TOP_MARGIN + DIM.CHART_TOP_PADDING ]) .clamp(true) .unknown(height - DIM.BOTTOM_MARGIN - box[1]); let xAxis = g => g .attr( "transform", `translate(${0}, ${DIM.TOP_MARGIN + DIM.CHART_TOP_PADDING})` ) .call( d3 .axisBottom(x) .tickSize(CHART_HEIGHT) .tickPadding(5) .tickValues(strikes) .tickFormat(function(d, i) { return strikes.includes(d) ? d3.format('3,.4')(d) : ""; }) ); let yAxis = g => g .attr( "transform", `translate(${width / 2 + DIM.CHART_LEFT_PADDING}, ${0})` ) .call(d3.axisLeft(y).tickSize(-CHART_WIDTH)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(d => "y-axis units") ); d3.select(Puts) .selectAll('.xAxis') .data(['_'], d => d) .join('g') .classed('xAxis', true) .call(xAxis); d3.select(Puts) .selectAll('.yAxis') .data(['_'], d => d) .join('g') .classed('yAxis', true) .call(yAxis); d3.select(Puts) .selectAll('.put-box') .data(strikes, (d, i) => i) .join('rect') .attr('class', 'put-box') .attr('x', d => x(d) - box[0] / 2) .attr('width', box[0]) .attr('y', (d, i) => { let value = puts[i][PROPERTY] ? puts[i][PROPERTY] : 'null'; return y(value) - box[1] / 2; }) .attr('height', box[1]) .attr('stroke', 'white'); }33:T7ee,ChartingCalls = { let calls = OptionChain[0].calls; let options = calls.map(x => x[PROPERTY]); let strikes = calls.map(x => x.strike); let x = d3 .scaleLinear() .domain(d3.extent(strikes)) .range([DIM.CHART_LEFT_PADDING, DIM.CHART_LEFT_PADDING + CHART_WIDTH]); let y = d3 .scaleLinear() .domain(d3.extent(options)) .nice() .range([ height - DIM.BOTTOM_MARGIN - DIM.CHART_BOTTOM_PADDING, DIM.TOP_MARGIN + DIM.CHART_TOP_PADDING ]) .unknown(height - DIM.BOTTOM_MARGIN - box[1]); let xAxis = g => g .attr( "transform", `translate(${0}, ${DIM.TOP_MARGIN + DIM.CHART_TOP_PADDING})` ) .call( d3 .axisBottom(x) .tickSize(CHART_HEIGHT) .tickPadding(5) .tickValues(strikes) .tickFormat(function(d, i) { return strikes.includes(d) ? d3.format('3,.4')(d) : ""; }) ); let yAxis = g => g .attr( "transform", `translate(${DIM.CHART_LEFT_PADDING}, ${0})` ) .call(d3.axisLeft(y).tickSize(-CHART_WIDTH)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(d => "y-axis units") ); d3.select(Scene) .select('.calls') .selectAll('.xAxis') .data(['_'], d => d) .join('g') .classed('xAxis', true) .call(xAxis); d3.select(Calls) .selectAll('.yAxis') .data(['_'], d => d) .join('g') .classed('yAxis', true) .call(yAxis); d3.select(Calls) .selectAll('.call-box') .data(strikes, (d, i) => i) .join('rect') .attr('class', 'call-box') .attr('x', d => x(d) - box[0] / 2) .attr('height', box[1]) .attr('y', (d, i) => y(options[i]) - box[1] / 2) .attr('width', box[0]) .attr('stroke', 'white'); }34:[] 2f:{"title":"Option Chains - Product Depth 1","cells":[{"id":0,"value":"md`# Option Chains - Product Depth 1\n \n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"md`---\n## Goal\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1581,"value":"md`## Prototype`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"md`#### Design Decisions\n- Some boxes are completely off the charts and I thought it made for a better look at options that just never traded.\n\n- Also at first I was using point scale for the x-axis but since option contracts are not spread evenly across the strike it didn't make much sense for them to be evenly spaced but linear scales resulted in evenness across the ticks and going down that rabbit-hole had me looking at all the scales again but the real answer was to just format the ticks. But even that was a little more complicated than the final solution that we see below...\\`.ticks(strikes)\\` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"//the left chart only shows calls for a single series.\n//the right chart shows all series.\n//the difference is only there to show the variety","pinned":true,"hidden":false,"mode":"ojs"},{"id":1045,"value":"Scene = {\n let view = md`\n`;\n yield view;\n while (true) {\n yield view;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1587,"value":"md` ### \\`IN HINDSIGHT...\\`\nMade the bad decision of trying to main a global positioning across the view containing multiple subcomponents.\nBeyond that, this turned out pretty close to what I wanted. \n\n---\n### \\`IN FUTURE...\\`\nFor **Part 2**, will finalize positioning and scaling. The first step towards that would be to breakdown the coordinates to local dimensions which should make design-time resoning much easier. From now I will always always stay true to the margin-convention that we already know and expect. \n\nAn added benefit of chart localized positioning would be that calls and puts can be handled in the same exact way by the same function i.e. 'D-R-Y'.\n\nFor **Part 3** is going to be about the colors. This is where things can get really interesting and lead to somewhere new with this visualization. \n\nFor **part 4** Finalize labelling and legends a.k.a. the boring bits\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1605,"value":"md`### WORKSPACE`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"label_data = [\n {\n id: 'heading_label',\n g: 'heading',\n text: \"Product Depth\",\n x: width / 2,\n y: 0,\n anchor: 'middle',\n baseline: 'hanging',\n size: DIM.TOP_MARGIN\n },\n {\n id: 'calls_chart_title_label',\n g: 'calls',\n text: SYMBOL + \" Call \" + PROPERTY,\n x: width * 0.25,\n y: DIM.TOP_MARGIN + DIM.CHART_TOP_PADDING,\n anchor: 'middle',\n baseline: 'bottom',\n size: DIM.CHART_TOP_PADDING\n },\n {\n id: 'puts_chart_title_label',\n g: 'puts',\n text: SYMBOL + \" Put \" + PROPERTY,\n x: width * 0.75,\n y: DIM.TOP_MARGIN + DIM.CHART_TOP_PADDING,\n anchor: 'middle',\n baseline: 'bottom',\n size: DIM.CHART_TOP_PADDING\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"Labels = label_data.map((d, i) =>\n d3\n .select(Scene)\n .select(`.${d.g}`)\n .selectAll('.' + d.id)\n .data([d], d => d.id)\n .join('text')\n .attr('class', d => d.id)\n .text(d => d.text.toUpperCase())\n .attr('x', d => d.x)\n .attr('y', d => d.y)\n .attr('dominant-baseline', d => d.baseline)\n .attr('text-anchor', d => d.anchor)\n .attr('stroke', 'white')\n .style('font-size', d => d.size)\n .attr('font-weight', 300)\n .style('fill', 'black')\n .attr('opacity', 0.5)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1633,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1488,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1342,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":887,"value":"md`

AXIS

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"Axis = {\n let xAxis = d3.select(Scene).select('.xAxis');\n let yxis = d3.select(Scene).select('.yAxis');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"md`

LABELS

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"md`---\n## Configs\n\n#### Market Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"SYMBOL = \"IBM\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"PROPERTY = 'openInterest' //'volume'","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"md`#### Visual Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"DIM = ({\n CHART_LEFT_PADDING: 30,\n CHART_RIGHT_PADDING: 10,\n CHART_TOP_PADDING: 14,\n CHART_BOTTOM_PADDING: 20,\n TOP_MARGIN: 18,\n BOTTOM_MARGIN: 18\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"CHART_HEIGHT = height -\n DIM.BOTTOM_MARGIN -\n DIM.TOP_MARGIN -\n DIM.CHART_TOP_PADDING -\n DIM.CHART_BOTTOM_PADDING","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"CHART_WIDTH = width / 2 - DIM.CHART_LEFT_PADDING - DIM.CHART_RIGHT_PADDING","pinned":false,"hidden":false,"mode":"ojs"},{"id":1509,"value":"box = [4, 6]","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"md`## SVG Groups`","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"Background = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"Heading = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"Legend = svg`\n\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":518,"value":"Calls = svg`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"Puts = svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`---\n## VIEW`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"// {\n// let container = this || html`

`;\n// yield container;\n// let series = d3\n// .select(container)\n// .attr('id', '#container')\n// .selectAll('.option-series')\n// .data(OptionChain, d => d3.timeParse('%s')(d.expirationDate))\n// .join('div')\n// .style('background', 'red')\n// .html(d => {\n// return `${d3.timeFormat('%Y-%m-%d')(\n// d3.timeParse('%s')(d.expirationDate)\n// )}`;\n// })\n// .attr('class', 'option-series');\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"md`---\n## DATA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"// contractSymbol: \"IBM200117P00060000\"\n// strike: 60\n// currency: \"USD\"\n// lastPrice: 0.07\n// change: 0\n// percentChange: 0\n// volume: 20\n// openInterest: 0\n// bid: 0\n// ask: 0\n// contractSize: \"REGULAR\"\n// expiration: 1579219200\n// lastTradeDate: 1566590148\n// impliedVolatility: 0.2500075\n// inTheMoney: false\ndata = AllOptions","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"AllOptions = d3\n .merge(OptionChain.map(series => [...series.calls, ...series.puts]))\n .map(each => {\n each.OptionCode = long_option_code(each.contractSymbol);\n return each;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"OptionChain = (await OptionChainFetcher(SYMBOL)).map(\n x => x.optionChain.result[0].options[0]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`\n---\n## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"import { long_option_code } from '@stroked/option-code'","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"import { OptionChainFetcher } from '@stroked/yahoofinance'","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}