Adjustable Link Strength for Force Layout based on data of Miserables

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

.container {
            margin-top: 10vh;
            text-align: center;
            background-color: lightgoldenrodyellow;
        }

.slider {
            display: flex;
            justify-content: center;
        }

label {
            font-family: Arial, Helvetica, sans-serif;
            position: absolute;
            left: 10px;
            top: 10px;
            margin: 20px auto;
            text-align: center;
        }

.links line {
            stroke: #999;
            stroke-opacity: 0.6;
        }

.nodes circle {
            stroke: #fff;
            stroke-width: 1.5px;
        }
    </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>D3js - Network Chart - </title>
</head>

<body>
    <div class="container">
        <div class="slider">
            <label for="inputStrength">
                <input type="range" name="" id="inputStrength" min="0" max="1" step="any" value="0.5" style="width: 240px">Link Strength</label>
        </div>
        <div class="chart">
            <svg width="960" height="600"></svg>
        </div>
    </div>

const color = d3.scaleOrdinal(d3.schemeCategory20);

const simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(d => d.id).strength(0.5))
            .force("charge", d3.forceManyBody())
            .force("center", d3.forceCenter(width / 2, height / 2));

const drag = d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended);

d3.select("input[type=range]")
            .on("input", inputEventHanlder)

d3.json("miserables.json", function (error, graph) {
            if (error) throw error;

console.log(graph);

const link = svg.append("g")
                .attr("class", "links")
                .selectAll("line")
                .data(graph.links)
                .enter().append("line")
                .attr("stroke-width", d => Math.sqrt(d.value));

const node = svg.append("g")
                .attr("class", "nodes")
                .selectAll("circle")
                .data(graph.nodes)
                .enter()
                .append("circle")
                .attr("r", 5)
                .attr("fill", d => color(d.group))
                .call(drag)
                .on("click", clickEventHanlder);

node.append("title")
                .text(d => d.id);

simulation
                .nodes(graph.nodes)
                .on("tick", tickEventHandler);

simulation
                .force("link")
                .links(graph.links);

function tickEventHandler() {
                // console.count("Tick đê tick đê");
                // console.log(simulation.alpha());

link
                    .attr("x1", d => d.source.x)
                    .attr("y1", d => d.source.y)
                    .attr("x2", d => d.target.x)
                    .attr("y2", d => d.target.y);

node
                    .attr("cx", d => d.x)
                    .attr("cy", d => d.y);
            }

});

function clickEventHanlder(d) {
            if (d3.event.defaultPrevented) return; // ignore drag
            console.log(d);
        }

function dragstarted(d) {
            if (!event.active) simulation.alphaTarget(0.3).restart();
            d.fx = d.x;
            d.fy = d.y;
        }

function dragged(d) {
            d.fx = d3.event.x;
            d.fy = d3.event.y;
        }

function dragended(d) {
            if (!d3.event.active) simulation.alphaTarget(0);
            d.fx = null;
            d.fy = null;
        }

function inputEventHanlder() {
            simulation
                .force("link")
                .strength(+this.value);
            simulation
                .alpha(1).restart();
        }
    </script>
</body>

</html>

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