The Germanic Language Tree

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/non-cartesian-zoom.js"></script>
<script src="https://code.highcharts.com/modules/mouse-wheel-zoom.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Demonstrates a simple organization chart with nodes in a hanging layout.
    </p>
</figure>

CSS

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

.highcharts-figure {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

#container h4 {
    text-transform: none;
    font-size: 14px;
    font-weight: normal;
}

#container p {
    font-size: 13px;
    line-height: 16px;
}

@media screen and (max-width: 600px) {
    #container h4 {
        font-size: 2.3vw;
        line-height: 3vw;
    }

    #container p {
        font-size: 2.3vw;
        line-height: 3vw;
    }
}

.highcharts-description {
    margin: 0.3rem 10px;
}

JavaScript

const colors = Highcharts.getOptions().colors;

const leafs = [
    'Bastarnisch', 'Brabantian', 'Burgundian', 'Crimean Gothic', 'Danish',
    'Dutch', 'English', 'Faroese', 'Flemish', 'Frisian', 'Gepidisch', 'Gothic',
    'Herulisch', '(High) German', 'Hollandic', 'Icelandic', 'Limburgish',
    'Low German', 'Norwegian', 'Rhinelandic', 'Rugisch', 'Skirisch', 'Swedish',
    'Vandalic', 'Yiddish'
].map(function (leaf) {
    return {
        id: leaf,
        color: colors[0]
    };
});

// Choose hanging nodes:
const hangingNodes = [
    {
        id: 'North Germanic',
        layout: 'hanging',
        // Push node a bit to the left.
        offsetHorizontal: -15
    },
    {
        id: 'West Germanic',
        layout: 'hanging'
    },
    {
        id: 'East Germanic',
        layout: 'hanging'
    }
];

const nodes = hangingNodes.concat(leafs);

Highcharts.chart('container', {

    chart: {
        height: 1200,
        inverted: true,
        zooming: {
            type: 'xy'
        }
    },

    title: {
        text: 'The Germanic Language Tree'
    },

    accessibility: {
        point: {
            descriptionFormat: '{add index 1}. {toNode.id}' +
                'comes from {fromNode.id}'
        }
    },

    tooltip: {
        outside: true
    },

    series: [{
        name: 'Germanic language tree',
        type: 'organization',
        keys: ['from', 'to'],
        nodeWidth: 40,
        nodePadding: 20,
        colorByPoint: false,
        hangingIndentTranslation: 'cumulative',
        // Crimp a bit to avoid nodes overlapping lines
        hangingIndent: 10,

        levels: [{
            level: 0,
            color: '#dedede'
        }, {
            level: 1,
            color: '#dedede'
        }, {
            level: 2,
            color: colors[3]
        }, {
            level: 3,
            color: colors[2]
        }, {
            level: 4,
        ...