Colorful Dots

Inspired by Figure 5.10(d) from Visualization Analysis and Design by Tamara Munzner

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  
  <script>
    
    const svgObj = d3.select("body").append("svg")
      .attr("width", 1000)
      .attr("height", 500)
    
    const xValue=d=>d.x
    const yValue=d=>d.y
    
    const xScale = d3.scaleLinear()
    const yScale = d3.scaleLinear()
    
    const colorValue=d=>d.color
    
    const type=d=>{
      d.x=+d.x;
      d.y=+d.y;
      return d;
    };

d3.csv('example.csv', type, data=>{
      /*
      xScale
      	.domain(d3.extent(data,xValue))
      	.range([0,svgObj.width])
      	.nice()
      
      yScale
      	.domain(d3.extent(data,yValue))
      	.range([svgObj.Height,0])
      	.nice()*/
      
      svgObj.selectAll('circle')
      	.data(data)
      	.enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => 500-yScale(yValue(d)))
        		.attr('fill', d => (colorValue(d)))
            .attr('fill-opacity', 1)
            .attr('r', 10);
    })         
  </script>
</body>
</html>

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