Separability and Interference: Encoding Using Both Size and Hue

This visualizaton replicates the size and hue example in Figure 5.10 of Tamara Munzer's Visualization Analysis and Design.

It illustrates the case where encoding two arbitrary channels as size and color results in some interference between the channels. The use of the size channel makes it more difficult to distinguish between hues in the smaller instances on the visualization.

<!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; }
  </style>
</head>

<body>
  <script>
    var w = 400, h= 400;
    var svg = d3.select('body')
    						.append("svg")
    						.attr("width",w)
    						.attr("height",h);

//create 
    const data = [
      {ex:10,
       why:10,
       bigness:10,
       flavor:"blue"
      },
			
      {ex:10,
       why:40,
       bigness:10,
       flavor:"purple"
      },
      
      {ex:20,
       why:25,
       bigness:20,
       flavor:"blue"
      },
      
      {ex:20,
       why:75,
       bigness:40,
       flavor:"blue"
      },
      
      {ex:45,
       why:25,
       bigness:60,
       flavor:"purple"
      },
      
      {ex:60,
       why:10,
       bigness:10,
       flavor:"blue"
      },
      
      {ex:75,
       why:60,
       bigness:40,
       flavor:"blue"
      },
       
      {ex:80,
       why:80,
       bigness:20,
       flavor:"purple"
      }
    ];
    
    const xValue = d => d.ex;
    const yValue = d => d.why;
    const rValue = d => d.bigness;
    const cValue = d => d.flavor;
    
    const outerWidth = svg.attr('width');
    const outerHeight = svg.attr('height');
    const margin = {left:20, right:20, top:20, bottom:20};
    const innerWidth = outerWidth - margin.left - margin.right;
    const innerHeight = outerHeight - margin.top - margin.bottom;
    const minDimension = d3.min(innerHeight,innerWidth);
    
    const xScale = d3.scaleLinear()
        .domain(d3.extent(data,xValue))
        .range([margin.bottom,innerWidth]);
    
    const yScale = d3.scaleLinear()
        .domain(d3.extent(data,yValue))
        .range([innerHeight,margin.left]);
    
    const rScale = d3.scaleLinear()
        .domain(d3.extent(data,rValue))
        .range([(minDimension/20),(minDimension/5)]);
    
    const g = svg.append('g')
        .attr('transform','translate(${margin.left},${margin.top})');
    
    g.selectAll('circle')
       .data(data)
    	 .enter()
       .append('circle')
    	 .attr('cx', d => xScale(xValue(d)))
    	 .attr('cy', d => yScale(yValue(d)))
    	 .attr('fill',d => cValue(d))
       .attr('fill-opacity', .5)
       .attr('r', d =>rValue(d));
    
    
  </script>
</body>

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