ustimeuse.github.io/onedayvis.html at master · ustimeuse/ustimeuse.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<head>
    <title>Time Use Simulation</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/sim_style.css" type="text/css" media="screen"/>
</head>

<meta charset="utf-8">
<body>

    <div id="current_time">4:00am</div>

    <div class="center">
        <div id = "controls" style="float: left">
            <input type="image" src="img/reset.png" name="reset" class="button" id = "reset" />
            <input type="image" src="img/play.png" name="play" class="button" style="display: initial" id = "play" />
            <input type="image" src="img/pause.png" name="pause" class="button" style="display: none" id = "pause" />
        </div>
        <div id="speed">
            <div class="togglebutton slow current" data-val="slow">Slow</div>
            <div class="togglebutton fast" data-val="fast">Fast</div>
            <div class="clr"></div>
        </div>
    </div>

    <div id="chart" class="col-md-7"></div>

    <div class="col-md-5">
        <div id="bar-chart" style="float: left"></div>
        <div id="ranking">
            <h1>Ranking of activities:</h1>
            <p><span>01: </span><span id="1"></span></p>
            <p><span>02: </span><span id="2"></span></p>
            <p><span>03: </span><span id="3"></span></p>
            <p><span>04: </span><span id="4"></span></p>
            <p><span>05: </span><span id="5"></span></p>
            <p><span>06: </span><span id="6"></span></p>
            <p><span>07: </span><span id="7"></span></p>
            <p><span>08: </span><span id="8"></span></p>
            <p><span>09: </span><span id="9"></span></p>
            <p><span>10: </span><span id="10"></span></p>
            <p><span>11: </span><span id="11"></span></p>
        </div>
    </div>
    <div id="tooltip"></div>
    <div id="treemap"></div>
    <div class="clr"></div>

    <script src="js/d3-3-5-5.min.js"></script>
    <script src="js/d3.tip.js"></script>
    <script src="js/oneday.js"></script>
</body>
</html>