morph = { let lattice1 = rel.lat1; let lattice2 = rel.lat2; let left_adj = rel.left_adj; let right_adj = rel.right_adj; let lat1_len = lattice1.lattice.length; var config = { bottom: 550 } const svgnode = d3.select(svg ``); svgnode.append('g').attr('id', 'maps1'); svgnode.append('g').attr('id', 'maps2'); svgnode.append('g').attr('id', 'edges1').attr('transform', 'translate(100,0)'); svgnode.append('g').attr('id', 'nodes1').attr('transform', 'translate(100,0)'); svgnode.append('g').attr('id', 'label1').attr('transform', 'translate(100,600)'); svgnode.append('g').attr('id', 'edges2').attr('transform', 'translate(400,0)'); svgnode.append('g').attr('id', 'nodes2').attr('transform', 'translate(400,0)'); svgnode.append('g').attr('id', 'label2').attr('transform', 'translate(400,600)'); svgnode.append('g').attr('id', 'reset').attr('transform', 'translate(670,100)'); svgnode.append('g').attr('id', 'left').attr('transform', 'translate(650,200)'); svgnode.append('g').attr('id', 'right').attr('transform', 'translate(645,300)'); svgnode.append('g').attr('id', 'leftright').attr('transform', 'translate(610,400)'); function getNeighborhood(d){ let shift = lat1_len; let src = lattice2; if( d < lat1_len){ shift = 0; src = lattice1 } let item = [d - shift]; let lower = src.lattice[d - shift][1]; let upper = src.lattice[d - shift][2]; return lower.concat(upper, item) } // fix!!! function handleMouseover(e,d){ let str = getSetString(d); let shift; if (d < lat1_len){ svgnode.select('#label1') .select('text') .text(str) } else{ svgnode.select('#label2') .select('text') .text(str) } let index = d; let image; svgnode.selectAll('.map') .filter(function(d){ if( d[0] == index){ image = d[1]} return d[0] == index || d[1] == index }) .classed('hidden', false) let img_str = getSetString(image); if (image < lat1_len){ svgnode.select('#label1') .select('text') .text(img_str) } else{ svgnode.select('#label2') .select('text') .text(img_str) } } function handleMouseout(){ svgnode.selectAll('.map') .classed('hidden', true) } function handleCircleClick(e,d){ let shift = lat1_len; let elem = svgnode.selectAll('#nodes2, #edges2') if (d < lat1_len){ shift = 0; elem = svgnode.selectAll('#nodes1, #edges1') } let index = d - shift; elem.selectAll('.circles, .link') .classed('opaque', false); elem.selectAll('.circles') .filter(function(d){ return ( !getNeighborhood(d).includes(index)) }) .classed('opaque', true); elem.selectAll('.link') .filter(function(d){ return !( index == d.source || index == d.target) }) .classed('opaque', true); } function handleReset(e,d){ svgnode.selectAll('.circles, .link') .classed('opaque', false); svgnode.selectAll('g.map') .classed('hidden', true); } function handleLeft(e,d){ svgnode.select('#maps1') .selectAll('g.map') .classed('hidden', false) svgnode.select('#maps2') .selectAll('g.map') .classed('hidden', true) } function handleRight(e,d){ svgnode.select('#maps2') .selectAll('g.map') .classed('hidden', false) svgnode.select('#maps1') .selectAll('g.map') .classed('hidden', true) } function handleLeftRight(e,d){ svgnode.selectAll('g.map') .classed('hidden', false) } function getSetString(d){ // d is the index of the node let src = lattice2; let shift = lat1_len; if ( d < lat1_len){ src = lattice1; shift = 0; } let set_indices = src.lattice[d - shift][0]; let set_str = '{'; if(set_indices.length == 0){ set_str += ',' } for(let i = 0; i < set_indices.length; i++){ set_str += src.values[set_indices[i]] + ','; } return set_str.slice(0,-1) + "}" } function getTranslation(transform) { // Code from stack exchange var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); g.setAttributeNS(null, "transform", transform); var matrix = g.transform.baseVal.consolidate().matrix; return [matrix.e, matrix.f]; } function getPositions(s, t, lat_num){ // s and t are the indices of the nodes let positions = []; let elem; let shift = 0; if(lat_num == 1){ elem = svgnode.select('#nodes1'); } else{ elem = svgnode.select('#nodes2'); shift = lat1_len; } elem.selectAll('g.circles') .filter(function(d){ return (d - shift == s || d - shift == t) }) .each(function(d){ let trans = getTranslation(d3.select(this).attr("transform")); let parent_trans = getTranslation(d3.select(this.parentNode).attr("transform")); let pos = {}; pos.x = trans[0] + parent_trans[0]; pos.y = trans[1] + parent_trans[1]; positions.push(pos); }) return positions; } function getNodePosition(index){ let elem; let pos = {}; if (index < lat1_len){ elem = svgnode.select('#nodes1'); } else{ elem = svgnode.select('#nodes2'); } elem.selectAll('g.circles') .filter(function(d){ return d == index }) .each(function(d){ let elem_trans = getTranslation(elem.attr("transform")); let parent_trans = getTranslation(d3.select(this.parentNode).attr('transform')) let circle_trans = getTranslation(d3.select(this).attr("transform")); pos.x = elem_trans[0] + circle_trans[0] + parent_trans[0]; pos.y = elem_trans[1] + circle_trans[1] + parent_trans[1]; }) return pos } function initializeMap(d){ let g = d3.select(this); g.classed('map', true); g.classed('hidden', true); let parent_id = d3.select(this.parentNode).attr('id'); let indices; let label; if (parent_id == 'maps1'){ indices =[d[0], d[1] + lat1_len]; label = 'left_map'; } else{ indices =[d[0] + lat1_len, d[1]]; label = 'right_map' } let src = getNodePosition(indices[0]); let tgt = getNodePosition(indices[1]); let coords = { 'x' : [ src.x, tgt.x ], 'y' : [ src.y, tgt.y ] }; var line = d3.line() .curve(d3.curveBasis) .x( function(d) { return coords.x[d] } ) .y( function(d) { return coords.y[d] } ); var indexies = d3.range( coords.x.length ); g.append('path') .datum(indexies) .join('path') .attr('d', line) .attr('class', label) g.datum(indices) .enter() } function initializeEdge(d){ let g = d3.select(this); g.classed('link', true); let lat_num = 2; if( d3.select(this.parentNode).attr('id') == 'edges1'){ lat_num = 1; } let src = d.source; let tgt = d.target; let positions = getPositions(src, tgt, lat_num); if (positions[0] == undefined){return} var data = [ { x : [ positions[0].x, positions[0].x - 1.5, positions[1].x - 1.5, positions[1].x ], y : [ positions[0].y, positions[0].y - (positions[0].y - positions[1].y) / 6, positions[0].y - 5*(positions[0].y - positions[1].y) /6, positions[1].y ] }, { x : [ positions[0].x, positions[0].x + 1.5, positions[1].x + 1.5, positions[1].x ], y : [ positions[0].y, positions[0].y - (positions[0].y - positions[1].y) /6, positions[0].y - 5*(positions[0].y - positions[1].y) /6, positions[1].y ] } ] var indexies = d3.range( data[0].x.length ); var area = d3.area() .curve(d3.curveMonotoneY) .x0( function(d) { return data[1].x[d] } ) .x1( function(d) { return data[0].x[d] } ) .y0( function(d) { return data[1].y[d] } ) .y1( function(d) { return data[1].y[d] } ); g.append('path') .datum(indexies) .join('path') .attr('class', 'area') .attr('d', area) } function addCircles(d, i){ let circles = d3.select(this); let radii = [10,6] circles.selectAll('circle') .data(radii) .join('circle') .each(function(d){ d3.select(this).attr('r', d); if (d == 10){ d3.select(this).classed('outer', true) } else{ d3.select(this).classed('inner', true) } }) } function initializeNodes(d, i){ let g = d3.select(this); let offset; if (d.length % 2 == 0){ offset = -(d.length/2 * 50 - 25); } else{ offset = -( (d.length - 1)/2 *50); } g.attr('transform', 'translate(' + offset + ',' + (config.bottom - i * 100) + ')') let shift = 0; if( d3.select(this.parentNode).attr('id') == 'nodes2'){ shift = lat1_len; } let data = []; for(i=0; i < d.length; i++){ data.push(shift + d[i]); } g.selectAll('g') .data(data) .join('g') .attr('class', 'circles') .attr('transform',function(d, i){ return 'translate(' + i * 50 + ',0)' }) .each(addCircles) .on('mouseover', handleMouseover) .on('mouseout', handleMouseout) .on('click', handleCircleClick) } function bindlayers(){ svgnode.select('#nodes1') .selectAll('g') .data(lattice1.layers) .join('g') .each(initializeNodes) svgnode.select('#nodes2') .selectAll('g') .data(lattice2.layers) .join('g') .each(initializeNodes) } async function bindlinks(){ await bindlayers(); svgnode.select('#edges1') .selectAll('g') .data(lattice1.links) .join('g') .each(initializeEdge); svgnode.select('#edges2') .selectAll('g') .data(lattice2.links) .join('g') .each(initializeEdge); } function initialize() { bindlinks(); svgnode.selectAll('#label1, #label2') .append('text') .attr('x', 0) .attr('y', 0) .attr("dy", ".35em") .attr('font-size', '2em') .attr('text-anchor', 'middle') .classed('noselect', true) svgnode.select('#reset') .append('rect') .attr('width', 60) .attr('height', 30) svgnode.select('#left') .append('rect') .attr('width', 100) .attr('height', 30) svgnode.select('#right') .append('rect') .attr('width', 110) .attr('height', 30) svgnode.select('#leftright') .append('rect') .attr('width', 180) .attr('height', 30) svgnode.selectAll('#reset, #left, #right, #leftright') .append('text') .attr('x', 5) .attr('y', 15) .attr("dy", ".35em") .attr('font-size', '1em') svgnode.select('#reset') .select('text') .text('RESET') svgnode.select('#left') .select('text') .text('Left Adjoint') svgnode.select('#right') .select('text') .text('Right Adjoint') svgnode.select('#leftright') .select('text') .text('Left and Right Adjoint') svgnode.select('#reset') .on('click', handleReset) .classed('noselect', true) svgnode.select('#left') .on('click', handleLeft) .classed('noselect', true) svgnode.select('#right') .on('click', handleRight) .classed('noselect', true) svgnode.select('#leftright') .on('click', handleLeftRight) .classed('noselect', true) svgnode.select('#maps1') .selectAll('g') .data(left_adj) .join('g') .each(initializeMap) svgnode.select('#maps2') .selectAll('g') .data(right_adj) .join('g') .each(initializeMap) } initialize(); yield svgnode.node() }