30:T604,// svg // .selectAll('.button-group') // .data(["value", 'volume', "open_interest"], (d, i) => i) // .join('g') // .attr('class', 'button-group') // .attr('font-size', 12) // .attr('stroke', 'black') // .attr('transform', (d, i) => `translate(${i * 100 + 100},${5})`) // // .attr('style', 'user-select:none;') // .call(group => // group // .selectAll('.button-text') // .data(d => [d]) // .join('text') // .attr('class', 'button-text') // .attr('dx', 90 / 2) // .attr('dy', 5 + 30 / 2) // .attr('text-anchor', 'middle') // .text(d => d.replace('_', ' ').toUpperCase()) // ) // .call(group => // group // .selectAll('.button') // .data(d => [d]) // .join('rect') // .attr('class', 'button') // .attr('width', 90) // .attr('height', 30) // .style('mix-blend-mode', 'multiply') // .attr('fill', '#efefef') // .on('click', function(d, i) { // mutable selectedData = d; // svg.selectAll('.button').attr('fill', '#efefef'); // d3.select(this).attr('fill', 'silver'); // svg // .selectAll('.msg') // .data([d]) // .join('text') // .attr('class', 'msg') // .attr('x', width - 5) // .attr('y', 5) // .attr('text-anchor', 'end') // .text('clicked' + d) // .attr('dominant-baseline', 'hanging') // .transition() // .duration(1000) // .remove(); // }) // )31:[] 2e:{"title":"HOD - Option Payoffs","cells":[{"id":0,"value":"md`# HOD - Option Payoffs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2629,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2558,"value":"viewof CHART = {\n svg.node().value = svg;\n yield svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2626,"value":"{\n let comparisonType = html`

\n\n\n

`;\n\n yield comparisonType;\n d3.select(comparisonType)\n .selectAll('.data-button')\n .filter(function() {\n return d3.select(this).attr('id') === selectedData;\n })\n .style('background', 'gold')\n .style('box-shadow', 'none');\n d3.selectAll('.data-button').on('click', function() {\n mutable selectedData = d3.select(this).attr(\"id\");\n\n d3.selectAll('.data-button')\n .style('background', \"\")\n .style('box-shadow', '3px 3px 5px #222, inset -1px -1px 2px #fff')\n .style('border', \"\")\n .style('border', '1px solid gold');\n\n d3.select(this)\n .style('background', 'gold')\n .style('border', '2px solid black')\n .style('box-shadow', \"none\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"legend = {\n let id = \"legend\";\n return html`\n

${expirations.map(\n (name, i) => html`\n

\n ${d3.timeFormat('%Y %b %d')(d3.timeParse('%Q')(name))}\n

`\n )}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"viewof curve = Scrubber(\n [\n \"curveLinear\",\n\n \"curveNatural\",\n\n \"curveMonotoneX\",\n \"curveMonotoneY\",\n \"curveBasis\",\n \"curveCardinal\",\n \"curveCatmullRom\",\n \"curveStepAfter\",\n \"curveStepBefore\",\n \"curveStep\"\n ],\n { delay: 3000, autoplay: false, loop: false }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1431,"value":"viewof offset = Scrubber(\n [\"stackOffsetNone\", \"stackOffsetWiggle\", \"stackOffsetExpand\"],\n {\n delay: 10000,\n autoplay: false,\n value: 'stackOffsetWiggle',\n loop: true\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"viewof order = Scrubber(\n [\n \"stackOrderNone\",\n\n \"stackOrderInsideOut\",\n \"stackOrderAscending\",\n \"stackOrderDescending\",\n \"stackOrderReverse\"\n ],\n { delay: 3000, autoplay: false, loop: true }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1800,"value":"viewof colors = Scrubber(\n [\n \"interpolateRainbow\",\n\n \"interpolateViridis\",\n\n \"interpolateTurbo\",\n \"interpolateCool\",\n \"interpolateWarm\",\n \"interpolateSpectral\",\n \"interpolateSinebow\",\n \"interpolateMagma\",\n \"interpolateInferno\"\n ],\n { delay: 2000, autoplay: false, loop: true }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2563,"value":"md`## Selections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2551,"value":"svg = d3.create(\"svg\").attr(\"viewBox\", [5, 0, width, height]).attr(\"id\", \"SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2868,"value":"axisG = svg\n .selectAll(\".axisGroup\")\n .data([\"axisGroup\"], (d, i) => i)\n .join(\"g\")\n .attr(\"class\", (d) => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2546,"value":"streams = svg\n .selectAll('.mainGroup')\n .data(['mainGroup'], (d, i) => i)\n .join('g')\n .attr('class', d => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2810,"value":"MouseInteraction = CHART.selectAll(\"path\")\n .on(\"pointerenter\", function (d, i, e) {\n CHART.selectAll(\"path\").attr(\"opacity\", 0.6);\n d3.select(e[i])\n .attr(\"opacity\", 1)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 1);\n })\n .on(\"pointerleave\", () =>\n CHART.selectAll(\"path\").attr(\"opacity\", 1).attr(\"stroke-width\", 0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"md`### Stack`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2520,"value":"streams\n .selectAll(\"path\")\n .data(stackOptionSeries, (d, i) => i)\n .join(\"path\")\n .transition()\n .duration(1000)\n .attr(\"fill\", ({ key }, i) => color(i))\n // .style(\"mix-blend-mode\", \"screen\")\n .attr(\"d\", area)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2490,"value":"stackOptionSeries = d3\n .stack()\n .keys(expirations)\n .order(d3[order])\n .offset(d3[offset])(data_cast)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1529,"value":"md`### AREA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"area = d3\n .area()\n .x1((d, i) => x(+d.data.DT) + x.bandwidth())\n .x0((d, i) => x(+d.data.DT))\n .y0((d, i) => y(d[0]))\n .y1((d, i) => (!d[1] ? height - margin.bottom : y(d[1])))\n .curve(d3[curve])","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"md`## DATA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"expirations = [\n ...new Set(\n d3.merge(\n DailyOptionsQuote.map(eachDay =>\n eachDay.options.map(option => +option['expiry'])\n )\n )\n )\n].sort((a, b) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"dates = [...new Set(DailyOptionsQuote.map(x => +x['DT']))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"data_cast = DailyOptionsQuote.map(eachDay => {\n let seriesRolledUp = rollUpSeries(eachDay);\n\n let missingExpirations = getMissingExpirations(seriesRolledUp).map(x => [\n x,\n 0\n ]);\n\n let total = d3.sum(seriesRolledUp.map(x => x[1]));\n\n let it = Object.fromEntries(d3.merge([seriesRolledUp, missingExpirations]));\n\n it.DT = +eachDay.DT;\n it.total = total;\n return it;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":850,"value":"colorList = d3\n .ticks(0, turboColorScheme.length, expirations.length)\n .map(x => turboColorScheme[x])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1587,"value":"md`#### UTILITY`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2308,"value":"mutable selectedData = \"volume\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":870,"value":"sumON = d => {\n if (selectedData === \"value\") {\n return +d[\"volume\"] * ((+d[\"bid\"] + +d[\"ask\"]) / 2).toPrecision(2);\n } else {\n return +d[selectedData].toPrecision(2); //+(+d[\"open_interest\"])\n }\n}\n\n//+d[\"volume\"] * ((+d[\"bid\"] + +d[\"ask\"]) / 2).toPrecision(2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"getMissingExpirations = arr => {\n let seriesFound = arr.map(x => x[0]);\n return expirations.filter(x => !seriesFound.includes(x));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"parse_and_format_unix = dt => d3.timeFormat('%y-%m-%d')(d3.timeParse('%Q')(dt))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"getMissingExpirations(sampleRollUp).map(x => [x, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1030,"value":"rollUpSeries = eachDay =>\n d3.rollups(eachDay.options, v => d3.sum(v, sumON), d => +d.expiry)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"sampleRollUp = rollUpSeries(DailyOptionsQuote[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1580,"value":"md`#### SCRATCH`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"md`## SCALES`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1561,"value":"md`### 1. X`","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"x = d3\n .scalePoint()\n .domain(dates)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"x(dates[3])","pinned":true,"hidden":false,"mode":"ojs"},{"id":578,"value":"x(data_cast[3].DT)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1558,"value":"md`### 2. Y`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1677,"value":"yExtent = [\n d3.min(stackOptionSeries, d => d3.min(d, d => d[0])),\n d3.max(stackOptionSeries, d => d3.max(d, d => d[1]))\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"y = {\n let totalsExtent = [\n d3.min(stackOptionSeries, d => d3.min(d, d => d[0])),\n d3.max(stackOptionSeries, d => d3.max(d, d => d[1]))\n ];\n // let totals = d3.extent(stackOptionSeries[0].map(d => d.data.total));\n let max =\n offset === \"stackOffsetWiggle\" ? totalsExtent[1] * 1.15 : totalsExtent[1];\n let min = offset === \"stackOffsetWiggle\" ? totalsExtent[0] * 1.15 : 0;\n return d3\n .scaleLinear()\n .domain([min, max])\n .range([height - margin.bottom, margin.top])\n .clamp(true);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"y(data_cast[9].total)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1573,"value":"md`### 3. COLOR`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"color = d3\n .scaleSequential(d3[colors])\n .domain([0, expirations.length - 1])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"color(expirations[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1593,"value":"md`## AXIS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"xAxis = axisG\n .selectAll(\".xAxis\")\n .data([\"xAxis\"], (d, i) => i)\n .join(\"g\")\n .attr(\"class\", (d) => d)\n .call((g) =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n .tickFormat(d3.timeFormat(\"%b%-d\"))\n )\n .call((g) => g.select(\".domain\").remove())\n )\n .attr(\"opacity\", 0.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1881,"value":"yAxis = offset === \"stackOffsetWiggle\"\n ? axisG.selectAll(\".yAxis\").remove()\n : axisG\n .selectAll(\".yAxis\")\n .data([\"yAxis\"], (d, i) => i)\n .join(\"g\")\n .attr(\"class\", (d) => d)\n .call(\n (g) =>\n g\n .call(\n d3\n .axisRight(y)\n .ticks(5)\n .tickSize(width - margin.right - margin.left + 5)\n .tickFormat(fmt)\n )\n .attr(\"transform\", `translate(${margin.left},0)`)\n\n .call((g) => {\n g.selectAll(\".domain\").remove();\n g.selectAll(\"line\")\n .attr(\"stroke\", \"grey\")\n .style(\"mix-blend-mode\", \"multiply\");\n })\n\n // .transition()\n // .call((g) =>\n // g\n // .call((g2) => {\n //\n // // .tickFormat(fmt);\n // })\n )\n\n .attr(\"opacity\", 0.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2853,"value":"fmt = offset === \"stackOffsetExpand\"\n ? d3.format(\".0%\")\n : selectedData === \"value\"\n ? d3.format(\",.0f\")\n : d3.format(\",.0s\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1754,"value":"md`## Layout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"margin = ({ top: 10, right: 40, bottom: 25, left: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\", 'd3-array')","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"import { DailyOptionsQuote } from '@stroked/hod-daily-quote'","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"import { turboColorScheme } from '@stroked/how-to-slice-a-sphere'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1416,"value":"import { Scrubber } from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"import { radio } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2136,"value":"// viewof offset = radio({\n// title: 'Stack Offset',\n// description: 'Please select your offset preference',\n// options: [\n// { label: 'No Offset', value: 'stackOffsetNone' },\n// { label: 'Wiggle Offset', value: 'stackOffsetWiggle' }\n// ],\n// value: 'stackOffsetWiggle'\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2374,"value":"// html`

${viewof curve} ${viewof offset} ${viewof order}${viewof colors}

\n// \n// // `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2616,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}