JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

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

CSS

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

h1{font: 400 1.75em/1.5em "Raleway", "Helvetica Neue", Helvetica, sans-serif; text-align:center;}

JavaScript

var   w = 1000,
      h =  800,
      circleWidth = 15; 
 

var palette = {
      "lightgray": "#E5E8E8",
      "gray": "#708284",
      "mediumgray": "#536870",
      "blue": "#3B757F"
  }

var colorss = ['#00a0b0'];
var colors = d3.scale.ordinal()
  .range(colorss);
//var colors = d3.scale.category10();

var nodes = [
      
      
];

var links = [{ name: "Trump"},
      { name: "Prezydent", target: [0], value: 12,distance:100 },
      { name: "USA", target: [0], value: 12,distance:100 },
      { name: "Ford", target: [0], value: 16,distance:100 },
      { name: "Fort", target: [0], value: 22,distance:100 },
      { name: "Melania", target: [0], value: 28,distance:100 },
      { name: "Duda", target: [0], value: 30,distance:100 },
      { name: "Stać", target: [0], value: 36 ,distance:100},
      { name: "Polska", target: [0], value: 44 ,distance:100},
      { name: "Donald", target: [0], value: 48 ,distance:100},
      { name: "Siedzieć", target: [0], value: 52 ,distance:100},
      { name: "Nowy", target: [0], value: 54 ,distance:100},
      { name: "Spotkanie", target: [0], value: 55 ,distance:100},
      { name: "Prezydent", target: [0], value: 56,distance:100 }];

for (var i = 0; i < links.length; i++){
      if (links[i].target !== undefined) { 
            for ( var x = 0; x < links[i].target.length; x++ ) 
              links.push({
                  source: links[i],
                  target: links[links[i].target[x]]  
              });
      };
};


var myChart = d3.select('body')
      .append("div")
        .classed("svg-container", true)
      
      .append('svg')
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 1000 800")
        .classed("svg-content-responsive", true)


var force = d3.layout.force()
      .nodes([])
      .links(links)
      .gravity(0.1)
      .charge(-1000)
      .size([w,h]); 

      var link = myChart.selectAll('line') 
            .data(links).enter().append('line')
           ...