d3 | swarm with force

testing a simple swarm chart with force to see how much accuracy is lost with increase of nodes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
    <style>
        body{
            font-family: Consolas, monaco, monospace;
            position: relative;
            padding: 20px;
            color: #FDBB30;
            background: #130C0E;
        }
        circle {
            fill: #ec008c;
            opacity: 0.6;
        }
        circle:hover {
            opacity: 1;
        }
        .axis path, .axis line {
            stroke: #FDBB30;
        }
        .axis text {
            fill: #FDBB30;
            font-family: Consolas, monaco, monospace;
        }
        input[type="range"] {
            -webkit-appearance:none;
            width: 100%;
            height:2px;
            background: #FDBB30;
            background-position:center;
            background-repeat:no-repeat;
            margin: auto;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance:none;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background: #130C0E;
            position:relative;
            border: 3px solid #FDBB30;
            z-index: 2;
            cursor: pointer;
        }
        input:focus {
            outline: none;
        }
        span {
            letter-spacing: 3px;
            color: #FDBB30;
        }
    </style>
</head>
<body>

<header class="fixed top-0 left-0 ml2 mt1">
        <p class="caps">Number of points: <span id="slider-amount">34</span></p>
        <input type="range" id="point-amount" value="34">
    </header>

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