//xAxis is time
//yaxis is strikes
//colored by series
//stroked by option-type
//scaled by $value of trade
mutable selection = OptionTrades
OptionTrades = transactions.filter(x => x.qty > minQuantity)
xScale(new Date('2019-10-25T09:35'))
OptionTrades
yScale = d3.scaleLinear(d3.extent(OptionTrades, d => +d.strike), [
height - margin.bottom,
margin.top
])
md`<div style="min-width:100%;text-align:center;font-size:2rem;color:purple; background:thistle;">SIZE</div>`
selection
radiusScale = d3
.scaleSqrt()
.range([1, 20])
.domain(d3.extent(OptionTrades, d => d.qty * d.price))
radiusScale(100)
html`<div style="display:flex;">${seriesColorScale
.range()
.map(x => `<div style="background:${x};">${x}</div>`)}</div>`
seriesColorScale = d3.scaleOrdinal(
expirations,
d3.quantize(d3.interpolateViridis, expirations.length - 1)
)
expirationColor = d3
.scaleTime()
.interpolate(() => d3.interpolateCool)
.domain(d3.extent(expirations))
deltaScale = d3
.scaleDiverging()
.domain([-1, 0, 1])
.interpolator(d3.interpolatePuOr)
d3.scaleDiverging()
d3.timeParse('%Y-%m-%d' + ' %H:%M:%S')(DT + " 15:59:58")
d3.timeParse('%Y-%m-%d %H:%M')('2019-10-25 09:30')
d3.timeParse('%H:%M:%S')("15:59:58")
html`<style>
hr{
border-top: 3px double salmon;
}
</style>`
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.
