The avatar for @stroked
Ajay
Published
Edited
Apr 27, 2020
1 fork
2 stars
.
Portrait GalleryHow to Slice a SphereSphere SurfaceTesla AirwaysPattern PrintingEconomic IndicatorsBurberryLV BrandingTEXTING & TITLINGBackgroundsHOD - Daily Option StackMengenlehreuhr - Set Theory ClockCalendar Breakdown
Payoff Chart
Also listed in…
Derivatives Pricing
Financial Charts
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// yScale(-maxPosition, maxPosition)
Insert cell
Insert cell
Insert cell
Insert cell
mutable temp2 = null
Insert cell
d3
.select(temp2)
.node()
.getBoundingClientRect().y
Insert cell
temp.each(function(g) {
mutable temp2 = this;
// let node = this.parentNode.insertBefore(this.cloneNode(true), true);
// cloneNode.push(node);
})
Insert cell
mutable cloneNode = []
Insert cell
cloneNode.map(x =>
d3
.select(x)
.attr('x', width / 2)
.attr('y', h)
)
Insert cell
mutable temp = null
Insert cell
xAxis = (sel, scale) =>
sel
.filter(d => d === 'x')
.selectAll('.x-axis')
.data(['x-axis'])
.join('g')
.attr('class', d => d)
.attr('transform', `translate(${0},${h})`)
.call(
d3
.axisTop()
.scale(scale)
.ticks(strike / 10)
.tickSize(h * 2)
// .tickPadding(-h - 4)
)
.call(g => {
let text = g
.selectAll('text')
.attr('font-size', 12)
.attr('dominant-baseline', 'baseline')
.attr('fill', 'silver');
mutable temp = text;
g.selectAll('line').attr('opacity', 0.1);
// mutable temp = text;
})
Insert cell
Insert cell
Insert cell
value = price * 100
Insert cell
maxPosition = (maxStrike - strike) * 100 - price
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
IBM_Options = OptionChainFetcher('IBM')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { OptionChainFetcher } from '@stroked/yahoofinance'
Insert cell
d3 = require('d3')
Insert cell
Insert cell
viewBox = `${-minStrike} ${-50} ${-minStrike} ${100}`
Insert cell
html`<svg height=${h} width=${width} viewBox="${viewBox}" >

<path stroke='black' fill=none
d="




M${minStrike} ${50}
L${w + strike} ${-w + maxStrike}

${callGraph}

}"

>



</path>

<svg>`
Insert cell
callGraph = `M${minStrike} ${h / 2 - price}
L${strike} ${h / 2 - price}
l${strike + w} ${-w}
`
Insert cell
Insert cell
CLIPPING_WORKSPACE = html`<svg height=${h} width=${w}>
<defs>
<clipPath id="clip">
<rect x=${m} y=${m} height=${h - 2 * m} width=${w - 2 * m} fill=black>
</clipPath>
</defs>

<line x1=${0} x2=${w}
y1=0 y2="${h}" clip-path="url(#clip)" stroke-width=20 stroke="black" />
${svg`<path d="m${m} ${m}h${w - 2 * m} v${h - 2 * m} h${-w +
2 * m}z" fill="white" opacity=0.2 stroke=black stroke-width=10></path>`}
</svg>`
Insert cell
{
let h = 200;
let view = html`<svg height=${h} width=${width} viewBox="${m} ${m} ${width} ${h}">




</svg>`;

yield view;
}
Insert cell

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.
Learn more