D3 Examples - FY 2018 ILL articles sankey

xxxxxxxxxx
 
<html>
<head>
<style>
    p {
        font-family: arial;
        font-size: 12px;
        line-height: 1.5;
        padding-right: 15px;
        padding-left: 15px;
    }
</style>
<br/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages': ['sankey']});
    google.charts.setOnLoadCallback(drawChart);
    dataArticles = [
        ['Undergraduate', 'Bouve College of Health Sciences', 405, 'gold', '<p>Undergraduate > BCHS<br/>Articles Supplied: 405 (14.1%)<br/>Population: 150<br/>Per Capita: 2.7</p>'],
        ['Undergraduate', 'College of Arts, Media, and Design', 195, 'gold', '<p>Undergraduate > CAMD<br/>Articles Supplied: 195 (6.8%)<br/>Population: 107<br/>Per Capita: 1.8</p>'],
        ['Undergraduate', 'College of Computer and Information Science', 45, 'gold', '<p>Undergraduate > CCIS<br/>Articles Supplied: 45 (1.6%)<br/>Population: 32<br/>Per Capita: 1.4</p>'],
        ['Undergraduate', 'College of Engineering', 389, 'gold', '<p>Undergraduate > COE<br/>Articles Supplied: 389 (13.5%)<br/>Population: 174<br/>Per Capita: 2.2</p>'],
        ['Undergraduate', 'College of Science', 893, 'gold', '<p>Undergraduate > COS<br/>Articles Supplied: 893 (31.0%)<br/>Population: 296<br/>Per Capita: 3.0</p>'],
        ['Undergraduate', 'College of Professional Studies', 183, 'gold', '<p>Undergraduate > CPS<br/>Articles Supplied: 183 (6.4%)<br/>Population: 96<br/>Per Capita: 1.9</p>'],
        ['Undergraduate', 'College of Social Sciences and Humanities', 486, 'gold', '<p>Undergraduate > CSSH<br/>Articles Supplied: 486 (16.9%)<br/>Population: 225<br/>Per Capita: 2.2</p>'],
        ['Undergraduate', "D'Amore-McKim School of Business", 283, 'gold', '<p>Undergraduate > DMSB<br/>Articles Supplied: 283 (9.8%)<br/>Population: 123<br/>Per Capita: 2.3</p>'],
        ['Graduate', 'Bouve College of Health Sciences', 1199, 'goldenrod', '<p>Graduate > BCHS<br/>Articles Supplied: 1199 (21.9%)<br/>Population: 326<br/>Per Capita: 3.7</p>'],
        ['Graduate', 'College of Arts, Media, and Design', 95, 'goldenrod', '<p>Graduate > CAMD<br/>Articles Supplied: 95 (1.7%)<br/>Population: 38<br/>Per Capita: 2.5</p>'],
        ['Graduate', 'College of Computer and Information Science', 101, 'goldenrod', '<p>Graduate > CCIS<br/>Articles Supplied: 101 (1.8%)<br/>Population: 28<br/>Per Capita: 3.6</p>'],
        ['Graduate', 'College of Engineering', 1382, 'goldenrod', '<p>Graduate > COE<br/>Articles Supplied: 1382 (25.3%)<br/>Population: 248<br/>Per Capita: 5.6</p>'],
        ['Graduate', 'College of Science', 533, 'goldenrod', '<p>Graduate > COS<br/>Articles Supplied: 533 (9.7%)<br/>Population: 142<br/>Per Capita: 3.8</p>'],
        ['Graduate', 'College of Professional Studies', 1511, 'goldenrod', '<p>Graduate > CPS<br/>Articles Supplied: 1511 (27.6)%<br/>Population: 348<br/>Per Capita: 4.3</p>'],
        ['Graduate', 'College of Social Sciences and Humanities', 526, 'goldenrod', '<p>Graduate > CSSH<br/>Articles Supplied: 526 (9.6%)<br/>Population: 132<br/>Per Capita: 4.0</p>'],
        ['Graduate', "D'Amore-McKim School of Business", 79, 'goldenrod', '<p>Graduate > DMSB<br/>Articles Supplied: 79 (1.4%)<br/>Population: 30<br/>Per Capita: 2.6</p>'],
        ['Graduate', 'School of Law', 44, 'goldenrod', '<p>Graduate > Law<br/>Articles Supplied: 44 (0.8%)<br/>Population: 20<br/>Per Capita: 2.2</p>'],
        ['Distance Graduate', 'College of Professional Studies', 1621, 'darkorange', '<p>Distance Graduate > CPS<br/>Articles Supplied: 1621<br/>Population: 294<br/>Per Capita: 5.5</p>']
    ];
    var fromTotals = {};
    for (var i = 0; i < dataArticles.length; i++) {
        var item = dataArticles[i], key = item[0];
        if (fromTotals.hasOwnProperty(key)) {
            fromTotals[key] += item[2];
        }
        else {
            fromTotals[key] = item[2];
        }
    }
    console.log(fromTotals);
    var toTotals = {};
    for (var i = 0; i < dataArticles.length; i++) {
        var item = dataArticles[i], key = item[1];
        if (toTotals.hasOwnProperty(key)) {
            toTotals[key] += item[2];
        }
        else {
            toTotals[key] = item[2];
        }
    }
    console.log(toTotals);
    dataArticles.forEach(function(d) {
        d[0] = d[0] + " (" + fromTotals[d[0]] + ")";
        d[1] = "(" + toTotals[d[1]] + ") " + d[1];
    })
    function drawChart() {
        var data = new google.visualization.DataTable();
            data.addColumn('string', 'From');
            data.addColumn('string', 'To');
            data.addColumn('number', 'Articles Supplied');
            data.addColumn({type: 'string', role: 'style'});
            data.addColumn({type: 'string', role: 'tooltip', p: {html:true}});
            data.addRows(dataArticles);
        var options = {
            height: 600,
            width: 800,
            sankey: {iterations: 0, node: {label: {fontSize: 12}}},
            tooltip: {isHtml: true}
        };
        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
        chart.draw(data, options);
    }
</script>
</head>
<body>
<div id="sankey_basic" style="width: 800px; margin-left: auto; margin-right: auto;"></div>
<p style="font-family: arial; font-size: 12; text-align: center;">
    ILL Articles Supplied to Northeastern University Students, Jul 2017 - Mar 2018
</p>
</body>
</html>
    