JSFiddle - React, Tailwind, and code Playground

by chriswilsondc

HTML

<script src="http://experimentsinform.com/media/demos/congress/crossvote.js"></script>
<script src="http://experimentsinform.com/media/demos/congress/phonebook.js"></script>

CSS

.node {
  stroke: #fff;
  stroke-width: 1px;
}

.link {
    stroke: #999;
    stroke-opacity: 0.7;
    stroke-width: 0.5;
}

.slider {
    width: 300px;
    height: 5px;
    margin: 0 3px 0 0;
}

.tip {
    background: #FFF;
    border: 1px solid gray;
    padding: 7px;
    font-size: 12px;
}

JavaScript

var width = 380,
    height = 380,
    margin = 50,
    sessions = [107, 113],
    floor = 12,
    start = 75;
    
var svg = d3.select("#canvas").append("svg")
    .attr("width", width)
    .attr("height", height);

console.log(links);

var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .size([width - 2 * margin, height - 2 * margin])
    .charge(-150)
    .gravity(0.4)
    .on("tick", tick)
    .start();



var network = svg.append("g").attr("transform", "translate(50,50)");

var link = network.selectAll(".link")
    .data(force.links())
    .enter().append("line")
    .attr("class", "link");
        
var node = network.selectAll(".node")
    .data(force.nodes())
    .enter().append("circle")
    .attr("class", "node")
    .attr("id", function(d) { return "node-" + d.id; })
    .attr("r", 5);

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