Re-create Marks & Channels Graphic

<!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(function (d) {
                    return 50 * 50;
                })
                .type(function (d) {
                    if (d === "cross") {
                        return d3.symbolCross;
                    }
                    else if (d === "circle") {
                        return d3.symbolCircle;
                    }
                    else if (d === "square") {
                        return d3.symbolSquare;
                    }
                    else if (d === "triangle") {
                        return d3.symbolTriangle;
                    }
                }),
            transform: function (d, i) {
                return 'translate(' + (i * 120 + 80) + ',' + (80 + i * 4.5) + ')';
            }
        });

</script>
</body>

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

https://d3js.org/d3-selection-multi.v1.min.js