30:Tbc9,viewof CHART = { //fit inside a fixed size window let width = ConfigObject.width; let fullHeight = innerHeight + m + m + 2; ///////////////////////CONTAINER//////////////////////////////// let container = d3 .create("div") .attr("class", "chart-container") .style("position", "relative") .style("height", `${ToggleWindowView ? viewHeight : fullHeight}px`) .style("width", "100%") .style("overflow-x", "hidden") .style("overflow-y", "hidden") .node(); ////////////////////////WRAPPER/////////////////////////// //wrapper goes inside the container let wrapper = d3 .select(container) .append("div") .attr("class", "wrapper") // .style('width', '100%') // .style('height', 'auto') .style("overflow", "hidden"); //container passed to DOM yield container; //////////////////////////SVG///////////////////////////// //svg gets attached to the wrapper let svg = wrapper .append("svg") // .attr('height', fullHeight) // .attr('width', width /*add -m to width to remove side padding*/) .attr("viewBox", [0, 0, width, fullHeight]); // .style('border', 'double 1px black'); // .call(g => // ); ////////////////////////MAINGROUP/////////////////////////////// let mainGroup = svg.append("g").attr("class", "main-group"); // .attr('transform', `translate(${0},${m})`); //misplaced elements are easily visible //everything is made (temporarily) translucent // .attr('opacity', OPACITY) /////////////////////////////////////////////////////// let labels = mainGroup .append("g") .attr("class", "labels") .attr("transform", `translate(${0},${m})`); ////////////////////////////////////////////////////////// let graphics = mainGroup .append("g") .attr("id", "timeline") .style("pointer-events", (d) => "none"); /////////////////////////////////////////////////////// let zoomer = d3 .zoom() .scaleExtent([1, 10]) .extent([ [m + pad, 0], [width - m - m - pad, viewHeight] ]); /////////////////////////////////////////////////////// let marks = mainGroup .append("g") .attr("class", "marks") .attr("transform", `translate(${0},${m})`) .call((g) => g .append("rect") .attr("class", "zoom-listener") .attr("height", innerHeight) .attr("y", m) .attr("width", width - m - pad - m) .attr("x", pad + m) .attr("fill", "transparent") .call(zoomer) ) .attr("clip-path", "url(#cutout)"); /////////////////////////////////////////////////////// zoomer.on("zoom", () => { const newXScale = d3.event.transform.rescaleX(x); graphics.call(timelineAxis, newXScale); marks.call(RenderMarks, newXScale); }); container.value = { container, svg, labels, marks, graphics }; yield container; graphics.call(timelineAxis, x); labels.call(CategoryAxis, x); labels.call(GroupAxis, groupScale); marks.call(RenderMarks, x); }31:T5eb,OverlayScroll = d3 .select(viewof CHART) .select('#timeline') .attr('transform', () => { return `translate(0,${ToggleWindowView ? SCROLL : 0})`; }) .call(g => { if (!CLIP_TIMELINE) { //these two rects frame the top and bottom axis with solid background g.selectAll('.clip') .data( [ [0, -halo_size, width, m + halo_size], [ 0, ToggleWindowView ? viewHeight - m : innerHeight + m, width, m + halo_size ] ], d => d[2] ) .join('rect') // .attr('transform', d => `translate(${d[0]},${d[1]})`) .attr('class', 'clip') .attr('x', d => d[0]) .attr('y', d => d[1]) .attr('width', d => d[2]) .attr('height', d => d[3]) .attr('fill', 'white') // .attr('clip-path', 'url(#cutout)') .lower(); } else { g.selectAll('.clip').remove(); } // g.selectAll('.clip') // .data([ // [0, -5, width, m + halo_size], // [ // 0, // ToggleWindowView ? viewHeight - m : innerHeight + m, // width, // m + halo_size // ] // ]) // .join('rect') // .attr('class', 'clip') // .attr('width', d => d[2]) // .attr('height', d => d[3]) // .attr('fill', 'white') // // .attr('clip-path', 'url(#cutout)') })32:T743,GroupAxis = (g, scale) => g .append('g') .attr('transform', `translate(${m},0)`) .call( d3 .axisLeft() .scale(scale) .tickSize(0) .tickPadding(0) ) .call(g => { g.select('.domain').remove(); // g.selectAll('text').attr('fill', 'white'); }) .call(function RouteLabelPositioning(g) { let ROTATION = 90; g.selectAll('text') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('transform', (d, i) => { return `translate(${-ConfigObject.largeFont * 0.9},${-CalculatedHeights[i] / 2}) rotate(-${ROTATION})`; }) .attr('fill', 'white') .attr('font-size', ConfigObject.largeFont) .style('text-transform', 'uppercase') .each(function(d, i) { d3.select(this.parentNode) .append('path') .attr('d', () => { //the s number is used to keep proper padding around the text let s = 10; let padding = RouteDataWithScale[i].yScale.bandwidth() * RouteDataWithScale[i].yScale.padding() + 1; return `m${0} ${padding} h${m - s} a${s},${s} 0 0 1 ${s},${s} l${0} ${CalculatedHeights[i] - s * 2 - 1 - padding * 2} a${s},${s} 0 0 1 ${-s},${s} h${-m + s}`; }) .attr('fill', colorScale(d)) .attr('stroke', 'transparent') .attr( 'transform', INWARDS ? `scale(1,1) translate(${-m}, ${-CalculatedHeights[i]})` : `scale(-1,1) translate(${0}, ${-CalculatedHeights[i]})` ) .lower(); }); })33:T66d,function CategoryAxis(marks, x) { marks .selectAll('.routes') .data(['routes'], (d, i) => i) .join('g') .attr('class', d => d) .selectAll('.group') .data(RouteDataWithScale, d => d.route) .join('g') .attr('class', d => 'group') .attr('transform', d => `translate(${0},${groupScale(d.route)})`) .each(function(group, i) { d3.select(this) .selectAll('.background') .data(group.categories, d => d[0]) .join('rect') .attr( 'transform', d => `translate(${0},${-group.yScale(d[0]) - group.yScale.bandwidth()})` ) // .attr('isolation', 'isolate') .attr('class', d => 'background') .attr('height', (d, j) => group.yScale.bandwidth()) .attr('width', width - m - pad - m + 1) .attr('x', d => pad + m) .attr('fill', ColorPalette.swimlane) .attr('opacity', 1) .call(g => g .clone() //curve of the group-flag is 5 .attr('x', m) .attr('width', pad) .attr('fill', ColorPalette.surface) .attr('opacity', 1) ); d3.select(this) .selectAll('.name') .data([group]) .join('g') .attr('class', 'name') .attr('transform', `translate(${pad + m},${-CalculatedHeights[i]})`) .call( d3 .axisLeft() .scale(group.yScale) .tickSize(0) .tickPadding(pad / 2) ) .call(g => g.select('.domain').remove()) .call(g => g.selectAll('text').call(NameLabelStyling)); }); }34:T4fd,Today = (g, scale) => { let todayDT = new Date(); let pos = scale(todayDT); if (pos < pad + m || pos > width - m) { g.selectAll('.today').remove(); } else { const gToday = g .selectAll('.today') .data([new Date()]) .join("g") .attr('class', 'today') .attr("transform", d => `translate(${scale(d)},0)`) .attr('opacity', 0.4) .attr('title', d => d3.timeFormat('%d %b %Y')(d)) // .attr('clip-path', 'url(#cutout)') .call(g => { g.append("line") .attr("class", "now-line") .style("stroke-width", 1) .style("stroke", 'red') .attr("x1", 0) .attr("x2", 0) .attr("y1", m) .attr("y2", ToggleWindowView ? viewHeight - m : innerHeight + m); g.append("path") .attr('class', 'now-arrow') .attr("d", `M${-10} ${m / 2 - 2}h20l-10 15m-1 0L-7 -20`) .style("fill", 'red'); g.append("text") .attr('class', 'time-now') .attr("y", m / 2 - 3) .attr("text-anchor", "middle") .attr("font-size", 12) .attr('font-family', 'monospace') .style('text-transform', 'uppercase') .style("fill", 'black') .text("now"); }); } }35:T53d,function RenderMarks(g, scale) { let tasks = g .selectAll('.task-group') .data(example_patient_dataArray, d => joinIDs(d, '-')) .join('g') .attr('class', 'task-group') .attr('transform', d => PositionMark(d, scale)); tasks.each(function(d, i) { d3.select(this) .selectAll('.task-shape') .data([d], d => joinIDs(d, '-')) .join('rect') .attr('class', d => 'task-shape') .attr('height', BAR_HEIGHT) .attr('width', d => calculateWidth(d, scale)) .attr('stroke-width', '0') .attr('ry', d => (d.duration === 0 ? 9999 : 0)) .attr('rx', d => (d.duration === 0 ? 9999 : 0)) .attr('opacity', 0.35) .attr('fill', d => colorScale(d.route)) .on('mouseover', function(d) { d3.select(this) .attr('opacity', 1) .attr('stroke', 'transparent') .attr('stroke-width', '1'); d3.select(this.parentNode).raise(); mutable hoveredCircle = d3.select(this); hoverHandler(d3.select(this), scale); FocusGuideline(d3.select(this), scale); }) .on('mouseleave', function(d) { d3.select(this) .attr('stroke', 'transparent') .attr('stroke-width', '0') .attr('opacity', 0.4); removeGuideline(this, d); removeTooltip(); }); }); }36:Td68,function hoverHandler(g, xScale) { g.each(function(d, i) { // mutable hovered = g.data(); // let d = g.data(); let yScale = RouteDataWithScale.find(x => x.route === d.route).yScale; let endTime = calculateEndTime(d); let isDurationed = +endTime === +d.DT; let shapeWidth = xScale(endTime) - xScale(d.DT); let halfWidth = shapeWidth === 0 ? 0 : shapeWidth / 2; /////////////////////////////////////////////////////// ////////////////////////////////////////////////////// let tooltip = d3 .selectAll('.chart-container') .selectAll('.tooltip') .data([d], checkID) .join('div') .attr('class', 'tooltip') .style('pointer-events', 'none') .style('align-items', 'center') // .style('width', '100%') // .style('height', "auto") .style('position', 'absolute') .style('display', 'flex') .style('flex-direction', 'column') .html(tooltipMaker); ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// let tooltipDims = tooltip .select('.tooltip-container') .node() .getBoundingClientRect(); let tooltipWidth = tooltipDims.width; let tooltipHeight = tooltipDims.height; // let tooltipWidth = dim.width; let centerOfTrack = //go to bottom of area groupScale(d.route) - //jump to start of group yScale.range()[1] + //move down to right track yScale(d.name) + //move down to the center of the track yScale.bandwidth() / 2; // half the height of the bar+ half of halo_size let trackHalf = (BAR_HEIGHT + halo_size) / 2; let tooltipTopPosition_below = centerOfTrack + trackHalf; ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// let scrolled_by = scrolledDistance(); if ( tooltipTopPosition_below + tooltipHeight + BAR_HEIGHT + halo_size / 2 > scrolled_by + viewHeight - m ) { tooltip.style( 'top', () => centerOfTrack - trackHalf - tooltipHeight + 3 + 'px' ); } else { tooltip.style( 'top', () => centerOfTrack + trackHalf + tooltipHeight + 2 + 'px' ); } // else { // if (tooltipTopPosition_below + tooltipHeight > innerHeight + m) { // tooltip.style( // 'top', // () => tooltipTopPosition_below - tooltipHeight - trackHalf + 'px' // ); // } else { // tooltip.style('top'); // } // } ////////////////////////////////// ///////////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// ////////////////////////// //check if task is in the right corner (20%) if (xScale(d.DT) + halfWidth + tooltipWidth / 2 > width - m) { //right corner tooltip.style('right', d => 0); //.style('transform', `translateX(${'0%'})`); //xScale(d.DT) + halfWidth -tooltipWidth/2+ 'px'); } else { tooltip.style( 'left', d => xScale(d.DT) + halfWidth - tooltipWidth / 2 + 'px' ); // .style( // 'transform', // `translateX(${xScale(d.DT) + halfWidth - tooltipWidth / 2})` // ); } }); }37:T84d,function FocusGuideline(g, xScale) { g.each(function(d, i) { let task = d3.select(this); //.select('rect'); let halfWidth = findMiddlePoint(d, xScale); let task_height = task.attr('height'), task_width = task.attr('width'), task_X = task.attr('x'), task_Y = task.attr('y'); // mutable asdfasdf = task; // mutable hover_height = height; d3.select(this) .clone() .datum(d) .attr('class', 'halo') .attr('x', -halo_size / 2) .attr('width', d => calculateWidth(d, xScale) + halo_size) .attr('y', -halo_size / 2) .attr('height', BAR_HEIGHT + halo_size) .attr('fill', 'white') .attr('stroke-width', 2) .attr('stroke', 'black') .attr('opacity', 0.6) .style('pointer-events', 'none') .attr('mix-blend-mode', 'screen') .raise(); d3.select(this).raise(); let guideLength = BAR_HEIGHT + halo_size / 2 + 1, scrolled_by = scrolledDistance(); // mutable asdfasdf = [scrolled_by, task.attr('y')]; d3.select(this) .clone() .attr('class', 'guideline') .attr('height', BAR_HEIGHT) .attr('width', 0.1) //task_width + halo_size) .attr('x', task_width / 2) .attr('y', () => { let val = +d3 .select(task.node().parentNode) .attr('transform') .replace('translate(', '') .replace(')', '') .split(',')[1] .trim() + guideLength + +d3 .select('.tooltip-container') .style('height') .replace('px', '') + BAR_HEIGHT + halo_size / 2 - 2; // mutable tadfknladgjn = d3.select('.tooltip-container').style('height'); if (val > scrolledDistance() + viewHeight - m) return -guideLength; else { return guideLength; } }) .attr('rx', 0) .attr('ry', 0) .attr('fill', 'white') .attr('opacity', 1) .style('pointer-events', 'none') .attr('stroke', ColorPalette.dark) .attr('stroke-dasharray', [1, 1]); }); }38:[] 2e:{"title":"Grouped Tracks","cells":[{"id":0,"value":"md`# Grouped Tracks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7423,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":9576,"value":"Text length affects layout.\n\n !Refresh page for new data and slightly different layout proportions\n ","pinned":false,"hidden":false,"mode":"md"},{"id":6288,"value":"viewof ToggleWindowView = checkbox({\n description: \"Toggle between full-view and a scrollable window-view\",\n options: [{ value: true, label: \"Toggle Window-View\" }],\n value: \"true\"\n}) //checkbox({})///html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3542,"value":"viewof SCROLL = {\n if (ToggleWindowView)\n return slider({\n min: 0,\n max: innerHeight + m + m - viewHeight - 1,\n step: 10,\n description: \"slider mimics scrolling experience\",\n title: \"SCROLL\",\n step: 1\n });\n else {\n let element = d3\n .create('i')\n .style('line-height', '70px')\n .style('height', '70px')\n\n .text('...nothing')\n .node();\n element.value = null;\n return element;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":7781,"value":"viewof CLIP_TIMELINE = {\n if (ToggleWindowView)\n return checkbox({\n description: \"Toggle white background for top+bottom timeline axis\",\n options: [{ value: true, label: \"Transparent Time Axis\" }],\n value: \"toggle\"\n });\n else {\n let element = d3\n .create('i')\n .style('line-height', '52px')\n .style('height', '52px')\n .text('...nothing')\n .node();\n element.value = null;\n return element;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9364,"value":"md`---\n## Interaction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9037,"value":"mutable hoveredCircle = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":5281,"value":"md`---\n## Binding Scroll Motion`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9071,"value":"SCROLL + hoveredCircle?.node().getBoundingClientRect().y","pinned":false,"hidden":false,"mode":"ojs"},{"id":3489,"value":"ContainerScroll = d3\n .select(viewof CHART)\n .property('scrollTop', ToggleWindowView ? SCROLL : 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4749,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7679,"value":"MarkClipScroll = CHART.svg\n .selectAll('defs')\n .data(['defs'], d => d)\n .join('defs')\n .html(\n `\n\n \n`\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":9349,"value":"---\n## Tooltip","pinned":false,"hidden":false,"mode":"md"},{"id":9032,"value":"Positioning = {\n if (hoveredCircle) {\n const tooltipNode = d3.select(\".tooltip-container\");\n yield tooltipNode;\n return +d3\n .select(hoveredCircle.node().parentNode)\n .attr(\"transform\")\n .replace(\"translate(\", \"\")\n .replace(\")\", \"\")\n .split(\",\")[1]\n .trim() +\n BAR_HEIGHT +\n halo_size / 2 +\n 1 +\n (tooltipNode.size() > 0)\n ? tooltipNode.style(\"height\").replace(\"px\", \"\")\n : \"no tooltip\";\n // : d3.select(\".tooltip-container\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8452,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":5317,"value":"mutable hovered = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":2910,"value":"mutable _clicked = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":5058,"value":"md`\n---\n### LEGEND`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3075,"value":"Legend = {\n let view = html`\n

`;\n\n yield view;\n\n d3.select(view)\n .selectAll('.route-toggle')\n .data(RouteData)\n .join('button')\n .attr('class', d => {\n return 'route-toggle';\n })\n .attr('style', d => {\n let routeColor = colorScale(d[0]);\n\n return `\n flex:auto;\n line-height:1.25em;\n text-align:center; \n margin:0 5px; \n font-weight:500; \n font-family:monospace;\n letter-spacing:2px;\n text-transform:uppercase;\n font-size:1rem; \n background-color:${routeColor};\n color:${isDark(routeColor) ? 'black' : 'white'}`;\n })\n .text(d => d[0])\n .on('click', function(d) {\n mutable _clicked = d;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9324,"value":"---\nColor Switching based on background","pinned":false,"hidden":false,"mode":"md"},{"id":5073,"value":"md`---\n## LAYOUT`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5303,"value":"md`### Groups`","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":5306,"value":"md`### Tracks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1825,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":5310,"value":"md`### Timeline`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3622,"value":"timelineAxis = (g, scale) => {\n g.call(AxisBottom, scale);\n g.call(AxisTop, scale);\n g.call(Today, scale);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1737,"value":"function AxisTop(labels, scale) {\n let tickPadding = 5;\n labels\n .selectAll(\".x-axis-top\")\n .data([\"x-axis-top\"])\n .join(\"g\")\n .attr(\"class\", (d) => d)\n .attr(\"transform\", `translate(0,${m})`)\n\n .call(\n d3\n .axisTop()\n .scale(scale)\n .tickSize(AutoSizeTicks)\n .tickPadding(tickPadding)\n .tickFormat(d3.timeFormat(\"%b%-d\"))\n .ticks(width < 480 ? 3 : 8)\n .tickSizeOuter(0)\n )\n .call((g) => {\n g.selectAll(\"line\").attr(\"stroke\", \"white\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7416,"value":"AutoSizeTicks = ToggleWindowView ? -viewHeight + m + m - 2 : -innerHeight - 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1908,"value":"AxisBottom = (g, scale) => {\n let tickPadding = 5;\n g.selectAll('.x-axis-bottom')\n .data(['x-axis-bottom'])\n .join('g')\n .attr('class', d => d)\n .attr(\n \"transform\",\n `translate(0,${ToggleWindowView ? viewHeight - m : innerHeight + m})`\n )\n .call(\n d3\n .axisBottom()\n .scale(scale)\n .ticks((width - pad - m - m) / 50)\n .tickSize(AutoSizeTicks)\n // .tickFormat(d3.timeFormat('%b%-d'))\n\n .tickSizeOuter(0)\n .tickPadding(tickPadding)\n // .tickSizeOuter(-totalHeight)\n )\n .call(g => {\n g.selectAll('text')\n .select(\":first-of-type\")\n .remove();\n g.selectAll('line')\n .attr('stroke', 'white')\n .style('mix-blend-mode', 'normal');\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4924,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":5313,"value":"md`### Marks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6490,"value":"joinIDs = (d, char) => `${char}${d.route}${char}${d.name}${char}DT${+d.DT}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4287,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":6022,"value":"md`### Tooltips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4998,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":6262,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":8845,"value":"scrolledDistance = () =>\n +d3\n .select('#timeline')\n .attr('transform')\n .replace('translate(', '')\n .replace(')', '')\n .split(',')[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":8641,"value":"function tooltipMaker(d) {\n return `\n

\n ${d.description}\n

${timeFormat(\n d.DT\n )} \n ${\n +calculateEndTime(d) === +d.DT\n ? ''\n : `(${transcribeTime(\n d.duration / 1000\n ).trim()})`\n }

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6105,"value":"function checkID(data) {\n `${data.route}-${data.name}-${+data.DT}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5364,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5357,"value":"md`### Utility/Helper`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"RouteLabelStyling = g =>\n g.attr('font-size', config.largeFont)\n .style('text-transform', 'uppercase')","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"NameLabelStyling = g =>\n g\n .attr('font-size', ConfigObject.regularFont)\n .attr('text-anchor', 'middle')\n .style('text-transform', 'uppercase')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4390,"value":"function PositionMark(d, xScale) {\n //if durationed, the shape starts at DT\n //but if an instance with no duration,\n //it renders as a circle\n //center of circle should be at x(DT)\n let isDurationed = d.duration > 0 ? true : false;\n\n let matchGroup = RouteDataWithScale.find(f => f.route == d.route);\n\n return `translate(${\n isDurationed ? xScale(d.DT) : xScale(d.DT) - BAR_HEIGHT / 2\n },${groupScale(d.route) -\n matchGroup.yScale.range()[1] +\n matchGroup.yScale(d.name) +\n BAR_HEIGHT}) `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4797,"value":"timeFormat = d3.timeFormat('%-m/%-d/%Y %-I:%M%p')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5915,"value":"transcribeTime = d => {\n let days = Math.floor(d / dayInSeconds);\n d = d - days * dayInSeconds;\n let hours = Math.floor(d / hourInSeconds);\n d = d - hours * hourInSeconds;\n let minutes = Math.floor(d / 60);\n d = d - minutes * 60;\n let seconds = d;\n\n return `\n${days === 0 ? '' : days > 1 ? `${days}days` : '1 day'} \n${hours === 0 ? '' : hours > 1 ? `${hours}hrs` : '1 hour'} \n${minutes === 0 ? '' : minutes > 1 ? `${minutes}mins` : '1 min'} \n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4526,"value":"calculateEndTime = d => new Date(+d.DT + +d.duration)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6668,"value":"calculateWidth = (d, scale) =>\n d.duration === 0\n ? BAR_HEIGHT\n : scale(new Date(+d.DT + +d.duration)) - scale(d.DT)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6681,"value":"function removeTooltip() {\n d3.selectAll('.chart-container')\n .selectAll('.tooltip')\n .remove();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6676,"value":"function removeGuideline(ref, d) {\n d3.select(ref.parentNode).call(g => {\n g.select('.halo').remove();\n g.select('.guideline').remove();\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6473,"value":"function findMiddlePoint(d, xScale) {\n let endTime = calculateEndTime(d);\n let shapeWidth = xScale(endTime) - xScale(d.DT);\n let halfWidth = shapeWidth === 0 ? BAR_HEIGHT / 2 : shapeWidth / 2;\n return halfWidth;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2693,"value":"md`## WorkSpace`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3014,"value":"viewHeight = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":3448,"value":"OPACITY = 0.9","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"viewof INWARDS = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1741,"value":"innerHeight = d3.max(groupScale.range())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2730,"value":"md`## SETUP `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3897,"value":"BAR_HEIGHT = ConfigObject.unitSize / 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":3184,"value":"//eg. calculateUnitHeight(RouteData)\ncalculateUnitHeight = data =>\n data.map(x => {\n let text = d3\n .select(dummySVG)\n .append('text')\n .text(d => x[0])\n .call(RouteLabelStyling);\n let textWidth = text.node().getBBox().width;\n text.remove();\n let answer = textWidth / x[1].length + config.largeFont;\n\n //d3.max([textWidth / x[1].length + config.largeFont, freelySized * x[1].length]);\n return answer;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1987,"value":"ConfigObject = {\n let unitHeight = d3.max(calculateUnitHeight(RouteData));\n return {\n data: dataArray,\n regularFont: 12,\n largeFont: 16,\n unitSize: unitHeight,\n width: width\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"m = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"pad = longestName","pinned":false,"hidden":false,"mode":"ojs"},{"id":6704,"value":"halo_size = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"config = ({ regularFont: 12, largeFont: 16, width: width })","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"longestName = Math.ceil(\n d3.max(\n d3\n .merge(RouteData.map(x => x[1]))\n .map(x => x[0])\n .map(name => {\n let text = d3\n .select(dummySVG)\n .append('text')\n .text(name)\n .attr('stroke', 'black')\n .call(NameLabelStyling);\n let box = text.node().getBBox();\n let labelWidth = box.width;\n text.remove();\n return labelWidth + 10;\n })\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"CalculatedHeights = RouteData.map(route => {\n return ConfigObject.unitSize * route[1].length \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2686,"value":"md`## SCALES`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"groupScale = {\n let cumsum = d3.cumsum(CalculatedHeights);\n let totalHeight = cumsum[cumsum.length - 1];\n return d3\n .scaleThreshold()\n .range([0, ...cumsum])\n .domain([...Routes]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"categoryScale = (d, i) => {\n //viewof CATEGORY_PADDING = slider({ min: 0, max: 0.3, step: 0.01, value: 0.02 })\n\n let CATEGORY_PADDING = 0.02;\n\n return d3\n .scaleBand()\n .domain(d.map(x => x[0]))\n .range([0, d.length * ConfigObject.unitSize])\n .paddingInner(0)\n .paddingOuter(CATEGORY_PADDING);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"x = {\n let min = d3.min(example_patient_dataArray, d => +d.DT);\n let max = d3.max(\n example_patient_dataArray,\n d => new Date(+d.DT + +d.duration)\n );\n let firstDay = d3.timeDay.floor(min);\n let lastDay = d3.timeDay.ceil(max);\n yield d3\n .scaleTime()\n .domain([firstDay, lastDay])\n .range([pad + m, width - m]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2683,"value":"md`## DATA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"RouteDataWithScale = RouteData.map((route, i) => {\n let it = {};\n it.route = route[0];\n it.categories = route[1];\n it.yScale = categoryScale(route[1]);\n return it;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"Routes = RouteData.map(x => x[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2679,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5987,"value":"hourInSeconds = 60 * 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":5985,"value":"\ndayInSeconds = 24 * hourInSeconds","pinned":false,"hidden":false,"mode":"ojs"},{"id":3086,"value":"function isDark(c) {\n return contrast(c, '#222') * 0.5 > contrast(c, '#f5f5f5');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"import { slider, checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1288,"value":"ColorPalette = ({\n surface: \"#F2F3F4\",\n dark: \"#757A8E\",\n accent: \"#008D9A\",\n\n labels: \"#181818\",\n swimlane: \"#E1F3FC\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1993,"value":"dataArray = example_patient_dataArray","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"colorScale = d3\n .scaleOrdinal()\n .domain([...Routes])\n .range(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3077,"value":"import {\n example_patient_dataGrouped as RouteData,\n example_patient_dataArray\n} from '3560c8ccf43a0766'","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\", 'd3-delaunay@5', 'd3-array@2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"dummySVG = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3085,"value":"import { contrast } from '@mbostock/wcag-contrast-ratio'","pinned":false,"hidden":false,"mode":"ojs"},{"id":4121,"value":"---\n\n## Mark Cutout\nMarks are not visible over the red region","pinned":false,"hidden":false,"mode":"md"},{"id":3771,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3742,"value":"d3\n .select(DOM.svg(width, 100))\n .call(g =>\n g\n .append('defs')\n .append('clipPath')\n .attr('id', 'cutout_window')\n .append('rect')\n .attr('height', 60)\n .attr('width', width - pad - m)\n .attr('x', () => pad + m)\n .attr('y', () => m)\n )\n // .attr('clip-path', 'url(#cutout_window)')\n\n .call(g => {\n g.append('g').call(g2 =>\n g2\n .append('rect')\n .attr('height', 100)\n .attr('width', 100)\n .attr('fill', 'black')\n .attr('opacity', 0.5)\n .transition()\n .attr('x', () => m + pad)\n .attr('clip-path', 'url(#cutout_window)')\n );\n })\n .call(g =>\n g\n .append('rect')\n .attr('height', 100)\n .attr('width', width - pad - m - m)\n .attr('fill', 'red')\n .attr('opacity', 0.5)\n )\n\n .node()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}