JSFiddle - React, Tailwind, and code Playground

by janetyc

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="application/json" id="mis">
{"nodes": [{"id": "reminders", "group": 1}, {"id": "safety/security", "group": 1}, {"id": "comfort", "group": 1}, {"id": "convenience", "group": 1}, {"id": "communication", "group": 1}, {"id": "concentration", "group": 1}, {"id": "amusement", "group": 1}, {"id": "delete", "group": 1}, {"id": "health", "group": 1}, {"id": "privacy", "group": 1}, {"id": "save resources", "group": 1}, {"id": "empty", "group": 1}, {"id": "for work-life balance", "group": 1}, {"id": "maintenance", "group": 1}, {"id": "to be informed", "group": 1}, {"id": "getting an overview", "group": 1}, {"id": "monitoring", "group": 1}], "links": [{"source": 0, "target": 0, "value": 1.0}, {"source": 0, "target": 1, "value": 0.03389830508474576}, {"source": 0, "target": 2, "value": 0.0}, {"source": 0, "target": 3, "value": 0.04597701149425287}, {"source": 0, "target": 4, "value": 0.09302325581395349}, {"source": 0, "target": 5, "value": 0.0}, {"source": 0, "target": 6, "value": 0.0}, {"source": 0, "target": 7, "value": 0.0}, {"source": 0, "target": 8, "value": 0.0}, {"source": 0, "target": 9, "value": 0.0}, {"source": 0, "target": 10, "value": 0.0}, {"source": 0, "target": 11, "value": 0.09090909090909091}, {"source": 0, "target": 12, "value": 0.0}, {"source": 0, "target": 13, "value": 0.047619047619047616}, {"source": 0, "target": 14, "value": 0.058823529411764705}, {"source": 0, "target": 15, "value": 0.0}, {"source": 0, "target": 16, "value": 0.0}, {"source": 1, "target": 0, "value": 0.03389830508474576}, {"source": 1, "target": 1, "value": 1.0}, {"source": 1, "target": 2, "value": 0.10294117647058823}, {"source": 1, "target": 3, "value": 0.11926605504587157}, {"source": 1, "target": 4, "value": 0.13043478260869565}, {"source": 1, "target": 5, "value": 0.0}, {"source": 1, "target": 6, "value": 0.011235955056179775}, {"source": 1, "target": 7, "value": 0.0}, {"source": 1, "target": 8, "value":...

CSS

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

.link {
  stroke: #999;
  stroke-opacity: .6;
}

.axis {
  opacity: 0.5;
  font: 10px sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.axis .domain {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: 4px;
  stroke-linecap: round;
}

.axis .halo {
  fill: none;
  stroke: #ddd;
  stroke-width: 3px;
  stroke-linecap: round;
}

.slider .handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: .5;
  stroke-width: 1.25px;
  cursor: grab;
}

text {
  font-family: sans-serif;
  font-size: 10px;
  color: #f00;
}

JavaScript

var width = 700,
    height = 500;

var color = d3.scale.category20();

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

var x = d3.scale.linear()
    .domain([0, 0.2])
    .range([250, 80])
    .clamp(true);

var brush = d3.svg.brush()
    .y(x)
    .extent([0, 0]);

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

var links_g = svg.append("g");

var nodes_g = svg.append("g");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + (width - 20)  + ",0)")
    .call(d3.svg.axis()
      .scale(x)
      .orient("left")
      .tickFormat(function(d) { return d; })
      .tickSize(0)
      .tickPadding(12))
  .select(".domain")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "halo");

var slider = svg.append("g")
    .attr("class", "slider")
    .call(brush);

slider.selectAll(".extent,.resize")
    .remove();

var handle = slider.append("circle")
    .attr("class", "handle")
    .attr("transform", "translate(" + (width - 20) + ",0)")
    .attr("r", 5);

svg.append("text")
    .attr("x", width - 15)
    .attr("y", 60)
    .attr("text-anchor", "end")
    .attr("font-size", "12px")
    .style("opacity", 0.5)
    .text("co-occurence threshold")

//d3.json(url, function(error, graph) {
//  if (error) throw error;
  
//Read the data from the mis element 
var mis = document.getElementById('mis').innerHTML;
graph = JSON.parse(mis);
graphRec=JSON.parse(JSON.stringify(graph)); //Add this line

  
  graph.links.forEach(function(d,i){ 
    console.log(d);
    console.log(i);
    d.i = i; 
  });

  function brushed() {
    var value = brush.extent()[0];
  
    if (d3.event.sourceEvent) {
      value = x.invert(d3.mouse(this)[1]);
      brush.extent([value, value]);
    }
    handle.attr("cy", x(value));
    var threshold = value;

    var thresholded_links = graph.links.filter(function(d){ return...