Published
Edited
May 4, 2022
1 fork
4 stars
verticalPadding = fontSize / 2
viewBox = `${-leftMargin} ${-verticalPadding} ${width + 250} ${
height + verticalPadding
}`.split(" ")
leftMargin = 120
mutable temp = []
data = structuredClone(DailyOptionsQuote)
tradingDayData = d3.pairs(data).map(([d1, d2]) => {
const retD1 = { ...d1 };
retD1.options = d1.options
.filter((x) => x["volume"] > valueLimit)
.map((each) => {
// return
each.newOI = d2.options.find(
(any) => any.alias === each.alias
)?.open_interest;
each.totalValue = each.open_interest * each.bid;
each.OIC = each.newOI - each.open_interest;
if (each.OIC < 0) {
each.OIC = Math.abs(each.OIC);
each.negOIC = true;
}
return each;
});
return retD1;
})
sumON = (d) => {
if (valueProperty === "value") {
return +d["volume"] * ((+d["bid"] + +d["ask"]) / 2).toPrecision(2);
} else {
return +d[valueProperty].toPrecision(2); //+(+d["open_interest"])
}
}
rollUpSeries = (eachDay) =>
d3.rollups(
eachDay,
(v) => d3.sum(v, sumON),
(d) => +d.expiry
)
rollupDay = (filteredData) =>
d3.rollups(
filteredData,
(v) => [v, d3.sum(v, (d) => d[valueProperty])],
(d) => +d.expiry,
(d) => d.strike
)
generateLinks = (dayData) => {
return d3.merge(
dayData.map((series) => {
const seriesGroups = series[1].map((strike) => {
const call_and_put = strike[1][0].map((each) => {
return {
source: strike[0],
target: each.type,
value: each[valueProperty],
dataItem: each
};
});
return [
{
source: series[0],
target: strike[0],
value: d3.sum(strike[1][0], (d) => d[valueProperty])
},
...call_and_put
];
});
return d3.merge(seriesGroups);
})
);
}
links = {
return d3.merge(
tradingDayData.map((eachDay) => {
// const filtered = eachDay.options
let seriesRolledUp = rollUpSeries(eachDay.options);
// return seriesRolledUp;
const dayLinks = generateLinks(rollupDay(eachDay.options));
const links = seriesRolledUp.map((siri) => {
return {
source: d3.utcFormat("%b %-d")(eachDay.DT),
target: siri[0],
value: siri[1]
};
});
return [...dayLinks, ...links];
})
);
}
nodes = links.reduce((acc, each) => {
//source
const sourceMatch = acc.filter((d) => d.name === each.source);
if (sourceMatch.length === 0) {
acc.push({ name: each.source }); //dataItem: each.dataItem
}
//target
const targetMatch = acc.filter((d) => d.name === each.target);
if (targetMatch.length === 0) {
acc.push({ name: each.target }); //, dataItem: each.dataItem
}
return acc;
}, [])
SankeyLayout = {
return (
Sankey.sankey()
.nodeId((d) => d.name)
// .nodeSort((a, b) => {
// d3.descending(a.name, b.name);
// })
.nodeWidth(nodeWidth)
.nodePadding(padding + fontSize / 2)
.nodeId((d) => d.name)
.nodeAlign(Sankey.sankeyLeft)
.extent([
[0, fontSize],
[width - 5, height - 5]
])
);
}
// .linkSort((a, b) => d3.descending(a.value, b.value))
// selectedDataSearch = (search) =>
// tradingDayData[day_index].options.find((item) => item.OC.series === search)
fontSize = 14
filteredData = d3.merge(tradingDayData.map((x) => x.options))
FileAttachment("Screen Shot 2022-04-29 at 12.34.40 PM.png").image()
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.
