D3 Examples - [unlisted] Re-create Marks & Channels Graphic

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
    <style>
        body {
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
​
<body>
<script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
        .attr("width", 960)
        .attr("height", 500);
​
    var data = ["Cross", "Circle", "Square", "Triangle"];
​
    svg.selectAll('path')
        .data(data) // v4
        .enter()
        .append('path')
        .attrs({
            d: d3.symbol()
                .size(50 * 50)
                .type(d => d3['symbol' + d]),
            transform: function (d, i) {
                return 'translate(' + (i * 120 + 80) + ',' + (80 + i * 4.5) + ')';
            }
        });
​
</script>
</body>
​
    