One of the cooler layouts provided by D3 (in the d3-force package) is force simulation. This is actually really useful, as it allows us to position elements on the screen using simulated physical properties. This can be really useful when the positioning of an element doesn't have anything to do with its data, such as in a network diagram, where the linkages between items is more important than when they are on screen.
We will use the network dataset from the last example to create a network of connections in the show. Go to main.js, comment out the last example, and add this line:
westerosChart.init('force', 'data/stormofswords.csv');Go back to chapter7/index and add a new function enclosure:
westerosChart.force = function Force(_data) {
const nodes = uniques(
_data.map(d => d.Target)
.concat(_data.map(d => d.Source)),
d => d)
.map(d =>
({ id: d, total: _data.filter(e => e.Source === d).length }));
fixateColors...