Parallel coordinates

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/parallel-coordinates.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Basic line series can be used with the <code>parallel-coordinates</code> module
        to visualize a neural network.
    </p>
</figure>

CSS

#container {
    height: 400px;
    max-width: 580px;
    margin: 0 auto;
}

JavaScript

// Define an array of layers, where each layer is an object
// with the number of nodes and the activation function
const layers = [{
    nodes: 1,
    activation: 'tanh',
    label: 'Input Layer (#0)'
}, {
    nodes: 6,
    activation: 'tanh',
    label: 'Hidden Layer #1 (tanh)'
}, {
    nodes: 6,
    activation: 'ReLU',
    label: 'Hidden Layer #2 (ReLU)'
}, {
    nodes: 6,
    activation: 'ReLU',
    label: 'Hidden Layer #3 (ReLU)'
}, {
    nodes: 2,
    activation: 'sigmoid',
    label: 'Output Layer (sigmoid)'
}];

// Generates series for a neural network based on the defined layers.
function generateData() {
    // If there are no layers defined, we have no neural network to visualize
    if (layers.length === 0) {
        return [];
    }

    const data = [];

    // Recursive function to generate all possible connections of nodes
    // for each layer in then network
    function generate(currentIndices) {
        // Base case: If the current indices length matches the number of
        // layers, store the combination in the data array.
        if (currentIndices.length === layers.length) {
            data.push({
                data: [...currentIndices]
            });
            return;
        }

        // Get the current dimension index based on the length of
        // current indices.
        const dimensionIndex = currentIndices.length;

        // Iterate through all nodes in the current layer (dimensionIndex).
        for (let i = 0; i < layers[dimensionIndex].nodes; i++) {
            // Recursively call generate with the new node index added to
            // the current indices.
            generate([...currentIndices, i]);
        }
    }

    generate([]);
    return data;
}

Highcharts.chart('container', {
    chart: {
        type: 'line',
        parallelCoordinates: true,
        inverted: true
    },
    title: {
        text: 'Visualizing a neural network with Highcharts'
    },
    subtitle: {
        text: 'You can use the...