hFigures/complex.html at master · ledancs/hFigures · 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        body {
            font-family: sans-serif;
        }
        svg {
            margin-left: auto;
            margin-right: auto;
            display: inline-block;
            padding: 0;
            width: 100%;
            height: 100%;

            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

            cursor: default;
        }
        div.hGraph-container {
            margin: 0;
            padding: 0;
            height: 98.45%;
            width: 99.45%;
            display: inline-block;
            position: absolute;
            vertical-align: middle;

        }
		div.examples {
			position: absolute;
			font-size: 0.9em;
			left: 1em;
			bottom: 2em;
			color: grey;
		}
    </style>
</head>
<body>

<div class="hGraph-container"></div>

<script charset="utf-8" src="d3.js"></script>
<script charset="utf-8" src="dataPatientDiabetes.js"></script>

<script src="hFigures.js" type="application/javascript"></script>

<script type="text/javascript">
    var w = 1200;
    var className = "hGraph-container";
    var hFigureInstance = HealthFigure(groups, w, className, {
        minScale: 0.5
    }); // from data.js
    var additionalFigure = hFigureInstance.plotAt(0);

</script>

<div class="examples">
    Some other examples:
    <list>
        <li>
            <a href="index.html">The introductory example</a>
        </li>
        <li>
            <a href="simple.html">A simple dataset</a>
        </li>
        <li>
            <a href="nutrition.html">A nutrition-centric dataset</a>
        </li>
    </list>
</div>

</body>
</html>