JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.js"></script>

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400);


.link {
    stroke: #E5E8E8;
    opacity: 1;
    stroke-width: 2.5px;

}
.node circle {
    stroke: #fff;
    opacity: 1;
    stroke-width: 1.5px;
}
text {
    font: 16px 'Raleway', 'Helvetica Neue, Helvetica';
    opacity: 1;
    pointer-events: none;
}

JavaScript

var links = [{"source":"so","target":"who","value":100},{"source":"be","target":"who","value":10},{"source":"but","target":"who","value":50},{"source":"has","target":"who","value":100},{"source":"up","target":"be",,"value":10},{"source":"not","target":"be",,"value":50},{"source":"duży","target":"firma","value":100},{"source":"chemiczny","target":"firma","value":50},{"source":"człowiek","target":"roślina","value":30},{"source":"nasienie","target":"roślina","value":100}];
var nodes = {}

// Compute the distinct nodes from the links.
links.forEach(function (link) {
    link.source = nodes[link.source] || (nodes[link.source] = {
        name: link.source
    });
    link.target = nodes[link.target] || (nodes[link.target] = {
        name: link.target
    });
    link.value = +link.value;
});

var width = 880
height = 870;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(140)
    .charge(-700)
    .on("tick", tick)
    .start();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link")
    .data(force.links())
    .enter().append("line")
    .attr("class", "link")
    .attr('stroke-width', function (d,i) {
    							return d.value;
	       });

var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", 36)
    .style("fill", '#00a0b0');

node.append('text')
            .text(function(d){ return d.name; })
            .attr('font-family', 'Raleway', 'Helvetica Neue, Helvetica')
            .style("fill", "#E5E8E8")
            .attr('text-anchor', function(d, i) {
                  return 'middle';
            })


function tick() {
    link.attr("x1", function (d) {
        return d.source.x;
    })
        .attr("y1", function (d) {
        return d.source.y;
    })
        .attr("x2", function (d) {
       ...