Published
Edited
May 13, 2022
1 fork
5 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewBox = `${-leftMargin} ${-verticalPadding} ${width + 250} ${
height + verticalPadding
}`.split(" ")

Insert cell
verticalPadding = labelSize / 2
Insert cell
leftMargin = 120
Insert cell
Insert cell
Insert cell
Insert cell
// fontSize = 14
Insert cell
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})`;
}
Insert cell
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();
}
);
}
Insert cell
Insert cell
Insert cell
filteredData = tradingDayData[day_index].options.filter(
(x) => x[valueProperty] > valueLimit
)
Insert cell
// valueProp = "volume"
Insert cell
DayData = {
const rolledup = d3.rollups(
filteredData,
(v) => [v, d3.sum(v, (d) => d[valueProperty])],
(d) => +d.expiry,
(d) => d.strike
);
return rolledup;
}
Insert cell
Insert cell
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;
}, [])
Insert cell
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))
Insert cell
Insert cell
selectedDataSearch = (search) =>
tradingDayData[day_index].options.find((item) => item.OC.series === search)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { DailyStockQuote } from "@stroked/hod-daily-quote"
Insert cell
Insert cell
_ = "require('lodash')"
Insert cell

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.
Learn more