Skip to content

Instantly share code, notes, and snippets.

@samflores

samflores/index.html

Created December 13, 2012 15:17
Show Gist options
  • Save samflores/4277057 to your computer and use it in GitHub Desktop.
Save samflores/4277057 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v2.min.js"></script>
<style type="text/css">
body { height: 100%; width: 100%; }
.link { stroke: #ccc; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
</style>
</head>
<body>
<script type="text/javascript">
var body = d3.select("body");
var w = 960, h = 500;
// var w = body.attr("width"), h = body.attr("height");
var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
d3.json("simpler.json", function(json) {
var force = self.force = d3.layout.force()
.nodes(json.nodes)
.links(json.links)
.gravity(.05)
.distance(100)
.charge(-100)
.size([w, h])
.start();
var link = vis.selectAll("line.link")
.data(json.links)
.enter().append("svg:line")
.attr("class", "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; });
var node_drag = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend);
function dragstart(d, i) {
force.stop() // stops the force auto positioning before you start dragging
}
function dragmove(d, i) {
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
tick(); // this is the key to make it work together with updating both px,py,x,y on d !
}
function dragend(d, i) {
d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
tick();
force.resume();
}
var node = vis.selectAll("g.node")
.data(json.nodes)
.enter().append("svg:g")
.attr("class", "node")
.call(node_drag);
node.append("svg:image")
.attr("class", "circle")
.attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("width", "16px")
.attr("height", "16px");
node.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
force.on("tick", tick);
function tick() {
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
};
});
</script>
</body>
</html>
Raw
larger.json
{
"nodes":[
{
"name":"Myriel",
"group":1
},
{
"name":"Napoleon",
"group":1
},
{
"name":"Mlle.Baptistine",
"group":1
},
{
"name":"Mme.Magloire",
"group":1
},
{
"name":"CountessdeLo",
"group":1
},
{
"name":"Geborand",
"group":1
},
{
"name":"Champtercier",
"group":1
},
{
"name":"Cravatte",
"group":1
},
{
"name":"Count",
"group":1
},
{
"name":"OldMan",
"group":1
},
{
"name":"Labarre",
"group":2
},
{
"name":"Valjean",
"group":2
},
{
"name":"Marguerite",
"group":3
},
{
"name":"Mme.deR",
"group":2
},
{
"name":"Isabeau",
"group":2
},
{
"name":"Gervais",
"group":2
},
{
"name":"Tholomyes",
"group":3
},
{
"name":"Listolier",
"group":3
},
{
"name":"Fameuil",
"group":3
},
{
"name":"Blacheville",
"group":3
},
{
"name":"Favourite",
"group":3
},
{
"name":"Dahlia",
"group":3
},
{
"name":"Zephine",
"group":3
},
{
"name":"Fantine",
"group":3
},
{
"name":"Mme.Thenardier",
"group":4
},
{
"name":"Thenardier",
"group":4
},
{
"name":"Cosette",
"group":5
},
{
"name":"Javert",
"group":4
},
{
"name":"Fauchelevent",
"group":0
},
{
"name":"Bamatabois",
"group":2
},
{
"name":"Perpetue",
"group":3
},
{
"name":"Simplice",
"group":2
},
{
"name":"Scaufflaire",
"group":2
},
{
"name":"Woman1",
"group":2
},
{
"name":"Judge",
"group":2
},
{
"name":"Champmathieu",
"group":2
},
{
"name":"Brevet",
"group":2
},
{
"name":"Chenildieu",
"group":2
},
{
"name":"Cochepaille",
"group":2
},
{
"name":"Pontmercy",
"group":4
},
{
"name":"Boulatruelle",
"group":6
},
{
"name":"Eponine",
"group":4
},
{
"name":"Anzelma",
"group":4
},
{
"name":"Woman2",
"group":5
},
{
"name":"MotherInnocent",
"group":0
},
{
"name":"Gribier",
"group":0
},
{
"name":"Jondrette",
"group":7
},
{
"name":"Mme.Burgon",
"group":7
},
{
"name":"Gavroche",
"group":8
},
{
"name":"Gillenormand",
"group":5
},
{
"name":"Magnon",
"group":5
},
{
"name":"Mlle.Gillenormand",
"group":5
},
{
"name":"Mme.Pontmercy",
"group":5
},
{
"name":"Mlle.Vaubois",
"group":5
},
{
"name":"Lt.Gillenormand",
"group":5
},
{
"name":"Marius",
"group":8
},
{
"name":"BaronessT",
"group":5
},
{
"name":"Mabeuf",
"group":8
},
{
"name":"Enjolras",
"group":8
},
{
"name":"Combeferre",
"group":8
},
{
"name":"Prouvaire",
"group":8
},
{
"name":"Feuilly",
"group":8
},
{
"name":"Courfeyrac",
"group":8
},
{
"name":"Bahorel",
"group":8
},
{
"name":"Bossuet",
"group":8
},
{
"name":"Joly",
"group":8
},
{
"name":"Grantaire",
"group":8
},
{
"name":"MotherPlutarch",
"group":9
},
{
"name":"Gueulemer",
"group":4
},
{
"name":"Babet",
"group":4
},
{
"name":"Claquesous",
"group":4
},
{
"name":"Montparnasse",
"group":4
},
{
"name":"Toussaint",
"group":5
},
{
"name":"Child1",
"group":10
},
{
"name":"Child2",
"group":10
},
{
"name":"Brujon",
"group":4
},
{
"name":"Mme.Hucheloup",
"group":8
}
],
"links":[
{
"source":1,
"target":0,
"value":1
},
{
"source":2,
"target":0,
"value":8
},
{
"source":3,
"target":0,
"value":10
},
{
"source":3,
"target":2,
"value":6
},
{
"source":4,
"target":0,
"value":1
},
{
"source":5,
"target":0,
"value":1
},
{
"source":6,
"target":0,
"value":1
},
{
"source":7,
"target":0,
"value":1
},
{
"source":8,
"target":0,
"value":2
},
{
"source":9,
"target":0,
"value":1
},
{
"source":11,
"target":10,
"value":1
},
{
"source":11,
"target":3,
"value":3
},
{
"source":11,
"target":2,
"value":3
},
{
"source":11,
"target":0,
"value":5
},
{
"source":12,
"target":11,
"value":1
},
{
"source":13,
"target":11,
"value":1
},
{
"source":14,
"target":11,
"value":1
},
{
"source":15,
"target":11,
"value":1
},
{
"source":17,
"target":16,
"value":4
},
{
"source":18,
"target":16,
"value":4
},
{
"source":18,
"target":17,
"value":4
},
{
"source":19,
"target":16,
"value":4
},
{
"source":19,
"target":17,
"value":4
},
{
"source":19,
"target":18,
"value":4
},
{
"source":20,
"target":16,
"value":3
},
{
"source":20,
"target":17,
"value":3
},
{
"source":20,
"target":18,
"value":3
},
{
"source":20,
"target":19,
"value":4
},
{
"source":21,
"target":16,
"value":3
},
{
"source":21,
"target":17,
"value":3
},
{
"source":21,
"target":18,
"value":3
},
{
"source":21,
"target":19,
"value":3
},
{
"source":21,
"target":20,
"value":5
},
{
"source":22,
"target":16,
"value":3
},
{
"source":22,
"target":17,
"value":3
},
{
"source":22,
"target":18,
"value":3
},
{
"source":22,
"target":19,
"value":3
},
{
"source":22,
"target":20,
"value":4
},
{
"source":22,
"target":21,
"value":4
},
{
"source":23,
"target":16,
"value":3
},
{
"source":23,
"target":17,
"value":3
},
{
"source":23,
"target":18,
"value":3
},
{
"source":23,
"target":19,
"value":3
},
{
"source":23,
"target":20,
"value":4
},
{
"source":23,
"target":21,
"value":4
},
{
"source":23,
"target":22,
"value":4
},
{
"source":23,
"target":12,
"value":2
},
{
"source":23,
"target":11,
"value":9
},
{
"source":24,
"target":23,
"value":2
},
{
"source":24,
"target":11,
"value":7
},
{
"source":25,
"target":24,
"value":13
},
{
"source":25,
"target":23,
"value":1
},
{
"source":25,
"target":11,
"value":12
},
{
"source":26,
"target":24,
"value":4
},
{
"source":26,
"target":11,
"value":31
},
{
"source":26,
"target":16,
"value":1
},
{
"source":26,
"target":25,
"value":1
},
{
"source":27,
"target":11,
"value":17
},
{
"source":27,
"target":23,
"value":5
},
{
"source":27,
"target":25,
"value":5
},
{
"source":27,
"target":24,
"value":1
},
{
"source":27,
"target":26,
"value":1
},
{
"source":28,
"target":11,
"value":8
},
{
"source":28,
"target":27,
"value":1
},
{
"source":29,
"target":23,
"value":1
},
{
"source":29,
"target":27,
"value":1
},
{
"source":29,
"target":11,
"value":2
},
{
"source":30,
"target":23,
"value":1
},
{
"source":31,
"target":30,
"value":2
},
{
"source":31,
"target":11,
"value":3
},
{
"source":31,
"target":23,
"value":2
},
{
"source":31,
"target":27,
"value":1
},
{
"source":32,
"target":11,
"value":1
},
{
"source":33,
"target":11,
"value":2
},
{
"source":33,
"target":27,
"value":1
},
{
"source":34,
"target":11,
"value":3
},
{
"source":34,
"target":29,
"value":2
},
{
"source":35,
"target":11,
"value":3
},
{
"source":35,
"target":34,
"value":3
},
{
"source":35,
"target":29,
"value":2
},
{
"source":36,
"target":34,
"value":2
},
{
"source":36,
"target":35,
"value":2
},
{
"source":36,
"target":11,
"value":2
},
{
"source":36,
"target":29,
"value":1
},
{
"source":37,
"target":34,
"value":2
},
{
"source":37,
"target":35,
"value":2
},
{
"source":37,
"target":36,
"value":2
},
{
"source":37,
"target":11,
"value":2
},
{
"source":37,
"target":29,
"value":1
},
{
"source":38,
"target":34,
"value":2
},
{
"source":38,
"target":35,
"value":2
},
{
"source":38,
"target":36,
"value":2
},
{
"source":38,
"target":37,
"value":2
},
{
"source":38,
"target":11,
"value":2
},
{
"source":38,
"target":29,
"value":1
},
{
"source":39,
"target":25,
"value":1
},
{
"source":40,
"target":25,
"value":1
},
{
"source":41,
"target":24,
"value":2
},
{
"source":41,
"target":25,
"value":3
},
{
"source":42,
"target":41,
"value":2
},
{
"source":42,
"target":25,
"value":2
},
{
"source":42,
"target":24,
"value":1
},
{
"source":43,
"target":11,
"value":3
},
{
"source":43,
"target":26,
"value":1
},
{
"source":43,
"target":27,
"value":1
},
{
"source":44,
"target":28,
"value":3
},
{
"source":44,
"target":11,
"value":1
},
{
"source":45,
"target":28,
"value":2
},
{
"source":47,
"target":46,
"value":1
},
{
"source":48,
"target":47,
"value":2
},
{
"source":48,
"target":25,
"value":1
},
{
"source":48,
"target":27,
"value":1
},
{
"source":48,
"target":11,
"value":1
},
{
"source":49,
"target":26,
"value":3
},
{
"source":49,
"target":11,
"value":2
},
{
"source":50,
"target":49,
"value":1
},
{
"source":50,
"target":24,
"value":1
},
{
"source":51,
"target":49,
"value":9
},
{
"source":51,
"target":26,
"value":2
},
{
"source":51,
"target":11,
"value":2
},
{
"source":52,
"target":51,
"value":1
},
{
"source":52,
"target":39,
"value":1
},
{
"source":53,
"target":51,
"value":1
},
{
"source":54,
"target":51,
"value":2
},
{
"source":54,
"target":49,
"value":1
},
{
"source":54,
"target":26,
"value":1
},
{
"source":55,
"target":51,
"value":6
},
{
"source":55,
"target":49,
"value":12
},
{
"source":55,
"target":39,
"value":1
},
{
"source":55,
"target":54,
"value":1
},
{
"source":55,
"target":26,
"value":21
},
{
"source":55,
"target":11,
"value":19
},
{
"source":55,
"target":16,
"value":1
},
{
"source":55,
"target":25,
"value":2
},
{
"source":55,
"target":41,
"value":5
},
{
"source":55,
"target":48,
"value":4
},
{
"source":56,
"target":49,
"value":1
},
{
"source":56,
"target":55,
"value":1
},
{
"source":57,
"target":55,
"value":1
},
{
"source":57,
"target":41,
"value":1
},
{
"source":57,
"target":48,
"value":1
},
{
"source":58,
"target":55,
"value":7
},
{
"source":58,
"target":48,
"value":7
},
{
"source":58,
"target":27,
"value":6
},
{
"source":58,
"target":57,
"value":1
},
{
"source":58,
"target":11,
"value":4
},
{
"source":59,
"target":58,
"value":15
},
{
"source":59,
"target":55,
"value":5
},
{
"source":59,
"target":48,
"value":6
},
{
"source":59,
"target":57,
"value":2
},
{
"source":60,
"target":48,
"value":1
},
{
"source":60,
"target":58,
"value":4
},
{
"source":60,
"target":59,
"value":2
},
{
"source":61,
"target":48,
"value":2
},
{
"source":61,
"target":58,
"value":6
},
{
"source":61,
"target":60,
"value":2
},
{
"source":61,
"target":59,
"value":5
},
{
"source":61,
"target":57,
"value":1
},
{
"source":61,
"target":55,
"value":1
},
{
"source":62,
"target":55,
"value":9
},
{
"source":62,
"target":58,
"value":17
},
{
"source":62,
"target":59,
"value":13
},
{
"source":62,
"target":48,
"value":7
},
{
"source":62,
"target":57,
"value":2
},
{
"source":62,
"target":41,
"value":1
},
{
"source":62,
"target":61,
"value":6
},
{
"source":62,
"target":60,
"value":3
},
{
"source":63,
"target":59,
"value":5
},
{
"source":63,
"target":48,
"value":5
},
{
"source":63,
"target":62,
"value":6
},
{
"source":63,
"target":57,
"value":2
},
{
"source":63,
"target":58,
"value":4
},
{
"source":63,
"target":61,
"value":3
},
{
"source":63,
"target":60,
"value":2
},
{
"source":63,
"target":55,
"value":1
},
{
"source":64,
"target":55,
"value":5
},
{
"source":64,
"target":62,
"value":12
},
{
"source":64,
"target":48,
"value":5
},
{
"source":64,
"target":63,
"value":4
},
{
"source":64,
"target":58,
"value":10
},
{
"source":64,
"target":61,
"value":6
},
{
"source":64,
"target":60,
"value":2
},
{
"source":64,
"target":59,
"value":9
},
{
"source":64,
"target":57,
"value":1
},
{
"source":64,
"target":11,
"value":1
},
{
"source":65,
"target":63,
"value":5
},
{
"source":65,
"target":64,
"value":7
},
{
"source":65,
"target":48,
"value":3
},
{
"source":65,
"target":62,
"value":5
},
{
"source":65,
"target":58,
"value":5
},
{
"source":65,
"target":61,
"value":5
},
{
"source":65,
"target":60,
"value":2
},
{
"source":65,
"target":59,
"value":5
},
{
"source":65,
"target":57,
"value":1
},
{
"source":65,
"target":55,
"value":2
},
{
"source":66,
"target":64,
"value":3
},
{
"source":66,
"target":58,
"value":3
},
{
"source":66,
"target":59,
"value":1
},
{
"source":66,
"target":62,
"value":2
},
{
"source":66,
"target":65,
"value":2
},
{
"source":66,
"target":48,
"value":1
},
{
"source":66,
"target":63,
"value":1
},
{
"source":66,
"target":61,
"value":1
},
{
"source":66,
"target":60,
"value":1
},
{
"source":67,
"target":57,
"value":3
},
{
"source":68,
"target":25,
"value":5
},
{
"source":68,
"target":11,
"value":1
},
{
"source":68,
"target":24,
"value":1
},
{
"source":68,
"target":27,
"value":1
},
{
"source":68,
"target":48,
"value":1
},
{
"source":68,
"target":41,
"value":1
},
{
"source":69,
"target":25,
"value":6
},
{
"source":69,
"target":68,
"value":6
},
{
"source":69,
"target":11,
"value":1
},
{
"source":69,
"target":24,
"value":1
},
{
"source":69,
"target":27,
"value":2
},
{
"source":69,
"target":48,
"value":1
},
{
"source":69,
"target":41,
"value":1
},
{
"source":70,
"target":25,
"value":4
},
{
"source":70,
"target":69,
"value":4
},
{
"source":70,
"target":68,
"value":4
},
{
"source":70,
"target":11,
"value":1
},
{
"source":70,
"target":24,
"value":1
},
{
"source":70,
"target":27,
"value":1
},
{
"source":70,
"target":41,
"value":1
},
{
"source":70,
"target":58,
"value":1
},
{
"source":71,
"target":27,
"value":1
},
{
"source":71,
"target":69,
"value":2
},
{
"source":71,
"target":68,
"value":2
},
{
"source":71,
"target":70,
"value":2
},
{
"source":71,
"target":11,
"value":1
},
{
"source":71,
"target":48,
"value":1
},
{
"source":71,
"target":41,
"value":1
},
{
"source":71,
"target":25,
"value":1
},
{
"source":72,
"target":26,
"value":2
},
{
"source":72,
"target":27,
"value":1
},
{
"source":72,
"target":11,
"value":1
},
{
"source":73,
"target":48,
"value":2
},
{
"source":74,
"target":48,
"value":2
},
{
"source":74,
"target":73,
"value":3
},
{
"source":75,
"target":69,
"value":3
},
{
"source":75,
"target":68,
"value":3
},
{
"source":75,
"target":25,
"value":3
},
{
"source":75,
"target":48,
"value":1
},
{
"source":75,
"target":41,
"value":1
},
{
"source":75,
"target":70,
"value":1
},
{
"source":75,
"target":71,
"value":1
},
{
"source":76,
"target":64,
"value":1
},
{
"source":76,
"target":65,
"value":1
},
{
"source":76,
"target":66,
"value":1
},
{
"source":76,
"target":63,
"value":1
},
{
"source":76,
"target":62,
"value":1
},
{
"source":76,
"target":48,
"value":1
},
{
"source":76,
"target":58,
"value":1
}
]
}
Raw
simpler.json
{
"nodes":[
{ "name":"Nova", "group":1 },
{ "name":"Atribuida", "group":1 },
{ "name":"Iniciada", "group":1 },
{ "name":"Cancelada", "group":1 }
],
"links":[
{ "source":0, "target":1, "event":"Atribuir", "value":1 },
{ "source":1, "target":2, "event":"Iniciar", "value":1 },
{ "source":0, "target":3, "event":"Cancelar", "value":1 },
{ "source":1, "target":3, "event":"Cancelar", "value":1 },
{ "source":2, "target":3, "event":"Cancelar", "value":1 }
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment