Skip to content

Instantly share code, notes, and snippets.

@ableuler

ableuler/index.html

Last active October 13, 2017 13:05
Show Gist options
  • Save ableuler/31704bae6284ac03e4c3f760b08d4115 to your computer and use it in GitHub Desktop.
Save ableuler/31704bae6284ac03e4c3f760b08d4115 to your computer and use it in GitHub Desktop.
Download ZIP
d3 force layout collapse nodes on double-click
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line {
stroke: #aaa;
}
.nodes circle {
stroke: #fff;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select('svg'),
width = +svg.attr('width'),
height = +svg.attr('height');
// Append the groups for links and nodes to SVG
svg.append('g').attr('class', 'links');
svg.append('g').attr('class', 'nodes');
// Want access to graph data outside fo initial callback
var graph;
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json("miserables.json", function(error, data) {
if (error) throw error;
graph = data;
// Initializing simulation nodes and links here gives access to the actual source and
// target objects instead of their their ids which are already present in the JSON.
simulation.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link").links(graph.links);
// Build an array of starting and ending links for each node containing the actual link
// object (not just the ids)
for (let node of graph.nodes) {
node.startingLinks = [];
node.endingLinks = [];
node.aggregated = false;
node.mergedTo = null;
}
for (let link of graph.links) {
link.source.startingLinks.push(link);
link.target.endingLinks.push(link);
}
updateGraph();
});
function updateGraph() {
// Add new lines and circles (only on first draw, elements are around even when invisible)
svg.selectAll('.links').selectAll('line')
.data(graph.links).enter()
.append('line');
svg.selectAll('.nodes').selectAll('circle')
.data(graph.nodes).enter()
.append('circle')
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
.on('dblclick', aggregate);
// Collect all links and nodes for the ticked method
link = svg.selectAll('.links').selectAll('line');
node = svg.selectAll('.nodes').selectAll('circle');
// Adapt size of all nodes always, also change thickness of
// white circle boundary
node
.attr('r', function(d) {
if (d.aggregated) {
return 12;
} else if (d.mergedTo === null) {
return 8;
} else {
return 0;
}
})
.style('stroke-width', function(d) {
if (d.aggregated) {
return 3.0;
} else if (d.mergedTo === null) {
return 1.5;
} else {
return 0.0;
}
});
}
// Collapse or expand nodes
function aggregate(node) {
let collapsing = !node.aggregated;
node.aggregated = !node.aggregated;
for (let link of node.endingLinks) {
if (link.source.mergedTo === null && collapsing) {
link.source.mergedTo = node;
} else if (link.source.mergedTo === node && !collapsing) {
link.source.mergedTo = null;
}
}
for (let link of node.startingLinks) {
if (link.target.mergedTo === null && collapsing) {
link.target.mergedTo = node;
} else if (link.target.mergedTo === node && !collapsing) {
link.target.mergedTo = null;
}
}
updateGraph();
}
function ticked() {
link
.attr("x1", function(d) { return linkCoords(d).x1; })
.attr("y1", function(d) { return linkCoords(d).y1; })
.attr("x2", function(d) { return linkCoords(d).x2; })
.attr("y2", function(d) { return linkCoords(d).y2; });
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
}
// Connect the links to the new nodes
function linkCoords(link) {
let coords = {};
if (link.source.mergedTo === null) {
coords.x1 = link.source.x;
coords.y1 = link.source.y;
} else {
coords.x1 = link.source.mergedTo.x;
coords.y1 = link.source.mergedTo.y;
}
if (link.target.mergedTo === null) {
coords.x2 = link.target.x;
coords.y2 = link.target.y;
} else {
coords.x2 = link.target.mergedTo.x;
coords.y2 = link.target.mergedTo.y;
}
return coords;
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
Raw
miserables.json
{
"nodes": [
{"id": "Myriel", "group": 1},
{"id": "Napoleon", "group": 1},
{"id": "Mlle.Baptistine", "group": 1},
{"id": "Mme.Magloire", "group": 1},
{"id": "CountessdeLo", "group": 1},
{"id": "Geborand", "group": 1},
{"id": "Champtercier", "group": 1},
{"id": "Cravatte", "group": 1},
{"id": "Count", "group": 1},
{"id": "OldMan", "group": 1},
{"id": "Labarre", "group": 2},
{"id": "Valjean", "group": 2},
{"id": "Marguerite", "group": 3},
{"id": "Mme.deR", "group": 2},
{"id": "Isabeau", "group": 2},
{"id": "Gervais", "group": 2},
{"id": "Tholomyes", "group": 3},
{"id": "Listolier", "group": 3},
{"id": "Fameuil", "group": 3},
{"id": "Blacheville", "group": 3},
{"id": "Favourite", "group": 3},
{"id": "Dahlia", "group": 3},
{"id": "Zephine", "group": 3},
{"id": "Fantine", "group": 3},
{"id": "Mme.Thenardier", "group": 4},
{"id": "Thenardier", "group": 4},
{"id": "Cosette", "group": 5},
{"id": "Javert", "group": 4},
{"id": "Fauchelevent", "group": 0},
{"id": "Bamatabois", "group": 2},
{"id": "Perpetue", "group": 3},
{"id": "Simplice", "group": 2},
{"id": "Scaufflaire", "group": 2},
{"id": "Woman1", "group": 2},
{"id": "Judge", "group": 2},
{"id": "Champmathieu", "group": 2},
{"id": "Brevet", "group": 2},
{"id": "Chenildieu", "group": 2},
{"id": "Cochepaille", "group": 2},
{"id": "Pontmercy", "group": 4},
{"id": "Boulatruelle", "group": 6},
{"id": "Eponine", "group": 4},
{"id": "Anzelma", "group": 4},
{"id": "Woman2", "group": 5},
{"id": "MotherInnocent", "group": 0},
{"id": "Gribier", "group": 0},
{"id": "Jondrette", "group": 7},
{"id": "Mme.Burgon", "group": 7},
{"id": "Gavroche", "group": 8},
{"id": "Gillenormand", "group": 5},
{"id": "Magnon", "group": 5},
{"id": "Mlle.Gillenormand", "group": 5},
{"id": "Mme.Pontmercy", "group": 5},
{"id": "Mlle.Vaubois", "group": 5},
{"id": "Lt.Gillenormand", "group": 5},
{"id": "Marius", "group": 8},
{"id": "BaronessT", "group": 5},
{"id": "Mabeuf", "group": 8},
{"id": "Enjolras", "group": 8},
{"id": "Combeferre", "group": 8},
{"id": "Prouvaire", "group": 8},
{"id": "Feuilly", "group": 8},
{"id": "Courfeyrac", "group": 8},
{"id": "Bahorel", "group": 8},
{"id": "Bossuet", "group": 8},
{"id": "Joly", "group": 8},
{"id": "Grantaire", "group": 8},
{"id": "MotherPlutarch", "group": 9},
{"id": "Gueulemer", "group": 4},
{"id": "Babet", "group": 4},
{"id": "Claquesous", "group": 4},
{"id": "Montparnasse", "group": 4},
{"id": "Toussaint", "group": 5},
{"id": "Child1", "group": 10},
{"id": "Child2", "group": 10},
{"id": "Brujon", "group": 4},
{"id": "Mme.Hucheloup", "group": 8}
],
"links": [
{"source": "Napoleon", "target": "Myriel"},
{"source": "Mlle.Baptistine", "target": "Myriel"},
{"source": "Mme.Magloire", "target": "Myriel"},
{"source": "Mme.Magloire", "target": "Mlle.Baptistine"},
{"source": "CountessdeLo", "target": "Myriel"},
{"source": "Geborand", "target": "Myriel"},
{"source": "Champtercier", "target": "Myriel"},
{"source": "Cravatte", "target": "Myriel"},
{"source": "Count", "target": "Myriel"},
{"source": "OldMan", "target": "Myriel"},
{"source": "Valjean", "target": "Labarre"},
{"source": "Valjean", "target": "Mme.Magloire"},
{"source": "Valjean", "target": "Mlle.Baptistine"},
{"source": "Valjean", "target": "Myriel"},
{"source": "Marguerite", "target": "Valjean"},
{"source": "Mme.deR", "target": "Valjean"},
{"source": "Isabeau", "target": "Valjean"},
{"source": "Gervais", "target": "Valjean"},
{"source": "Listolier", "target": "Tholomyes"},
{"source": "Fameuil", "target": "Tholomyes"},
{"source": "Fameuil", "target": "Listolier"},
{"source": "Blacheville", "target": "Tholomyes"},
{"source": "Blacheville", "target": "Listolier"},
{"source": "Blacheville", "target": "Fameuil"},
{"source": "Favourite", "target": "Tholomyes"},
{"source": "Favourite", "target": "Listolier"},
{"source": "Favourite", "target": "Fameuil"},
{"source": "Favourite", "target": "Blacheville"},
{"source": "Dahlia", "target": "Tholomyes"},
{"source": "Dahlia", "target": "Listolier"},
{"source": "Dahlia", "target": "Fameuil"},
{"source": "Dahlia", "target": "Blacheville"},
{"source": "Dahlia", "target": "Favourite"},
{"source": "Zephine", "target": "Tholomyes"},
{"source": "Zephine", "target": "Listolier"},
{"source": "Zephine", "target": "Fameuil"},
{"source": "Zephine", "target": "Blacheville"},
{"source": "Zephine", "target": "Favourite"},
{"source": "Zephine", "target": "Dahlia"},
{"source": "Fantine", "target": "Tholomyes"},
{"source": "Fantine", "target": "Listolier"},
{"source": "Fantine", "target": "Fameuil"},
{"source": "Fantine", "target": "Blacheville"},
{"source": "Fantine", "target": "Favourite"},
{"source": "Fantine", "target": "Dahlia"},
{"source": "Fantine", "target": "Zephine"},
{"source": "Fantine", "target": "Marguerite"},
{"source": "Fantine", "target": "Valjean"},
{"source": "Mme.Thenardier", "target": "Fantine"},
{"source": "Mme.Thenardier", "target": "Valjean"},
{"source": "Thenardier", "target": "Mme.Thenardier"},
{"source": "Thenardier", "target": "Fantine"},
{"source": "Thenardier", "target": "Valjean"},
{"source": "Cosette", "target": "Mme.Thenardier"},
{"source": "Cosette", "target": "Valjean"},
{"source": "Cosette", "target": "Tholomyes"},
{"source": "Cosette", "target": "Thenardier"},
{"source": "Javert", "target": "Valjean"},
{"source": "Javert", "target": "Fantine"},
{"source": "Javert", "target": "Thenardier"},
{"source": "Javert", "target": "Mme.Thenardier"},
{"source": "Javert", "target": "Cosette"},
{"source": "Fauchelevent", "target": "Valjean"},
{"source": "Fauchelevent", "target": "Javert"},
{"source": "Bamatabois", "target": "Fantine"},
{"source": "Bamatabois", "target": "Javert"},
{"source": "Bamatabois", "target": "Valjean"},
{"source": "Perpetue", "target": "Fantine"},
{"source": "Simplice", "target": "Perpetue"},
{"source": "Simplice", "target": "Valjean"},
{"source": "Simplice", "target": "Fantine"},
{"source": "Simplice", "target": "Javert"},
{"source": "Scaufflaire", "target": "Valjean"},
{"source": "Woman1", "target": "Valjean"},
{"source": "Woman1", "target": "Javert"},
{"source": "Judge", "target": "Valjean"},
{"source": "Judge", "target": "Bamatabois"},
{"source": "Champmathieu", "target": "Valjean"},
{"source": "Champmathieu", "target": "Judge"},
{"source": "Champmathieu", "target": "Bamatabois"},
{"source": "Brevet", "target": "Judge"},
{"source": "Brevet", "target": "Champmathieu"},
{"source": "Brevet", "target": "Valjean"},
{"source": "Brevet", "target": "Bamatabois"},
{"source": "Chenildieu", "target": "Judge"},
{"source": "Chenildieu", "target": "Champmathieu"},
{"source": "Chenildieu", "target": "Brevet"},
{"source": "Chenildieu", "target": "Valjean"},
{"source": "Chenildieu", "target": "Bamatabois"},
{"source": "Cochepaille", "target": "Judge"},
{"source": "Cochepaille", "target": "Champmathieu"},
{"source": "Cochepaille", "target": "Brevet"},
{"source": "Cochepaille", "target": "Chenildieu"},
{"source": "Cochepaille", "target": "Valjean"},
{"source": "Cochepaille", "target": "Bamatabois"},
{"source": "Pontmercy", "target": "Thenardier"},
{"source": "Boulatruelle", "target": "Thenardier"},
{"source": "Eponine", "target": "Mme.Thenardier"},
{"source": "Eponine", "target": "Thenardier"},
{"source": "Anzelma", "target": "Eponine"},
{"source": "Anzelma", "target": "Thenardier"},
{"source": "Anzelma", "target": "Mme.Thenardier"},
{"source": "Woman2", "target": "Valjean"},
{"source": "Woman2", "target": "Cosette"},
{"source": "Woman2", "target": "Javert"},
{"source": "MotherInnocent", "target": "Fauchelevent"},
{"source": "MotherInnocent", "target": "Valjean"},
{"source": "Gribier", "target": "Fauchelevent"},
{"source": "Mme.Burgon", "target": "Jondrette"},
{"source": "Gavroche", "target": "Mme.Burgon"},
{"source": "Gavroche", "target": "Thenardier"},
{"source": "Gavroche", "target": "Javert"},
{"source": "Gavroche", "target": "Valjean"},
{"source": "Gillenormand", "target": "Cosette"},
{"source": "Gillenormand", "target": "Valjean"},
{"source": "Magnon", "target": "Gillenormand"},
{"source": "Magnon", "target": "Mme.Thenardier"},
{"source": "Mlle.Gillenormand", "target": "Gillenormand"},
{"source": "Mlle.Gillenormand", "target": "Cosette"},
{"source": "Mlle.Gillenormand", "target": "Valjean"},
{"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand"},
{"source": "Mme.Pontmercy", "target": "Pontmercy"},
{"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand"},
{"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand"},
{"source": "Lt.Gillenormand", "target": "Gillenormand"},
{"source": "Lt.Gillenormand", "target": "Cosette"},
{"source": "Marius", "target": "Mlle.Gillenormand"},
{"source": "Marius", "target": "Gillenormand"},
{"source": "Marius", "target": "Pontmercy"},
{"source": "Marius", "target": "Lt.Gillenormand"},
{"source": "Marius", "target": "Cosette"},
{"source": "Marius", "target": "Valjean"},
{"source": "Marius", "target": "Tholomyes"},
{"source": "Marius", "target": "Thenardier"},
{"source": "Marius", "target": "Eponine"},
{"source": "Marius", "target": "Gavroche"},
{"source": "BaronessT", "target": "Gillenormand"},
{"source": "BaronessT", "target": "Marius"},
{"source": "Mabeuf", "target": "Marius"},
{"source": "Mabeuf", "target": "Eponine"},
{"source": "Mabeuf", "target": "Gavroche"},
{"source": "Enjolras", "target": "Marius"},
{"source": "Enjolras", "target": "Gavroche"},
{"source": "Enjolras", "target": "Javert"},
{"source": "Enjolras", "target": "Mabeuf"},
{"source": "Enjolras", "target": "Valjean"},
{"source": "Combeferre", "target": "Enjolras"},
{"source": "Combeferre", "target": "Marius"},
{"source": "Combeferre", "target": "Gavroche"},
{"source": "Combeferre", "target": "Mabeuf"},
{"source": "Prouvaire", "target": "Gavroche"},
{"source": "Prouvaire", "target": "Enjolras"},
{"source": "Prouvaire", "target": "Combeferre"},
{"source": "Feuilly", "target": "Gavroche"},
{"source": "Feuilly", "target": "Enjolras"},
{"source": "Feuilly", "target": "Prouvaire"},
{"source": "Feuilly", "target": "Combeferre"},
{"source": "Feuilly", "target": "Mabeuf"},
{"source": "Feuilly", "target": "Marius"},
{"source": "Courfeyrac", "target": "Marius"},
{"source": "Courfeyrac", "target": "Enjolras"},
{"source": "Courfeyrac", "target": "Combeferre"},
{"source": "Courfeyrac", "target": "Gavroche"},
{"source": "Courfeyrac", "target": "Mabeuf"},
{"source": "Courfeyrac", "target": "Eponine"},
{"source": "Courfeyrac", "target": "Feuilly"},
{"source": "Courfeyrac", "target": "Prouvaire"},
{"source": "Bahorel", "target": "Combeferre"},
{"source": "Bahorel", "target": "Gavroche"},
{"source": "Bahorel", "target": "Courfeyrac"},
{"source": "Bahorel", "target": "Mabeuf"},
{"source": "Bahorel", "target": "Enjolras"},
{"source": "Bahorel", "target": "Feuilly"},
{"source": "Bahorel", "target": "Prouvaire"},
{"source": "Bahorel", "target": "Marius"},
{"source": "Bossuet", "target": "Marius"},
{"source": "Bossuet", "target": "Courfeyrac"},
{"source": "Bossuet", "target": "Gavroche"},
{"source": "Bossuet", "target": "Bahorel"},
{"source": "Bossuet", "target": "Enjolras"},
{"source": "Bossuet", "target": "Feuilly"},
{"source": "Bossuet", "target": "Prouvaire"},
{"source": "Bossuet", "target": "Combeferre"},
{"source": "Bossuet", "target": "Mabeuf"},
{"source": "Bossuet", "target": "Valjean"},
{"source": "Joly", "target": "Bahorel"},
{"source": "Joly", "target": "Bossuet"},
{"source": "Joly", "target": "Gavroche"},
{"source": "Joly", "target": "Courfeyrac"},
{"source": "Joly", "target": "Enjolras"},
{"source": "Joly", "target": "Feuilly"},
{"source": "Joly", "target": "Prouvaire"},
{"source": "Joly", "target": "Combeferre"},
{"source": "Joly", "target": "Mabeuf"},
{"source": "Joly", "target": "Marius"},
{"source": "Grantaire", "target": "Bossuet"},
{"source": "Grantaire", "target": "Enjolras"},
{"source": "Grantaire", "target": "Combeferre"},
{"source": "Grantaire", "target": "Courfeyrac"},
{"source": "Grantaire", "target": "Joly"},
{"source": "Grantaire", "target": "Gavroche"},
{"source": "Grantaire", "target": "Bahorel"},
{"source": "Grantaire", "target": "Feuilly"},
{"source": "Grantaire", "target": "Prouvaire"},
{"source": "MotherPlutarch", "target": "Mabeuf"},
{"source": "Gueulemer", "target": "Thenardier"},
{"source": "Gueulemer", "target": "Valjean"},
{"source": "Gueulemer", "target": "Mme.Thenardier"},
{"source": "Gueulemer", "target": "Javert"},
{"source": "Gueulemer", "target": "Gavroche"},
{"source": "Gueulemer", "target": "Eponine"},
{"source": "Babet", "target": "Thenardier"},
{"source": "Babet", "target": "Gueulemer"},
{"source": "Babet", "target": "Valjean"},
{"source": "Babet", "target": "Mme.Thenardier"},
{"source": "Babet", "target": "Javert"},
{"source": "Babet", "target": "Gavroche"},
{"source": "Babet", "target": "Eponine"},
{"source": "Claquesous", "target": "Thenardier"},
{"source": "Claquesous", "target": "Babet"},
{"source": "Claquesous", "target": "Gueulemer"},
{"source": "Claquesous", "target": "Valjean"},
{"source": "Claquesous", "target": "Mme.Thenardier"},
{"source": "Claquesous", "target": "Javert"},
{"source": "Claquesous", "target": "Eponine"},
{"source": "Claquesous", "target": "Enjolras"},
{"source": "Montparnasse", "target": "Javert"},
{"source": "Montparnasse", "target": "Babet"},
{"source": "Montparnasse", "target": "Gueulemer"},
{"source": "Montparnasse", "target": "Claquesous"},
{"source": "Montparnasse", "target": "Valjean"},
{"source": "Montparnasse", "target": "Gavroche"},
{"source": "Montparnasse", "target": "Eponine"},
{"source": "Montparnasse", "target": "Thenardier"},
{"source": "Toussaint", "target": "Cosette"},
{"source": "Toussaint", "target": "Javert"},
{"source": "Toussaint", "target": "Valjean"},
{"source": "Child1", "target": "Gavroche"},
{"source": "Child2", "target": "Gavroche"},
{"source": "Child2", "target": "Child1"},
{"source": "Brujon", "target": "Babet"},
{"source": "Brujon", "target": "Gueulemer"},
{"source": "Brujon", "target": "Thenardier"},
{"source": "Brujon", "target": "Gavroche"},
{"source": "Brujon", "target": "Eponine"},
{"source": "Brujon", "target": "Claquesous"},
{"source": "Brujon", "target": "Montparnasse"},
{"source": "Mme.Hucheloup", "target": "Bossuet"},
{"source": "Mme.Hucheloup", "target": "Joly"},
{"source": "Mme.Hucheloup", "target": "Grantaire"},
{"source": "Mme.Hucheloup", "target": "Bahorel"},
{"source": "Mme.Hucheloup", "target": "Courfeyrac"},
{"source": "Mme.Hucheloup", "target": "Gavroche"},
{"source": "Mme.Hucheloup", "target": "Enjolras"}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment