Steve Haroz steveharoz

directed-graph-creator

Interactive tool for creating directed graphs, created using d3.js.

Operation:

drag/scroll to translate/zoom the graph
shift-click on graph to create a node
shift-click on a node and then drag to another node to connect them with a directed edge

Move the mouse smoothly from side to side to see a lag in the circle's position.

	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script>

	var width = 960,
	height = 300;
	var canvas = d3.select("body").append("canvas")
	.attr("width", width)

	<!DOCTYPE html>
	<meta charset="utf-8">

	<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	var width = 960,
	height = 500,
	dotCount = 800,
	columns = 400,

	<!DOCTYPE html>
	<meta charset="utf-8">

	<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	var width = 960,
	height = 500,
	dotCount = 800,
	columns = 400,

	license: gpl-3.0
	height: 960