scatterplot = { let svg = d3.create('svg').attr('width', width).attr('height', local_height).property("value", []); svg.append('text').attr('x', 0).attr('y', 15).attr('fill', d3.hcl(0,0,0)) .attr('font-size', '18px').text('Source Nodes') svg.append('text').attr('x', margin+width/2).attr('y', 15).attr('fill', d3.hcl(0,0,0)) .attr('font-size', '18px').text('Destination Nodes') let source_g = svg.append('g') .attr('transform', `translate(${margin},${margin})`) .attr('width',local_width) .attr('height',local_height-margin) let dest_g = svg.append('g') .attr('transform', `translate(${margin+width/2},${margin})`) .attr('width',local_width) .attr('height',local_height-margin) let source_nodes = source_g.selectAll('circle') .data(source_data) .enter() .append('circle') .attr('cx', d => source_x_scale(d.x)) .attr('cy', d => source_y_scale(d.y)) .attr('r', 4) .attr('fill', d3.hcl(0,0,75)) .attr('opacity',0.75) .attr('stroke', d3.hcl(0,0,0)) .attr('stroke-opacity', .5) let dest_nodes = dest_g.selectAll('circle') .data(dest_data) .enter() .append('circle') .attr('cx', d => dest_x_scale(d.x)) .attr('cy', d => dest_y_scale(d.y)) .attr('r', 4) .attr('fill', d3.hcl(0,0,75)) .attr('opacity',0.75) .attr('stroke', d3.hcl(0,0,0)) .attr('stroke-opacity', .5) source_nodes.raise() dest_nodes.raise() // BRUSH ///////////////////////////////////////////////////////////////////////////////////////// let brush = d3.brush() .extent([[margin,margin],[local_width+local_margin,local_height]]) .on('start brush end', brushed); function brushed({selection}) { svg.selectAll('.edge').remove() if (selection) { const [[x0, y0], [x1, y1]] = selection; source_nodes.attr('fill',d3.hcl(0,0,75)) .filter(d => x0 <= source_x_scale(d.x)+margin && source_x_scale(d.x)+margin < x1 && y0 <= source_y_scale(d.y)+margin && source_y_scale(d.y)+margin < y1) .attr('fill',d3.hcl('blue')); // get source selection let sources = source_data.filter(d => x0 <= source_x_scale(d.x)+margin && source_x_scale(d.x)+margin <= x1 && y0 <= source_y_scale(d.y)+margin && source_y_scale(d.y)+margin <= y1); mutable brushed_source = new Set(sources.map(d => d.node)); // get dest selection & update color on dest scatter let inds = source_data.map(d => x0 <= source_x_scale(d.x)+margin && source_x_scale(d.x)+margin <= x1 && y0 <= source_y_scale(d.y)+margin && source_y_scale(d.y)+margin <= y1); let dests = dest_data.filter((d,i) => inds[i]); let edges = svg.selectAll('edge') .data(sources) .enter() .append('line') .attr('x1', d => source_x_scale(d.x)+margin) .attr('x2', (d,i) => dest_x_scale(dests[i].x)+local_width+margin+local_margin+10) .attr('y1', d => source_y_scale(d.y)+margin) .attr('y2', (d,i) => dest_y_scale(dests[i].y)+margin) .attr('stroke',d3.hcl(0,0,50)) .attr('stroke-opacity',0.6) .classed('edge',true) edges.lower() dest_nodes.attr('fill',d3.hcl(0,0,75)) .filter((d,i) => inds[i]) .attr('fill', d3.hcl('red')); mutable corresponding_dest = new Set(dests.map(d => d.node)); } else { source_nodes.attr('fill',d3.hcl(0,0,75)); dest_nodes.attr('fill',d3.hcl(0,0,75)); svg.selectAll('.edge').remove(); mutable brushed_source = new Set(); mutable corresponding_dest = new Set(); } } svg.call(brush) .call(gr => gr.select(".overlay").style("cursor", "default")); ///////////////////////////////////////////////////////////////////////////////////////// // AXES ///////////////////////////////////////////////////////////////////////////////////////// // create axes from our scales source_g.append('g').attr('id', 'xaxis') .call(d3.axisBottom(source_x_scale).ticks(5)) source_g.append('g').attr('id', 'yaxis') .call(d3.axisLeft(source_y_scale).ticks(5)) // clear domains and tone down colors source_g.selectAll('#xaxis,#yaxis').select('.domain').remove() source_g.selectAll('#xaxis,#yaxis').selectAll('text').attr('fill', d3.hcl(0,0,50)) source_g.selectAll('#xaxis,#yaxis').selectAll('line').attr('stroke', d3.hcl(0,0,50)) // tick guides source_g.select('#xaxis').selectAll('.tick').append('line') .attr('y1', local_height-margin-local_margin).attr('y2', margin) .attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5) source_g.select('#yaxis').selectAll('.tick').append('line') .attr('x1', margin).attr('x2', local_width-margin) .attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5) // create axes from our scales dest_g.append('g').attr('id', 'xaxis') .call(d3.axisBottom(dest_x_scale).ticks(5)) dest_g.append('g').attr('id', 'yaxis') .call(d3.axisLeft(dest_y_scale).ticks(5)) // clear domains and tone down colors dest_g.selectAll('#xaxis,#yaxis').select('.domain').remove() dest_g.selectAll('#xaxis,#yaxis').selectAll('text').attr('fill', d3.hcl(0,0,50)) dest_g.selectAll('#xaxis,#yaxis').selectAll('line').attr('stroke', d3.hcl(0,0,50)) // tick guides dest_g.select('#xaxis').selectAll('.tick').append('line') .attr('y1', local_height-margin-local_margin).attr('y2', margin) .attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5) dest_g.select('#yaxis').selectAll('.tick').append('line') .attr('x1', margin).attr('x2', local_width-margin) .attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5) ///////////////////////////////////////////////////////////////////////////////////////// return svg.node() }