Public
Edited
Jul 22, 2024
stackOptionSeries = d3
.stack()
.keys(expirations)
.order(d3[order])
.offset(d3[offset])(data_cast)
area = d3
.area()
.x1((d, i) => x(+d.data.DT) + x.bandwidth())
.x0((d, i) => x(+d.data.DT))
.y0((d, i) => y(d[0]))
.y1((d, i) => (!d[1] ? height - margin.bottom : y(d[1])))
.curve(d3[curve])
mutable selectedData = "volume"
getMissingExpirations(sampleRollUp).map(x => [x, 0])
sampleRollUp = rollUpSeries(DailyOptionsQuote[1])
x(dates[3])
x(data_cast[3].DT)
y(data_cast[9].total)
color(expirations[1])
import { radio } from '@jashkenas/inputs'
// viewof offset = radio({
// title: 'Stack Offset',
// description: 'Please select your offset preference',
// options: [
// { label: 'No Offset', value: 'stackOffsetNone' },
// { label: 'Wiggle Offset', value: 'stackOffsetWiggle' }
// ],
// value: 'stackOffsetWiggle'
// })
// html`<div style="display:flex;flex-wrap:wrap; justify-content:space-between;align-items:center;">${viewof curve} ${viewof offset} ${viewof order}${viewof colors}</div>
// <style>
// form{
// flex:1 1;
// height:4px;
// }
// </style>
// // `
// 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();
// })
// )
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.
