2d:null 2e:["$","title",null,{"children":"Communications | kalmdown | Observable"}] 33:Ta44,34:Tddc,renderNodes = { setColors; const svgNode = svg`` let intCol = 1; let extCol = 0; let yPos = layout.padding; let intLength = 0; let extLength = 0; let col = 0; const locHeight = (loc) => { const rolesHeight = loc.roles.length * (layout.rolPillHeight + layout.rolPillPadding); return layout.locLabelHeight + layout.locGroupPadding + rolesHeight; } locations.forEach((l,i) => { const xPos = (internalLocations.includes(l.id)) ? layout.internalCol : layout.externalCol; const loc = (internalLocations.includes(l.id)) ? 'int ' : 'ext '; yPos = (internalLocations.includes(l.id)) ? intLength : extLength; let locationBnnrs = d3.select(svgNode).append('g') .attr('class', 'location ' + loc + cleanName(l.id)) .attr('transform', 'translate(' + xPos + ',' + yPos + ')') // Location let banner = locationBnnrs.append('g') .attr('class', 'banner') .attr('cursor', 'default') // Add location banner bg banner.append('rect') .attr('class', 'locBnnrRect ', + cleanName(l.id)) .attr('width', layout.locLabelWidth) .attr('height', layout.locLabelHeight) .attr('fill', l.color) const bBBP = d3.path() bBBP.moveTo(0,layout.locLabelHeight) bBBP.lineTo(layout.locLabelWidth, layout.locLabelHeight) banner.append('path') .attr('d', bBBP) .attr('stroke','black') .attr('stroke-width', '1') // Add location banner text banner.append('text') .text(l.id) .attr('class', 'locBnnrText ', + cleanName(l.id)) .attr('transform', 'translate(' + layout.locLabelLeftPadding + ',' + (layout.locLabelHeight / 1.5) + ')') // Location's Roles let rolesPills = locationBnnrs.append('g') .attr('class', 'roles') .attr('transform', 'translate(' + 0 + ',' + (layout.locLabelHeight + layout.locLabelPadding) + ')') locations[i].roles.forEach((r, j) => { const classRolLoc = cleanName(r)+'-'+cleanName(l.id) let rolePill = rolesPills.append('g') .attr('class', 'role ' + classRolLoc) .attr('transform', 'translate(' + 0 + ',' + (j * (layout.rolPillPadding + layout.rolPillHeight)) + ')') .attr('cursor', 'pointer') .on('mousemove', mouseMove) .on('mouseover', hover) .on('mouseout', mouseOut) let findRole = roles.find(r => {return r.id === classRolLoc }) // console.log('findRole.color: ', findRole.color, ' r: ', r, ' l.id: ', l.id, ' classRolLoc:', classRolLoc) function textColor(role) { const {l, c, h} = d3.lch(role.color) return (l > 50) ? '#000000' : '#ffffff' } rolePill.append('rect') .attr('class', 'rolPillRect ' + classRolLoc) .attr('fill', findRole.color) .attr('width', layout.rolPillWidth) .attr('height', layout.rolPillHeight) .attr('rx', layout.rolPillHeight / 2) .attr('ry', layout.rolPillHeight / 2) rolePill.append('text') .text(r) .attr('class', 'rolPillText ' + classRolLoc) .attr('transform', 'translate(' + layout.rolPillHeight / 2 + ',' + (layout.rolPillHeight / 1.5) + ')') .attr('fill', textColor(findRole)) }); // roles.forEach yPos = layout.padding + layout.locLabelHeight * col; col = (internalLocations.includes(l.id)) ? intCol += 1: extCol += 1; (internalLocations.includes(l.id)) ? intLength += locHeight(l): extLength += locHeight(l); }); // locations.forEach return svgNode; }35:Te34,renderLines = { renderNodes; // const intRoles = d3.selectAll('.location').filter('.int').selectAll('.role').select('rect'); // const extRoles = d3.selectAll('.location').filter('.ext').selectAll('.role').select('rect'); // const underwriterRole = d3.selectAll('.location').filter('.int').select('.role,.Underwriter').select('rect') const graph = d3.select('svg#comms') // Arrow sizing const markerBoxWidth = 30 const markerBoxHeight = 30 const refX = 6 // markerBoxWidth / 2 const refY = 6 // markerBoxHeight / 2 const strokeScale = d3.scaleLinear() .domain([1, connectionPairs.reduce((max, cp) => {return Math.max(max, cp.activities.length)},-1)]) // .domain([1, maxActivities]) .range([1, 7]) const defs = graph.append('defs') .append('svg:marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight]) .attr('markerUnits', 'userSpaceOnUse') .attr('refX', refX)//so that it comes towards the center. .attr('refY', refY)//so that it comes towards the center. .attr('markerWidth', markerBoxWidth) .attr('markerHeight', markerBoxHeight) .attr('orient', 'auto-start-reverse') .append('svg:path') .attr('d', 'M 0 0 12 6 0 12 3 6'); connectionPairs.forEach((conn, i) => { const iRolLoc = conn.id.match(regex_RolLoc)[0]; const rRolLoc = conn.id.match(regex_RolLoc)[1]; const iLoc = conn.id.match(regex_sep)[1]; const rLoc = conn.id.match(regex_sep)[3]; const iNode = d3.select('.'+iRolLoc) const rNode = d3.select('.'+rRolLoc) const graphRect = graph.node().getBoundingClientRect(); const iRect = iNode.node().getBoundingClientRect(); const rRect = rNode.node().getBoundingClientRect(); let iNodePos; let rNodePos; let link; const strokeWidth = strokeScale(conn.activities.length); const line = d3.line() .curve(d3.curveBasis) .x(d => d.x) .y(d => d.y); // Internal activity if (internalLocations.includes(iLoc) && internalLocations.includes(rLoc)) { let points = [ {x: iRect.left - graphRect.left, y: iRect.top - graphRect.top + iRect.height / 2}, {x: iRect.left - graphRect.left - 25, y: iRect.top - graphRect.top + iRect.height / 2}, {x: rRect.left - graphRect.left - 25, y: rRect.top - graphRect.top + rRect.height / 2}, {x: rRect.left - graphRect.left, y: rRect.top - graphRect.top + rRect.height / 2}] link = line(points) } // Internal initiator to External receiver if (internalLocations.includes(iLoc) && !internalLocations.includes(rLoc)) { iNodePos = [iRect.left - graphRect.left + iRect.width, iRect.top - graphRect.top + iRect.height / 2]; rNodePos = [rRect.left - graphRect.left, rRect.top - graphRect.top + rRect.height / 2]; link = d3.linkHorizontal()({source: iNodePos, target: rNodePos}) } // External initiator to Internal reciever if (!internalLocations.includes(iLoc) && internalLocations.includes(rLoc)) { iNodePos = [rRect.left - graphRect.left + iRect.width, rRect.top - graphRect.top + rRect.height / 2]; rNodePos = [iRect.left - graphRect.left, iRect.top - graphRect.top + iRect.height / 2]; link = d3.linkHorizontal()({source: rNodePos, target: iNodePos}) } graph .append('path') .attr('class', 'connection ' + conn.id) .attr('d', link) .attr('stroke', 'black') .attr('stroke-width', strokeWidth) .attr('opacity', .3) .attr('fill', 'none') .attr('marker-end', (d) => 'url(#arrow)') }) // End connectionPairs.forEach return graph; }36:T929,layout = { const gap = .5; const padding = 6; const baseFontSize = 10; function rpw() { let maxChar = roles.reduce((max, r) => {return Math.max(max, r.id.match(regex_sep)[0].length)},0); return maxChar } const rolFontSize = baseFontSize * 1.25; const rolPillHeight = rolFontSize + 12; const rolPillWidth = rpw() * rolFontSize * .65; const rolPillPadding = 8; const locFontSize = rolFontSize * 1.25; const locLabelHeight = locFontSize * 2; const locLabelWidth = 200; const locLabelLeftPadding = locFontSize / 2; const locLabelPadding = 8; const locGroupPadding = 18; const relatedInitialsFontSize = baseFontSize * 1.4; const relatedRoleFontSize = baseFontSize * 1.2; const relatedActivityFontSize = baseFontSize * 1.1; const relatedRolePillHeight = relatedRoleFontSize + relatedActivityFontSize + 10; const relatedRolePillWidth = rpw() * rolFontSize * 1; const lblFontSize = 10; const width = 800; let intElem = locations.reduce((cnt, l) => { if (internalLocations.includes(l.id)) { cnt += l.roles.length } return cnt; },0 ) * (rolPillHeight + rolPillPadding); intElem = intElem + locations.reduce((cnt, l) => { if (internalLocations.includes(l.id)) { cnt += 1 } return cnt; },0 ) * locLabelHeight; let extElem = locations.reduce((cnt, l) => { if (!internalLocations.includes(l.id)) { cnt += l.roles.length } return cnt; }, 0) * rolPillHeight; extElem = extElem + locations.reduce((cnt, l) => { if (!internalLocations.includes(l.id)) { cnt += 1 } return cnt; }, 0) * (locLabelHeight + locGroupPadding); const height = Math.max(intElem, extElem); const internalCol = 25 + padding; const externalCol = 350 + padding; const color = d3.scaleOrdinal(d3.schemeDark2); const background_color = 'Ivory'; let layout = { width, height, gap, padding, baseFontSize, locFontSize, locLabelHeight, locLabelWidth, locLabelLeftPadding, locLabelPadding, locGroupPadding, rolFontSize, rolPillHeight, rolPillWidth, rolPillPadding, relatedRoleFontSize, relatedInitialsFontSize, relatedActivityFontSize, relatedRolePillWidth, relatedRolePillHeight, internalCol, externalCol, color, background_color, } return layout; }37:T5b6,function hover(event, d) { // debugger; const selectedRole = event.currentTarget.classList[1]; const diagram = d3.select("#diagram") // Highlight Role Pill const highlight = d3.select(`rect.${selectedRole}`) .attr('stroke', 'rgba(0,0,0,.5)') .attr('stroke-width', 2) // Update Activity Panel const foundRole = roles.find(rol => rol.id === selectedRole); foundRole.communications.forEach((comm, i) => { const relatedRole = roles.find(rol => rol.id == comm.id); if (intLocations.includes(comm.location)) { d3.select('div#intActivities') .append('div') .style('padding-left', '5px') .append(() => commsPill(foundRole, comm).node()) } else { d3.select('div#extActivities') .append('div') .style('padding-left', '5px') .append(() => commsPill(foundRole, comm).node()) } }) // debugger; // d3.select("#activities").selectAll(".relatedRoleActivity").call(wrap, 32); //Highlight connections for related roles InteractionContext.UpdateConnectionsRtSR(foundRole); InteractionContext.ConnectionsRtSR.transition().duration(250).attr('opacity', 1); //Fade connections for unrelated roles InteractionContext.UpdateConnectionsNRtSR(foundRole); InteractionContext.ConnectionsNRtSR.classed('faded', true); // Fade unrelated roles InteractionContext.UpdateRolesNRtSR(foundRole); InteractionContext.RolesNRtSR.classed('faded', true); }38:T517,InteractionContext = { const context = { RolesRtSR: null, RolesNRtSR: null, ConnectionsRtSR: null, ConnectionsNRtSR: null, UpdateRolesRtSR: function(foundRol) { const rolesRtSR = [...new Set(foundRol.communications.map(rol => rol.id)),foundRol.id]; this.RolesRtSR = d3.selectAll('g.role').filter((d, i, n) => { return rolesRtSR.includes(n[i].className.baseVal.split(' ')[1]) }) }, UpdateRolesNRtSR: function(foundRol) { const rolesRtSR = [...new Set(foundRol.communications.map(rol => rol.id)),foundRol.id]; const rolesNRtSR = rolesArr.filter(rol => !rolesRtSR.includes(rol)); this.RolesNRtSR = d3.selectAll('g.role').filter((d, i, n) => { return rolesNRtSR.includes(n[i].className.baseVal.split(' ')[1]) }) }, UpdateConnectionsRtSR: function(foundRol) { this.ConnectionsRtSR = d3.select('#diagram').selectAll('path.connection').filter((d, i, n) => { return n[i].className.baseVal.includes(foundRol.id); }); }, UpdateConnectionsNRtSR: function(foundRol) { this.ConnectionsNRtSR = d3.select('#diagram').selectAll('path.connection').filter((d, i, n) => { return !n[i].className.baseVal.includes(foundRol.id); }); }, }; return context; }39:Tadc,function commsPill(foundRole, comm) { // console.log("comm.activity: ", comm.activity) const roleActivityChars = Math.round(layout.relatedRolePillWidth / layout.relatedActivityFontSize * 1.75) const lines = calculateLines(comm.activity, roleActivityChars) const relatedRolePillHeight = layout.relatedRoleFontSize * 1.4 + (layout.relatedActivityFontSize * lines.length * 1.4); // console.log("Outside lines: ", lines) // const activityLines = wrapActivity(comm.activity, 32) // console.log("activityLines: ", activityLines) const svgNode = d3.create('svg') .attr('width', layout.relatedRolePillWidth + 'px') .attr('height', relatedRolePillHeight) .attr('id', 'comms') const Activity = svgNode.append('g') let circleColor = foundRole.color let circleInitials = getInitials(foundRole.role) let pillColor = rolesColor(comm.id) let pillRole = comm.role if (comm.request === 'receives') { circleColor = rolesColor(comm.id) circleInitials = getInitials(comm.role) pillColor = foundRole.color pillRole = foundRole.role } // Pill Activity.append('rect') .attr('fill', pillColor) .attr('width', layout.relatedRolePillWidth) // .attr('height', layout.relatedRolePillHeight * activityLines.length()) .attr('height', relatedRolePillHeight) .attr('rx', layout.relatedRolePillHeight/2) .attr('ry', layout.relatedRolePillHeight/2) // Circle Activity.append('rect') .attr('transform', 'translate(' + 4 + ',' + 4 + ')') .attr('fill', circleColor) .attr('stroke', 'white') .attr('width', layout.relatedRolePillHeight - 8) .attr('height', layout.relatedRolePillHeight - 8) .attr('rx', layout.relatedRolePillHeight / 2) .attr('ry', layout.relatedRolePillHeight / 2) // Circle Initials Activity.append('text') .attr('class', 'relatedRoleInitials') .attr('transform', 'translate(' + (layout.relatedRolePillHeight / 2) + ',' + (layout.relatedRolePillHeight - layout.relatedInitialsFontSize * .8) + ')') .text(circleInitials) // Pill Role Activity.append('text') .attr('class', 'relatedRoleName') .attr('transform', 'translate(' + (layout.relatedRolePillHeight + layout.padding) + ',' + layout.relatedRolePillHeight / 2.25 + ')') .text(pillRole) //Activity Activity.append('text') .attr('class', 'relatedRoleActivity') .attr('transform', 'translate(' + (layout.relatedRolePillHeight + layout.padding) + ',' + (layout.relatedRolePillHeight - (layout.relatedActivityFontSize * .4)) + ')') .text(comm.activity) // lines2tspans(Activity.text, lines) Is there a form of this statement that works? if (lines.length > 1) svgNode.selectAll(".relatedRoleActivity").call(lines2tspans, lines); return svgNode; }3a:T13d4,function restructureDataAT(data) { // Initial data structures const locationsArr = [...new Set(data.flatMap((d) => [d.initiatorLocation, d.receiverLocation]))]; let locations = Object.assign(...[locationsArr.map(loc => ({ id: loc, type: '', color: '', roles: [] }))]); let roles = [] data.forEach( d => { const initiator = cleanName(d.initiatorRole) + '-' + cleanName(d.initiatorLocation) if (!roles.some(r => r.id === initiator)) roles.push({ 'id': initiator, 'role': d.initiatorRole, 'location': d.initiatorLocation, 'color': 'ghostwhite', 'communications': [] }) const receiver = cleanName(d.receiverRole) + '-' + cleanName(d.receiverLocation) if (!roles.some(r => r.id === receiver)) roles.push({ 'id': receiver, 'role': d.receiverRole, 'location': d.receiverLocation, 'color': 'ghostwhite', 'communications': [] }) }) const rolesArr = roles.map(rol => rol.id); const connectionsArr = [...new Set(data.flatMap((d) => [(cleanName(d.initiatorRole) + '-' + cleanName(d.initiatorLocation) + '--' + cleanName(d.receiverRole) + '-' + cleanName(d.receiverLocation))]))]; let connections = Object.assign(...[connectionsArr.map(loc => ({ ['id']: loc, activities: [] }))]) // Fill data structures let foundLoc, foundConn = {}; // Iterate data to extract connnections per role, roles in locations, comms per connection pair data.forEach((d,i) => { const iRolLoc = cleanName(d.initiatorRole) + '-' + cleanName(d.initiatorLocation); const rRolLoc = cleanName(d.receiverRole) + '-' + cleanName(d.receiverLocation); // Assign activities to roles roles.forEach((role,i) => { if ((role.id === iRolLoc) || (role.id === rRolLoc)) { let comms = { request: '', // initiates or receives id: '', role: '', location: '', destination: '', activity: d.reason} if (internalLocations.includes(d.initiatorLocation) && internalLocations.includes(d.receiverLocation)) { comms.destination = 'internal' } else { comms.destination = 'external' } if (iRolLoc === role.id) { comms.request = 'initiates' comms.id = cleanName(d.receiverRole) + '-' + cleanName(d.receiverLocation) comms.role = d.receiverRole comms.location = d.receiverLocation } if (rRolLoc === role.id) { comms.request = 'receives' comms.id = cleanName(d.initiatorRole) + '-' + cleanName(d.initiatorLocation) comms.role = d.initiatorRole comms.location = d.initiatorLocation } role.communications.push(comms) } // Roles per location // for the location in data.ini and data.rec add the role to the location foundLoc = locations.find(loc => loc.id === d.initiatorLocation); if (!(foundLoc.roles.includes(d.initiatorRole))) foundLoc.roles.push(d.initiatorRole) foundLoc = locations.find(loc => loc.id === d.receiverLocation); if (!(foundLoc.roles.includes(d.receiverRole))) foundLoc.roles.push(d.receiverRole) // Comms per connection pair // for the connection pair in data. add the activity/reason to the connection pair foundConn = connectionPairs.find(conn => conn.id === (iRolLoc + '--' + rRolLoc)); if (!(foundConn.activities.includes(d.reason))) { foundConn.activities.push(d.reason) } }) //End roles.forEach }) // End data.forEach const individualRoles = locations.find(l => l.id === individualsLocation).roles.length //setColors let intColors, extColors, indColors = 0; let foundRol = {}; locations.forEach((loc, i) => { if (internalLocations.includes(loc.id)) { loc.color = intColor(intColors) loc.type = 'internal' loc.roles.forEach(role => { foundRol = roles.find(rol => rol.id === (cleanName(role) + '-' + cleanName(loc.id))); foundRol.color = intColor(intColors).brighter(.5) }) // End loc.roles.forEach intColors += 1; } if (!internalLocations.includes(loc.id)) { loc.color = extColor(extColors) loc.type = 'external' loc.roles.forEach(role => { foundRol = roles.find(rol => rol.id === (cleanName(role) + '-' + cleanName(loc.id))); foundRol.color = extColor(extColors).brighter(.5) // console.log('foundRol.color:',foundRol.color, 'extColor:', extColor) }) // End loc.roles.forEach extColors += 1; } if (individualsLocation == loc.id) { loc.color = 'lightgray' loc.type = 'individuals' loc.roles.forEach(role => { foundRol = roles.find(rol => rol.id === (cleanName(role) + '-' + cleanName(loc.id))); foundRol.color = indColor(indColors) indColors += 1; }) // End loc.roles.forEach } }) // End locs.forEach return {individualRoles, internalLocations, externalLocations, locations, roles, connections} }3b:T7fb,restructureData = { let foundLoc, foundConn = {} // Iterate data to extract connnections per role, roles in locations, comms per connection pair data.forEach((d,i) => { const iRolLoc = cleanName(d.initiatorRole) + '-' + cleanName(d.initiatorLocation); const rRolLoc = cleanName(d.receiverRole) + '-' + cleanName(d.receiverLocation); // Assign activities to roles roles.forEach((role,i) => { if ((role.id === iRolLoc) || (role.id === rRolLoc)) { let comms = { request: '', // initiates or receives id: '', role: '', location: '', activity: d.reason} if (iRolLoc === role.id) { comms.request = 'initiates' comms.id = cleanName(d.receiverRole) + '-' + cleanName(d.receiverLocation) comms.role = d.receiverRole comms.location = d.receiverLocation } if (rRolLoc === role.id) { comms.request = 'receives' comms.id = cleanName(d.initiatorRole) + '-' + cleanName(d.initiatorLocation) comms.role = d.initiatorRole comms.location = d.initiatorLocation } role.communications.push(comms) } // Roles per location // for the location in data.ini and data.rec add the role to the location foundLoc = locations.find(loc => loc.id === d.initiatorLocation); if (!(foundLoc.roles.includes(d.initiatorRole))) foundLoc.roles.push(d.initiatorRole) foundLoc = locations.find(loc => loc.id === d.receiverLocation); if (!(foundLoc.roles.includes(d.receiverRole))) foundLoc.roles.push(d.receiverRole) // Comms per connection pair // for the connection pair in data. add the activity/reason to the connection pair foundConn = connectionPairs.find(conn => conn.id === (iRolLoc + '--' + rRolLoc)); if (!(foundConn.activities.includes(d.reason))) { foundConn.activities.push(d.reason) } }) //End roles.forEach }) // End data.forEach }3c:T536,setColors = { let intColors, extColors, indColors = 0; let foundRol = {}; individualRoles; locations.forEach((loc, i) => { if (internalLocations.includes(loc.id)) { loc.color = intColor(intColors) loc.type = 'internal' loc.roles.forEach(role => { foundRol = roles.find(rol => rol.id === (cleanName(role) + '-' + cleanName(loc.id))); foundRol.color = intColor(intColors).brighter(.5) }) // End loc.roles.forEach intColors += 1; } if (!internalLocations.includes(loc.id)) { loc.color = extColor(extColors) loc.type = 'external' loc.roles.forEach(role => { foundRol = roles.find(rol => rol.id === (cleanName(role) + '-' + cleanName(loc.id))); foundRol.color = extColor(extColors).brighter(.5) // console.log('foundRol.color:',foundRol.color, 'extColor:', extColor) }) // End loc.roles.forEach extColors += 1; } if (individualsLocation == loc.id) { loc.color = 'lightgray' loc.type = 'individuals' loc.roles.forEach(role => { foundRol = roles.find(rol => rol.id === (cleanName(role) + '-' + cleanName(loc.id))); foundRol.color = indColor(indColors) indColors += 1; }) // End loc.roles.forEach } }) // End locs.forEach return {locations, roles} }3d:Tb29,data = [ {initiatorRole: 'Underwriter', initiatorLocation: 'Lender', reason: 'UW to Ext Test', timesPerLoan: 2, receiverRole: 'Operations Manager', receiverLocation: 'Investor'}, {initiatorRole: 'Underwriter', initiatorLocation: 'Lender', reason: 'UW to LP Update 1', timesPerLoan: 2, receiverRole: 'Loan Processor', receiverLocation: 'Lender'}, {initiatorRole: 'Underwriter', initiatorLocation: 'Lender', reason: 'UW to LP Update 2', timesPerLoan: 4, receiverRole: 'Loan Processor', receiverLocation: 'Lender'}, {initiatorRole: 'Underwriter', initiatorLocation: 'Lender', reason: 'UW to LP Update 3', timesPerLoan: 6, receiverRole: 'Loan Processor', receiverLocation: 'Lender'}, {initiatorRole: 'Loan Officer', initiatorLocation: 'Lender', reason: 'LO to Bor Update', timesPerLoan: 4, receiverRole: 'Borrower', receiverLocation: 'Individuals'}, {initiatorRole: 'Loan Officer', initiatorLocation: 'Lender', reason: 'LO to Re Update', timesPerLoan: 4, receiverRole: 'Realtor', receiverLocation: 'Individuals'}, {initiatorRole: 'Loan Officer', initiatorLocation: 'Lender', reason: 'LO to HI Update', timesPerLoan: 4, receiverRole: 'Home Inspector', receiverLocation: 'Individuals'}, {initiatorRole: 'Loan Officer', initiatorLocation: 'Lender', reason: 'LO to Br Update', timesPerLoan: 4, receiverRole: 'Broker', receiverLocation: 'Individuals'}, {initiatorRole: 'Loan Processor', initiatorLocation: 'Lender', reason: 'LP to Cl Update', timesPerLoan: 4, receiverRole: 'Closer', receiverLocation: 'Lender'}, {initiatorRole: 'Underwriter', initiatorLocation: 'Lender', reason: 'UW to LO Update', timesPerLoan: 4, receiverRole: 'Loan Officer', receiverLocation: 'Lender'}, {initiatorRole: 'Loan Processor', initiatorLocation: 'Lender', reason: 'LP to SA Update', timesPerLoan: 4, receiverRole: 'Settlement Agent', receiverLocation: 'Title Company'}, {initiatorRole: 'Settlement Agent', initiatorLocation: 'Title Company', reason: 'SA to LP Update', timesPerLoan: 4, receiverRole: 'Loan Processor', receiverLocation: 'Lender'}, {initiatorRole: 'Operations Manager', initiatorLocation: 'Lender', reason: 'OM to PM checking difficult loan', timesPerLoan: 4, receiverRole: 'Purchasing Manager', receiverLocation: 'Investor'}, {initiatorRole: 'Funding Manager', initiatorLocation: 'Lender', reason: 'FM to OM checking difficult loan and then a very long amount of text to figure out line breaks', timesPerLoan: 4, receiverRole: 'Operations Manager', receiverLocation: 'Investor'}, {initiatorRole: 'Broker', initiatorLocation: 'Individuals', reason: 'Br to Cl checking difficult loan', timesPerLoan: 4, receiverRole: 'Closer', receiverLocation: 'Lender'}, {initiatorRole: 'Loan Processor', initiatorLocation: 'Lender', reason: 'LP asking UW question', timesPerLoan: 10, receiverRole: 'Underwriter', receiverLocation: 'Lender'} ]3e:[] 31:{"id":"65cffee223ffbda1","slug":"communications","title":"Communications","thumbnail":"d82ad4c8a6f7bac6134f3b9086053e152ed17effe2a1d49eecccd308f9f6c54a","access_level":"public","create_time":"$D2022-01-02T20:15:39.249Z","update_time":"$D2022-05-03T22:47:24.797Z","view_time":null,"first_public_time":"$D2022-05-03T23:05:06.063Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"5139cef5fca98dea","login":"kalmdown","name":"kalmdown","avatar_url":"https://avatars-next.observableusercontent.com/814a7bacd30761488bdf6c656b5f3b344a25453cf8e845fdffdc2b15c37937b4","tier":"starter_2024"},"version":6173,"publish_version":6173,"role":null,"authored":false,"authors":[{"type":"individual","id":"bc77e0cd5faff006","login":"kalmdown","name":"kalmdown","avatar_url":"https://avatars-next.observableusercontent.com/814a7bacd30761488bdf6c656b5f3b344a25453cf8e845fdffdc2b15c37937b4","tier":null}],"members":[{"type":"individual","id":"a732b2732395a45e","login":"alexander-carroll","name":"","avatar_url":"https://avatars-next.observableusercontent.com/52ff5d56676b92850e08248160a0f4ef01f84c94a0d6bec6396a8451391ffdfc","tier":null,"role":"editor"},{"type":"individual","id":"bc77e0cd5faff006","login":"kalmdown","name":"kalmdown","avatar_url":"https://avatars-next.observableusercontent.com/814a7bacd30761488bdf6c656b5f3b344a25453cf8e845fdffdc2b15c37937b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Communications","cells":[{"id":0,"value":"# Communications\nA visualization showing the communications activities within an organization and to external organizations.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3497,"value":"

\n Roles\n

\n ${renderLines}\n

\n ${activitiesPanel} \n \n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1587,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3678,"value":"activitiesPanel = {\n const divNode = html`

`\n const container = d3.select(divNode)\n \n container\n .append('div')\n .attr('class', 'title')\n .append('span')\n .text('Communications')\n \n container\n .append('div')\n .attr('class', 'activitiesLocation')\n .append('span')\n .text('Internal')\n \n container\n .append('div')\n .attr('id', 'intActivities')\n\n container\n .append('div')\n .attr('class', 'activitiesLocation')\n .append('span')\n .text('External')\n \n container\n .append('div')\n .attr('id', 'extActivities')\n\n return divNode;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2173,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3424,"value":"# Interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3206,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3207,"value":"function mouseOut(event, d) {\n\n const roleName = event.currentTarget.classList[1];\n\n // Remove highlight\n d3.selectAll(`rect.${roleName}`)\n .attr('stroke', 'rgba(0,0,0,0')\n\n const rolesNIA = d3.selectAll('div.cell').filter(d => rolesNIA(d.projects, roleName))\n\n const intActivities = d3.select('div#intActivities')\n intActivities.selectAll('*').remove();\n const extActivities = d3.select('div#extActivities')\n extActivities.selectAll('*').remove();\n\n // Restore related connection transparency\n InteractionContext.ConnectionsRtSR.transition().duration(250).attr('opacity', '.3');\n \n // Restore unrelated roles\n InteractionContext.RolesNRtSR.classed('faded', false)\n\n // Restore unrealted connections transparency\n InteractionContext.ConnectionsNRtSR.classed('faded', false)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3215,"value":"function mouseMove(caption, value, pageX, pageY) {\n toolTip.style('left', pageX + 18 + 'px')\n .style('top', pageY + 18 + 'px')\n .style('display', 'block')\n .html(`${caption} ${value}%`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5442,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5750,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6015,"value":"function calculateLines(text, width) {\n // console.log(\"Inside text: \", text)\n var words = text.split(/\\s+/).reverse(),\n word,\n line = [],\n lines = [],\n lineNumber = 0;\n while (word = words.pop()) {\n line.push(word);\n // console.log(\"In progress line: \", line, \" length: \", line.join(\" \").length )\n if (line.join(\" \").length > width) {\n line.pop()\n lines[lineNumber] = line.join(\" \");\n line = [word];\n lineNumber++\n }\n }\n // console.log(\"lineNumber\", lineNumber)\n lines[lineNumber] = line.join(\" \");\n // console.log(\"Inside lines: \", lines)\n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6019,"value":"function lines2tspans(text, lines) {\n var line = [],\n lineNumber = 0,\n lineHeight = 1.2, // ems\n tspan = text.text(null);\n while (line = lines.shift()) {\n tspan = text\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", `${lineNumber * lineHeight}em`)\n .text(line);\n ++lineNumber\n }\n console.log(text)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5983,"value":"function wrapActivity(text, width) {\n console.log(\"text: \", text) \n var words = text.split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.2, // ems\n y = text.attr(\"y\"),\n dy = 0,\n tspan = text\n .text(null)\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", y)\n .attr(\"dy\", dy + \"em\");\n while ((word = words.pop())) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (line.join(\" \").length > width) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", y)\n .attr(\"dy\", `${++lineNumber * lineHeight + dy}em`)\n .text(word);\n }\n }\n if (lineNumber == 0) {\n tspan.attr(\"dy\", `${dy}em`);\n // tspan.attr(\"dy\", `${dy + lineHeight / 2}em`);\n }\n };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3218,"value":"toolTip = d3.select('body').append('div').attr('class', 'toolTip')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3963,"value":"getColorDiagnostic = roles.find(r => r.id === 'Borrower-Individuals').color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4910,"value":"# Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4449,"value":"textColor = {\n let findRole = roles.find(r => {return r.id === 'Realtor-Individuals' }) // Broker--Individuals Realtor--Individuals\n const {l, c, h} = findRole.color\n const color = (l > 50) ? '#000000' : '#ffffff'\n return l, color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3905,"value":"viewof intScale = Inputs.select(Object.keys(scales), {value: 'rdPU', label: 'Internal locations color scheme'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3909,"value":"ramp(scales[intScale])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3078,"value":"intColor = d3.scaleOrdinal()\n .domain([0, internalLocations.length])\n .range(d3.quantize(t => {\n const {l, c, h} = d3.lch(scales[intScale](t))\n return d3.lch(80, 30, h)\n }, internalLocations.length + 1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4231,"value":"swatches(d3.quantize(intColor, internalLocations.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4383,"value":"intColor.domain()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4381,"value":"intColor.range()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4204,"value":"viewof extScale = Inputs.select(Object.keys(scales), {value: 'viridis', label: 'External locations color scheme'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4212,"value":"ramp(scales[extScale])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3141,"value":"extColor = d3.scaleOrdinal()\n .domain([1, externalLocations.length])\n .range(d3.quantize(t => {\n const {l, c, h} = d3.lch(scales[extScale](t))\n return d3.lch(80, 30, h)\n }, externalLocations.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4305,"value":"swatches(d3.quantize(extColor, externalLocations.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4377,"value":"extColor.domain()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4379,"value":"extColor.range()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4205,"value":"viewof indScale = Inputs.select(Object.keys(scales), {value: 'spectral', label: 'Individual roles color scheme'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4213,"value":"ramp(scales[indScale])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3902,"value":"indColor = d3.scaleOrdinal()\n .domain([0, individualRoles])\n .range(d3.quantize(t => {\n const {l, c, h} = d3.lch(scales[indScale](t))\n return d3.lch(80, 30, h)\n }, individualRoles))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4373,"value":"indColor.domain()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4375,"value":"indColor.range()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4307,"value":"// swatches(d3.quantize(indColor, individualRoles))\n\nswatches(d3.quantize(indColor, locations.find(l => l.id === individualsLocation).roles.length ))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3407,"value":"# Data Wrangling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5167,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4316,"value":"individualRoles = {\n restructureData;\n return locations.find(l => l.id === individualsLocation).roles.length\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4491,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3363,"value":"intLocations = ['Lender']\n// viewof intLocations = Inputs.select(locations.map(l => l.id), {multiple: true, label: 'Locations that will be considered part of the organization'})\n// The locations that should be considered to part of the organization of interest. ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3892,"value":"individualsLocation = 'Individuals'\n// viewof individualsLocation = Inputs.select(externalLocations, {label: 'Location that will collect individuals'})\n// A 'location' to collect roles where there is only one at the location to keep things tidy. ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4534,"value":"internalLocations = locationsArr.filter(l => intLocations.includes(cleanName(l)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3285,"value":"externalLocations = locationsArr.filter(l => !intLocations.includes(cleanName(l)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4525,"value":"locationsArr = [...new Set(data.flatMap((d) => [d.initiatorLocation, d.receiverLocation]))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"locations = locationsArr.map(loc => ({ id: loc, type: '', color: '', roles: [] }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4434,"value":"roles = {\n let roles = []\n\n data.forEach( d => {\n const initiator = cleanName(d.initiatorRole) + '-' + cleanName(d.initiatorLocation)\n if (!roles.some(r => r.id === initiator)) \n roles.push({ \n 'id': initiator, \n 'role': d.initiatorRole, \n 'location': d.initiatorLocation, \n 'color': 'ghostwhite',\n 'communications': [] })\n const receiver = cleanName(d.receiverRole) + '-' + cleanName(d.receiverLocation)\n if (!roles.some(r => r.id === receiver)) \n roles.push({ \n 'id': receiver, \n 'role': d.receiverRole, \n 'location': d.receiverLocation, \n 'color': 'ghostwhite',\n 'communications': [] })\n })\n // console.log('roles returned: ', roles)\n return roles;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4743,"value":"rolesArr = roles.map(rol => rol.id);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4529,"value":"connectionPairsArr = [...new Set(data.flatMap((d) => [(cleanName(d.initiatorRole) + '-' + cleanName(d.initiatorLocation) + '--' + cleanName(d.receiverRole) + '-' + cleanName(d.receiverLocation))]))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"connectionPairs = connectionPairsArr.map(loc => ({ ['id']: loc, activities: [] }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2579,"value":"function cleanName(Name) { \n return Name.replace(/\\s*&?\\s*/g, '');\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5958,"value":"function wrap(text, width) {\n text.each(function () {\n var text = d3.select(this),\n words = text.text().split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.2, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")),\n tspan = text\n .text(null)\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", y)\n .attr(\"dy\", dy + \"em\");\n while ((word = words.pop())) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (line.join(\" \").length > width) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", y)\n .attr(\"dy\", `${++lineNumber * lineHeight + dy}em`)\n .text(word);\n }\n }\n if (lineNumber == 0) {\n tspan.attr(\"dy\", `${dy}em`);\n // tspan.attr(\"dy\", `${dy + lineHeight / 2}em`);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1913,"value":"regex_sep = /[a-zA-Z]\\w+/g","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2882,"value":"regex_RolLoc = /([a-zA-Z]\\w+)-([a-zA-Z]\\w+)/g","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5551,"value":"getInitials = (fullName) => {\n const allNames = fullName.trim().split(' ');\n const initials = allNames.reduce((acc, curr, index) => {\n if(index === 0 || index === allNames.length - 1){\n acc = `${acc}${curr.charAt(0).toUpperCase()}`;\n }\n return acc;\n }, '');\n return initials;\n}\n// https://stackoverflow.com/a/66239174/1533309","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5916,"value":"rolesColor = (role) => {\n let color_role = roles.find(r => r.id === role)\n return color_role.color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof comms = Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2930,"value":"# Tests","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"locExtTest = locations.filter(item => item.id != internalLocations);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"locIntTest = locations.filter(item => item.id == internalLocations);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2794,"value":"regex_test = {\n const iRol = connectionPairs[0].id.match(regex_sep)[0];\n const iLoc = connectionPairs[0].id.match(regex_sep)[1];\n const rRol = connectionPairs[0].id.match(regex_sep)[2];\n const rLoc = connectionPairs[0].id.match(regex_sep)[3];\n const iRolLoc = connectionPairs[0].id.match(regex_RolLoc)[0];\n const rRolLoc = connectionPairs[0].id.match(regex_RolLoc)[1];\n return [iRol, iLoc, rRol, rLoc, iRolLoc, rRolLoc]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"# Resources ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3076,"value":"import { scales } from '@makio135/give-me-colors'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3911,"value":"// import { ramp } from '@mbostock/color-ramp'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3914,"value":"import { select } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4233,"value":"import { ramp, swatches } from '@mbostock/working-with-color'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2992,"value":"symbols = (await import('https://cdn.jsdelivr.net/npm/d3-symbol-extra@0.1.0/build/d3-symbol-extra.min.js').default)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"**Somewhat derived from: **\n\nMatteo Abrate's Tangled tree visualization II\n\nhttps://observablehq.com/@nitaku/tangled-tree-visualization-ii\n\nD3-DAG: Sugiyama with Arrows\n\nhttps://observablehq.com/@erikbrinkman/d3-dag-sugiyama-with-arrows\n\nToph's help\n\nhttps://observablehq.com/d/6231fa38db9ef019","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4679,"value":"workbook = FileAttachment('microsoft://ICE MT Communications.xlsx').xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4680,"value":"workbook.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4681,"value":"Inputs.table(\n workbook.sheet(0, {\n headers: false,\n // range: 'A1:J10'\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 32:"$31:body"