index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    
    <!-- style specifications for button and div elements -->
    <style type="text/css">
        button {
            width: 100px;
            height:20px;
            display: flex;
            justify-content: center;
            position: absolute;
            left: 455px;
            top: 575px;
            transition-duration: 0.4s;
            border-radius:3px;
            border:1px solid #909090;
        }

        .button:hover {
            background-color: #CACACA;
        }

        button.resetZoom {
            margin-left: 110px;
        }

        button.save {
            margin-left: 220px;
        }

        button.abstract {
            width:146px;
            position:absolute;
            top: 181px; 
            left: 1114px;
            border-radius:0;
            border:1px solid #909090;
        }

        button.overview {
            width:147px;
            position:absolute;
            display:inline-block;
            top: 181px; 
            left: 968px;
            border-radius:0;
            border:1px solid #909090;
        }

        div.legendbox {
            width:270px;
            height:170px; 
            padding: 10px;
            /*border: 1px solid #999;*/
            position: absolute; 
            top: 10px; 
            left: 968px;
            display: inline-block;
            margin: 0;
        }

        div.textbox {
            width:270px;
            min-height:200px; 
            max-height:370px;
            padding: 10px;
            border: 1px solid #999;
            position: absolute;
            top: 200px; 
            left: 968px;
            display: inline-block;
            overflow-y: scroll;
            margin: 0;
        }
    </style>
</head>

<body>
    <!-- graph -->
    <svg class="graph" width="960" height="560"></svg>

    <!-- legend -->
    <div class="legendbox"> <svg class="legendsvg"></svg></div>

    <!-- textbox -->
    <div class="textbox" id = "textbox">Click node</div>
    <button id="overview" class="overview" onclick='display_abstract(false), highlight_button("overview")'>Overview</button>
    <button id="abstract" class="abstract" onclick='display_abstract(true), highlight_button("abstract")'>Abstract</button>

    <!-- buttons -->
    <button onclick="location.reload()">Reload Graph</button>
    <button class="resetZoom" onclick="reset_view()">Reset View</button>
    <button class="save" onclick="save_svg()">Save</button>
 
    <!-- D3 (version 5) -->
    <script src="https://d3js.org/d3.v5.min.js"></script>

    <!-- scripts to save svg element as png -->
    <script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
	<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
    
    <!-- javascript for force-directed graph -->
    <script type="text/javascript" id="cn" src="cn.js"></script>
</body>
</html>