Semantic substrate

A semantic substrate of Les Miserables characters.

Semantic substrates can be seen as a scatterplot layout for networks, or a 2D arc diagram. Here, we see that there is a linear relationship between the number of characters one interacts with and the number of chapters a character appears in. This makes it easy to see relationships between node attributes and links between nodes. However, it can be difficult to understand the overall network structure.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}

.label {
  fill: #999;
  font-size: 22px;
  font-weight: bold;
  text-anchor: end;
}

.links line {
  fill: none;
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  fill: #d62333;
  stroke: #fff;
  stroke-width: 1px;
}

</style>
<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var nodeRadius = 4;

var linkWidth = d3.scaleLinear().range([1.5, 2 * nodeRadius]);

var margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 40
};

var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom().scale(x);
var yAxis = d3.axisLeft().scale(y);

var svg = d3.select('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

d3.json('jean.json', function (error, graph) {
  if (error) throw error;

var idToNode = {};

graph.nodes.forEach(function (n) {
    n.degree = 0;
    idToNode[n.id] = n;
  });

graph.links.forEach(function (e) {
    e.source = idToNode[e.source];
    e.target = idToNode[e.target];
    e.source.degree++;
    e.target.degree++;
  });

x.domain([0, d3.max(graph.nodes, function (d) { return d.chapters.length; })]);
  y.domain([0, d3.max(graph.nodes, function (d) { return d.degree; })]);

linkWidth.domain(d3.extent(graph.links, function (d) { return d.chapters.length; }));

svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis)
    .append('text')
    .attr('class', 'label')
    .attr('x', width)
    .attr('y', -6)
    .text('Number of appearances');

svg.append('g')
    .attr('class', 'y axis')
    .call(yAxis)
    .append('text')
    .attr('class', 'label')
    .attr('y', 6)
    .attr('dy', '.71em')
    .attr('transform', 'rotate(-90)')
    .text('Number of interactions');

svg.selectAll('.tick line, .axis path')
    .attr('stroke', '#999');

svg.selectAll('.tick text')
    .attr('fill', '#777');

node.append('title').text(function (d) { return d.name; });
});

</script>

https://d3js.org/d3.v4.min.js