JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    <h2>Some circles</h2>
    <div id="svg"></div>
</body>

JavaScript

var numCirclesX = 10
    var numCirclesY = 15
    var size_A4_x = 900
    var size_A4_y = 1500

    var data = []

    for (var i = 0; i < numCirclesX-1; i++)
    for (var j = 0; j < numCirclesY-1; j++)
    data.push({
        x: (i+1) * size_A4_x / numCirclesX,
        y: (j+1) * size_A4_y / numCirclesY,
        radius: 5
    })


    width = 500
    height = 700

    xScale = d3.scale.linear()
        .domain([0, size_A4_x])
        .range([0, width])
    yScale = d3.scale.linear()
        .domain([0, size_A4_y])
        .range([0, height])
    rScale = d3.scale.linear()
        .domain([0, 5])
        .range([0, 20])

    svg = d3.select("#svg")
        .append("svg")
        .attr("width", width)
        .attr("height", height)

    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function (data) {
        return xScale(data.x)
    })
        .attr("cy", function (data) {
        return yScale(data.y)
    })
        .attr("r", function (data) {
        return rScale(data.radius)
    })