Skip to content

Instantly share code, notes, and snippets.

@gka

gka/README.md

Forked from mbostock/.block
Last active December 14, 2015 20:38
Show Gist options
  • Save gka/5144816 to your computer and use it in GitHub Desktop.
Save gka/5144816 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

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.

Raw
d3-dependencies.json
{"directed": true, "graph": [], "nodes": [{"id": "d3.ease"}, {"id": "d3.behavior.drag"}, {"id": "d3.layout.pack"}, {"id": "d3.scale.linear"}, {"id": "d3.time.second"}, {"id": "d3.geo.clip.circle"}, {"id": "d3.geo.orthographic"}, {"id": "d3.transition.filter"}, {"id": "d3.ascending"}, {"id": "d3.layout.cluster"}, {"id": "d3"}, {"id": "d3.time.day"}, {"id": "d3.geo.azimuthal"}, {"id": "d3.geo.centroid"}, {"id": "d3.transition.remove"}, {"id": "d3.transition.selectAll"}, {"id": "d3.geo.gnomonic"}, {"id": "d3.time.year"}, {"id": "d3.geo.compose"}, {"id": "d3.time.minute"}, {"id": "d3.layout.bundle"}, {"id": "d3.selection.node"}, {"id": "d3.mean"}, {"id": "d3.geo"}, {"id": "d3.sum"}, {"id": "d3.geom.quadtree"}, {"id": "d3.map"}, {"id": "d3.selection.select"}, {"id": "d3.zip"}, {"id": "d3.layout.histogram"}, {"id": "d3.max"}, {"id": "d3.scale.nice"}, {"id": "d3.extent"}, {"id": "d3.transition.each"}, {"id": "d3.geo.equirectangular"}, {"id": "d3.time.format.locale"}, {"id": "d3.dispatch"}, {"id": "d3.transform"}, {"id": "d3.noop"}, {"id": "d3.geo.projection"}, {"id": "d3.selection.on"}, {"id": "d3.behavior.zoom"}, {"id": "d3.svg.area.radial"}, {"id": "d3.layout.pie"}, {"id": "d3.time.scale"}, {"id": "d3.layout"}, {"id": "d3.dsv.csv"}, {"id": "d3.selection.classed"}, {"id": "d3.min"}, {"id": "d3.nest"}, {"id": "d3.selection.data"}, {"id": "d3.xml"}, {"id": "d3.layout.partition"}, {"id": "d3.transition.attr"}, {"id": "d3.hsl"}, {"id": "d3.selection.root"}, {"id": "d3.geo.path.context"}, {"id": "d3.geo.clip"}, {"id": "d3.geo.resample"}, {"id": "d3.geo.path.area"}, {"id": "d3.selection.attr"}, {"id": "d3.geo.rotation"}, {"id": "d3.bisect"}, {"id": "d3.selection.each"}, {"id": "d3.identity"}, {"id": "d3.dsv.tsv"}, {"id": "d3.selection.html"}, {"id": "d3.random"}, {"id": "d3.scale.identity"}, {"id": "d3.xyz"}, {"id": "d3.collapse"}, {"id": "d3.geo.area"}, {"id": "d3.geo.azimuthal.equidistant"}, {"id": "d3.geo.path.centroid"}, {"id": "d3.transition.tween"}, {"id": "d3.compat.date"}, {"id": "d3.geo.mercator"}, {"id": "d3.format"}, {"id": "d3.layout.stack"}, {"id": "d3.time.format"}, {"id": "d3.transition.style"}, {"id": "d3.time.interval"}, {"id": "d3.selection"}, {"id": "d3.time.scale.utc"}, {"id": "d3.range"}, {"id": "d3.svg.area"}, {"id": "d3.selection.enter.select"}, {"id": "d3.svg.diagonal"}, {"id": "d3.number"}, {"id": "d3.transition.duration"}, {"id": "d3.core.module"}, {"id": "d3.hcl"}, {"id": "d3.touches"}, {"id": "d3.html"}, {"id": "d3.transition"}, {"id": "d3.selection.enter"}, {"id": "d3.quantile"}, {"id": "d3.geo.bounds"}, {"id": "d3.uninterpolate"}, {"id": "d3.core"}, {"id": "d3.selection.text"}, {"id": "d3.transpose"}, {"id": "d3.svg"}, {"id": "d3.dsv"}, {"id": "d3.round"}, {"id": "d3.descending"}, {"id": "d3.formatPrefix"}, {"id": "d3.scale.log"}, {"id": "d3.transition.delay"}, {"id": "d3.layout.treemap"}, {"id": "d3.time.month"}, {"id": "d3.scale.bilinear"}, {"id": "d3.layout.hierarchy"}, {"id": "d3.array"}, {"id": "d3.ns"}, {"id": "d3.time"}, {"id": "d3.geo.albers"}, {"id": "d3.layout.chord"}, {"id": "d3.geo.clip.antimeridian"}, {"id": "d3.compat.style"}, {"id": "d3.selection.sort"}, {"id": "d3.class"}, {"id": "d3.time.week"}, {"id": "d3.selection.remove"}, {"id": "d3.selection.property"}, {"id": "d3.transition.select"}, {"id": "d3.geo.azimuthal.equal.area"}, {"id": "d3.scale.quantile"}, {"id": "d3.interpolate"}, {"id": "d3.geo.stream"}, {"id": "d3.scale"}, {"id": "d3.timer"}, {"id": "d3.shuffle"}, {"id": "d3.geo.cartesian"}, {"id": "d3.compat"}, {"id": "d3.svg.axis"}, {"id": "d3.keys"}, {"id": "d3.geo.path"}, {"id": "d3.geo.circle"}, {"id": "d3.geo.haversin"}, {"id": "d3.requote"}, {"id": "d3.functor"}, {"id": "d3.layout.force"}, {"id": "d3.svg.line"}, {"id": "d3.svg.diagonal.radial"}, {"id": "d3.geo.spherical"}, {"id": "d3.geom.delaunay"}, {"id": "d3.merge"}, {"id": "d3.time.format.iso"}, {"id": "d3.scale.ordinal"}, {"id": "d3.time.format.utc"}, {"id": "d3.geom.hull"}, {"id": "d3.format.locale"}, {"id": "d3.svg.chord"}, {"id": "d3.mouse"}, {"id": "d3.transition.ease"}, {"id": "d3.geo.azimuthal.equal"}, {"id": "d3.permute"}, {"id": "d3.svg.symbol"}, {"id": "d3.selection.insert"}, {"id": "d3.rgb"}, {"id": "d3.rebind"}, {"id": "d3.json"}, {"id": "d3.true"}, {"id": "d3.median"}, {"id": "d3.geo.graticule"}, {"id": "d3.scale.quantize"}, {"id": "d3.text"}, {"id": "d3.svg.arc"}, {"id": "d3.geo.greatArc"}, {"id": "d3.scale.sqrt"}, {"id": "d3.svg.line.radial"}, {"id": "d3.values"}, {"id": "d3.selection.empty"}, {"id": "d3.geo.stereographic"}, {"id": "d3.scale.category"}, {"id": "d3.selection.order"}, {"id": "d3.behavior"}, {"id": "d3.entries"}, {"id": "d3.svg.brush"}, {"id": "d3.geo.albers.usa"}, {"id": "d3.selection.datum"}, {"id": "d3.event"}, {"id": "d3.selection.call"}, {"id": "d3.color"}, {"id": "d3.geom.polygon"}, {"id": "d3.lab"}, {"id": "d3.geo.interpolate"}, {"id": "d3.scale.polylinear"}, {"id": "d3.time.hour"}, {"id": "d3.scale.threshold"}, {"id": "d3.selection.style"}, {"id": "d3.geom.voronoi"}, {"id": "d3.layout.tree"}, {"id": "d3.transition.text"}, {"id": "d3.selection.append"}, {"id": "d3.geo.path.buffer"}, {"id": "d3.selection.transition"}, {"id": "d3.selection.filter"}, {"id": "d3.scale.pow"}, {"id": "d3.selection.selectAll"}, {"id": "d3.geom"}, {"id": "d3.xhr"}], "links": [{"source": 0, "target": 26}, {"source": 0, "target": 10}, {"source": 1, "target": 92}, {"source": 1, "target": 82}, {"source": 1, "target": 154}, {"source": 1, "target": 182}, {"source": 1, "target": 177}, {"source": 1, "target": 161}, {"source": 2, "target": 45}, {"source": 2, "target": 112}, {"source": 2, "target": 193}, {"source": 3, "target": 128}, {"source": 3, "target": 130}, {"source": 3, "target": 84}, {"source": 3, "target": 31}, {"source": 3, "target": 161}, {"source": 3, "target": 77}, {"source": 3, "target": 10}, {"source": 4, "target": 4}, {"source": 4, "target": 81}, {"source": 4, "target": 115}, {"source": 5, "target": 57}, {"source": 5, "target": 133}, {"source": 5, "target": 145}, {"source": 5, "target": 138}, {"source": 6, "target": 23}, {"source": 6, "target": 39}, {"source": 6, "target": 12}, {"source": 7, "target": 198}, {"source": 7, "target": 94}, {"source": 8, "target": 10}, {"source": 9, "target": 45}, {"source": 9, "target": 30}, {"source": 9, "target": 112}, {"source": 9, "target": 193}, {"source": 11, "target": 17}, {"source": 11, "target": 11}, {"source": 11, "target": 81}, {"source": 11, "target": 115}, {"source": 12, "target": 23}, {"source": 13, "target": 23}, {"source": 13, "target": 129}, {"source": 14, "target": 94}, {"source": 15, "target": 200}, {"source": 15, "target": 94}, {"source": 16, "target": 23}, {"source": 16, "target": 39}, {"source": 16, "target": 12}, {"source": 17, "target": 17}, {"source": 17, "target": 11}, {"source": 17, "target": 81}, {"source": 17, "target": 115}, {"source": 18, "target": 23}, {"source": 19, "target": 19}, {"source": 19, "target": 81}, {"source": 19, "target": 115}, {"source": 20, "target": 45}, {"source": 21, "target": 82}, {"source": 22, "target": 10}, {"source": 22, "target": 88}, {"source": 23, "target": 10}, {"source": 24, "target": 10}, {"source": 25, "target": 201}, {"source": 26, "target": 121}, {"source": 26, "target": 10}, {"source": 27, "target": 82}, {"source": 28, "target": 10}, {"source": 28, "target": 48}, {"source": 29, "target": 45}, {"source": 29, "target": 62}, {"source": 29, "target": 141}, {"source": 29, "target": 30}, {"source": 29, "target": 48}, {"source": 30, "target": 10}, {"source": 31, "target": 130}, {"source": 32, "target": 10}, {"source": 33, "target": 63}, {"source": 33, "target": 94}, {"source": 34, "target": 23}, {"source": 34, "target": 39}, {"source": 35, "target": 79}, {"source": 36, "target": 10}, {"source": 37, "target": 10}, {"source": 38, "target": 10}, {"source": 39, "target": 61}, {"source": 39, "target": 5}, {"source": 39, "target": 18}, {"source": 39, "target": 23}, {"source": 39, "target": 58}, {"source": 39, "target": 161}, {"source": 40, "target": 182}, {"source": 40, "target": 82}, {"source": 41, "target": 92}, {"source": 41, "target": 82}, {"source": 41, "target": 154}, {"source": 41, "target": 182}, {"source": 41, "target": 177}, {"source": 41, "target": 161}, {"source": 42, "target": 85}, {"source": 43, "target": 45}, {"source": 43, "target": 24}, {"source": 43, "target": 84}, {"source": 44, "target": 62}, {"source": 44, "target": 11}, {"source": 44, "target": 189}, {"source": 44, "target": 110}, {"source": 44, "target": 3}, {"source": 44, "target": 4}, {"source": 44, "target": 31}, {"source": 44, "target": 122}, {"source": 44, "target": 17}, {"source": 44, "target": 19}, {"source": 44, "target": 115}, {"source": 44, "target": 161}, {"source": 44, "target": 79}, {"source": 45, "target": 10}, {"source": 46, "target": 103}, {"source": 47, "target": 140}, {"source": 47, "target": 70}, {"source": 47, "target": 82}, {"source": 48, "target": 10}, {"source": 49, "target": 10}, {"source": 50, "target": 95}, {"source": 50, "target": 82}, {"source": 51, "target": 10}, {"source": 51, "target": 202}, {"source": 52, "target": 45}, {"source": 52, "target": 112}, {"source": 53, "target": 128}, {"source": 53, "target": 114}, {"source": 53, "target": 74}, {"source": 53, "target": 94}, {"source": 54, "target": 10}, {"source": 54, "target": 160}, {"source": 55, "target": 82}, {"source": 56, "target": 137}, {"source": 57, "target": 147}, {"source": 57, "target": 23}, {"source": 57, "target": 145}, {"source": 58, "target": 133}, {"source": 58, "target": 23}, {"source": 59, "target": 185}, {"source": 59, "target": 137}, {"source": 60, "target": 114}, {"source": 60, "target": 82}, {"source": 61, "target": 18}, {"source": 61, "target": 23}, {"source": 62, "target": 10}, {"source": 63, "target": 82}, {"source": 64, "target": 10}, {"source": 65, "target": 103}, {"source": 66, "target": 82}, {"source": 67, "target": 10}, {"source": 68, "target": 3}, {"source": 68, "target": 130}, {"source": 69, "target": 10}, {"source": 70, "target": 10}, {"source": 71, "target": 23}, {"source": 71, "target": 129}, {"source": 72, "target": 23}, {"source": 72, "target": 39}, {"source": 72, "target": 12}, {"source": 73, "target": 185}, {"source": 73, "target": 137}, {"source": 74, "target": 63}, {"source": 74, "target": 94}, {"source": 75, "target": 134}, {"source": 76, "target": 23}, {"source": 76, "target": 39}, {"source": 77, "target": 106}, {"source": 77, "target": 104}, {"source": 77, "target": 10}, {"source": 77, "target": 26}, {"source": 78, "target": 45}, {"source": 78, "target": 157}, {"source": 78, "target": 84}, {"source": 78, "target": 26}, {"source": 79, "target": 26}, {"source": 79, "target": 140}, {"source": 79, "target": 115}, {"source": 80, "target": 128}, {"source": 80, "target": 74}, {"source": 80, "target": 94}, {"source": 81, "target": 115}, {"source": 82, "target": 10}, {"source": 82, "target": 82}, {"source": 83, "target": 3}, {"source": 83, "target": 44}, {"source": 83, "target": 150}, {"source": 84, "target": 10}, {"source": 85, "target": 102}, {"source": 85, "target": 141}, {"source": 86, "target": 95}, {"source": 86, "target": 82}, {"source": 87, "target": 102}, {"source": 87, "target": 141}, {"source": 88, "target": 10}, {"source": 89, "target": 63}, {"source": 89, "target": 94}, {"source": 90, "target": 99}, {"source": 91, "target": 186}, {"source": 91, "target": 10}, {"source": 91, "target": 160}, {"source": 92, "target": 154}, {"source": 92, "target": 182}, {"source": 92, "target": 10}, {"source": 93, "target": 10}, {"source": 93, "target": 202}, {"source": 94, "target": 131}, {"source": 94, "target": 10}, {"source": 94, "target": 36}, {"source": 94, "target": 94}, {"source": 95, "target": 95}, {"source": 95, "target": 82}, {"source": 96, "target": 10}, {"source": 97, "target": 23}, {"source": 97, "target": 129}, {"source": 98, "target": 10}, {"source": 100, "target": 82}, {"source": 101, "target": 10}, {"source": 101, "target": 28}, {"source": 102, "target": 10}, {"source": 103, "target": 10}, {"source": 103, "target": 202}, {"source": 104, "target": 10}, {"source": 105, "target": 10}, {"source": 106, "target": 77}, {"source": 106, "target": 10}, {"source": 106, "target": 104}, {"source": 107, "target": 3}, {"source": 107, "target": 77}, {"source": 107, "target": 31}, {"source": 107, "target": 130}, {"source": 108, "target": 63}, {"source": 108, "target": 94}, {"source": 109, "target": 45}, {"source": 109, "target": 112}, {"source": 110, "target": 110}, {"source": 110, "target": 11}, {"source": 110, "target": 81}, {"source": 110, "target": 115}, {"source": 111, "target": 130}, {"source": 112, "target": 45}, {"source": 112, "target": 161}, {"source": 112, "target": 147}, {"source": 113, "target": 10}, {"source": 114, "target": 10}, {"source": 115, "target": 10}, {"source": 116, "target": 23}, {"source": 116, "target": 39}, {"source": 117, "target": 45}, {"source": 117, "target": 84}, {"source": 118, "target": 57}, {"source": 119, "target": 134}, {"source": 120, "target": 8}, {"source": 120, "target": 82}, {"source": 121, "target": 10}, {"source": 122, "target": 17}, {"source": 122, "target": 11}, {"source": 122, "target": 81}, {"source": 122, "target": 122}, {"source": 122, "target": 115}, {"source": 123, "target": 82}, {"source": 124, "target": 82}, {"source": 125, "target": 27}, {"source": 125, "target": 94}, {"source": 126, "target": 12}, {"source": 126, "target": 23}, {"source": 126, "target": 39}, {"source": 126, "target": 156}, {"source": 127, "target": 62}, {"source": 127, "target": 8}, {"source": 127, "target": 96}, {"source": 127, "target": 130}, {"source": 128, "target": 128}, {"source": 128, "target": 37}, {"source": 128, "target": 54}, {"source": 128, "target": 160}, {"source": 128, "target": 91}, {"source": 128, "target": 10}, {"source": 128, "target": 186}, {"source": 129, "target": 23}, {"source": 130, "target": 10}, {"source": 131, "target": 131}, {"source": 131, "target": 10}, {"source": 132, "target": 10}, {"source": 133, "target": 23}, {"source": 135, "target": 102}, {"source": 135, "target": 130}, {"source": 135, "target": 3}, {"source": 135, "target": 94}, {"source": 135, "target": 82}, {"source": 136, "target": 10}, {"source": 137, "target": 58}, {"source": 137, "target": 23}, {"source": 137, "target": 129}, {"source": 137, "target": 97}, {"source": 137, "target": 56}, {"source": 138, "target": 145}, {"source": 138, "target": 133}, {"source": 138, "target": 23}, {"source": 138, "target": 61}, {"source": 139, "target": 23}, {"source": 140, "target": 10}, {"source": 141, "target": 10}, {"source": 142, "target": 1}, {"source": 142, "target": 45}, {"source": 142, "target": 182}, {"source": 142, "target": 131}, {"source": 142, "target": 36}, {"source": 142, "target": 161}, {"source": 142, "target": 25}, {"source": 143, "target": 102}, {"source": 143, "target": 141}, {"source": 143, "target": 26}, {"source": 144, "target": 87}, {"source": 145, "target": 23}, {"source": 146, "target": 192}, {"source": 146, "target": 201}, {"source": 147, "target": 10}, {"source": 148, "target": 79}, {"source": 148, "target": 150}, {"source": 149, "target": 84}, {"source": 149, "target": 130}, {"source": 150, "target": 79}, {"source": 151, "target": 201}, {"source": 152, "target": 77}, {"source": 153, "target": 102}, {"source": 153, "target": 141}, {"source": 154, "target": 182}, {"source": 154, "target": 10}, {"source": 154, "target": 82}, {"source": 155, "target": 63}, {"source": 155, "target": 0}, {"source": 155, "target": 94}, {"source": 157, "target": 10}, {"source": 158, "target": 102}, {"source": 158, "target": 141}, {"source": 158, "target": 26}, {"source": 159, "target": 114}, {"source": 159, "target": 82}, {"source": 160, "target": 26}, {"source": 160, "target": 54}, {"source": 160, "target": 69}, {"source": 160, "target": 10}, {"source": 160, "target": 186}, {"source": 161, "target": 10}, {"source": 162, "target": 10}, {"source": 162, "target": 202}, {"source": 163, "target": 10}, {"source": 164, "target": 8}, {"source": 164, "target": 96}, {"source": 164, "target": 10}, {"source": 165, "target": 84}, {"source": 165, "target": 23}, {"source": 166, "target": 130}, {"source": 167, "target": 10}, {"source": 167, "target": 202}, {"source": 168, "target": 102}, {"source": 168, "target": 141}, {"source": 169, "target": 23}, {"source": 169, "target": 187}, {"source": 170, "target": 199}, {"source": 170, "target": 130}, {"source": 171, "target": 143}, {"source": 172, "target": 10}, {"source": 173, "target": 82}, {"source": 174, "target": 23}, {"source": 174, "target": 39}, {"source": 174, "target": 12}, {"source": 175, "target": 149}, {"source": 175, "target": 130}, {"source": 176, "target": 82}, {"source": 177, "target": 10}, {"source": 178, "target": 10}, {"source": 179, "target": 92}, {"source": 179, "target": 82}, {"source": 179, "target": 154}, {"source": 179, "target": 182}, {"source": 179, "target": 130}, {"source": 179, "target": 161}, {"source": 179, "target": 102}, {"source": 180, "target": 116}, {"source": 180, "target": 23}, {"source": 181, "target": 82}, {"source": 182, "target": 182}, {"source": 182, "target": 10}, {"source": 182, "target": 36}, {"source": 183, "target": 82}, {"source": 184, "target": 10}, {"source": 185, "target": 201}, {"source": 186, "target": 69}, {"source": 186, "target": 91}, {"source": 186, "target": 10}, {"source": 186, "target": 160}, {"source": 187, "target": 23}, {"source": 187, "target": 139}, {"source": 188, "target": 62}, {"source": 188, "target": 130}, {"source": 189, "target": 189}, {"source": 189, "target": 81}, {"source": 189, "target": 115}, {"source": 190, "target": 62}, {"source": 190, "target": 130}, {"source": 191, "target": 82}, {"source": 192, "target": 185}, {"source": 192, "target": 84}, {"source": 192, "target": 201}, {"source": 193, "target": 45}, {"source": 193, "target": 112}, {"source": 194, "target": 74}, {"source": 194, "target": 94}, {"source": 195, "target": 114}, {"source": 195, "target": 82}, {"source": 196, "target": 137}, {"source": 197, "target": 94}, {"source": 197, "target": 82}, {"source": 198, "target": 82}, {"source": 199, "target": 3}, {"source": 199, "target": 31}, {"source": 199, "target": 130}, {"source": 200, "target": 82}, {"source": 201, "target": 10}, {"source": 202, "target": 161}, {"source": 202, "target": 182}, {"source": 202, "target": 10}, {"source": 202, "target": 36}], "multigraph": false}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("d3-dependencies.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment