inside each g-element

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:T86e,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) => { const match = expirations.indexOf(d.name); //selectedDataSearch(d.dataItem?.OC.series); if (match >= 0) { // temp.push(match); return color(match); } return "black"; // "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 }33: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(); } ); }34:T10c2,TradingDaySelector = (dataset, feature, setCellSize = 17, color = false) => { let margin = setCellSize / 10; const timeWeek = d3.utcMonday; const countDay = (d) => (d.getUTCDay() + 6) % 7, formatDate = d3.utcFormat("%x"), format = d3.format("+.2%"), formatDay = (d) => d3.utcFormat("%a")(d), // " MTWTF"[d.getUTCDay()], formatMonth = d3.utcFormat("%B"); let fontSize = d3.max([20, setCellSize / 2]); const height = setCellSize * 6; let width = height + setCellSize; // if (color == false) { // color = d3 // .scaleSequential(d3.interpolateViridis) // .domain(d3.extent(dataset, (d) => +d[feature])); // } function pathMonth(t) { const n = 5; const d = Math.max(0, Math.min(n, countDay(t))); const w = timeWeek.count(d3.utcYear(t), t); return `${ d === 0 ? `M${w * setCellSize},0` : d === n ? `M${(w + 1) * setCellSize},0` : `M${(w + 1) * setCellSize},0V${d * setCellSize}H${w * setCellSize}` }V${n * setCellSize}`; } const years = d3.groups(dataset, (d) => d.date.getUTCFullYear()); let SVG = (fontSize, height, width, setCellSize) => ``; const svgRef = html`${SVG(fontSize, height, width, setCellSize)}`; let svg = d3.select(svgRef); const year = svg .selectAll("g") .data(years) .join("g") .attr( "transform", (d, i) => `translate(40,${height * i + setCellSize * 1.5})` ); year .append("text") .attr("font-weight", "bold") .attr("font-size", fontSize * 2) .attr("text-anchor", "start") .attr("x", -fontSize / 2) .attr("dy", -2) .text((d) => d[0]); year .append("g") .attr("text-anchor", "end") .selectAll("text") .data(d3.range(2, 7).map((i) => new Date(1995, 0, i))) .join("text") .attr("x", -2) .attr("y", (d) => (countDay(d) + 0.5) * setCellSize) .attr("font-family", "monospace") .attr("font-style", "italic") .attr("dy", -setCellSize / 2 + fontSize) .attr("font-size", fontSize * 0.75) .text(formatDay); year .append("g") .selectAll(".calendar-monday-day") .data((d) => d[1]) .join((enter) => { const group = enter .append("g") .attr("class", "calendar-monday-day") .attr( "transform", (d) => `translate(${ timeWeek.count(dataset[0].date, d.date) * setCellSize + 0.5 },${countDay(d.date) * setCellSize + 0.5})` ); group .append("rect") .attr("stroke", "black") .attr("width", setCellSize - 1) .attr("height", setCellSize - 1) //OLD: timeWeek.count(d3.utcYear(d.date), d.date) * setCellSize + 0.5 .attr("fill", (d) => "grey") //color(d[feature])) .append("title") .text((d) => `${formatDate(d.date)}: ${format(d[feature])}`); group .append("text") .text((d) => d.date.getDate()) .attr("fill", "#f5f5f5") .attr("font-fize", 40) .attr("dy", setCellSize / 2) .attr("dx", setCellSize / 2) .attr("alignment-baseline", "middle") .attr("text-anchor", "middle") .attr("pointer-events", "none"); }); const month = year .append("g") .selectAll("g") .data((d) => d3.utcMonths(d3.utcMonth(d[1][0].date), d[1][d[1].length - 1].date) ) .join("g"); month .filter((d, i) => i) .append("path") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month .append("text") .attr( "x", (d) => timeWeek.count(dataset[0].date, dataset[dataset.length - 1].date) * setCellSize + setCellSize ) //OLD: timeWeek.count(d3.utcYear(d), timeWeek.ceil(d)) * setCellSize + 2 .attr("y", -fontSize / 2) .attr("dominant-baseline", "middle") .attr("text-anchor", "end") .attr("font-size", fontSize) .style("font-style", "italic") .style("text-transform", "uppercase") .text(formatMonth); return svgRef; }35:[] 2f:{"title":"Daily Options Activity Sankey","cells":[{"id":0,"value":" # Daily Options Activity Sankey\n\n## Series, Strike & Type\n","pinned":false,"hidden":false,"mode":"md"},{"id":1442,"value":"{\n yield html`\n \n `;\n\n const rects = d3.select(March).selectAll(\"rect\");\n\n rects\n .on(\"pointermove\", function (e, d, i) {\n d3.select(e.currentTarget).classed(\"datehover\", \"true\");\n })\n .on(\"pointerleave\", function (e, d, i) {\n d3.select(e.currentTarget).classed(\"datehover\", false);\n })\n .on(\"click\", function (e, d, i) {\n const match = DailyStockQuote.findIndex((that) => +that.DT === +d.DT);\n if (+day_index === match) {\n return;\n } else {\n mutable day_index = match;\n rects.attr(\"class\", (d, i) => (i + 1 === match ? \"active-date\" : \"\"));\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"## Daily Options 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":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":1557,"value":"March = {\n yield TradingDaySelector(stock_performance_data.slice(0, -1), \"DT\", 50);\n return \"I return calendar view\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1612,"value":"html`

\n${March}${Chart}

\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":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":183,"value":"viewof valueLimit = Inputs.range(\n [200, valueProperty === \"open_interest\" ? 20000 : 5000],\n {\n label: \"Contract Limit\",\n step: 200,\n value: valueProperty === \"open_interest\" ? 7500 : 1000\n }\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":1213,"value":"color = d3\n .scaleSequential(d3[colors])\n .domain([0, series.length - 1])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1789,"value":"viewBox = `${-leftMargin} ${-verticalPadding} ${width + 250} ${\n height + verticalPadding\n}`.split(\" \")\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1793,"value":"verticalPadding = labelSize / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1791,"value":"leftMargin = 120","pinned":true,"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":451,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1781,"value":"// fontSize = 14","pinned":true,"hidden":false,"mode":"ojs"},{"id":1783,"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":453,"value":"$33","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":178,"value":"filteredData = tradingDayData[day_index].options.filter(\n (x) => 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":1085,"value":"links = 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)","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 - 5, height - 5]\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 = JSON.parse(JSON.stringify(nodes)); //.map((x) => _.cloneDeep(x)); //structuredClone doesn't work on mobile?\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 = 14","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"margin = 50","pinned":false,"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"},{"id":1554,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1259,"value":"mutable day_index = 0\n// Inputs.range([0, 16], {\n// label: \"Trading Day in March\",\n// step: 1\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"import { DailyStockQuote } from \"@stroked/hod-daily-quote\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1455,"value":"stock_performance_data = {\n const processed_data = DailyStockQuote.map((x) => {\n let obj = { ...x };\n obj.date = x.DT;\n obj.value = x.close;\n return obj;\n });\n\n return (\n { ...processed_data[0], percent_change: 0 },\n [\n ...d3.pairs(processed_data).map((x) => {\n let percent_change = (x[1].value - x[0].value) / x[0].value;\n x[1].percent_change = percent_change;\n return x[1];\n })\n ]\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1722,"value":"_ = \"require('lodash')\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}