Non-Hierarchical Tree

<!doctype html>
<html>
<head>
<title>D3 in Action Examples</title>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
<div id="viz"></div>            
</body>
<script>

// If we tie the position of each node to an angle, we can draw our tree diagram in a radial pattern.

d3.csv("radialTree.csv", data => {

d3.select("body").append("svg").attr("width",600).attr("height",600)
    .style("border","2px solid black")
    
var colorScale = d3.scaleOrdinal()
    .range(["#5EAFC6", "#FE9922", "#93c464", "#75739F"])

// Format the data for hierarchical sorting. Id corresponds to the name of the node, and parentId corresponds to the name of the parent. Feed these the corresponding csv points for each object in the CSV array.

var rootFormat = d3.stratify()
        .id(d => d.name)
        .parentId(d => d.parent)
    
    var root = rootFormat(data)
    
// The size of the chart is a measurement of the radius, drawn out fro the 0,0 of the container like a circle element. Thus our treechart should be smaller.
    
 var treeChart = d3.tree()
    .size([250,250])
 
 // Create a generator
 var treeData = treeChart(root).descendants()

d3.select("svg").append("g").attr("id","treeG")
    .attr("transform",`translate(250,250)`)

// We need to create a function that will project our XY coordinates onto a radial coordinate system.
    
    function project(x,y){
       var angle = x / 90 * Math.PI
        var radius = y
        return [radius * Math.cos(angle), radius * Math.sin(angle)];
    }
    
d3.select("#treeG").selectAll("circle")
    .data(treeData).enter()
    .append("g")
    .attr("class","node")
    .append("circle")
    .attr("r", 10)
    .attr("cx", d => project(d.x, d.y)[0])
    .attr("cy", d => project(d.x, d.y)[1])
    .style("fill", d => colorScale(d.depth))
    
   d3.select("#treeG").selectAll("line")
        .data(treeData.filter(d => d.parent)) // Excludes root node
        .enter()
        .insert("line","g")
            .attr("x1", d => project(d.x, d.y)[0])
            .attr("x2", d => project(d.parent.x, d.parent.y)[0])
            .attr("y1", d => project(d.x, d.y)[1])
            .attr("y2", d => project(d.parent.x, d.parent.y)[1])
            .style("stroke","black")
    
});

</script>
</html>

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