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 = [
      { name: "Trump"},
      { name: "Prezydent", target: [0], value: 12 },
      { name: "USA", target: [0], value: 12 },
      { name: "Ford", target: [0], value: 16 },
      { name: "Fort", target: [0], value: 22 },
      { name: "Melania", target: [0], value: 28 },
      { name: "Duda", target: [0], value: 30 },
      { name: "Stać", target: [0], value: 36 },
      { name: "Polska", target: [0], value: 44 },
      { name: "Donald", target: [0], value: 48 },
      { name: "Siedzieć", target: [0], value: 52 },
      { name: "Nowy", target: [0], value: 54 },
      { name: "Spotkanie", target: [0], value: 55 },
      { name: "Prezydent", target: [0], value: 56 }
      
];

var links = [];

for (var i = 0; i < nodes.length; i++){
      if (nodes[i].target !== undefined) { 
            for ( var x = 0; x < nodes[i].target.length; x++ ) 
              links.push({
                  source: nodes[i],
                  target: nodes[nodes[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(nodes)
      .links([])
      .gravity(0.1)
      .charge(-1000)
      .size([w,h]); 

      var link = myChart.selectAll('line') 
            .data(links).enter().append('line')
            .attr('stroke', palette.lightgray)
            .attr('strokewidth', '1');

      var node =  myChart.selectAll('circle')  
            .data(nodes).enter() 
           ...