Old school D3 from simpler times

All examples By author By category About

giorgi-ghviniashvili

Full window Github gist

radial line v4

Built with blockbuilder.org

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Chart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: #E1E5EC;
        }

#myGraph {
        	width: 500px;
        	height: auto;
        	margin: auto;
        }

</style>
</head>

<body translate="no">

<div class="container centered">
        <div id="myGraph"></div>
    </div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
   	<script src="d3script.js"></script>

<script>
    
    var width = document.getElementById('myGraph').getBoundingClientRect().width;
    var height = width;
	var center = {
		x: width / 2,
		y: height / 2
	};

var pointsOuter = getPoints(24, 220);
	var pointsInner = getPoints(12, 100);
	var links = [
	    {s: 0, t: 8},
	    {s: 0, t: 2},
	    {s: 1, t: 4},
	    {s: 18, t: 9},
	    {s: 12, t: 5},
	    {s: 22, t: 10},
	    {s: 21, t: 10},
	    {s: 9, t: 4},
	    {s: 19, t: 5},
	    {s: 4, t: 3},
	    {s: 16, t: 8},
	    {s: 16, t: 1},
	    {s: 14, t: 7},
	    {s: 14, t: 6},
	];

var dataset = {
		outerPoints: pointsOuter,
		innerPoints: pointsInner,
		links: links
	};

var chart = renderChart()
        .svgHeight(height)
        .svgWidth(width)
        .container('#myGraph')
        .data(dataset)
        .debug(true)
        .run()

function getPoints(n, r){
        var coords = [];
        var radian = (2 * Math.PI) / n;
        for(var i = 0; i < n; i++){
          var angle = i * radian;
          var x = center.x + r * Math.cos(angle);
          var y = center.y + r * Math.sin(angle);
          coords.push({
            x: x,
            y: y
          });
        }
        return coords;
    }

</script>

</body>

</html>

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