Icons on the side of a scatter plot

forked from GitNoise's block: 2 axis to 1 axis and back again!

forked from GitNoise's block: Icons on the side of a scatter plot

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    text.right {
      text-anchor: end;
    }
    
    text.rotate {
      transform: rotate(-90deg) translateY(1em);
    }
    
    .text line {
      marker-end: url(#arrow)
    }
    
    line.axis {
      stroke: black;
      stroke-opacity: 0.3;
      stroke-dasharray: 10 5;
    }
    
    line.legend {
      stroke: black;
    }
    
    .position circle, .position path {
      fill-opacity: 0.7;
    }
    
    .connector {
      stroke-width: 2px;
      fill: none;
      stroke-opacity: 0.4;
    }
      
    svg {
      margin: 20px;
    }
    
    .field {
     	fill: #efefef;
      stroke: #969696;
    }
    
    .arrow {
      fill: black;
      shape-rendering: geometricPrecision;
    }
    
    .button {
      margin: 20px;
     	border: 1px solid black;
      display: inline-block;
     	cursor: pointer;
      padding: 4px 24px;
      font-family: sans-serif;
      border-radius: 5px;
      background: #efefef;
    }
 	
    .button:hover {
      background: #c9c9c9;
    }
    
  </style>
</head>

d.select(".connector")
      	.transition(t)
        .attr('d', d => drawArc(d.startCx, d.startCy, d.endCx, d.endCy))
  
      // enter
      const g = d.enter().append("g").classed("position", true);
      g.append("circle")
      		.classed("point", true)
          .attr("cx", d => d.endCx)
          .attr("cy", d => d.endCy)
          .attr("r", 4)
      		.style("fill", d => d.color)
       
      g.append("path")
      	.classed("connector", true)
      	.attr('d', d => drawArc(d.startCx, d.startCy, d.endCx, d.endCy))
      	.style("stroke", d => d.color)
    }
    
    function drawIcon(data) { 
      svg.selectAll("circle.icon") 
      	.data(data, d => d.id)
      	.enter()
      		.append("circle")
      		.classed("icon", true)
      		.attr("cx", d => d.cx)
          .attr("cy", d => d.cy)
          .attr("r", radius)
      		.style("fill", d => d.color)
    }
    
    function createIconPositionsData(data) {
      const iconsOnEachSide = Math.floor(data.length / 2) - 1;
      
      const distanceY = (scaleY.range()[1] - scaleY.range()[0]) / iconsOnEachSide;
      const distanceX = (scaleX.range()[1] - scaleX.range()[0]) / iconsOnEachSide;
      
      const offsetFromTop = (height - iconsOnEachSide * distanceY) / 2;
      const offsetFromSide = (height - iconsOnEachSide * distanceX) / 2;
      
    	data = data.map((d, i) => {
          d.cx = i <= iconsOnEachSide 
            ? width - radius 
          	: (i % (iconsOnEachSide + 1)) * distanceX + offsetFromSide;
        
          d.cy = i <= iconsOnEachSide
          	?	(i % (iconsOnEachSide + 1)) * distanceY + offsetFromTop
          	: 0 + radius; 
        return d;
      }); 
      
      return data;
    }
      
    function mergeDotAndIconData(dotData, iconsData) {
      const result = [];
      dotData.forEach((d, i) => 
       	result.push({
          id: "p" + i, 
          color: iconsData[i].color,
        	endCx: scaleX(d.cx),
        	endCy: scaleX(d.cy),
        	startCx: iconsData[i].cx,
        	startCy: iconsData[i].cy,
        }));
      
      return result;
    }
    
    const iconPositionData = createIconPositionsData(iconsData);
    const positionData = mergeDotAndIconData(dotData1, iconPositionData);
       
    drawText(textData);
    drawLegend(legendData);
    drawField();
    drawAxis(axisData);
    drawPositions(positionData);
    drawIcon(iconPositionData) 
    
    
    let first = true;
    function move() {
      const positionData = mergeDotAndIconData(
        first ? dotData2 : dotData1, 
        iconPositionData);
      
      drawPositions(positionData);
      
      first = !first;
    }
    
  </script>
</body>

https://d3js.org/d3.v4.min.js