JSFiddle - React, Tailwind, and code Playground

by atrniv

HTML

<html>
    
    <body></body>

</html>

CSS

.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node {
    font: 10px sans-serif;
}
.link {
    fill: none;
    stroke: #ccc;
}

JavaScript

var width = 550,
    height = 600;

var cluster = d3.layout.cluster()
    .size([height, width - 160]);

var diagonal = d3.svg.diagonal()
    .projection(function (d) {
    return [d.y, d.x];
});

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(40,0)");

root = {
    title: 'Skill A',
    url: 'http://skilla.com',
    children: [{
        title: 'Skill B',
        url: 'http://skillb.com',
        rating: 3,
        children: [{
            title: 'Skill D',
            url: 'http://skilld.com',
            rating: 5
        }, {
            title: 'Skill E',
            url: 'http://skilld.com',
            rating: 10
        }]
    }, {
        title: 'Skill C',
        url: 'http://skillc.com',
        rating: 1
    }]
}


var nodes = cluster.nodes(root),
    links = cluster.links(nodes);

var link = svg.selectAll(".link")
    .data(links)
    .enter().append("path")
    .attr("class", "link")
    .style("stroke-width", function (d) {
    return d.target.rating;
})
    .attr("d", diagonal);

var node = svg.selectAll(".node")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
    return "translate(" + d.y + "," + d.x + ")";
})

node.append("circle")
    .attr("r", 15);

node.append("text")
    .attr("dx", function (d) {
    return d.children ? -50 : 20;
})
    .attr("dy", 3)

    .text(function (d) {
    return d.title;
});

d3.select(self.frameElement).style("height", height + "px");