viewBox = `${-leftMargin} ${-verticalPadding} ${width + 250} ${
height + verticalPadding
}`.split(" ")
verticalPadding = labelSize / 2
leftMargin = 120
renderLinks = ({ svg, links, color }) => {
// mutable renderedLinks = links;
const link = svg
.select(".links")
.selectAll(".sankey-chart-link")
.data(
links,
// .filter(any => any.source.layer > 0),
(d, i) => `${d.source.name}-${d.target.name}`
)
.join(
(enter) => {
const g = enter
.append("g")
.attr("class", "sankey-chart-link")
.style("mix-blend-mode", "none");
g.append("title").text(
(d) => `${d.source.name} → ${d.target.name} : ${d.value}`
);
const linkEl = g
.append("path")
.attr("class", (d) => d.source.name)
.attr("fill", "none")
.attr("stroke-width", 0.1)
// .style("opacity", 0)
.attr("d", Sankey.sankeyLinkHorizontal())
.attr(
"id",
(d, i) => "linklabel_" + i
// d.source.name +
// "_" +
// d.target.name +
// "_" +
// d.source.index +
// "_" +
// d.target.index
)
.style("opacity", 0.65)
.transition()
.duration(2000)
.attr("stroke", (d) => {
const match = series.indexOf(d.dataItem?.OC.series); //selectedDataSearch(d.dataItem?.OC.series);
if (match >= 0) {
// temp.push(match);
return color(match);
}
return color(expirations.indexOf(d.source.name));
})
.attr("stroke-width", (d) => Math.max(1, d.width));
// linkLength.push(linkEl.node());
g.append("text")
.style("mix-blend-mode", "lighten")
.append("textPath")
.attr("alignment-baseline", "middle")
.attr(
"href",
(d, i) => "#linklabel_" + i
// d.source.name +
// "_" +
// d.target.name +
// "_" +
// d.source.index +
// "_" +
// d.target.index
)
.attr("fill", (d) => "#666") //color(d.source.dataItem.expiry))
// .attr('stroke', 'black')
// .attr('stroke-width', '0.5')
.attr("font-size", labelSize)
.attr("startOffset", width / 6)
.style("pointer-events", "none")
.attr("text-anchor", "middle")
.text((d) => {
return d.source.name;
// return d.source.depth === 0
// ? `${d.value} OI`
// : d.source.depth === 1
// ? `${d.value} Vol`
// : d.source.depth === 2
// ? `${d.value} OIC`
// : "";
})
.style("opacity", 1);
},
(update) => {
update
.select("path")
// .attr("id", (d, i) => "linklabel" + i)
.transition()
.duration(2000)
.attr("d", Sankey.sankeyLinkHorizontal())
.attr("stroke-width", (d) => Math.max(1, d.width))
.attr(
"id",
(d, i) => "linklabel_" + i
// "linklabel_" +
// d.source.name +
// "_" +
// d.target.name +
// "_" +
// d.source.index +
// "_" +
// d.target.index
)
.attr("stroke", (d) => {
const match = series.indexOf(d.dataItem?.OC.series); //selectedDataSearch(d.dataItem?.OC.series);
if (match >= 0) {
// temp.push(match);
return color(match);
}
return color(expirations.indexOf(d.source.name));
});
update
.select("textPath")
.transition()
.duration(2000)
.attr(
"href",
(d, i) => "#linklabel_" + i
// "#linklabel_" +
// d.source.name +
// "_" +
// d.target.name +
// "_" +
// d.source.index +
// "_" +
// d.target.index
)
.text((d) => {
return d.source.name;
// return d.source.depth === 0
// ? `${d.value} OI`
// : d.source.depth === 1
// ? `${d.value} Vol`
// : d.source.depth === 2
// ? `${d.value} OIC`
// : "";
});
//d => d.target.name + ' ' + d.referrer);
},
(exit) => {
exit
.call((g) =>
g
.select("path")
.transition()
.duration(1500)
.attr("stroke-width", (d) => 1)
)
.transition()
// .duration(1000)
.delay(1000)
.remove();
}
);
}
// fontSize = 14
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})`;
}
renderLabels = ({ svg, nodes, width }) => {
const labelG = svg
.select(".labels")
.selectAll(".sankey-chart-label")
.data(nodes, (d, i) => d.name)
.join(
(enter) => {
const g = enter
.append("g")
.attr("class", "sankey-chart-label")
.attr("transform", labelPositioner);
const labelEls = g
.append("text")
.attr("font-size", (d) => {
if (d.depth === 3) {
// temp.push(d);
return labelSize * 3;
}
return labelSize * 2;
})
.attr("fill", "#000")
// .attr('stroke', 'white')
.attr("stroke-width", 0.3)
.attr("font-weight", 600)
.style("pointer-events", "none")
.text((d) => {
const match = expirations.indexOf(d.name);
return match >= 0 ? series[match] : d.name;
})
.attr("alignment-baseline", "middle")
.style(
"text-shadow",
`0 1px 0 rgba(255,255,255,0.8), 1px 0 0 rgba(255,255,255,0.8), 0 -1px 0 rgba(255,255,255,0.8), -1px 0 0 rgba(255,255,255,0.8)`
);
g.append("rect")
.attr("height", 20)
.attr("width", (d) => d.name.length * 8)
.attr("fill", "white")
.attr("y", -labelSize * 0.6)
// .attr("x", -10)
.style("mix-blend-mode", "screen")
.lower();
},
(update) => {
update.transition().duration(2000).attr("transform", labelPositioner);
},
(exit) => {
exit.remove();
}
);
}
filteredData = tradingDayData[day_index].options.filter(
(x) => 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;
}
links = 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);
})
)
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 - 5, height - 5]
])
// .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)
import { DailyStockQuote } from "@stroked/hod-daily-quote"
_ = "require('lodash')"
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.
