JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://d3js.org/d3.v5.min.js'></script>

<div id = "sourceCred" width = "100%" height = "1960px">

</div>

CSS

.edge {
  opacity: 0.1;
  }
.node {
  opacity: 0.9;
  }

JavaScript

// network graph - Source Cred open source project
// Ryan Morton April 2019

class graphNet {
	
	constructor(opts) {
		//example opts object
		/*
		const opts = {
			element: document.getElementById("sourceCred"),
			data: myData,
      score: myScores,
			mapping: {
				nodes: 'nodes',
				nodeLable: 1,
				nodeGroup: null,
				nodeSize: null,
				edges: 'edges',
				edgeGroup: null,
				edgeSize: null,
				source: null,
				target: null
			},
			options: null
		}
		*/
		
		// load arguments from config object
		this.element = opts.element;
		this.data = opts.data;
    this.scores = opts.scores;
		this.mapping = opts.mapping;
		this.options = opts.options;
		
		// create the chart
		this.draw();
	}
	
	draw(){
		//preserve context for closures
		var that = this;
		
		// define dimensions
		this.width = this.element.offsetWidth;
		this.height = 1000; //this.element.offsetHeight;
		
		// set up parent element and SVG
		this.element.innerHTML = '';
		this.svg = d3.select(this.element).append('svg');
		this.svg.attr('width', this.width);
		this.svg.attr('height', this.height);
		this.chart = this.svg
			.append("g")
			.attr("transform", "translate(" + this.width / 2 + "," + this.height / 2 + ")")
			
		// set up svg defs
		this.chart.append("defs").append("marker")
				.attr("id", "arrow")
				.attr("viewBox", "0 -3 10 10")
				.attr("refX", 18)
				.attr("refY", 0)
				.attr("markerWidth", 5)
				.attr("markerHeight", 5)
				.attr("orient", "auto")
				.append("svg:path")
				.attr("d", "M 0,-5 L 10 ,0 L 0,5");   
		
		//chart elements        
		this.edge = this.chart.append("g");
		this.node = this.chart.append("g");
		this.tooltip = d3.select(this.element).append("div")
			.attr("class", "toolTip")
			.style('display', 'none')
			.style('position', 'absolute')
			.style('min-width' , '50px')
			.style('height', 'auto')
			.style('background', 'none repeat scroll 0 0 #ffffff')
		
		//initialize simulation
		///define variables from data for simulation...