Reusable Circular Network with Editable Data Table

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="./circular_network.js"></script>
    <script type="text/javascript" src="./basic-editable-table.js"></script>
    <style>
        .reset-button{
            width: 50px;
            height: 25px;
            border: 1px solid black;
            background-color: white;
            cursor: pointer;
            text-align: center;
            position: absolute;
            top: 260px;
        }
        .reset-button:hover{
            background-color: #eee;
        }
        .reset-button:active{
            background-color: #ccc;
        }
        .no-select{
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        table{
            border-collapse: collapse;
        }
        .table{
            position: absolute;
            top: 100px;
        }
        .container{
            position: absolute;
            top: 0;
            left: 250px;
        }
        td, th{
            border: 1px solid black;
            background-color: white;
            width: 70px;
            padding: 5px;
            text-align: left;
        }
        th.header{
            cursor: default;
        }
        .tooltip{
            background-color: aliceblue;
            pointer-events: none;
            margin-left: 10px;
            padding: 10px;
            opacity: 0.8;
        }
        svg text.label{
            fill: black;
            font: 10px Verdana;
        }
        svg path.arc{
            stroke: grey;
        }
        svg path.link{
            stroke: grey;
            opacity: 0.9;
        }
        .highlighted{
            opacity: 1 !important;
        }
    </style>
</head>
<body>

<div class="reset-button no-select">Reset</div>

// Data
    var data = [
        ['page0', 'page1', 200],
        ['page1', 'page0', 50],
        ['page2', 'page0', 100],
        ['page0', 'page2', 100]
    ];
    var columnNames = ['Start', 'End', 'Weight']

// Charts
    var table = Table()
        .on('edit', function(d){ update(d) });

var circularNetwork = CircularNetwork()
        .width(500)
        .height(500)
        .margins({top:50, right:50, bottom:50, left:50})
        .enableTooltips(true)
        .labelOffset(5);

// Bind charts to DOM
    function update(_data){
        d3.select('.container')
            .datum(_data)
            .call(circularNetwork);
    }

function updateTable(_data){
        d3.select('.table')
            .datum(_data)
            .call(table);
    }

update(data);
    updateTable([data, columnNames])

// Update charts on reset
    d3.select('.reset-button')
        .on("mouseup", function(d, i){
            update(data);
            updateTable([data, columnNames])
        });

</script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js