inside each g-element

31:T535,Render = { SankeyLayout.nodeSort((a, b) => { if (a.depth === 0 && b.depth === 0) { return 0; } if (a.depth === 1 && b.depth === 1) { return d3.ascending(a.name, b.name); } if (a.depth === 2 && b.depth === 2) { return d3.ascending(a.name, b.name); } return d3.ascending(a.value, b.value); }).linkSort((a, b) => {}); const { nodes, links } = SankeyLayout(sankey_data); const svg = d3.select(Chart); const color = d3 .scaleSequential(d3[colors]) .domain([0, series.length - 1]) .clamp(true); const deltaColorScale = d3 .scaleDiverging(["black", "grey", "#f5f5f5"]) //(t) => d3.interpolateRdBu(t / 2)) .domain([-1, 0, 1]); // .range(["black", "grey", "#f5f5f5"]); // .interpolator(d3[colors]); renderLinks({ svg, links, color }); renderLabels({ svg, nodes }); renderNodes({ svg, nodes, expiryColor: color // deltaColor: deltaColorScale }); yield svg; const linkPaths = svg.selectAll(".sankey-chart-link"); linkPaths.on("pointer", function (e, d, i) { const selected = d.referrer; linkPaths .style("opacity", (any) => (any.referrer === selected ? 1 : 0.25)) .style("mix-blend-mode", "multiply") .style("mix-blend-mode", "normal"); }); svg.selectAll("text").style("pointer-events:none;"); }32:Tedd,renderLinks = ({ svg, links, color }) => { // mutable renderedLinks = links; const linksReverse = links.reverse(); const link = svg .select(".links") .selectAll(".sankey-chart-link") .data( linksReverse, // .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_" + d.source.name + "_" + d.target.name ) .style("opacity", 0.55) .transition() .duration(2000) .attr("stroke", (d) => { let match = series.indexOf(d.dataItem?.OC.series); //selectedDataSearch(d.dataItem?.OC.series); if (match < 0) { match = expirations.indexOf(d.target.name); if (match < 0) { match = expirations.indexOf(d.source.name); } // temp.push(match); // return color(match); } return color(match); }) .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_" + d.source.name + "_" + d.target.name ) // TEXT TURNED OFF. ADD FILL SHOW TEXT .attr("fill", (d) => "none") //color(d.source.dataItem.expiry)) // .attr('stroke', 'black') // .attr('stroke-width', '0.5') .attr("font-size", fontSize * 2) .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)); update .select("textPath") .transition() .duration(2000) // .attr("href", (d, i) => "#linklabel" + i) .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(1500) .remove(); } ); }33:T778,renderNodes = ({ svg, nodes, expiryColor, deltaColor }) => { // 1 g-element per datum const nodeG = svg .select(".nodes") .selectAll(".sankey-chart-node") .data(nodes, (d, i) => d.layer + "-" + 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) => d.y1 - d.y0) .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) => { "black"; // if (d.depth === 0) return expiryColor(d.dataItem.delta); // return deltaColor(d.dataItem.delta); }) // .attr("fill-opacity", (d) => 0) .transition(2000) // .delay(1000) // .duration(2000) // .attr("fill-opacity", (d) => 1) // .attr("opacity", 1) .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() // .delay(1000) .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.transition().duration(1500).remove(); } ); // inside each g-element }34:T5e3,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 fontSize * 3; } return fontSize * 2; }) .attr("fill", "#000") // .attr('stroke', 'white') .attr("stroke-width", 0.3) .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 #fff, 1.5px 0 0 #fff, 0 -1px 0 #fff, -1.5px 0 0 #fff` ); g.append("rect") .attr("height", 20) .attr("width", (d) => d.name.length * 8) .attr("fill", "white") .attr("y", -fontSize * 0.6) // .attr("x", -10) .style("mix-blend-mode", "screen") .lower(); }, (update) => { update.transition().duration(2000).attr("transform", labelPositioner); }, (exit) => { exit.remove(); } ); }35:[{"id":"40a12be495651d55784232cccb9d0c66dfd426517792d288fc7651c4bbbfb54014b2ab672b4db3852dd3783d961222141f61c4b82720f962ad6cc3d0319db2e3","href":"https://static.observableusercontent.com/files/40a12be495651d55784232cccb9d0c66dfd426517792d288fc7651c4bbbfb54014b2ab672b4db3852dd3783d961222141f61c4b82720f962ad6cc3d0319db2e3","name":"Screen Shot 2022-04-29 at 12.34.40 PM.png","type":"image/png","lastModified":1651250087421.422,"size":794184}] 2f:{"title":"Options Trading Activity as Sankey Flow","cells":[{"id":0,"value":"# Options Trading Activity as Sankey Flow\nA Month of options trading visualized in a Sankey Chart\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1279,"value":"## Dates, Series, Strike & Type\n \n\n\n\nData: Option Tables from ${d3.extent(tradingDayData,d=>d.DT).map(each=>d3.utcFormat(' %Y %b %-d, %A')(each)).join('.....to....')} \n\nAggregating on \\`${valueProperty}\\`","pinned":false,"hidden":false,"mode":"md"},{"id":1903,"value":"horizontalAxis()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1901,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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}","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":1999,"value":" If there are too many links then increase the contract limit...","pinned":false,"hidden":false,"mode":"md"},{"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":2004,"value":" To aggregate on a different property...","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"viewof valueProperty = Inputs.radio(\n [\"volume\", \"open_interest\" /* turn on value when it works; \"value\"*/],\n {\n label: \"Aggregating value:\",\n value: \"volume\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1979,"value":"---\n\nInteractive Versions:\n\n### [Daily Calendar View](https://observablehq.com/@stroked/daily-options-activity-sankey)\n\n### [clickable nodes / drill-down](https://observablehq.com/@stroked/drill-down-sankey) \n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":1254,"value":"viewof height = Inputs.range([0, 2750], { 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":1213,"value":"color = d3\n .scaleSequential(d3[colors])\n .domain([0, series.length - 1])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1920,"value":"verticalPadding = fontSize / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1803,"value":"viewBox = `${-leftMargin} ${-verticalPadding} ${width + 250} ${\n height + verticalPadding\n}`.split(\" \")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1639,"value":"leftMargin = 120","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1671,"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 - 100 : strikeLabel(d) ? d.x1 + 15 : d.x1 + 15\n },${(d.y1 + d.y0) / 2})`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1826,"value":"mutable temp = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"md`---\n\n\n## DATA\n\nImported data filtered for ${valueProperty} > ${valueLimit}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1873,"value":"data = structuredClone(DailyOptionsQuote)","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"tradingDayData = d3.pairs(data).map(([d1, d2]) => {\n const retD1 = { ...d1 };\n retD1.options = d1.options\n .filter((x) => x[\"volume\"] > valueLimit)\n .map((each) => {\n // return\n each.newOI = d2.options.find(\n (any) => any.alias === each.alias\n )?.open_interest;\n each.totalValue = each.open_interest * each.bid;\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 retD1;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1589,"value":"sumON = (d) => {\n if (valueProperty === \"value\") {\n return +d[\"volume\"] * ((+d[\"bid\"] + +d[\"ask\"]) / 2).toPrecision(2);\n } else {\n return +d[valueProperty].toPrecision(2); //+(+d[\"open_interest\"])\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1496,"value":"rollUpSeries = (eachDay) =>\n d3.rollups(\n eachDay,\n (v) => d3.sum(v, sumON),\n (d) => +d.expiry\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1501,"value":"rollupDay = (filteredData) =>\n d3.rollups(\n filteredData,\n (v) => [v, d3.sum(v, (d) => d[valueProperty])],\n (d) => +d.expiry,\n (d) => d.strike\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1459,"value":"generateLinks = (dayData) => {\n return d3.merge(\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 return [\n {\n source: series[0],\n target: strike[0],\n value: d3.sum(strike[1][0], (d) => d[valueProperty])\n },\n ...call_and_put\n ];\n });\n return d3.merge(seriesGroups);\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1085,"value":"links = {\n return d3.merge(\n tradingDayData.map((eachDay) => {\n // const filtered = eachDay.options\n\n let seriesRolledUp = rollUpSeries(eachDay.options);\n // return seriesRolledUp;\n const dayLinks = generateLinks(rollupDay(eachDay.options));\n const links = seriesRolledUp.map((siri) => {\n return {\n source: d3.utcFormat(\"%b %-d\")(eachDay.DT),\n target: siri[0],\n value: siri[1]\n };\n });\n return [...dayLinks, ...links];\n })\n );\n}","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 = {\n return (\n 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 + fontSize / 2)\n .nodeId((d) => d.name)\n .nodeAlign(Sankey.sankeyLeft)\n .extent([\n [0, fontSize],\n [width - 5, height - 5]\n ])\n );\n}\n\n// .linkSort((a, b) => d3.descending(a.value, b.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"sankey_data = {\n\n const nodeCopy = nodes.map((x) => structuredClone(x));\n const linkCopy = links.map((each) => structuredClone(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 = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"padding = 14","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"margin = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":1574,"value":"fontSize = 14","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":1520,"value":"filteredData = d3.merge(tradingDayData.map((x) => x.options))","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"series = [\n ...new Set(\n filteredData\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(filteredData.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"},{"id":1741,"value":"horizontalAxis = () => html`