31:T50e,HTML_DOM = { yield html`

`; }32:Tbce,marks = mainGroup .select(".marks") .attr("clip-path", "url(#cutout)") .call((g) => g .selectAll(".track") .data( track_data, (d, i) => i /* DO NOT use d.name because that changes when tabs switch)*/ ) .join("g") .attr("class", "track") .attr("transform", (d, i) => `translate(0,${yScale(d.name)})`) .each(function (data_group, i) { const parentG = d3.select(this); parentG .append("path") .attr("class", "voronoi-layout") .datum((d) => d); const localMarks = parentG .selectAll(".mark-group") .data(data_group.data, (d, i) => i) .join( (enter) => { const group = enter .append("g") .attr("class", "mark-group") .attr("id", (d, j) => `mark_${i}_${j}`) .call((g) => g.attr( "transform", (d) => `translate(${xScale(d.DT)},${data_group.vScale( d.strike )})` ) ); group .append("circle") .attr("class", "mark-shape") .attr("fill", (d) => { return d.option_type === "C" ? ColorPalette.calls : ColorPalette.puts; // const pos = -data_group.yScale(d.value); // const pos = data_group.vScale(d.value); // console.log('pos', pos, 'y.bandwidth()', y.bandwidth()); // if (pos < y.bandwidth() / 3) { // return riskColor('high'); // } else if (pos > (y.bandwidth() / 3) * 2) { // return riskColor('low'); // } else { // return riskColor('normal'); // } }) // .attr( // 'transform', // d => `translate(0,${-data_group.vScale(d.strike)})` // ) .style("mix-blend-mode", "screen") .attr("r", (d) => data_group.rScale(d.qty * d.price)) .attr("stroke", "none") .style("opacity", 0.2) .style("pointer-events", "none") .attr("pointer-events", "none"); // attachTooltip(group, configs); // group // .selectAll('.mark-tooltip') // .style('pointer-events', 'none') // .attr('opacity', 0); return group; }, (update) => { update.attr( "transform", (d) => `translate(${xScale(d.DT)},${data_group.vScale(d.value)})` ); return update; }, (exit) => { exit.remove(); } ); }) )33:T72b,zoom = { let dynamic_zoom = d3.zoomIdentity; let minutes = d3.timeMinutes(...d3.extent(DATA_ARRAY, (d) => d.DT)); // .call(zoom) // horizontal_zoom const zoomer = d3.zoom().scaleExtent([1, minutes.length]); const tx = () => d3.zoomTransform(marks.node()); const zoom = d3 .zoom() .scaleExtent([1, minutes.length]) .on("zoom", function (e) { mutable active_zoom_params = e.transform; const active_zoom = e.transform; const k = active_zoom.k / dynamic_zoom.k; const [xPos, yPos] = d3.pointer(e); if (k === 1) { marks.call( zoomer.translateBy, (active_zoom.x - dynamic_zoom.x) / tx().k, 0 ); } else { marks.call(zoomer.scaleBy, k, d3.pointer(e)); } dynamic_zoom = active_zoom; let dynamic_scale = tx().rescaleX(xScale); AxisBottom(dynamic_scale); AxisTop(dynamic_scale); marks.selectAll(".mark-group").attr("transform", (d) => { let track_name = d[name]; const data_group = track_data.find((td) => td.name === track_name); return `translate(${dynamic_scale(d.DT)},${-data_group.vScale( d.strike )})`; }); voronoi_outline.attr("d", (d) => { let track_name = d.name; const data_group = track_data.find((td) => td.name === track_name); //HOW TO RESCALE THE ORIGINAL DELAUNAY? d.voronoi = d3.Delaunay.from( data_group.data.map((d) => [ dynamic_scale(d.DT), -data_group.vScale(d.strike) ]) ).voronoi([ m + pad, 0 + (RADIUS_PADDING ? RADIUS : 0), width - m, yScale.bandwidth() - (RADIUS_PADDING ? RADIUS : 0) ]); return VORONOI ? d.voronoi.render() : ""; }); }); return zoom; }34:T5cc,TrackLayout = { // const { m, pad, width, ColorPalette } = configs; const names = yScale.domain(); const trackWidth = width - pad - m - m; const trackAxis = mainGroup .select(".track-axis") .select(".y-axis") // MOVE RIGHT TO SWIMLANE .attr("transform", () => `translate(${pad + m},${0})`) .call( d3 .axisLeft(yScale) // .tickPadding(-pad) // TICKS ARE MADE GRAY AND UNIT-SIZED // BACKGROUND FOR NAME LABELS .tickSize(pad) .tickValues(names) ) .call((g) => { g.select(".domain").remove(); const label_bg = g .selectAll("line") // WIDE AS A TRACK .attr("stroke-width", yScale.bandwidth()) // LABEL BACKGROUND - GRAY .attr("stroke", ColorPalette.surface); const mark_bg = label_bg .clone() // COLOR:BLUE .attr("stroke", ColorPalette.swimlane) // LABEL BACKGROUND WENT LEFT OF AXIS // TRACK BACKGROUND GOES RIGHT OF AXIS // ticks already transitioned by m+pad; // |---------------------width---------------------| // |m|---pad---|--------------trackWidth-----------| .attr("x1", 0) .attr("x2", trackWidth) .attr("class", "bg_swimlane") .style("pointer-events", "none"); // .style("opacity", 0.3); // g.call(d3.axisRight(track_data.find(d=>d.))) }); trackAxis.selectAll("text").call(wrap, { pad, m }); yield trackAxis; }35:T734,function attachTooltip(g) { const d = g.data()[0]; const tooltip = g .selectAll(".mark-tooltip") .data([d], (d) => +d.DT) .join("g") .attr("class", "mark-tooltip") .attr("font-size", 12) .attr("font-family", "Roboto") .attr("font-weight", 500) .style("pointer-events", "none") .attr("opacity", 1); const bg_rect = tooltip .append("rect") .attr("rx", 4) .attr("ry", 4) .style("image-rendering", "crisp-edges"); const text = tooltip.append("text").attr("fill", ColorPalette.surface); const timestamp = text .append("tspan") .attr("x", 0) .attr("y", 0) .text(() => /*formatTime(d.DT)*/ d.strike + " " + d.option_type); const value = text.append("tspan").attr("x", 0).attr("y", "12"); value.text( () => `${d3.format("$.2s")(d.value * 100)} ${d.units ? d.units : ""}` ); const box = tooltip.select("text").node().getBBox(); value.attr("dx", () => box.width / 2).attr("text-anchor", "middle"); timestamp.attr("dx", () => box.width / 2).attr("text-anchor", "middle"); bg_rect .attr("fill", () => ColorPalette.dark) .attr("y", () => -box.height * 0.5) .attr("x", () => -box.width * 0.1) .attr("height", () => box.height * 1.2) .attr("width", () => box.width * 1.2) .attr("stroke", "black") .attr("stroke-width", 1) .style("opacity", 0.65); // tooltip // .append('line') // .attr('x1', 5) // .attr('x2', box.width * 1.2 - 5) // .attr('y1', (box.height * 1.25) / 2) // .attr('y2', (box.height * 1.25) / 2) // .attr('stroke-width', 2) // .attr('stroke', ColorPalette.surface); tooltip.attr( "transform", `translate(${-box.width / 2},${box.height / 2 + RADIUS})` ); d3.select(tooltip.node().parentElement).raise(); tooltip.transition().delay(1000).duration(500).attr("opacity", 0); }36:T5d0,//a commonly used wrap function function wrap(text, { pad, m }) { text.each(function () { const content = d3 .select(this) .style("font-size", "1.2em") .style("font-weight", "400") .style("font-family", "Roboto"), words = content.text().split(/\s+/).reverse(); let word; let line = [], lineNumber = 0; // could use 'em' const lineHeight = 1, y = content.attr("y"), dy = parseFloat(content.attr("dy")); let tspan = content .text(null) .append("tspan") .attr("x", m + pad / 2) .attr("y", y) .attr("dy", `${dy}em`) .attr("text-anchor", "middle"); while ((word = words.pop())) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > pad - m * 2) { line.pop(); tspan.text(line.join(" ")); line = [word]; lineNumber = ++lineNumber; tspan = content .append("tspan") .attr("x", m) .attr("y", y) .attr("text-anchor", "middle") .attr("dy", () => content.attr("height") + lineHeight + "em") .text(word); } } content // alpha of 0.87 and opacity of 0.7 ensures match with Mat-Design .attr("fill", "rgba(0,0,0,0.87)") .attr("opacity", 0.7) .style( "transform", `translate(${-pad}px,-${(lineNumber * lineHeight) / 2}em)` ) .attr("text-anchor", "middle"); }); }37:[] 2f:{"title":"Delaunay Find Tooltips","cells":[{"id":128,"value":"md`# Delaunay Find Tooltips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2739,"value":"The data is a the Sales-Log of all the trades on IBM options over a trading-day.","pinned":false,"hidden":false,"mode":"md"},{"id":2972,"value":"viewof VORONOI = Inputs.toggle({\n label: \"Show voronoi layout\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3083,"value":"viewof SPACE_BETWEEN = Inputs.radio([0.05, 0.1, 0.25], {\n label: \"Space between tracks\",\n value: 0.25\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3001,"value":"viewof OUTSIDE_BID_ASK = Inputs.button(\n \"Highlight trades outside the Bid/Ask range\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2496,"value":"activeHoverPoint = track_data[pointerOnTrack]?.voronoi.delaunay.find(\n pointerPos[0],\n relativeMouseY\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3075,"value":"### Exposed State:","pinned":false,"hidden":false,"mode":"md"},{"id":2504,"value":"track_data[pointerOnTrack]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2483,"value":"pointerOnTrack = Math.floor((pointerPos[1] - m - 1) / yScale.step())","pinned":false,"hidden":false,"mode":"ojs"},{"id":3191,"value":"relativeMouseY = (yScale.paddingInner() * yScale.bandwidth()) / 2 +\n (pointerPos[1] % yScale.step())","pinned":true,"hidden":false,"mode":"ojs"},{"id":2475,"value":"mutable pointerPos = [0, 0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2577,"value":"mutable active_zoom_params = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":3194,"value":"yScale.step()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3202,"value":"75 % yScale.step()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3164,"value":"(pointerPos[1]) % yScale.step()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3117,"value":"yScale.bandwidth()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3034,"value":"ColorPalette = ({\n surface: \"#F2F3F4\",\n dark: \"#757A8E\",\n accent: \"#008D9A\",\n\n calls: \"#bc5090\", //\"#ffa600\", //\"#5ba2ec\",\n puts: \"#43b08b\", //\"#bc5090\", //\"#43d3b5\",\n\n labels: \"#434553\",\n swimlane: \"#DBE5F1\" //\"#D2E1F3\" // \"#D6E6FF\" //\"#E4F0FC\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2336,"value":"viewof RADIUS_PADDING = Inputs.toggle({\n label: \"Pad tracks (no circles outside of tracks)\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2914,"value":"---\n## Some comments\n\n\n### Tracks Zoom / Labels Scroll\n\nScroll interaction over the blue tracks goes to zoom-handler.\n\nChart allows scrolling from outside of the track area\n\n### Multiple Voronoi Layouts\nSpacing between tracks doesn't allow for a single giant layout to voronoi. Each track has it's own voronoi for interactions\n\n\n### Tooltips\nTooltips disappear after 1s. The chart hydrates the top circle value on each render.\n\n**How to unearth stacked points? **\n\nBut if we actually remove each tooltip after 1s, then the tracks can be scratched off to expose lower trades. \n\nWe can see trading depth on darker marks (stacked circles) on the chart. \n\nA *better* way would be to just aggregate stacked values. ","pinned":false,"hidden":false,"mode":"md"},{"id":3101,"value":"SPACE_BETWEEN","pinned":true,"hidden":false,"mode":"ojs"},{"id":3018,"value":"track_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":2441,"value":"(OUTSIDE_BID_ASK,\nd3\n .selectAll(\".mark-group circle\")\n .filter((d) => d.price > d.ask || d.price < d.bid)\n // .selectAll('circle')\n .attr(\"stroke-width\", \"2\")\n .attr(\"stroke\", \"black\")).style(\"opacity\", 1)\n// .attr('r', d => (d.price > d.ask ? '20' : 'black'))\n// .attr('r', )","pinned":true,"hidden":false,"mode":"ojs"},{"id":2727,"value":"// // removes all tooltips\n// d3.selectAll(\"g.mark-group > .mark-tooltip\").remove())\n// // .on(\"mouseleave\", function () {\n// // mutable pointerOnTrack = null;\n// // })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2573,"value":"`#mark_${pointerOnTrack}_${activeHoverPoint}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2564,"value":"activeTooltipMark = d3\n .select(`#mark_${pointerOnTrack}_${activeHoverPoint}`)\n .select(\"circle\")\n .style(\"opacity\", \"1\")\n .transition()\n .delay(1000)\n .style(\"opacity\", 0.2)\n// .transition()\n// .attr('transform', `scale(50)`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2595,"value":"tooltip_handler = {\n // d3.select('remove')\n const match = d3.select(`#mark_${pointerOnTrack}_${activeHoverPoint}`);\n if (match.size > 0) {\n match.select(\"g\").style(\"opacity\", 1);\n }\n attachTooltip(d3.select(`#mark_${pointerOnTrack}_${activeHoverPoint}`));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"yScale = d3\n .scaleBand()\n .domain(names)\n .rangeRound([m, names.length * unitSize + m])\n .align(0.5)\n .paddingInner(SPACE_BETWEEN)\n .paddingOuter(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2460,"value":"radialScale = d3\n .scaleRadial()\n .domain([0, d3.max(DATA_ARRAY, (d) => d.value)])\n .range([1, RADIUS])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2462,"value":"radialScale(100 / 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1335,"value":"function axisStyling(g) {\n g.selectAll(\"text\")\n .style(\"font-family\", \"Roboto\")\n .attr(\"fill\", ColorPalette.dark)\n .style(\"font-size\", m / 2.5)\n\n .style(\"text-transform\", \"lowercase\");\n g.each(function (d, i) {\n const sel = d3.select(this);\n\n sel.select(\".domain\").remove();\n // ABSOLUTE SVG\n if (i === 0) {\n sel.selectAll(\".tick line\").remove();\n }\n // SCROLLING SVG\n if (i === 1) {\n sel.selectAll(\"text\").remove();\n sel\n .selectAll(\".tick line\")\n .attr(\"stroke\", ColorPalette.surface)\n .attr(\"stroke-width\", \"2\")\n .attr(\"opacity\", 0.5)\n .style(\"mix-blend-mode\", \"multiply\");\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2873,"value":"## Selections","pinned":false,"hidden":false,"mode":"md"},{"id":1479,"value":"container = d3\n .select(HTML_DOM)\n .select('.chart-container')\n .style('height', () => `${viewHeight}px`)\n .style('width', () => '100%')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"wrapper = container\n .select(\".chart-wrapper\")\n .style(\"height\", () => viewHeight + \"px\")\n .style(\"width\", \"100%\")\n .style(\"overflow\", () => \"scroll\")\n .style(\"overflow-x\", \"hidden\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1485,"value":"graphics = container\n .select('.timeline')\n .attr('viewBox', () => [m, 0, width, viewHeight])\n .attr('height', () => viewHeight)\n // .attr('width', () => width)\n .attr('display', 'block')\n // TRY: without\n .call(clip_timeline)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"svg = wrapper\n .select('.chart')\n .attr('viewBox', () => [m, 0, width, innerHeight + m + m])\n .attr('width', () => width)\n .attr('height', () => innerHeight + m + m)\n .call(g =>\n g\n .select('#cutout')\n .select('rect')\n .attr('x', () => m + pad)\n .attr('width', () => width - m - m - pad)\n .attr('y', m)\n .attr('height', () => innerHeight)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1461,"value":"mainGroup = svg.select('.main-group');","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1527,"value":"voronoi_outline = marks\n .selectAll('.voronoi-layout')\n .attr(\"fill\", \"none\")\n .attr('pointer-events', 'none')\n .style('pointer-events', 'none')\n .attr(\"stroke\", \"#666\")\n .attr(\"stroke-width\", 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2472,"value":"pointer_interaction = svg\n .select(\".zoom-listener\")\n .on(\"pointermove pointerdown\", function (e, d, i) {\n const [xPos, yPos] = d3.pointer(e);\n mutable pointerPos = d3.pointer(e);\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2328,"value":"strikeScale = d3.scaleLinear(\n d3.extent([...new Set(DATA_ARRAY.map((x) => x.strike))].sort()),\n [\n RADIUS_PADDING ? -RADIUS : 0,\n -yScale.bandwidth() + (RADIUS_PADDING ? RADIUS : 0)\n ]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3119,"value":"strikeScale(150)","pinned":true,"hidden":false,"mode":"ojs"},{"id":885,"value":"md`## AXIS`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1716,"value":"{\n yield \"I handle top & bottom time axis\";\n AxisBottom(xScale);\n AxisTop(xScale);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1333,"value":"function AxisTop(_xScale) {\n const tickPadding = 5;\n return d3\n .selectAll(\".axis-top\")\n .attr(\"transform\", `translate(0,${m})`)\n .call(\n d3\n .axisTop()\n .scale(_xScale)\n // .tickSize(-innerHeight)\n .ticks((width - pad - m - m) / 80)\n\n .tickPadding(tickPadding)\n .tickSizeOuter(0)\n .ticks((width - pad - m - m) / 80)\n .tickFormat(tickFormatting)\n )\n .call(axisStyling);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"function AxisBottom (_xScale){\n // const { innerHeight, viewHeight, m, pad } = data_and_configs.configs;\n const tickPadding = 5;\n const tracksHeight = innerHeight + m + m;\n // THERE ARE 2 .AXIS-BOTTOM\n return d3\n .selectAll('.axis-bottom')\n .attr(\n 'transform',\n (d, i) => `translate(0,${i === 0 ? viewHeight - m : innerHeight + m + 1})`\n )\n\n .attr(\n 'transform',\n (d, i) =>\n // if tracks dont fill the windowSize, make svg smaller.\n // TODO: Simplify the following expression\n `translate(0,${\n i === 0\n ? viewHeight > tracksHeight\n ? tracksHeight - m\n : viewHeight - m\n : innerHeight + m\n })`\n )\n .call(\n d3\n .axisBottom()\n .scale(_xScale)\n .ticks((width - pad - m - m) / 80)\n .tickSize(-tracksHeight)\n .tickSizeOuter(0)\n .tickPadding(tickPadding)\n\n .tickFormat(tickFormatting)\n )\n\n .call(axisStyling);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"function tickFormatting(d) {\n // GO THROUGH EACH TICK (DATE)\n if (d.getHours() === 12 && d.getMinutes() === 0) {\n // font awesome's sun icon\n return \"🌞\";\n }\n let format = \":%-S\";\n\n // 2ND TICK TIER - WEEKS\n if (+d3.timeMinute(d) === +d) {\n format = \"%-I:%-M%p\";\n }\n //LOWEST TICK IS $hour $am/pm\n if (+d3.timeHour(d) === +d) {\n format = \"%-I%p\";\n }\n\n // 3RD TICK TIER - DAYS\n // if (+d3.Min(d) === +d) {\n // eg: 03/09, 03/11, 03/13\n // }\n\n // // LARGEST TICKS - MONTHS\n // if (+d3.timeMonth(d) === +d) {\n // format = \"%b\";\n // }\n\n return d3.timeFormat(format)(d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2208,"value":"TrackAxis = svg\n .select(\".v-axis\")\n .selectAll(\".strike-axis\")\n .data(track_data, (d, i) => i)\n .join(\"g\")\n .attr(\"class\", \"strike-axis\")\n .attr(\n \"transform\",\n (d) => `translate(${width - m},${yScale(d.name) + yScale.bandwidth()})`\n )\n .each(function (d) {\n d3.select(this).call(\n d3\n .axisRight(d.vScale)\n .tickPadding(2)\n .tickFormat((d) => (tickArray.includes(d) ? `\\$${d}` : null))\n .tickSize(-width + pad + m + m)\n .tickValues(tickArray)\n );\n })\n .call((g) => {\n g.selectAll(\"line\").attr(\"stroke\", \"#ccc\");\n g.selectAll(\".domain\").remove();\n g.selectAll(\"text\")\n .attr(\"font-size\", m / 3)\n .style(\"font-weight\", 500)\n .style(\"color\", ColorPalette.dark);\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2285,"value":"md`## Tooltip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"md`## LAYOUT`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1726,"value":"zoom_listener = d3\n .select('.zoom-listener')\n .attr('height', innerHeight)\n .attr('y', m)\n .attr('width', width - m - pad - m)\n .attr('x', pad + m)\n .attr('fill', 'transparent')\n .attr('pointer-events', 'all')\n .style('pointer-events', 'all')\n .attr('opacity', 0.1)\n .call(zoom)\n .call(zoom.transform, d3.zoomIdentity.scale(1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"function clip_timeline(g) {\n g.selectAll(\".clip\")\n .data(\n [\n // y is vertical positioning for clip-rects\n // [x,y,width,height]\n [\n m + pad,\n -halo_size, // y\n width - m / 2,\n m + halo_size\n ],\n [\n m + pad,\n viewHeight - m, // y\n width - m / 2,\n m + halo_size\n ]\n ],\n (d) => d[1]\n )\n .join(\"rect\")\n .attr(\"class\", \"clip\")\n .attr(\"x\", (d) => d[0])\n .attr(\"y\", (d) => d[1])\n .attr(\"width\", (d) => d[2])\n .attr(\"height\", (d) => d[3])\n .attr(\"fill\", \"white\")\n .attr(\"opacity\", 0.65)\n .attr(\"clipPath\", \"url(clip_timeline)\")\n .lower();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":1041,"value":"---\n## SCALES","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"xScale = d3\n .scaleTime()\n .range([pad + m, width - m])\n .domain(d3.extent(DATA_ARRAY, d => +d.DT))","pinned":true,"hidden":false,"mode":"ojs"},{"id":882,"value":"---\n## DATA","pinned":true,"hidden":false,"mode":"md"},{"id":1129,"value":"DATA_ARRAY = d3\n .merge(\n d3\n .groups(\n SalesLog.map((x) => {\n x.series = d3.utcFormat(\"%Y-%m-%d\")(x.expiry);\n x.value = +x.qty * +x.price;\n return x;\n }),\n (d) => d.series\n )\n // .sort((a, b) => d3.descending(a[1].length, b[1].length))\n // .slice(0, 20)\n .sort((a, b) => d3.descending(a[0], b[0]))\n\n .map((x) => x[1].filter((x) => (x.value > 10 ? true : false)))\n )\n .sort((a, b) => d3.descending(a.expiry, b.expiry))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2937,"value":"track_data = d3\n .groups(DATA_ARRAY, (d) => d[name])\n .sort((a, b) => d3.ascending(a[0], b[0]))\n .map((eachGroup) => {\n // grouped on name; [[name],[arr]]\n const data = eachGroup[1];\n\n // REQUIREMENT: all data should have a value property\n const vScale = strikeScale; //create_valueScale(data);\n const rScale = d3\n .scaleRadial()\n .domain(d3.extent(data, (d) => d.price * d.qty))\n .range([0, RADIUS]);\n const voronoi = d3.Delaunay.from(\n data,\n (d) => xScale(d.DT),\n (d) => vScale(d.strike)\n ).voronoi([\n m + pad,\n yScale.paddingInner() * yScale.bandwidth() +\n (RADIUS_PADDING ? RADIUS : 0),\n width - m,\n yScale.bandwidth() - (RADIUS_PADDING ? RADIUS : 0)\n ]);\n\n const it = { name: eachGroup[0], data, vScale, rScale, voronoi };\n return it;\n })\n .sort((a, b) => d3.descending(a.name, b.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3136,"value":"[yScale.paddingInner() * yScale.bandwidth() + yScale.bandwidth(), yScale.step()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"names = [...new Set(DATA_ARRAY.map(x => x[name]))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2097,"value":"tickArray = [110, 150, 200]","pinned":true,"hidden":false,"mode":"ojs"},{"id":888,"value":"md`## SETUP`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1494,"value":"m = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1514,"value":"pad = 60\n\n// {\n// const longest_name = calculate_longest_name([\n// ...new Set(DATA_ARRAY.map((x) => x[name]))\n// ]);\n// return d3.min([longest_name + 2 * m, width * 0.2 + 2 * m]);\n\n// function calculate_longest_name(names) {\n// return Math.ceil(\n// d3.max(\n// names.map((name) => {\n// const text = d3\n// .select(\".chart\")\n// .append(\"text\")\n// .text(name)\n// .attr(\"stroke\", \"black\");\n// // .call(NameLabelStyling);\n// const box = text.node().getBBox();\n// const labelWidth = box.width;\n// text.remove();\n// return labelWidth;\n// })\n// )\n// );\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1502,"value":"viewHeight = d3\n .select('.chart-parent')\n .node()\n .getBoundingClientRect().height - 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1498,"value":"innerHeight = unitSize * names.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":1630,"value":"RADIUS = 9","pinned":true,"hidden":false,"mode":"ojs"},{"id":1649,"value":"halo_size = RADIUS + 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":1500,"value":"unitSize = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":1122,"value":"name = \"series\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1517,"value":"formatTime = d3.timeFormat('%-I:%-M%p') // d3.timeFormat('%-d/%-m/%Y %-I:%-M%p')","pinned":true,"hidden":false,"mode":"ojs"},{"id":3412,"value":"// width = 460","pinned":true,"hidden":false,"mode":"ojs"},{"id":3458,"value":"// width","pinned":true,"hidden":false,"mode":"ojs"},{"id":2294,"value":"md`### COLORS`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1046,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"import { SalesLog, DT } from \"@stroked/ibm\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}