Students of HUMN 270

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/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">
        This force directed graph shows an example of a network graph, where
        the nodes represent languages and the language families they belong to.
        The nodes can be dragged around and will be repositioned dynamically.
        Network graphs are typically used to show relations in data. In this
        case, we are showing a hierarchical structure.
    </p>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

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

JavaScript

Highcharts.addEvent(
    Highcharts.Series,
    'afterSetOptions',
    function (e) {
        const colors = Highcharts.getOptions().colors,
            nodes = {};
        
        let i = 0;
        let activityConnections = {};

        if (
            this instanceof Highcharts.Series.types.networkgraph &&
            e.options.id === 'student-network'
        ) {
            e.options.data.forEach(function (link) {
                let student = link[0];
                let activity = link[1];

                // Ensure student nodes have the same color
                if (!nodes[student]) {
                    nodes[student] = {
                        id: student,
                        marker: {
                            radius: 15
                        },
                        color: '#3498db' // Set all student nodes to the same color
                    };
                }

                // Ensure activity nodes have different colors and scale size by connection count
                if (!nodes[activity]) {
                    nodes[activity] = {
                        id: activity,
                        marker: {
                            radius: 15
                        },
                        color: colors[i % colors.length]
                    };
                    i++;
                }

                if (!activityConnections[activity]) {
                    activityConnections[activity] = 0;
                }
                activityConnections[activity]++;
            });

            // Adjust activity node sizes based on connection count
            Object.keys(activityConnections).forEach(activity => {
                nodes[activity].marker.radius = 10 + activityConnections[activity] * 1.5;
            });

            e.options.nodes = Object.keys(nodes).map(function (id) {
                return nodes[id];
            });
        }
    }
);

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph',
  ...