Published
Edited
May 16, 2022
6 stars
mutable hovered = null
tradingDayData[day_index].options.filter((x) => {
return +x.expiry === clicked?.name;
})
filteredData = tradingDayData[day_index].options.filter((x) => {
if (clicked) {
if (clicked.depth === 0) {
return clicked.name === +x.expiry && x[valueProperty] > valueLimit;
} else if (clicked.depth === 1) {
return clicked.name === +x.strike && x[valueProperty] > valueLimit;
} else if (clicked.depth === 2) {
return clicked.name === x.type && x[valueProperty] > valueLimit;
}
} else return x[valueProperty] > valueLimit;
})
// valueProp = "volume"
DayData = {
const rolledup = d3.rollups(
filteredData,
(v) => [v, d3.sum(v, (d) => d[valueProperty])],
(d) => +d.expiry,
(d) => d.strike
);
return rolledup;
}
DayData[0] //[0][1]
links = d3.merge(
//DayData is an array of touples [series,strike[]]
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
};
});
tempArr.push(strike);
return [
{
source: series[0],
target: strike[0],
value: strike[1][0][0][valueProperty]
},
...call_and_put
];
});
return d3.merge(seriesGroups);
})
)
mutable tempArr = []
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 = Sankey.sankey()
.nodeId((d) => d.name)
.nodeSort((a, b) => {
d3.descending(a.name, b.name);
})
.nodeWidth(nodeWidth)
.nodePadding(padding)
.nodeId((d) => d.name)
.nodeAlign(Sankey.sankeyLeft)
.extent([
[5, 5],
[width, height]
])
// .nodeSort(customSorting) //(a, b) => d3.descending(a.value, b.value))
.linkSort((a, b) => d3.descending(a.value, b.value))
selectedDataSearch = (search) =>
tradingDayData[day_index].options.find((item) => item.OC.series === search)
leftMargin = 120
verticalPadding = labelSize / 2
viewBox = `${-leftMargin} ${-verticalPadding} ${width + 250} ${
height + verticalPadding
}`.split(" ")
labelPositioner = (d) => {
const startLabel = (d) => d.depth === 0;
const strikeLabel = (d) => d.depth === 2;
// (d) => d.x0 < leftMargin;
// const endLabel = (d) => d.x0 > width - 100;
// ? d.x0 - (d.x1 - d.x0) / 2
return `translate(${
startLabel(d) ? d.x0 - leftMargin : strikeLabel(d) ? d.x1 + 15 : d.x1 + 15
},${(d.y1 + d.y0) / 2})`;
}
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.
