D3 Scatterplot without data join

D3 Scatterplot Without Data Join

A somewhat convoluted demo of creating a simple scatterplot using ES6 template literals. The common-tags package is used for its handy html tag function that strips out line breaks and white space from the template literal string.

The point of this example is just to show you don't need to use d3-selection's selection.data().enter().append() methods to render SVG shapes from data.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://unpkg.com/common-tags"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var xmlns = "https://www.w3.org/2000/svg";

var margin = { top: 20, left: 50, right: 10, bottom: 50 };
    var width = 500;
    var height = 500;

function main(data) {
      console.log(data);
      
      xScale.domain(d3.extent(data, d => d.sepal_width));
      yScale.domain(d3.extent(data, d => d.sepal_length));
      
      g.appendChild(
        d3.select(document.createElementNS(xmlns, "g"))
        	.call(xAxis)
        	.node()
      )
      
      g.appendChild(
        d3.select(document.createElementNS(xmlns, "g"))
        	.call(yAxis)
        	.node()
      )
      
      g.appendChild(document.createElementNS(xmlns, "g"))
				.innerHTML = commonTags.html`${data.map(renderCircle)}`;
    }
    
		d3.csv("https://gist.githubusercontent.com/clhenrick/fe82108ca72121b3e2000ced4e36a53b/raw/eedfd982b5324d62c2c2b69171b937db73f41f29/flowers.csv", parseRow)
    .then(main);
  </script>
</body>

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

https://unpkg.com/common-tags