31:T4a2,Legend = { let seriesLabels = OptionChain.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 h = 100; const svg = d3 .select(DOM.svg(width, h)) .attr('viewBox', [0, 0, width, 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) => (width / 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) => (width / 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'); }32:T453,Chart_OptionSeries = options => { const svg = d3 .create("svg") .attr("height", height) .attr("width", width) .attr("viewBox", [0, 0, width, height]) .style('background-color', background); const chart_underlay = svg .append('rect') .attr('x', margin.left) .attr('y', margin.top) .attr('height', height - margin.top - margin.bottom) .attr('width', width - margin.left - margin.right) .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 .call') .data(options) .enter() .append('rect') .attr('class', 'call') .attr('x', (d, i) => x(d.strike)) .attr('y', (d, i) => y(d[PROPERTY])) .attr('stroke', function(d, i) { return color(d.expiration); }) .attr('fill', 'none') .attr('height', 5) .attr('width', 3); return svg.node(); }33:[] 2f:{"title":"Option Chains - Product Depth 2","cells":[{"id":0,"value":"md`# Option Chains - Product Depth 2\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2556,"value":"md`## Puts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2539,"value":"Chart_OptionSeries(AllOptions.filter(x => x.OptionCode.optionType === 'P'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2561,"value":"//compare distribution between calls and Puts","pinned":true,"hidden":false,"mode":"ojs"},{"id":2558,"value":"md`## Calls`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2548,"value":"Chart_OptionSeries(AllOptions.filter(x => x.OptionCode.optionType === 'C'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2444,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2595,"value":"md`\n**Up Next: **\nIn Part 3 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. \n\nThe 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.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1597,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"md`

LABELS & LEGENDS

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2487,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"md`

SCALES & AXES

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2345,"value":"color = d3\n .scaleTime()\n .interpolate(() => d3.interpolateCool)\n .domain(d3.extent(expirations).reverse())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1687,"value":"xScale = d3\n .scalePoint()\n .domain(strikes)\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1677,"value":"xAxis = (g, x_scale) =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x_scale)\n .tickSize(-(height - margin.top - margin.bottom))\n .tickSizeOuter(0)\n\n .tickPadding(0)\n .tickValues(strikes)\n .tickFormat(function(d, i) {\n return strikes.includes(d) ? d3.format('3,.4')(d) : \"\";\n })\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1702,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(AllOptions.map(x => +x[PROPERTY])))\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1707,"value":"yAxis = (g, y_scale) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(\n d3\n .axisLeft(y_scale)\n .ticks(5)\n .tickSize(-(height - margin.top - margin.bottom))\n .tickSizeOuter(0)\n\n .tickPadding(3)\n )\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"y\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .attr('transform', 'rotate(-90)')\n .text(d => PROPERTY)\n )","pinned":true,"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":1599,"value":"margin = ({ top: 20, right: 10, bottom: 20, left: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2174,"value":"padding = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":1509,"value":"box = [4, 6]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1637,"value":"background = '#0A0A0A'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1640,"value":"chart_bg = '1B1B1B'","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`---\n## VIEW`","pinned":true,"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 .style('text-align', 'center')\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":1751,"value":"strikeExtent = d3.extent(AllOptions.map(x => x.strike))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1756,"value":"selectedPropertyExtent = d3.extent(AllOptions.map(x => x[PROPERTY]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2103,"value":"expirations = OptionChain.map(x => x.expirationDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"strikes = [\n ...new Set([...AllOptions.map(x => +x.strike)].sort((a, b) => a - b))\n]","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":true,"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":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"import { OptionChainFetcher } from '@stroked/yahoofinance'","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}