Skip to content

Instantly share code, notes, and snippets.

View puzzler10's full-sized avatar

Tom Roth puzzler10

10 followers · 15 following
View GitHub Profile
@puzzler10
puzzler10 / index.html
Created March 27, 2017 21:28
Transform example - order matters
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<svg width="500" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
@puzzler10
puzzler10 / index.html
Created March 27, 2017 21:19
Transform example - scale
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<svg width="500" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
@puzzler10
puzzler10 / index.html
Last active March 27, 2017 21:20
Transform example - translate
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<svg width="500" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
@puzzler10
puzzler10 / README.md
Last active April 18, 2017 22:34
failed zoom and drag

Here lies the secret to the failure.

@puzzler10
puzzler10 / README.md
Last active March 18, 2017 22:21
Popcorn graph

This graph combines a strong attractive force between particles and a repelling effect from forceCollide.

This leads to a popcorn effect!

Click here for other examples and here for an explanation of this effect.

@puzzler10
puzzler10 / README.md
Last active March 18, 2017 22:22
Popping force directed graph

This graph exploits the unstable nature of forceCollide strength values outside of [0,1].

Click here for similar examples and here for an explanation of this effect.

@puzzler10
puzzler10 / README.md
Last active March 18, 2017 22:23
Splitting nodes - force directed graph custom forces example

This is an example of adding custom forces to a forceSimulation.

Here all male nodes are pulled to the right side and all female nodes are pulled to the left side.

Click here for an explanation of this effect.

@puzzler10
puzzler10 / README.md
Last active March 18, 2017 22:27
Growing and shrinking nodes: d3v4 custom forces example

This is an example of how custom forces can be used to change the nodes sizes over time.

At the same time the nodes are bounded inside a box.

Click here for more on custom forces and here for an explanation of this example.

@puzzler10
puzzler10 / README.md
Last active March 18, 2017 22:31
Bounding box force directed graph II

This uses a custom force to impose a geometric constraint on the force directed graph.

This is a soft constraint so the effect is not as sharp as this.

Click here for a better explanation on this effect.

@puzzler10
puzzler10 / README.md
Last active July 16, 2023 11:07
Bounding box force directed graph I