2b:null 2c:["$","title",null,{"children":"Bipartite graph visualization | Yaroslav Sergienko | Observable"}] 31:T567,{ function findRectOrigins(edge) { if (!edge) return []; const {Source, Target} = edge; const res = []; clusters.forEach(item => { if (item.Source === Source && item.Target === Target) { res.push(item) } }); return res; } function remove(array, item) { const idx = array.indexOf(item); if (idx === -1) return array; const res = array.slice(); res.splice(idx, 1); return res; } function add(array, item) { const res = array.slice(); res.push(item); return res; } const origins = findRectOrigins(selectedEdge) function resize(dw, dh) { origins[0].w = Math.max(1, origins[0].w + dw); origins[0].h = Math.max(1, origins[0].h + dh); mutable clusters = clusters; } const p = []; if (origins.length > 0) { p.push(smartButton('Remove cluster', () => mutable clusters = remove(clusters, origins[0]))); p.push(smartButton('width++', () => resize(+1, 0))); p.push(smartButton('width--', () => resize(-1, 0))); p.push(smartButton('height++', () => resize(0, +1))); p.push(smartButton('height--', () => resize(0, -1))); } else { p.push(smartButton('Add cluster', () => mutable clusters = add(clusters, {Source: selectedEdge.Source, Target: selectedEdge.Target, w: 1, h: 1, no: clusters.length == 0 ? 0 : R.last(clusters).no + 1}))); } return panel(...p); }32:Tcdf,table = { const svg = d3.select(DOM.svg(1, 1)); const g = svg.append('g'); const vertex2xy = ([group, no]) => 70 + no * tableCellSize; const ranges = {}; resEdges.forEach(({Source, Target}) => { const ty = vertex2xy(vertexPos[Target]); if (!(Source in ranges)) { ranges[Source] = {min: ty, max: ty}; } ranges[Source].min = Math.min(ranges[Source].min, ty); ranges[Source].max = Math.max(ranges[Source].max, ty); const sx = vertex2xy(vertexPos[Source]); if (!(Target in ranges)) { ranges[Target] = {min: sx, max: sx}; } ranges[Target].min = Math.min(ranges[Target].min, sx); ranges[Target].max = Math.max(ranges[Target].max, sx); }); const hLink = g.append('g').selectAll('line') .data(manualTargetOrder) .enter().append('line') .attr('fill', 'none') .attr('stroke', 'lightgray') .attr('line-width', 1) .attr('y1', d => vertex2xy(vertexPos[d])) .attr('y2', d => vertex2xy(vertexPos[d])) .attr('x1', d => ranges[d].min) .attr('x2', d => ranges[d].max); const vLink = g.append('g').selectAll('line') .data(manualSourceOrder) .enter().append('line') .attr('fill', 'none') .attr('stroke', 'lightgray') .attr('line-width', 1) .attr('x1', d => vertex2xy(vertexPos[d])) .attr('x2', d => vertex2xy(vertexPos[d])) .attr('y1', d => ranges[d].min) .attr('y2', d => ranges[d].max); if (showClusters) { g.append('g').selectAll('rect') .data(clusters) .enter().append('rect') .attr('fill', (item, no) => d3.interpolateRainbow(no / clusters.length)) .attr('x', ({Source}) => vertex2xy(vertexPos[Source]) - tableCellSize / 2) .attr('y', ({Target}) => vertex2xy(vertexPos[Target]) - tableCellSize / 2) .attr('width', ({w}) => w * tableCellSize) .attr('height', ({h}) => h * tableCellSize); } const rect = g.append('g') .attr('stroke', 'gray') .selectAll('rect') .data(resEdges) .enter().append('rect') .on('click', d => mutable selectedEdge = d) .on('mouseout', d => showTooltip && window.modalManager.close()) .on('mouseover', d => showTooltip && window.modalManager.open(html`${d.Source}
${d.Target}`, 1)) .attr('fill', d => d === selectedEdge && highlightTable ? 'red': (selectedEdge && R.find(R.whereEq({Source: d.Source, Target: d.Target}), clusters) && showClusters ? 'yellow' : 'lightgray')) .attr('width', 6) .attr('height', 6) .attr('opacity', 1) .attr('x', ({Source}) => vertex2xy(vertexPos[Source]) - 3) .attr('y', ({Target}) => vertex2xy(vertexPos[Target]) - 3); const sourceText = g.append('g').selectAll('text') .data(manualTargetOrder) .enter().append('text') .style('text-anchor', 'end') .attr('transform', d => `translate(${ranges[d].min}, ${vertex2xy(vertexPos[d])})`) .text(d => d.trim()) .call(tableFont.labelSource.d3text); const targetText = g.append('g').selectAll('text') .data(manualSourceOrder) .enter().append('text') .attr('transform', d => `translate(${vertex2xy(vertexPos[d])}, ${ranges[d].min}) rotate(-90)`) .style('text-anchor', 'start') .text(d => d.trim()) .call(tableFont.labelTarget.d3text); return clipBg(svg, g); }33:T4ae,selectedVertex && ( selectedVertex[0] === 0 && panel( smartButton('Move down', () => mutable manualSourceY = moveSaveOrder(manualSourceY, manualSourceOrder.indexOf(selectedVertex[1]), +1)), smartButton('Move up', () => mutable manualSourceY = moveSaveOrder(manualSourceY, manualSourceOrder.indexOf(selectedVertex[1]), -1)), smartButton('Shrink', () => mutable manualSourceY = shrink(manualSourceY, manualSourceOrder.indexOf(selectedVertex[1]))), smartButton('Reset', () => mutable manualSourceY = R.range(0, manualSourceY.length)), ) || selectedVertex[0] === 1 && panel( smartButton('Move down', () => mutable manualTargetY = moveSaveOrder(manualTargetY, manualTargetOrder.indexOf(selectedVertex[1]), +1)), smartButton('Move up', () => mutable manualTargetY = moveSaveOrder(manualTargetY, manualTargetOrder.indexOf(selectedVertex[1]), -1)), smartButton('Shrink', () => mutable manualTargetY = shrink(manualTargetY, manualTargetOrder.indexOf(selectedVertex[1]))), smartButton('Reset', () => mutable manualTargetY = R.range(0, manualTargetY.length)), ) )34:Tf88,sankey = { const svg = d3.select(DOM.svg(1, 1)); const g = svg.append('g'); // const leftY = R.fromPairs(manualSourceOrder.map((source, no) => [source, no * sankeyRowHeight])); // const rightY = alignGraph(leftY, manualTargetOrder, resEdges, sankeyRowHeight); //const vertex2xy = ([group, no]) => group == 0 ? [0, no * sankeyRowHeight] : [100, no * sankeyRowHeight]; const vertex2xy = ([group, no]) => group == 0 ? [0, manualSourceY[no] * sankeyRowHeight] : [100, manualTargetY[no] * sankeyRowHeight]; const link = g.append("g") .selectAll("path") .data(clusters) .enter().append("path") .style("mix-blend-mode", "multiply"); link.attr("d", ({Source, Target, w, h}, no) => { const [sx, sy0] = vertex2xy(vertexPos[Source]); const [tx, ty0] = vertex2xy(vertexPos[Target]); const sy1 = vertex2xy(vertexPos[manualSourceOrder[manualSourceOrder.indexOf(Source) + w - 1]])[1] + sankeyRowHeight; const ty1 = vertex2xy(vertexPos[manualTargetOrder[manualTargetOrder.indexOf(Target) + h - 1]])[1] + sankeyRowHeight; // const [sy1, ty1] = [sy0 + w * sankeyRowHeight, ty0 + h * sankeyRowHeight]; const [xm, sym, tym] = [(sx + tx) / 2, (sy0 + sy1) / 2, (ty0 + ty1) / 2]; const ctx = d3.path(); if (sankeyLines) { const [sx, tx] = [braceXLeft[no], braceXRight[no]]; ctx.moveTo(sx + braceWidth, sym); ctx.bezierCurveTo(xm, sym, xm, tym, tx - braceWidth, tym); if (sankeySquaredBrackets) { ctx.moveTo(sx, sy0); ctx.lineTo(sx + braceWidth, sy0); ctx.lineTo(sx + braceWidth, sy1); ctx.lineTo(sx, sy1); ctx.moveTo(tx, ty0); ctx.lineTo(tx - braceWidth, ty0); ctx.lineTo(tx - braceWidth, ty1); ctx.lineTo(tx, ty1); } else { return makeCurlyBrace(sx, sy0, sx, sy1, -braceWidth, braceCurliness) + makeCurlyBrace(tx, ty0, tx, ty1, braceWidth, braceCurliness) + ' ' + ctx.toString(); } /* ctx.moveTo(sx, sy0); ctx.lineTo(sx, sy1); ctx.moveTo(tx, ty0); ctx.lineTo(tx, ty1); ctx.moveTo(sx, sym); */ ; } else { ctx.moveTo(sx, sy0); ctx.bezierCurveTo(xm, sy0, xm, ty0, tx, ty0); ctx.lineTo(tx, ty1); ctx.bezierCurveTo(xm, ty1, xm, sy1, sx, sy1); ctx.closePath(); } return ctx.toString(); }) .attr('fill', sankeyLines ? 'none' : sankeyColored ? (d, no) => d3.interpolateRainbow(no / clusters.length) : 'gray') .attr('stroke', !sankeyLines ? 'none' : sankeyColored ? (d, no) => d3.interpolateRainbow(no / clusters.length) : 'gray') .attr('stroke-width', 2) .on('click', (d, no) => mutable selectedBrace = no) .attr('opacity', sankeyLines ? 1 : 0.3); const sourceText = g.append('g').selectAll('text') .data(manualSourceOrder) .enter() .append('g') .on('click', d => mutable selectedVertex = [0, d]) .append('text') .style('cursor', 'pointer') .style('text-anchor', 'end') .attr('x', 0) .attr('y', d => vertex2xy(vertexPos[d])[1]) .text(d => d.trim()) .call(sankeyFont.labelSource.d3text, d => highlightSankey && R.equals(selectedVertex, [0, d]) ? 'red' : undefined) const targetText = g.append('g').selectAll('text') .data(manualTargetOrder) .enter() .append('g') .on('click', d => mutable selectedVertex = [1, d]) .append('text') .style('cursor', 'pointer') .attr('x', 100) .attr('y', d => vertex2xy(vertexPos[d])[1]) .style('text-anchor', 'start') .text(d => d.trim()) .call(sankeyFont.labelTarget.d3text, d => highlightSankey && R.equals(selectedVertex, [1, d]) ? 'red' : undefined) return clipBg(svg, g); }35:T860,graph = { const svg = d3.select(DOM.svg(1, 1)); const g = svg.append('g'); const vertex2xy = ([group, no]) => group == 0 ? [0, manualSourceY[no] * sankeyRowHeight] : [100, manualTargetY[no] * sankeyRowHeight]; function isInCluster({Source, Target}, {Source: CSource, Target: CTarget, w, h}) { const si = manualSourceOrder.indexOf(Source); const ti = manualTargetOrder.indexOf(Target); const csi = manualSourceOrder.indexOf(CSource); const cti = manualTargetOrder.indexOf(CTarget); return csi <= si && si < csi + w && cti <= ti && ti < cti + h; } const link = g.append('g') .attr('fill', 'none') .attr('stroke', 'gray') .selectAll('path') .data(resEdges) .enter().append('path') .attr('opacity', 0.5) .attr("d", d3.linkHorizontal() .source(({Source}) => vertex2xy(vertexPos[Source])) .target(({Target}) => vertex2xy(vertexPos[Target]))) .attr('stroke', graphColored ? (item) => d3.interpolateRainbow(R.findIndex(cluster => isInCluster(item, cluster), clusters) / clusters.length) : 'gray') .style("mix-blend-mode", "multiply"); const sourceText = g.append('g').selectAll('text') .data(manualSourceOrder) .enter() .append('g') .on('click', d => mutable selectedVertex = [0, d]) .append('text') .style('cursor', 'pointer') .style('text-anchor', 'end') .attr('x', 0) .attr('y', d => vertex2xy(vertexPos[d])[1]) .text(d => d.trim()) .call(graphFont.labelSource.d3text, d => highlightGraph && R.equals(selectedVertex, [0, d]) ? 'red' : undefined) const targetText = g.append('g').selectAll('text') .data(manualTargetOrder) .enter() .append('g') .on('click', d => mutable selectedVertex = [1, d]) .append('text') .style('cursor', 'pointer') .attr('x', 100) .attr('y', d => vertex2xy(vertexPos[d])[1]) .style('text-anchor', 'start') .text(d => d.trim()) .call(graphFont.labelTarget.d3text, d => highlightGraph && R.equals(selectedVertex, [1, d]) ? 'red' : undefined) return clipBg(svg, g); }36:T543,simpleGroups = { const resSource = []; let prevEdges = null; let curGroup = null; manualSourceOrder.forEach((source, no) => { const curEdges = manualTargetOrder.map(target => R.any(R.whereEq({Source: source, Target: target}), edges)); if (!R.equals(curEdges, prevEdges)) { curGroup = []; resSource.push(curGroup); } curGroup.push({label: source, no}); prevEdges = curEdges; }); resSource.forEach((group, no) => { const [first, last] = [group[0], R.last(group)]; group.minY = manualSourceY[first.no]; group.maxY = manualSourceY[last.no]; group.midY = (group.minY + group.maxY) / 2; group.no = no; }); const resTarget = []; prevEdges = null; curGroup = null; manualTargetOrder.forEach((target, no) => { const curEdges = manualSourceOrder.map(source => R.any(R.whereEq({Source: source, Target: target}), edges)); if (!R.equals(curEdges, prevEdges)) { curGroup = []; resTarget.push(curGroup); } curGroup.push({label: target, no}); prevEdges = curEdges; }); resTarget.forEach((group, no) => { const [first, last] = [group[0], R.last(group)]; group.minY = manualTargetY[first.no]; group.maxY = manualTargetY[last.no]; group.midY = (group.minY + group.maxY) / 2; group.no = no; }); return [resSource, resTarget]; }37:T573,simpleEdges = { const tree = {}; function getGroup(label, groups) { let res = null; groups.forEach(group => group.forEach(item => { if (item.label === label) { res = group; } })); return res; } function isInCluster({Source, Target}, {Source: CSource, Target: CTarget, w, h}) { const si = manualSourceOrder.indexOf(Source); const ti = manualTargetOrder.indexOf(Target); const csi = manualSourceOrder.indexOf(CSource); const cti = manualTargetOrder.indexOf(CTarget); return csi <= si && si < csi + w && cti <= ti && ti < cti + h; } resEdges.forEach(({Source, Target}) => { const color = d3.interpolateRainbow(R.findIndex(cluster => isInCluster({Source, Target}, cluster), clusters) / clusters.length); const sourceGroup = getGroup(Source, simpleGroups[0]); const targetGroup = getGroup(Target, simpleGroups[1]); if (!(sourceGroup.no in tree)) tree[sourceGroup.no] = {}; if (tree[sourceGroup.no][targetGroup.no]) { if (tree[sourceGroup.no][targetGroup.no] !== color) { // console.log('!!!'); } } tree[sourceGroup.no][targetGroup.no] = color; }); const edges = []; R.toPairs(tree).map(([source, targets]) => R.toPairs(targets).map(([target, color]) => { edges.push({source: simpleGroups[0][source], target: simpleGroups[1][target], color}); })); return edges; }38:Taa7,simplifiedGraph = { const svg = d3.select(DOM.svg(1, 1)); const g = svg.append('g'); const vertex2xy = ([group, no]) => group == 0 ? [0, manualSourceY[no] * graphRowHeight] : [100, manualTargetY[no] * graphRowHeight]; const link = g.append('g') .attr('fill', 'none') .attr('stroke', 'gray') .selectAll('path') .data(simpleEdges) .enter().append('path') .attr('opacity', 0.5) .attr("d", d3.linkHorizontal() .source(({source}) => [0, source.midY * graphRowHeight]) .target(({target}) => [100, target.midY * graphRowHeight])) .attr('stroke', graphColored ? R.prop('color') : 'gray') .style("mix-blend-mode", "multiply"); const lGroups = g.append('g') .selectAll('path') .data(simpleGroups[0]) .enter().append('path') .attr('d', group => { const x = 0; const [y0, y1, my] = [group.minY * graphRowHeight - 3, group.maxY * graphRowHeight + 3, group.midY * graphRowHeight]; const ctx = d3.path(); ctx.moveTo(x, y0); ctx.lineTo(x, y1); return ctx.toString(); }) .attr('stroke', 'black') .attr('stroke-width', 1) .attr('fill', 'none'); const rGroups = g.append('g') .selectAll('path') .data(simpleGroups[1]) .enter().append('path') .attr('d', group => { const x = 100; const [y0, y1, my] = [group.minY * graphRowHeight - 3, group.maxY * graphRowHeight + 3, group.midY * graphRowHeight]; const ctx = d3.path(); ctx.moveTo(x, y0); ctx.lineTo(x, y1); return ctx.toString(); }) .attr('stroke', 'black') .attr('stroke-width', 1) .attr('fill', 'none'); const sourceText = g.append('g').selectAll('text') .data(manualSourceOrder) .enter() .append('g') .on('click', d => mutable selectedVertex = [0, d]) .append('text') .style('cursor', 'pointer') .style('text-anchor', 'end') .attr('x', 0) .attr('y', d => vertex2xy(vertexPos[d])[1]) .text(d => d.trim()) .call(graphFont.labelSource.d3text, d => highlightGraph && R.equals(selectedVertex, [0, d]) ? 'red' : undefined) const targetText = g.append('g').selectAll('text') .data(manualTargetOrder) .enter() .append('g') .on('click', d => mutable selectedVertex = [1, d]) .append('text') .style('cursor', 'pointer') .attr('x', 100) .attr('y', d => vertex2xy(vertexPos[d])[1]) .style('text-anchor', 'start') .text(d => d.trim()) .call(graphFont.labelTarget.d3text, d => highlightGraph && R.equals(selectedVertex, [1, d]) ? 'red' : undefined) return clipBg(svg, g); }39:Ta14,class ModalManager { constructor() { this.onKeyDown = this.onKeyDown.bind(this); this.onMouseMove = this.onMouseMove.bind(this); this.modal = null; this.recordingKey = null; this.registry = []; } close() { if (this.modal === null) return; this.modal.remove(); this.modal = null; } open(content, tooltip) { if (this.modal) { this.close(); } this.modal = html`

`; if (tooltip) { this.modal.style.pointerEvents = 'none'; } this.modal.appendChild(content); this.modal.style.position = 'absolute'; this.modal.style.top = (this.mouseY + 20) + 'px'; this.modal.style.left = this.mouseX + 'px'; document.body.appendChild(this.modal); } recordKey(id, fun, callback) { this.registry = R.filter(({id: curId}) => curId !== id, this.registry); this.recordingKey = {id, fun, callback}; } updateKey(id, fun) { this.registry.forEach(item => { if (item.id === id) { item.fun = fun; } }); } getKeyById(id) { let result = null; this.registry.forEach(({id: curId, key}) => { if (id === curId) { result = key; } }); return result; } onKeyDown(e) { const key = e.key.toLowerCase(); if (this.recordingKey) { const {id, fun, callback} = this.recordingKey; if (key !== 'escape') { this.registry = R.filter(({id: curId, key: curKey}) => curId !== id && curKey !== key, this.registry); this.registry.push({id, key, fun}); callback(key); } else { callback(null); } e.preventDefault(); this.recordingKey = null; } else if (key === 'escape') { if (this.modal) { e.preventDefault(); this.close(); } } else { this.registry.forEach(({key: curKey, fun}) => { if (key === curKey) { e.preventDefault(); fun(); } }); } } onMouseMove(e) { this.mouseX = e.pageX; this.mouseY = e.pageY; } unregister() { this.close(); window.removeEventListener('mousemove', this.onMouseMove); window.removeEventListener('keydown', this.onKeyDown); } register() { if (window.modalManager) { this.registry = window.modalManager.registry; window.modalManager.unregister(); } window.modalManager = this; window.addEventListener('mousemove', this.onMouseMove); window.addEventListener('keydown', this.onKeyDown); return this; } }3a:[] 2f:{"id":"0d2805b0d36b6799","slug":"bipartite-graph-visualization","title":"Bipartite graph visualization","thumbnail":"4c661852502178738901ffa3592722f0ef8eab4a92d80334b7c8cf1500df448e","access_level":"public","create_time":"$D2018-10-05T12:54:24.279Z","update_time":"$D2018-10-08T13:49:38.894Z","view_time":null,"first_public_time":"$D2018-10-08T13:58:24.962Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"ae7dadfe8dcf0cbe","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":"starter_2024"},"version":1237,"publish_version":1237,"role":null,"authored":false,"authors":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null}],"members":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bipartite graph visualization","cells":[{"id":0,"value":"md`# Bipartite graph visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"md`## Import data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"viewof edges = fileUpload([\n {id: 'csv', title: 'csv', form: 'csv', info: 'CSV file with two columns: \"Source\" and \"Column\"', example: 'Source,Target\\nA,1\\nB,1\\nA,2', importer: data => data},\n], 'Edges', [{Source: 'A', Target: '1'}, {Source: 'B', Target: '1'}, {Source: 'A', Target: '2'}])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":705,"value":"panel(\n download(fun => fun(JSON.stringify(R.uniq(edges.map(R.prop('Source'))))), 'arbitrary_source_order.json', 'Download arbitrary source order'),\n download(fun => fun(JSON.stringify(R.uniq(edges.map(R.prop('Target'))))), 'arbitrary_target_order.json', 'Download arbitrary target order'),\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"viewof sourceOrder = fileUpload([\n {id: 'json', title: 'json', form: 'json', info: 'JSON file with single array of Source items', example: '[\"A\", \"B\"]', importer: R.map(Source => ({Source}))},\n {id: 'csv', title: 'csv', form: 'csv', info: 'CSV file with column: \"Source\"', example: 'Source\\nA\\nB', importer: data => data},\n], 'Source order', [{Source: 'A',}, {Source: 'B'}])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":538,"value":"sourceOrder","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"viewof targetOrder = fileUpload([\n {id: 'json', title: 'json', form: 'json', info: 'JSON file with single array of Target items', example: '[\"1\", \"2\"]', importer: R.map(Target => ({Target}))},\n {id: 'csv', title: 'csv', form: 'csv', info: 'CSV file with column: \"Target\"', example: 'Target\\n1\\n2', importer: data => data},\n], 'Target order', [{Target: '1',}, {Target: '2'}])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"targetOrder","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1037,"value":"viewof importedClusters = fileUpload([\n {id: 'json', title: 'json', form: 'json', info: 'JSON file with clusters', example: '[{\"Source\": \"A\", \"Target\": \"B\", \"w\": 2, \"h\": 2}]', importer: R.identity},\n], 'Clusters', [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1040,"value":"importedClusters","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1086,"value":"viewof sourceY = fileUpload([\n {id: 'json', title: 'json', form: 'json', info: 'JSON file with source Y', example: '[0, 1, 3]', importer: R.identity},\n], 'Source Y', [0, 1, 3])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1088,"value":"viewof targetY = fileUpload([\n {id: 'json', title: 'json', form: 'json', info: 'JSON file with target Y', example: '[0, 1, 3]', importer: R.identity},\n], 'Target Y', [0, 1, 3])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"md`## Preprocess data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"md`Edges ends, not specified in orders:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"unspecified = {\n const res = [];\n edges.forEach(({Source, Target}) => {\n if (!(Source in vertexPos)) res.push(Source);\n if (!(Target in vertexPos)) res.push(Target);\n });\n return R.uniq(res);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"md`Edges grouped by source:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"edgesCounts = {\n const counts = {};\n edges.forEach(({Source, Target}) => {\n if (!(Source in counts)) counts[Source] = {};\n if (!(Target in counts[Source])) counts[Source][Target] = 0;\n counts[Source][Target] += 1;\n });\n return counts;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"doubleEdges = {\n const res = [];\n R.toPairs(edgesCounts).forEach(\n ([Source, targets]) => R.toPairs(targets).forEach(\n ([Target, count]) => count > 1 && res.push([Source, Target])));\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"resEdges = {\n const res = [];\n R.toPairs(edgesCounts).forEach(\n ([Source, targets]) => R.toPairs(targets).forEach(\n ([Target, count]) => res.push({Source, Target})));\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"md`## Reorder`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"mutable manualSourceOrder = sourceOrder.map(R.prop('Source'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"mutable manualTargetOrder = targetOrder.map(R.prop('Target'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"vertexPos = {\n const res = {};\n manualSourceOrder.forEach((Source, no) => res[Source] = [0, no]);\n manualTargetOrder.forEach((Target, no) => res[Target] = [1, no]);\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"md`## Visualize table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"viewof tableFont = fontsSelection(['labelSource', 'labelTarget'], {labelSource: {fontFamily: 'Roboto Condensed', size: 9, size: 9, dx: -7, dy: 26}, labelTarget: {fontFamily: 'Roboto Condensed', size: 9, dx: 8, dy: 24}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"mutable selectedEdge = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"panel(\n smartButton('Move left', () => selectedEdge && (mutable manualSourceOrder = reorder(manualSourceOrder, selectedEdge.Source, -1))),\n smartButton('Move right', () => selectedEdge && (mutable manualSourceOrder = reorder(manualSourceOrder, selectedEdge.Source, +1))),\n smartButton('Move up', () => selectedEdge && (mutable manualTargetOrder = reorder(manualTargetOrder, selectedEdge.Target, -1))),\n smartButton('Move down', () => selectedEdge && (mutable manualTargetOrder = reorder(manualTargetOrder, selectedEdge.Target, +1))),\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":391,"value":"viewof showTooltip = checkbox({\n options: [{ value: 'toggle', label: \"Show tooltip\" }],\n value: 'toggle',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":457,"value":"viewof highlightTable = checkbox({\n options: [{ value: 'toggle', label: \"Highlight selection\" }],\n value: 'toggle',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":866,"value":"viewof showClusters = checkbox({\n options: [{ value: 'toggle', label: \"Show clusters on table\" }],\n value: 'toggle',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":750,"value":"mutable clusters = importedClusters","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":783,"value":"viewof tableCellSize = number({value: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":747,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":528,"value":"exportImage(table, tableFont, 'table')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":419,"value":"panel(\n download(fun => fun(JSON.stringify(manualSourceOrder)), 'source_order.json', 'Download source order'),\n download(fun => fun(JSON.stringify(manualTargetOrder)), 'target_order.json', 'Download target order'),\n download(fun => fun(JSON.stringify(clusters)), 'clusters.json', 'Download clusters'),\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":916,"value":"md`## Visualize sankey`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":966,"value":"function alignGraph(leftY, leftOrder, edges, minDist) {\n let lastY = null;\n const res = R.sortBy(R.prop('y'), leftOrder.map(target => {\n const sy = [];\n edges.map(({Source, Target}) => (Target === target) && sy.push(leftY[Source]));\n return {Target: target, y: R.mean(sy)};\n }));\n res.forEach(item => {\n if (lastY !== null) {\n if (item.y - lastY < minDist) {\n item.y = lastY + minDist;\n }\n }\n lastY = item.y;\n });\n return res.map(R.prop('y'));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":968,"value":"mutable manualSourceY = sourceY // manualSourceOrder.map((_, no) => no)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":970,"value":"mutable manualTargetY = targetY // manualTargetOrder.map((_, no) => no)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1098,"value":"function makeCurlyBrace(x1, y1, x2, y2, w, q) {\n //Calculate unit vector\n var dx = x1 - x2;\n var dy = y1 - y2;\n var len = Math.sqrt(dx * dx + dy * dy);\n dx = dx / len;\n dy = dy / len;\n\n //Calculate Control Points of path,\n var qx1 = x1 + q * w * dy;\n var qy1 = y1 - q * w * dx;\n var qx2 = (x1 - .25 * len * dx) + (1 - q) * w * dy;\n var qy2 = (y1 - .25 * len * dy) - (1 - q) * w * dx;\n var tx1 = (x1 - .5 * len * dx) + w * dy;\n var ty1 = (y1 - .5 * len * dy) - w * dx;\n var qx3 = x2 + q * w * dy;\n var qy3 = y2 - q * w * dx;\n var qx4 = (x1 - .75 * len * dx) + (1 - q) * w * dy;\n var qy4 = (y1 - .75 * len * dy) - (1 - q) * w * dx;\n\n return (\"M \" + x1 + \" \" + y1 +\n \" Q \" + qx1 + \" \" + qy1 + \" \" + qx2 + \" \" + qy2 +\n \" T \" + tx1 + \" \" + ty1 +\n \" M \" + x2 + \" \" + y2 +\n \" Q \" + qx3 + \" \" + qy3 + \" \" + qx4 + \" \" + qy4 +\n \" T \" + tx1 + \" \" + ty1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":972,"value":"function moveSaveOrder(yVals, itemNo, delta, minDist=1) {\n if (delta === 0) return yVals;\n const res = yVals.slice();\n let i = itemNo;\n let prevVal = null;\n while (0 <= i && i < res.length) {\n const val = res[i];\n if (prevVal !== null) {\n const dVal = (val - prevVal) * Math.sign(delta);\n if (dVal < minDist) {\n res[i] = prevVal + Math.sign(delta) * minDist;\n } else {\n break;\n }\n } else {\n res[i] = val + delta;\n }\n prevVal = res[i];\n i += Math.sign(delta);\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1066,"value":"function shrink(yVals, no) {\n const res = yVals.slice();\n if (no > 0) {\n const delta = Math.min(1, yVals[no] - yVals[no - 1] - 1);\n R.range(0, no).forEach(i => res[i] += delta);\n }\n if (no + 1 <= yVals.length - 1) {\n const delta = Math.min(1, yVals[no + 1] - yVals[no] - 1);\n R.range(no + 1, yVals.length).forEach(i => res[i] -= delta);\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":925,"value":"viewof sankeyFont = fontsSelection(['labelSource', 'labelTarget'], {labelSource: {fontFamily: 'Roboto Condensed', size: 9, size: 9, dx: -4, dy: 79}, labelTarget: {fontFamily: 'Roboto Condensed', size: 9, dx: 4, dy: 83}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":889,"value":"viewof sankeyRowHeight = number({value: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":931,"value":"viewof sankeyColored = checkbox({\n options: [{ value: 'toggle', label: \"Colored sankey\" }],\n value: 'toggle',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1094,"value":"viewof sankeyLines = checkbox({\n options: [{ value: 'toggle', label: \"Use lines instead of shapes\" }],\n value: 'toggle',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1158,"value":"viewof sankeySquaredBrackets = checkbox({\n options: [{ value: 'toggle', label: \"Use squared brackets\" }],\n value: 'toggle',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1079,"value":"viewof highlightSankey = checkbox({\n options: [{ value: 'toggle', label: \"Highlight selection\" }],\n value: 'toggle',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1013,"value":"mutable selectedVertex = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1115,"value":"viewof braceCurliness = DOM.range(0.2, 1) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1121,"value":"viewof braceWidth = DOM.range(1, 20) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1124,"value":"mutable selectedBrace = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1128,"value":"mutable braceXLeft = clusters.map(() => 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1131,"value":"mutable braceXRight = clusters.map(() => 100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1052,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1133,"value":"selectedBrace !== null && (panel(\n smartButton('<- }', () => {\n mutable braceXLeft = braceXLeft;\n braceXLeft[selectedBrace] -= 1;\n }),\n smartButton('} ->', () => {\n mutable braceXLeft = braceXLeft;\n braceXLeft[selectedBrace] += 1;\n }),\n smartButton('<- {', () => {\n mutable braceXRight = braceXRight;\n braceXRight[selectedBrace] -= 1;\n }),\n smartButton('{ ->', () => {\n mutable braceXRight = braceXRight;\n braceXRight[selectedBrace] += 1;\n }),))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":860,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1075,"value":"exportImage(sankey, sankeyFont, 'sankey')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1082,"value":"panel(\n download(fun => fun(JSON.stringify(manualSourceY)), 'source_y.json', 'Download source Y'),\n download(fun => fun(JSON.stringify(manualTargetY)), 'target_y.json', 'Download target Y'),\n download(fun => fun(JSON.stringify(braceXLeft)), 'brace_x_left.json', 'Download brace X left'),\n download(fun => fun(JSON.stringify(braceXRight)), 'brace_x_right.json', 'Download brace X right'),\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1146,"value":"md`## Visualize graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1148,"value":"viewof graphFont = fontsSelection(['labelSource', 'labelTarget'], {labelSource: {fontFamily: 'Roboto Condensed', size: 9, size: 9, dx: -4, dy: 79}, labelTarget: {fontFamily: 'Roboto Condensed', size: 9, dx: 4, dy: 83}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1175,"value":"viewof highlightGraph = checkbox({\n options: [{ value: 'toggle', label: \"Highlight selection\" }],\n value: 'toggle',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1155,"value":"viewof graphColored = checkbox({\n options: [{ value: 'toggle', label: \"Colored sankey\" }],\n value: 'toggle',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"exportImage(graph, graphFont, 'mychart')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1180,"value":"md`## Visualize simplified graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1182,"value":"viewof simplifiedFont = fontsSelection(['labelSource', 'labelTarget'], {labelSource: {fontFamily: 'Roboto Condensed', size: 9, size: 9, dx: -4, dy: 79}, labelTarget: {fontFamily: 'Roboto Condensed', size: 9, dx: 4, dy: 83}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1208,"value":"viewof graphRowHeight = number({value: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1184,"value":"viewof highlightSimplified = checkbox({\n options: [{ value: 'toggle', label: \"Highlight selection\" }],\n value: 'toggle',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1186,"value":"viewof simplifiedColored = checkbox({\n options: [{ value: 'toggle', label: \"Colored graph\" }],\n value: 'toggle',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1195,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1217,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1189,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1191,"value":"exportImage(simplifiedGraph, simplifiedFont, 'simplified')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md`\n-----------\n\n-----------\n\n-----------\n# Internals\n-----------\n\n-----------\n\n-----------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"import {number, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"import {R, d3, fileUpload, fontsSelection, exportImage, buttonsRow, clipBg} from \"@pallada-92/visualization-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":874,"value":"d3sankey = require(\"d3-sankey@0.7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"function reorder(list, elem, delta) {\n const index = R.indexOf(elem, list);\n if (index === -1) return list;\n return R.insert(Math.max(0, index + delta), elem, R.remove(index, 1, list))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"new ModalManager().register()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"// getEventListeners(window).keydown.map(fn => window.removeEventListener('keydown', fn.listener))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"function smartButton(label, onClick, id) {\n if (typeof id === 'undefined') id = label;\n // const state = {};\n const res = html``;\n const setLabel = label => {\n const key = window.modalManager.getKeyById(id);\n res.value = key ? `${label} (${key})` : label;\n }\n setLabel(label);\n window.modalManager.updateKey(id, () => onClick(setLabel));\n res.addEventListener('click', () => onClick(setLabel));\n res.addEventListener('contextmenu', e => {\n e.preventDefault();\n window.modalManager.recordKey(id, () => onClick(setLabel), key => res.value = key ? `${label} (${key})` : label);\n res.value = `${label} (press key...)`;\n });\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"function panel(...widgets) {\n const res = html`

`;\n widgets.forEach(widget => res.appendChild(widget));\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"function download(callback, fname, label, label2) {\n const result = html``;\n const button = html``;\n result.appendChild(button);\n button.onclick = () => {\n callback(data => {\n result.innerHTML = '';\n if (typeof data === 'string') {\n data = new Blob([data]);\n }\n const download = DOM.download(data, fname, label2 || 'Download');\n download.addEventListener('click', () => {\n result.innerHTML = '';\n result.append(button);\n });\n result.appendChild(download);\n });\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"