Skip to content

Instantly share code, notes, and snippets.

@therimalaya

therimalaya/index.html

Created February 27, 2020 20:46
Show Gist options
  • Save therimalaya/fa9ab64a263b242fca8de3e53ac09d74 to your computer and use it in GitHub Desktop.
Save therimalaya/fa9ab64a263b242fca8de3e53ac09d74 to your computer and use it in GitHub Desktop.
Download ZIP
Les Misérables Co-occurrence Matrix Plot with D3 V5
Raw
index.html
<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<title>Les Misérables Co-occurrence</title>
<link rel="stylesheet" href="styles.css">
<style>
.background {
fill: #eee;
}
line {
stroke: #fff;
}
text.active {
fill: red;
}
</style>
<!-- <script src="d3-v2-min.js" charset="utf-8"></script> -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
<header>
<aside>April 10, 2012</aside>
<a href="../" rel="author">Mike Bostock</a>
</header>
<h1><i>Les Misérables</i> Co-occurrence</h1>
<aside style="margin-top:80px;">
<p>Order: <select id="order">
<option value="name">by Name</option>
<option value="count">by Frequency</option>
<option value="group">by Cluster</option>
</select>
</p>
<p>This matrix diagram visualizes character co-occurrences in Victor Hugo’s <i><a href="https://en.wikipedia.org/wiki/Les_Misérables">Les Misérables</a></i></p>.
<p>Each colored cell represents two characters that appeared in the same chapter; darker cells indicate characters that co-occurred more frequently.</p>
<p>Use the drop-down menu to reorder the matrix and explore the data.</p>
<p>Built with <a href="https://d3js.org/">d3.js</a>.</p>
</aside>
<script>
var margin = {top: 80, right: 0, bottom: 10, left: 80},
width = 720,
height = 720;
var x = d3.scaleBand().range([0, width]),
z = d3.scaleLinear().domain([0, 4]).clamp(true),
c = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", -margin.left + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("miserables.json").then(function(miserables) {
var matrix = [],
nodes = miserables.nodes,
n = nodes.length;
// Compute index per node.
nodes.forEach(function(node, i) {
node.index = i;
node.count = 0;
matrix[i] = d3.range(n).map(function(j) { return {x: j, y: i, z: 0}; });
});
// Convert links to matrix; count character occurrences.
miserables.links.forEach(function(link) {
matrix[link.source][link.target].z += link.value;
matrix[link.target][link.source].z += link.value;
matrix[link.source][link.source].z += link.value;
matrix[link.target][link.target].z += link.value;
nodes[link.source].count += link.value;
nodes[link.target].count += link.value;
});
// Precompute the orders.
var orders = {
name: d3.range(n).sort(function(a, b) { return d3.ascending(nodes[a].name, nodes[b].name); }),
count: d3.range(n).sort(function(a, b) { return nodes[b].count - nodes[a].count; }),
group: d3.range(n).sort(function(a, b) { return nodes[b].group - nodes[a].group; })
};
// The default sort order.
x.domain(orders.name);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height);
var row = svg.selectAll(".row")
.data(matrix)
.enter().append("g")
.attr("class", "row")
.attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; })
.each(row);
row.append("line")
.attr("x2", width);
row.append("text")
.attr("x", -6)
.attr("y", x.bandwidth() / 2)
.attr("dy", ".32em")
.attr("text-anchor", "end")
.text(function(d, i) { return nodes[i].name; });
var column = svg.selectAll(".column")
.data(matrix)
.enter().append("g")
.attr("class", "column")
.attr("transform", function(d, i) { return "translate(" + x(i) + ")rotate(-90)"; });
column.append("line")
.attr("x1", -width);
column.append("text")
.attr("x", 6)
.attr("y", x.bandwidth() / 2)
.attr("dy", ".32em")
.attr("text-anchor", "start")
.text(function(d, i) { return nodes[i].name; });
function row(row) {
var cell = d3.select(this).selectAll(".cell")
.data(row.filter(function(d) { return d.z; }))
.enter().append("rect")
.attr("class", "cell")
.attr("x", function(d) { return x(d.x); })
.attr("width", x.bandwidth())
.attr("height", x.bandwidth())
.style("fill-opacity", function(d) { return z(d.z); })
.style("fill", function(d) { return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group) : null; })
.on("mouseover", mouseover)
.on("mouseout", mouseout);
}
function mouseover(p) {
d3.selectAll(".row text").classed("active", function(d, i) { return i == p.y; });
d3.selectAll(".column text").classed("active", function(d, i) { return i == p.x; });
}
function mouseout() {
d3.selectAll("text").classed("active", false);
}
d3.select("#order").on("change", function() {
clearTimeout(timeout);
order(this.value);
});
function order(value) {
x.domain(orders[value]);
var t = svg.transition().duration(2500);
t.selectAll(".row")
.delay(function(d, i) { return x(i) * 4; })
.attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; })
.selectAll(".cell")
.delay(function(d) { return x(d.x) * 4; })
.attr("x", function(d) { return x(d.x); });
t.selectAll(".column")
.delay(function(d, i) { return x(i) * 4; })
.attr("transform", function(d, i) { return "translate(" + x(i) + ")rotate(-90)"; });
}
var timeout = setTimeout(function() {
order("group");
d3.select("#order").property("selectedIndex", 2).node().focus();
}, 5000);
});
</script>
<p class="attribution">Source: <a href="http://www-cs-staff.stanford.edu/~uno/sgb.html">The Stanford GraphBase</a>.</p>
<p>A network can be represented by an <i><a href="https://en.wikipedia.org/wiki/Adjacency_matrix">adjacency matrix</a></i>, where each cell <i>ij</i> represents an edge from vertex <i>i</i> to vertex <i>j</i>. Here, vertices represent characters in a book, while edges represent co-occurrence in a chapter.</p>
<p>Given this two-dimensional representation of a graph, a natural visualization is to show the matrix! However, the effectiveness of a matrix diagram is heavily dependent on the order of rows and columns: if related nodes are placed closed to each other, it is easier to identify clusters and bridges.</p>
<p>This example lets you try different orderings via the drop-down menu. This type of diagram can be extended with manual reordering of rows and columns, and expanding or collapsing of clusters, to allow deeper exploration. <a href="https://en.wikipedia.org/wiki/Jacques_Bertin">Jacques Bertin</a> (or more specifically, his fleet of assistants) did this by hand with paper strips.</p>
<p>While path-following is harder in a matrix view than in a <a href="https://mbostock.github.com/d3/ex/force.html">node-link diagram</a>, matrices have other advantages. As networks get large and highly connected, node-link diagrams often devolve into giant hairballs of line crossings. Line crossings are impossible with matrix views. Matrix cells can also be encoded to show additional data; here color depicts clusters computed by a community-detection algorithm.</p>
<p>Want more? See this analysis of <a href="../shuffle/compare.html">shuffling algorithms</a> using matrix diagrams.</p>
<footer>
<aside>January 12, 2012</aside>
<a href="../" rel="author">Mike Bostock</a>
</footer>
</body>
</html>
Raw
miserables.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": 0 },
{ "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": 0, "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": 0 },
{ "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": 0 },
{ "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": 0 },
{ "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": 0 },
{ "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
styles.css
/* Copyright 2013 Michael Bostock. All rights reserved. Do not copy. */
@import url(https://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b);
html {
min-width: 1040px;
}
.ocks-org body {
background: #fcfcfa;
color: #333;
font-family: "PT Serif", serif;
margin: 1em auto 4em auto;
position: relative;
width: 960px;
}
.ocks-org header,
.ocks-org footer,
.ocks-org aside,
.ocks-org h1,
.ocks-org h2,
.ocks-org h3,
.ocks-org h4 {
font-family: "PT Sans", sans-serif;
}
.ocks-org h1,
.ocks-org h2,
.ocks-org h3,
.ocks-org h4 {
color: #000;
}
.ocks-org header,
.ocks-org footer {
color: #636363;
}
h1 {
font-size: 64px;
font-weight: 300;
letter-spacing: -2px;
margin: .3em 0 .1em 0;
}
h2 {
margin-top: 2em;
}
h1, h2 {
text-rendering: optimizeLegibility;
}
h2 a[name],
h2 a[id] {
color: #ccc;
right: 100%;
padding: 0 .3em;
position: absolute;
}
header,
footer {
font-size: small;
}
.ocks-org header aside,
.ocks-org footer aside {
float: left;
margin-right: .5em;
}
.ocks-org header aside:after,
.ocks-org footer aside:after {
padding-left: .5em;
content: "/";
}
footer {
margin-top: 8em;
}
h1 ~ aside {
font-size: small;
right: 0;
position: absolute;
width: 180px;
}
.attribution {
font-size: small;
margin-bottom: 2em;
}
body > p, li > p {
line-height: 1.5em;
}
body > p {
width: 720px;
}
body > blockquote {
width: 640px;
}
blockquote q {
display: block;
font-style: oblique;
}
ul {
padding: 0;
}
li {
width: 690px;
margin-left: 30px;
}
a {
color: steelblue;
}
a:not(:hover) {
text-decoration: none;
}
pre, code, textarea {
font-family: "Menlo", monospace;
}
code {
line-height: 1em;
}
textarea {
font-size: 100%;
}
body > pre {
border-left: solid 2px #ccc;
padding-left: 18px;
margin: 2em 0 2em -20px;
}
.html .value,
.javascript .string,
.javascript .regexp {
color: #756bb1;
}
.html .tag,
.css .tag,
.javascript .keyword {
color: #3182bd;
}
.comment {
color: #636363;
}
.html .doctype,
.javascript .number {
color: #31a354;
}
.html .attribute,
.css .attribute,
.javascript .class,
.javascript .special {
color: #e6550d;
}
svg {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
sup, sub {
line-height: 0;
}
q:before {
content: "“";
}
q:after {
content: "”";
}
blockquote q {
line-height: 1.5em;
display: inline;
}
blockquote q:before,
blockquote q:after {
content: "";
}
@therimalaya
Copy link
Author

Link: Output

@MustaphaU
Copy link

Oldman -> Myriel is missing in your edges data. i.e. { "source": 9, "target": 0, "value": 2 },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment