JSFiddle - React, Tailwind, and code Playground

by Patricia Warwick

HTML

<meta charset="utf-8" /><script src="/sites/default/d3_files/d3.v3.js"></script><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://d3js.org/topojson.v1.min.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<style type="text/css">.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.node circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
}

div#network {
height: 800px;
margin-top: -800px;
}
</style>
<div id="network">&nbsp;</div>
<script>

JavaScript

var width = 960,
    height = 800;

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

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

var categoryColour = {
    "Community Group": "red",
    "Volunteer": "blue",
    "Regional Group": "green"
  };

d3.json("/relationships?nocache=" + (new Date()).getTime(),function(error,members){
       var links=members.organizations.map(function(members) {
          return members.member;
          });

  console.log("links");console.log(links);

  var nodes = {};

   links.forEach(function(link) {
    link.source = nodes[link.xsource] || (nodes[link.xsource] = {source: link.xsource, name: link.xsource, categorysource: link.categorysource});
    link.target = nodes[link.xtarget] || (nodes[link.xtarget] = {target: link.xtarget, name: link.xtarget, categorytarget: link.categorytarget});
    });
 
  var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

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

var link = svg.selectAll(".link")
    .data(force.links())
  .enter().append("line")
    .attr("class", "link");
   
var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class", "node")
    //.on("mouseover", mouseover)
    //.on("mouseout", mouseout)
    .call(force.drag);

node.append("circle")
    .attr("r", 8)
     .style("fill", function(links) { 
console.log("links.categorysource");console.log(links.categorysource);
console.log("links.categorytarget");console.log(links.categorytarget);
       return categoryColour [links.categorysource];
       })     

node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { 
// console.log("d");console.log(d);
        return d.name;...