Old school D3 from simpler times

All examples By author By category About

lorenzopub

Full window Github gist

Sankey

Sankey Diagram

This is the default Sankey diagram that comes with dex.js

Options

forked from PatMartin's block: Sankey

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">

<meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/patmartin/dexjs/dist/dex.min.js"></script>
    <style>
        html, body, #PresidentSankey {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }

</style>
</head>
<div id="PresidentSankey"></div>
<body>
<script>
    d3.csv("presidents.csv", function (error, data) {
        var presidents = {};
        presidents.header = Object.keys(data[0]);
        presidents.data = data.slice(1).map(function (row) {
            return presidents.header.map(function (h) {
                return row[h];
            });
        });

var presidentSankey = dex.charts.d3.Sankey({
            'parent': '#PresidentSankey',
            'csv': dex.csv.columnSlice(presidents, [1, 2, 3])
        });
        presidentSankey.render();
    });
</script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
​
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/patmartin/dexjs/dist/dex.min.js"></script>
    <style>
        html, body, #PresidentSankey {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }
​
    </style>
</head>
<div id="PresidentSankey"></div>
<body>
<script>
    d3.csv("presidents.csv", function (error, data) {
        var presidents = {};
        presidents.header = Object.keys(data[0]);
        presidents.data = data.slice(1).map(function (row) {
            return presidents.header.map(function (h) {
                return row[h];
            });
        });
​
        var presidentSankey = dex.charts.d3.Sankey({
            'parent': '#PresidentSankey',
            'csv': dex.csv.columnSlice(presidents, [1, 2, 3])
        });
        presidentSankey.render();
    });
</script>
</body>
​
    

Updated missing url https://cdn.rawgit.com/PatMartin/dexjs/master/dist/dex.min.js to https://cdn.jsdelivr.net/gh/patmartin/dexjs/dist/dex.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://cdn.rawgit.com/PatMartin/dexjs/master/dist/dex.min.js