Mouseover to repel nodes. Adapted from my talk on force layouts.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Force-Directed Layout (Multiple Foci)</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> |
[ Launch: pi man ] 5942244 by nsonnad[ Launch: pi man ] 5942016 by enjalot
Simple change to Mike Bostock's force-directed graph, adding colors to links.
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.
Circle-bound nodes in d3.layout.force(), using a variation of Mike Bostock's rectangular Bounded Force Layout. Here we calculate the maximum and minimum x for a given y in the circle, and vice versa.
[ Launch: optical_illusion_001_motion2 ] 6084524 by nsonnad[ Launch: optical_illusion_001_motion2 ] 5968492 by zeffii[ Launch: optical_illusion_001_motion ] 5892162 by zeffii[ Launch: optical_illusion_001 ] 5891299 by zeffii[ Launch: zeffii default ] 5891190 by zeffii[ Launch: zeffii default ] 5033869 by zeffii
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| <title>Text bbox issue</title> | |
| </head> | |
| <style type="text/css" media="screen"> | |
| @import url(http://fonts.googleapis.com/css?family=Cutive); | |
| svg text { |
| categories = ["funny", "stupid", "sad", "embarassing"]; | |
| tabData = [[1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,16]]; | |
| mapped = categories.map(function(cat) { | |
| return tabData.map(function(d) { | |
| return { | |
| name: cat, value: d[categories.indexOf(cat)] | |
| }; | |
| }); | |
| }); |
| function series (callbacks, last) { | |
| var results = []; | |
| function next () { | |
| var callback = callbacks.shift(); | |
| if(callback) { | |
| callback(function() { | |
| results.push(Array.prototype.slice.call(arguments)); | |
| next(); | |
| }); |