D3.js su_ji_Force

Developer
NaKaz
Size
4,348 Kb
Views
34,408
  1. D3.js su_ji_Force Previews
  2. D3.js su_ji_Force HTML Codes
  3. D3.js su_ji_Force CSS Codes
  4. D3.js su_ji_Force JS Codes

How do I make an d3.js su_ji_force?

D3.js su_ji_Force. What is a d3.js su_ji_force? How do you make a d3.js su_ji_force? This script and codes were developed by NaKaz on 31 August 2022, Wednesday.

D3.js su_ji_Force Previews
IQ Test

D3.js su_ji_Force - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>D3.js su_ji_Force </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js" type="text/javascript"></script>
<div id="wrapper1" class="index-15"> <div id="svg1"></div>
</div> <script src='http://d3js.org/d3.v3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

D3.js su_ji_Force - Script Codes CSS Codes

.index-15 .node { fill: #4679c5; fill-opacity: 0.55; font-weight: bold; font-size: 2.5em; cursor: pointer;
}
.index-15 .link { stroke: #5e9fe2; stroke-opacity: 0.55;
}
.index-15 #svg1 { float: none;
}

D3.js su_ji_Force - Script Codes JS Codes

(function() { var _config, chargeChanger, config, erdosReni, fl, flSize, force, frictionChanger, gravityChanger, gui, height, linkDistanceChanger, linkStrengthChanger, links, nodes, nodesChanger, probabilityChanger, radius, restart, sizeXChanger, sizeYChanger, svg, width; width = 970; height = 700; radius = 10; nodes = []; links = []; svg = d3.select("#svg1").append("svg").attr("width", width).attr("height", height); erdosReni = function() { var i, linksIndex, numNodes; numNodes = config["nodes"]; if (nodes.length < numNodes) { i = nodes.length; while (numNodes > nodes.length) { nodes[i] = { x: (nodes[0] ? nodes[0].x : width / 2), y: (nodes[0] ? nodes[0].y : height / 2) }; i++; } } else if (nodes.length > numNodes) { nodes.length = numNodes; } links = []; linksIndex = {}; nodes.forEach(function(node, nodei) { return nodes.forEach(function(node2, node2i) { if (linksIndex[nodei + "," + node2i] || linksIndex[node2i + "," + nodei] || nodei === node2i) { return linksIndex[nodei + "," + node2i] = 1; } if (Math.random() < config["probability"] * .01) { return links.push({ source: node, target: node2 }); } }); }); return force.nodes(nodes).links(links); }; restart = function() { var link, node; force.start(); link = svg.selectAll("line.link").data(links); link.enter().insert("line").attr("class", "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; }); link.exit().remove(); node = svg.selectAll("text.node").data(nodes); node.enter().insert("text").attr("class", "node").attr("x", function(d) { return d.x; }).attr("y", function(d) { return d.y; }).call(force.drag); node.text(function(d) { return d.weight; }); return node.exit().remove(); }; config = { nodes: 6, probability: 100, friction: 1, linkStrength: 1, linkDistance: 250, charge: 0, gravity: .0, sizeX: width, sizeY: height }; gui = new dat.GUI(); fl = gui.addFolder("Force Layout Sub"); flSize = gui.addFolder("Force Sizes"); flSize.open(); force = d3.layout.force().linkDistance(config["linkDistance"]).linkStrength(config["linkStrength"]).gravity(config["gravity"]).friction(config["friction"]).size([config.sizeX, config.sizeY]).charge(-config["charge"]); erdosReni(); restart(); force.on("tick", function() { svg.selectAll("line.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; }); return svg.selectAll("text.node").attr("x", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); }).attr("y", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); }); }); nodesChanger = flSize.add(config, "nodes", 1, 55).step(1); nodesChanger.onChange(function(value) { erdosReni(); return restart(); }); frictionChanger = fl.add(config, "friction", 0, 1); frictionChanger.onChange(function(value) { force.friction(value); return force.start(); }); probabilityChanger = flSize.add(config, "probability", 0, 100); probabilityChanger.onChange(function(value) { erdosReni(); return restart(); }); linkStrengthChanger = fl.add(config, "linkStrength", 0, 1); linkStrengthChanger.onChange(function(value) { force.linkStrength(value); return force.start(); }); linkDistanceChanger = flSize.add(config, "linkDistance", 0, 700); linkDistanceChanger.onChange(function(value) { force.linkDistance(value); return restart(); }); chargeChanger = fl.add(config, "charge", 0, 500); chargeChanger.onChange(function(value) { force.charge(-value); return restart(); }); gravityChanger = flSize.add(config, "gravity", 0.0, 1.0); gravityChanger.onChange(function(value) { force.gravity(value); return restart(); }); sizeXChanger = flSize.add(config, "sizeX", 0, 9999); sizeYChanger = flSize.add(config, "sizeY", 0, 9999); _config = {}; _config = config; sizeXChanger.onChange(function(valueX) { _config.sizeX = valueX; force.size([_config.sizeX, _config.sizeY]); return force.start(); }); sizeYChanger.onChange(function(valueY) { _config.sizeY = valueY; force.size([_config.sizeX, _config.sizeY]); return force.start(); }); config.regenerate = function() { erdosReni(); return restart(); }; gui.add(config, "regenerate");
}).call(this);
D3.js su_ji_Force - Script Codes
D3.js su_ji_Force - Script Codes
Home Page Home
Developer NaKaz
Username nakakaz11
Uploaded August 31, 2022
Rating 3
Size 4,348 Kb
Views 34,408
Do you need developer help for D3.js su_ji_Force?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

NaKaz (nakakaz11) Script Codes
Name
Test OMG Particles II
CountUP Class sandbox
MVC tab TEST
A Pen by NaKaz
D3.js d3.geo.projection TEST
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!