JSFiddle - React, Tailwind, and code Playground

by brunomuller

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/d3.min.js"></script>

CSS

body{ font: Arial 12px; text-align: center;}

			.link {
			  stroke: #ccc;
			}

			.node text {
			  pointer-events: none;
			  font: sans-serif;
			}

JavaScript

var json = {
    "nodes": [
      {
        "name": "Beans",
        "id": 0,
        "type": "wallet",
        "connections": 2
      },
      {
        "name": "CEX",
        "id": 1,
        "type": "wallet",
        "connections": 1
      },
      {
        "name": "El Dorado",
        "id": 2,
        "type": "wallet",
        "connections": 1
      },
      {
        "name": "Vibrant",
        "id": 3,
        "type": "wallet",
        "connections": 2
      }
    ],
    "links": [
      {
        "source": 1,
        "target": 2,
				"weight": 1
      },
      {
        "source": 2,
        "target": 3,
				"weight": 1
      },
      {
        "source": 3,
        "target": 0,
				"weight": 1
      },
      {
        "source": 1,
        "target": 0,
				"weight": 1
      }
    ]
};


//Set margins and sizes
var margin = {
  top: 20,
  bottom: 50,
  right: 30,
  left: 50
};
var width = 960 - margin.left - margin.right;
var height = 700 - margin.top - margin.bottom;
//Load Color Scale
var c10 = d3.scale.category10();
//Create an SVG element and append it to the DOM
var svgElement = d3.select("body")
  .append("svg").attr({
    "width": width + margin.left + margin.right,
    "height": height + margin.top + margin.bottom
  })
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Load External Data
function test(dataset) {
  //Extract data from dataset
  var nodes = dataset.nodes,
    links = dataset.links;
  //Create Force Layout
  var force = d3.layout.force()
    .size([width, height])
    .nodes(nodes)
    .links(links)
    .gravity(0.05)
    .charge(-200)
    .linkDistance(200);
  //Add links to SVG
  var link = svgElement.selectAll(".link")
    .data(links)
    .enter()
    .append("line")
    .attr("stroke-width", function(d) {
      return 1;
    })
    .attr("class", "link");
  //Add nodes to SVG
  var node = svgElement.selectAll(".node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node")
 ...