Anne Boleyn Network
by djakacki
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
CSS
#container {
min-width: 320px;
max-width: 800px;
margin: 0 auto;
height: 500px;
}
JavaScript
/* Network graph showing Elizabeth I's connections with gender distinction */
const femaleColor = '#E63946'; // Red for women
const maleColor = '#c4c7cc'; // Grey for men
Highcharts.chart('container', {
chart: {
type: 'networkgraph',
marginTop: 80
},
title: {
text: 'Anne Boleyn Network'
},
subtitle: {
text: 'Red nodes represent women, grey nodes represent men'
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
layoutAlgorithm: {
enableSimulation: true,
integration: 'verlet',
linkLength: 100,
friction: 0.9
}
}
},
series: [{
marker: {
radius: 13
},
dataLabels: {
enabled: true,
linkFormat: '',
allowOverlap: true,
style: {
textOutline: false
}
},
data: [
['Anne Cooke', 'Elizabeth'],
['Elizabeth Cooke', 'Elizabeth'],
['Elizabeth Cavendish', 'Elizabeth'],
['Mary, Queen of Scots', 'Elizabeth'],
['Grace OMalley', 'Elizabeth'],
['Margaret Bryan', 'Elizabeth'],
['Kat Ashley', 'Elizabeth'],
['Catherine Parr', 'Elizabeth'],
['Lettice Knollys', 'Elizabeth'],
['Elizabeth Throckmorton', 'Elizabeth'],
['Catherine Howard', 'Elizabeth'],
['Catherine Carey', 'Elizabeth'],
['Mary I (Tudor)', 'Elizabeth'],
['Jane Grey', 'Elizabeth'],
['Frances Howard', 'Elizabeth'],
['Margaret Douglas', 'Elizabeth'],
['Arbella Stuart', 'Elizabeth'],
['Mary Shelton', 'Elizabeth'],
['Amy Robsart', 'Elizabeth'],
['Mildred Cooke', 'Elizabeth'],
['Anne Cecil', 'Elizabeth'],
['Elizabeth de Vere', 'Elizabeth'],
...