Skip to content
A high level API to create interactive, dynamically updating D3.js force-directed graph layout visualizations.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js
README.md
dynamic-graph-screenshot.png
index.html
style.css

README.md

Screenshot of DynamicGraph

DynamicGraph

Turns out transitioning/animating between states in D3 Force Layout is pretty non-trivial (ie 300+ lines of code). So I made a thing to make it easier (ie 1 line of code).

DynamicGraph provides a high level API to create interactive, dynamically updating D3.js force-directed graph layout visualizations. Create and interactively update graphs with a single line of code.

See DynamicGraph in action here

How to use DynamicGraph:

Assuming you've got a graph in the format

let nodes = [{id: "foo", ...}, {id: "bar", ...}, ...]
let links = [{source: "foo", target: "bar"}, ...]

have a designated container for the vis and an have added DynamicGraph to your project

<div id="dynamic-graph-container"></div>

<script src="dynamic-graph.js"></script>

simply create and launch a graph with default properties via

let vis = DynamicGraph(d3.select("#dynamic-graph-container"))
            .updateVis(nodes, links)
// Update nodes and/or links via filters, queries etc...
vis.updateVis(nodes, links) // Voila! The graph gracefuly transitions states.

DynamicGraph API:

You can set optional parameters on instantiation via

let vis = DynamicGraph(d3.select("#dynamic-graph-container"), {
					 	width: 1000, // px
					 	nodeColor: node => node.color,
					 	// etc
					})

A number of commonly used aspects of the graph can also be updating after instantiation (though more could be added):

let vis = DynamicGraph(d3.select("#dynamic-graph-container"))
vis.nodeColor(node => node.color)
	 .nodeRadius(node => node.radius)
	 .tooltipInnerHTML(node => "<div>" + node.info + "</div>")
You can’t perform that action at this time.