encodings/visual_examples.html at main · reecey22/encodings · 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


</html>
<!-- Created by Zhongzheng Xu 11/2022 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://d3js.org/d3.v4.js"></script>
    <meta charset="UTF-8">
    <title>Visual Examples</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div style="margin: 1rem 20% 1rem; font-family:Arial, Helvetica, sans-serif;">
        <img src="./img/Emory-University-Logo.png"
            style="display: block; margin-left: auto; margin-right:auto; width: 30%" alt="">
        <h1 style="text-align: center;">Study Instructions</h1>

        <hr>
        <h2> Encoding Types</h2>

        <div class="example-svg">
            <svg baseProfile="full" height="6cm" version="1.1" width="12cm" xmlns="http://www.w3.org/2000/svg"
                xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs />
                <line stroke="black" stroke-width="4" x1="3cm" x2="3cm" y1="1.9cm" y2="4.1cm" />
                <line stroke="black" stroke-width="4" x1="9cm" x2="9cm" y1="0.7999999999999998cm" y2="5.2cm" /></svg>
        </div>
        <hr>

        <div class="example-svg">
            <svg baseProfile="full" height="6cm" version="1.1" width="12cm" xmlns="http://www.w3.org/2000/svg"
                xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs />
                <pattern height="10" id="pattern" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse"
                    width="10">
                    <line stroke="black" stroke-width="3" x1="0" x2="0" y1="0" y2="10" />
                </pattern>
                <circle cx="9cm" cy="3cm" fill="url(#pattern)" r="2.8cm" stroke="black" stroke-width="3" />
                <circle cx="3cm" cy="3cm" fill="url(#pattern)" r="1.9798989873223332cm" stroke="black"
                    stroke-width="3" />
            </svg>
        </div>
        <hr>


        <div class="example-svg">
            <svg baseProfile="full" height="6cm" version="1.1" width="12cm" xmlns="http://www.w3.org/2000/svg"
                xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs />
                <path
                    d="M 56.400000000000006,112.80000000000001 C 112.80000000000001,56.400000000000006 112.80000000000001,56.400000000000006 169.20000000000002,112.80000000000001"
                    fill="none" stroke="black" stroke-width="3"
                    transform="rotate(41,112.80000000000001,112.80000000000001)" />
                <path d="M 282.0,112.80000000000001 C 338.4,0.0 338.4,0.0 394.8,112.80000000000001" fill="none"
                    stroke="black" stroke-width="3" transform="rotate(-15,338.40000000000003,112.80000000000001)" />
                </svg>
        </div>
        <hr>
        <div style="margin-bottom: 5%;">
            <b>Click "Proceed" to see more encoding types.</b>
            <div style="text-align: center; margin-top: 5%; margin-bottom: 5%;">
                <nav>
                    <a id="survey-link" href="encoding.html">
                        <button>Proceed</button>
                    </a>
                </nav>
            </div>
        </div>


    </div>
</body>