Affinity/main.html at master · uwgridlab/Affinity · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Generate Pairwise Interactive Circle Networks</title>
    <link rel="stylesheet" href="styles.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
    <!--Load D3-->
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://d3js.org/d3-queue.v2.min.js"></script>
    <!--Load jQuery for slider controls-->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <!--Load math.js for matrix manipulation-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.2.1/math.min.js"></script>
    <!--for tip --> <!--no longer linked from website - now in depends -->
    <script src="depends/d3-tip.js"></script>
    <!--for fileupload-->
    <script src="depends/filedrop-min.js"></script>

</head>

<body>
<div class="allcontent">
    <div class="box" id="controlpanel">
        <table>

            <tr class="header">
                <th>Frequency</th>
                <th>Metric</th>
                <th>Prune Threshold & Display options</th>
            </tr>

            <tr>
                <td class="slow subbox">
                    <input type="text" id="freqrange" readonly style="border: none;" />
                    <div id="freqslider"></div>
                    <p></p>
                    <fieldset id="filezone">
                        <legend>Drop json matrix file</legend>
                        <span>Or click to browse for matrix file...</span>
                    </fieldset>
                </td>

                <td class="slow subbox">
                    <select id = "opts">
                        <option value="AbsVal" selected>Absolute magnitude</option>
                        <option value="Angle">Magnitude + Angle</option>
                        <option value="Sign">Real + Sign</option>
                    </select>
                    <select id = "showSelf">
                        <option value="showSelf">Show self</option>
                        <option value="NOshowSelf" selected>Exclude self</option>
                    </select>
                     <p><input id="rerender" type="button" value="Re-slice matrix and render (slow)" /></p>


        <form name="myform" onSubmit="return handleClick()">
            <input name="Submit"  type="submit" value="Change number of bins " />
            <input type="number" id="myVal"/>
        </form>

                     </P>
                </td>

                <td class="right subbox">
                    <input type="text" id="prunerange" readonly style="border: none;" />
                    <div id="pruneslider"></div>
                    <p>
                    </p>

                    <p>
                        <select id = "labelmode">
                            <option value="labelseq" selected>Label with seq</option>
                            <option value="labelfile">Label from file</option>
                        </select>

                        <select id = "colormode">
                            <option value="colorseq" selected>Color from seq</option>
                            <option value="colorgrid">Color from grid</option>
                            <option value="colorfile">Color from file</option>
                            <option value="colorangle" id="colorangle" disabled>Color with angle</option>
                            <option value="colorsign" id="colorsign" disabled>Color with sign</option>
                        </select>
                    </p>
                </td>
            </tr>
            <tr>
                <td colspan="2"><span id="colorblurb" style="color: red">
    To "color with angle", first compute the angle mean matrices by selecting "Magnitude + Angle" above and click re-slice.
    </span>
                </td>
                <td>
                </td>
            </tr>
        </table>
    </div>

    <div class="circlechart"></div>
    <div class="barchart"></div>
    <div class="histogram"></div>
    <script src="jscode/makecontrols.js"></script>
    <script src="jscode/plotchords.js"></script>
    <script src="jscode/bar.js"></script>
    <script src="jscode/filedroppage.js"></script>
    <script src="jscode/histogram.js"></script>


    <script>
        // Load files and start
        d3_queue.queue()
                .defer(d3.csv, "data/regions_old.csv")
                .defer(d3.json, "data/ICCplv.txt")
                .await(initializeRender);
    </script>
</div>
</body>

</html>