South Korea domestic flight routes (relationship categorical data)
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 females
const maleColor = '#1D3557'; // Blue for males
Highcharts.chart('container', {
chart: {
type: 'networkgraph',
marginTop: 80
},
title: {
text: 'Elizabeth I Network by Gender'
},
subtitle: {
text: 'Red nodes represent females, blue nodes represent males'
},
tooltip: {
formatter: function () {
return '<b>' + this.key + '</b>: ' +
(this.color === femaleColor ? 'Female' : 'Male') +
' in Elizabeth I\'s network';
}
},
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'],
['Anne Cooke', 'Elizabeth Cooke'],
['Elizabeth Cooke', 'Elizabeth'],
['Elizabeth Cavendish', 'Elizabeth'],
['Elizabeth Cavendish', 'Arbella Stuart'],
['Mary, Queen of Scots', 'Elizabeth'],
['Grace OMalley', 'Elizabeth'],
['Margaret Bryan', 'Elizabeth'],
['Kat Ashley', 'Elizabeth'],
['Catherine Parr', 'Elizabeth'],
['Catherine Parr', 'Thomas Seymour'],
['Thomas Seymour', 'Elizabeth'],
['Lettice Knollys', 'Elizabeth'],
['Elizabeth Throckmorton', 'Elizabeth'],
['Catherine Howard', 'Elizabeth'],
['Catherine Carey', 'Elizabeth'],
...