polycube/css3d.html at master · bigdata-vis/polycube · 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
<!DOCTYPE html>
<html>
<head>
    <script src="http://threejs.org/build/three.min.js"></script>
    <script src="lib/three.js/OrbitControls.js"></script>
    <script src="lib/three.js/tween.js"></script>
    <!--<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>-->
    <script src="http://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
    <style>
        body {
            background-color: #000;
            margin: 0;
            overflow: hidden;
        }
        .elements_child {
            background-color: #2f2f2f;
        }

        .subunit { fill: #dcdcdc; }
        .place,
        .place-label {
            fill: #18b23d;
        }

        text {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 10px;
            pointer-events: none;
        }
        .subunit-boundary {
            fill: none;
            stroke: #777;
            stroke-dasharray: 2,2;
            stroke-linejoin: round;
        }
        .subunit-label {
            fill: #777;
            fill-opacity: .5;
            font-size: 20px;
            font-weight: 300;
            text-anchor: middle;
        }

        .hide{
            display: none;
        }

    </style>
</head>
<body>
<h3 style="color: white; position: relative; top: 10px; left: 10px; z-index: 9999">Cultural Heritage Education Centre Concentration Over Time</h3>
<button style="position: relative; top: 250px; left: 150px; z-index: 999" type="button" onclick="transform(0)"> JuxtPos </button><br>
<button style="position: relative; top: 250px; left: 150px; z-index: 999" type="button" onclick="location.reload();"> Default </button><br>
<button style="position: relative; top: 250px; left: 150px; z-index: 999" type="button" onclick="drawGraphs()"> Draw </button><br>
<button style="position: relative; top: 250px; left: 150px; z-index: 999" type="button" onclick="superImpose()"> SuperImposition </button><br>
<script src="lib/d3/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="js/css3d2.js"></script>
</body>
</html>