Layout

by Simon Raper

HTML

<div id="container">
    <div id="header">Sankey</div>
    <div id="infopanel">Info here</div>
    <div id="vis">
        <div id="sankey">
            <svg height="1000" width="1000">
                <circle cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="red" />
            </svg>
        </div>
        <div id="timeline">
            <svg height="100" width="1000">
                <rect x="50" y="20" width="50" height="50" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
            </svg>
        </div>
    </div>
</div>

CSS

#container {
    width: 500px;
    height: 500px;
}
#header {
    background-color:#eeeeee;
    width: 500px;
    text-align:center;
    padding:5px;
}
#infopanel {
    background-color:#eeeeee;
    width:90px;
    height: 100%;
    float:left;
    padding:5px;
}
#vis {
    float: left;
    width: 400px;
    height:100%;
    overflow-x: scroll;
}
#sankey {
    float: left;
    width: 1000px;
    height:80%;
    overflow-y: scroll;
    overflow-x: hidden;
}
#timeline {
    float: left;
    width: 1000px;
    height:20%;
    overflow: hidden;
}