inside each g-element

30:T64d,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(); } ); }31:T129b,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(); } ); }32:T7cf,renderNodes = ({ svg, nodes, expiryColor, deltaColor }) => { // 1 g-element per datum const nodeG = svg .select(".nodes") .selectAll(".sankey-chart-node") .data(nodes, (d, i) => d.name) .join( (enter) => { let g = enter.append("g").attr("class", "sankey-chart-node"); g.append("rect") .attr("x", (d) => d.x0 - nodeRadius) .attr("y", (d) => d.y0) // .attr("opacity", 0) .attr("height", (d) => 0.1) .attr("width", (d) => { // const isVolume = d.depth === 0; // return !isVolume ? nodeWidth : return nodeWidth + 2 * nodeRadius; }) .attr("rx", (d) => 5) // (d.depth === 3 ? 0 : 3)) .attr("ry", (d) => 5) // (d.depth === 3 ? 0 : 6)) .attr("stroke-width", "1") .attr("stroke", "#666") .attr("fill", (d) => { const match = expirations.indexOf(d.name); //selectedDataSearch(d.dataItem?.OC.series); if (match >= 0) { return color(match); } return "black"; }) .transition() .duration(2000) .attr("height", (d) => d.y1 - d.y0) .attr("clip-path", (d) => (d.depth === 0 ? "url(#clip)" : "none")); // inside each g-element g.append("title").text((d) => `${d.name} - ${d.value}`); }, (update) => { update .select("rect") .transition() .duration(2000) .attr("y", (d) => d.y0) .attr("height", (d) => d.y1 - d.y0); update.select("title").text((d) => `${d.name} - ${d.value}`); }, (exit) => { exit.remove(); } ); // nodeG.selectAll("rect"); svg.selectAll(".nodes rect").on("click", function (e, d, i) { if (+clicked?.name === +d.name) { mutable clicked = null; } else { mutable clicked = d; } }); // inside each g-element }33:[] 2e:{"title":"Drill Down Sankey","cells":[{"id":0,"value":"# Drill Down Sankey\n\n## Series, Strike & Type\n","pinned":false,"hidden":false,"mode":"md"},{"id":1279,"value":"## Options Table as Sankey Flow \n\nDate: ${d3.utcFormat(' %Y %b %-d, %A')(tradingDayData[day_index].DT)} \n\nAggregating on \\`${valueProperty}\\`","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"Chart = {\n RESET;\n const sankey_svg = html`\n `;\n\n yield sankey_svg;\n const svg = d3.select(sankey_svg).attr(\"viewBox\", viewBox);\n\n // .attr(\"viewBox\", [0, 0, width + 250, height]);\n // sankey_svg.value = d3.select(sankey_svg);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1782,"value":" !Click on any of the nodes for a drill-down / focussed view\n !Click on it again to go back to top-level view\n\n---\n","pinned":false,"hidden":false,"mode":"md"},{"id":1810,"value":"## Press Play to Auto Move Date ","pinned":false,"hidden":false,"mode":"md"},{"id":1259,"value":"viewof day_index = Scrubber(d3.range(16), {\n delay: 3000,\n autoplay: false,\n loop: true,\n initial: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"legend = {\n let id = \"legend\";\n return html`\n

${expirations.map(\n (name, i) => html`\n

\n ${d3.timeFormat(\"%Y %b %d\")(d3.timeParse(\"%Q\")(name))}\n

`\n )}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"viewof valueLimit = Inputs.range([200, 10000], {\n label: \"Contract Limit\",\n step: 200,\n value: 1000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof valueProperty = Inputs.radio([\"volume\", \"open_interest\", \"OIC\"], {\n label: \"Select one\",\n value: \"volume\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"color = d3\n .scaleSequential(d3[colors])\n .domain([0, series.length - 1])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"Render = {\n const { nodes, links } = sankey_data;\n const svg = d3.select(Chart);\n\n const color = d3\n .scaleSequential(d3[colors])\n .domain([0, series.length - 1])\n .clamp(true);\n\n const deltaColorScale = d3\n .scaleDiverging([\"black\", \"grey\", \"#f5f5f5\"]) //(t) => d3.interpolateRdBu(t / 2))\n .domain([-1, 0, 1]);\n // .range([\"black\", \"grey\", \"#f5f5f5\"]);\n // .interpolator(d3[colors]);\n\n renderLinks({ svg, links, color });\n renderLabels({ svg, nodes });\n renderNodes({\n svg,\n nodes,\n expiryColor: color\n // deltaColor: deltaColorScale\n });\n yield svg;\n\n const linkPaths = svg.selectAll(\".sankey-chart-link\");\n linkPaths.on(\"pointer\", function (e, d, i) {\n const selected = d.referrer;\n linkPaths\n .style(\"opacity\", (any) => (any.referrer === selected ? 1 : 0.25))\n .style(\"mix-blend-mode\", \"multiply\");\n\n // .style(\"mix-blend-mode\", \"normal\");\n });\n\n svg.selectAll(\"text\").style(\"pointer-events:none;\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"mutable clicked = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1679,"value":"{\n yield \"I handle link hovering\";\n\n d3.select(Chart)\n .selectAll(\".links path\")\n .on(\"mousemove\", (e, d, i) => {\n d3.selectAll(\".links path\").style(\"opacity\", 0.3);\n const node = d3.select(e.currentTarget).style(\"opacity\", 0.9);\n d3.select(node.node().parentNode).raise();\n if (+hovered === +d.index) {\n return; // mutable hovered = null;\n } else {\n mutable hovered = d.index;\n }\n })\n .on(\"mouseout\", () => {\n d3.selectAll(\".links path\").style(\"opacity\", 0.6);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1489,"value":"linkColor = (d) => {\n const match = series.indexOf(d.dataItem?.OC.series); //selectedDataSearch(d.dataItem?.OC.series);\n if (match >= 0) {\n // temp.push(match);\n return color(match);\n }\n return color(expirations.indexOf(d.source.name));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"viewof height = Inputs.range([0, 1400], { label: \"Height\", step: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"viewof RESET = Inputs.button(\"Get new data...\", {\n label: \"RESET\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1530,"value":"linkText = (d) => {\n const depth = d.source.depth;\n // tempArr.push(d);\n switch (depth) {\n case 0:\n return \"\";\n // return `${d.value} ${valueProperty}`;\n case 1:\n return `${d.value} ${valueProperty}`;\n // return d.source.depth === 0\n // ? `${d.value} OI`\n // : d.source.depth === 1\n // ? `${d.value} Vol`\n // : d.source.depth === 2\n // ? `${d.value} OIC`\n // : \"\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1847,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"mutable hovered = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"md`---\n\n\n## DATA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"tradingDayData = d3.pairs(DailyOptionsQuote).map(([d1, d2]) => {\n d1.options.map((each) => {\n // return\n each.newOI = d2.options.find(\n (any) => any.alias === each.alias\n )?.open_interest;\n each.OIC = each.newOI - each.open_interest;\n if (each.OIC < 0) {\n each.OIC = Math.abs(each.OIC);\n each.negOIC = true;\n }\n return each;\n });\n return d1;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1461,"value":"tradingDayData[day_index].options.filter((x) => {\n return +x.expiry === clicked?.name;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"filteredData = tradingDayData[day_index].options.filter((x) => {\n if (clicked) {\n if (clicked.depth === 0) {\n return clicked.name === +x.expiry && x[valueProperty] > valueLimit;\n } else if (clicked.depth === 1) {\n return clicked.name === +x.strike && x[valueProperty] > valueLimit;\n } else if (clicked.depth === 2) {\n return clicked.name === x.type && x[valueProperty] > valueLimit;\n }\n } else return x[valueProperty] > valueLimit;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1002,"value":"// valueProp = \"volume\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1088,"value":"DayData = {\n const rolledup = d3.rollups(\n filteredData,\n (v) => [v, d3.sum(v, (d) => d[valueProperty])],\n (d) => +d.expiry,\n (d) => d.strike\n );\n return rolledup;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1563,"value":"DayData[0] //[0][1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1085,"value":"links = d3.merge(\n //DayData is an array of touples [series,strike[]]\n DayData.map((series) => {\n const seriesGroups = series[1].map((strike) => {\n const call_and_put = strike[1][0].map((each) => {\n return {\n source: strike[0],\n target: each.type,\n value: each[valueProperty],\n dataItem: each\n };\n });\n\n tempArr.push(strike);\n return [\n {\n source: series[0],\n target: strike[0],\n value: strike[1][0][0][valueProperty]\n },\n ...call_and_put\n ];\n });\n return d3.merge(seriesGroups);\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1617,"value":"mutable tempArr = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"nodes = links.reduce((acc, each) => {\n //source\n const sourceMatch = acc.filter((d) => d.name === each.source);\n if (sourceMatch.length === 0) {\n acc.push({ name: each.source }); //dataItem: each.dataItem\n }\n\n //target\n const targetMatch = acc.filter((d) => d.name === each.target);\n if (targetMatch.length === 0) {\n acc.push({ name: each.target }); //, dataItem: each.dataItem\n }\n return acc;\n}, [])","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"SankeyLayout = Sankey.sankey()\n .nodeId((d) => d.name)\n .nodeSort((a, b) => {\n d3.descending(a.name, b.name);\n })\n .nodeWidth(nodeWidth)\n .nodePadding(padding)\n .nodeId((d) => d.name)\n .nodeAlign(Sankey.sankeyLeft)\n .extent([\n [5, 5],\n [width, height]\n ])\n // .nodeSort(customSorting) //(a, b) => d3.descending(a.value, b.value))\n .linkSort((a, b) => d3.descending(a.value, b.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"sankey_data = {\n // const nodeCopy = nodes.map((x) => structuredClone(x));\n // const linkCopy = links.map((each) => structuredClone(each));\n\n const nodeCopy = JSON.parse(JSON.stringify(nodes)); //.map((x) => _.cloneDeep(x));\n const linkCopy = JSON.parse(JSON.stringify(links)); //.map((each) => _.cloneDeep(each));\n return SankeyLayout({ nodes: nodeCopy, links: linkCopy });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"selectedDataSearch = (search) =>\n tradingDayData[day_index].options.find((item) => item.OC.series === search)","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"value":"nodeRadius = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"nodeWidth = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"tickSize = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"labelSize = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"padding = labelSize","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"margin = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":1852,"value":"leftMargin = 120","pinned":true,"hidden":false,"mode":"ojs"},{"id":1859,"value":"verticalPadding = labelSize / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1854,"value":"viewBox = `${-leftMargin} ${-verticalPadding} ${width + 250} ${\n height + verticalPadding\n}`.split(\" \")\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1850,"value":"labelPositioner = (d) => {\n const startLabel = (d) => d.depth === 0;\n const strikeLabel = (d) => d.depth === 2;\n // (d) => d.x0 < leftMargin;\n // const endLabel = (d) => d.x0 > width - 100;\n\n // ? d.x0 - (d.x1 - d.x0) / 2\n return `translate(${\n startLabel(d) ? d.x0 - leftMargin : strikeLabel(d) ? d.x1 + 15 : d.x1 + 15\n },${(d.y1 + d.y0) / 2})`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof colors = Scrubber(\n [\n \"interpolateViridis\",\n\n \"interpolateTurbo\",\n \"interpolateCool\",\n \"interpolateWarm\",\n \"interpolateSpectral\",\n \"interpolateSinebow\",\n \"interpolateRainbow\",\n \"interpolateMagma\",\n \"interpolateInferno\"\n ],\n { delay: 2000, autoplay: false, loop: true }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"series = [\n ...new Set(\n tradingDayData[day_index].options\n .sort((a, b) => d3.ascending(a.expiry, b.expiry))\n .map((option) => option.OC.series)\n )\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"expirations = [\n ...new Set(tradingDayData[day_index].options.map((option) => +option.expiry))\n].sort((a, b) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {\n DailyOptionsQuote,\n flatten_daily_options_quote\n} from \"@stroked/hod-daily-quote\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"Sankey = require(\"d3-sankey\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}