Skip to content

Instantly share code, notes, and snippets.

View apcj's full-sized avatar

Alistair Jones apcj

99 followers · 1 following
  • Neo Technology
  • London
View GitHub Profile
@apcj
apcj / README.md
Last active August 29, 2015 14:24 — forked from mbostock/.block

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

Compare this display to a force layout with curved links, a force layout with fisheye distortion and a matrix diagram.

@apcj
apcj / .gitignore
Last active January 4, 2016 18:19 — forked from mbostock/.block
data.tsv
@apcj
apcj / README.md
Last active December 19, 2015 13:28 — forked from mbostock/.block

Smooth graph exploration

D3 force layout keeps track of node positions by setting x and y properties on the underlying data. By default it chooses starting positions at random, which is convenient, but leads to high-velocity, distracting movements when force calculations begin.

For many graph structures, it's easy to do better than random for starting positions. We can set specific start positions on the data before handing over control to force layout.

In this example, clicking on a node expands its 10 immediate neighbours. For a short period

@apcj
apcj / index.html
Created January 24, 2012 16:51 — forked from enjalot/index.html
Shards and Machines
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Shards and Machines</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.7.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.7.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.7.1"></script>
<style type="text/css">
@apcj
apcj / index.html
Created January 24, 2012 08:26 — forked from mbostock/README.md
Radial Node-Link Tree in D3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Node-Link Tree (Radial)</title>
<script type="text/javascript" src="https://github.com/mbostock/d3/raw/2c030290457a4eac0efe34b1c7a61a29997ac3ef/d3.js"></script>
<script type="text/javascript" src="https://github.com/mbostock/d3/raw/2c030290457a4eac0efe34b1c7a61a29997ac3ef/d3.layout.js"></script>
<style type="text/css">
circle.node {