hiveplotlib-javascript/index.html at main · gjkoplik/hiveplotlib-javascript · 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hiveplotlib-javascript dev</title>
    <style>
      body {
        font-family: sans-serif;
        margin: 2rem;
      }
      .plot-section {
        margin-bottom: 2rem;
      }
      .plot-section h2 {
        margin-bottom: 0.25rem;
      }
      .plot-section p {
        margin-top: 0;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h1>&lt;hive-plot&gt; Web Component</h1>

    <div class="plot-section">
      <h2>Web Component: minimal_hive_plot.json</h2>
      <p>
        Rendered via <code>&lt;hive-plot&gt;</code> with CSS overrides: axis A
        nodes in red, tag "0" edges in steelblue with thicker stroke. Hovering
        over any node enlarges it and turns it orange. Hovering over any edge
        thickens it.
      </p>
      <style>
        #web-component-demo .node[data-axis="A"] {
          fill: red;
        }
        #web-component-demo .edge[data-tag="0"] {
          stroke: steelblue;
          stroke-width: 3;
        }

        #web-component-demo .node:hover {
          fill: orange;
          r: 5;
        }
        #web-component-demo .edge:hover {
          stroke-width: 5;
        }
      </style>
      <div id="web-component-demo">
        <hive-plot
          src="tests/fixtures/minimal_hive_plot.json"
          show-labels="true"
        ></hive-plot>
      </div>
    </div>

    <div class="plot-section">
      <h2>Web Component: no labels</h2>
      <p>Same data, labels suppressed via attribute.</p>
      <hive-plot
        src="tests/fixtures/minimal_hive_plot.json"
        show-labels="false"
      ></hive-plot>
    </div>

    <script type="module" src="./hive_plot_element.js"></script>

    <hr />
    <h1>Direct D3 API</h1>

    <div class="plot-section">
      <h2>example_hive_plot.json</h2>
      <p>Default rendering with labels.</p>
      <div id="example-default"></div>
    </div>

    <div class="plot-section">
      <h2>example_hive_plot.json (no labels, larger margins)</h2>
      <p>Same data, labels suppressed, extra margin.</p>
      <div id="example-no-labels"></div>
    </div>

    <div class="plot-section">
      <h2>minimal_hive_plot.json</h2>
      <p>Minimal fixture: 3 axes, 6 nodes, few edges, uniform color.</p>
      <div id="minimal"></div>
    </div>

    <div class="plot-section">
      <h2>multi_tag_hive_plot.json</h2>
      <p>
        Two edge tags (red / blue) on the same axis pairs, with repeat axes.
      </p>
      <div id="multi-tag"></div>
    </div>

    <div class="plot-section">
      <h2>full_kwargs_hive_plot.json</h2>
      <p>
        Per-edge color/alpha arrays, node colormap (viridis), linewidth,
        edgecolor.
      </p>
      <div id="full-kwargs"></div>
    </div>

    <script type="module">
      import visualizeHivePlot from "./hive_plots_d3_viz.js";

      const ext = [-6, 6];

      // 1. Example hive plot — default rendering with labels
      visualizeHivePlot(
        "example_hive_plot.json",
        ext,
        ext,
        20,
        0,
        0,
        0,
        550,
        550,
        "#example-default",
        { showLabels: true, labelsBuffer: 1.1, fontSize: 14 },
      );

      // 2. Example hive plot — no labels, larger margins
      visualizeHivePlot(
        "example_hive_plot.json",
        ext,
        ext,
        40,
        40,
        40,
        40,
        550,
        550,
        "#example-no-labels",
        { showLabels: false },
      );

      // 3. Minimal fixture
      visualizeHivePlot(
        "tests/fixtures/minimal_hive_plot.json",
        ext,
        ext,
        20,
        0,
        0,
        0,
        550,
        550,
        "#minimal",
        { showLabels: true, labelsBuffer: 1.1, fontSize: 14 },
      );

      // 4. Multi-tag fixture
      visualizeHivePlot(
        "tests/fixtures/multi_tag_hive_plot.json",
        ext,
        ext,
        20,
        0,
        0,
        0,
        550,
        550,
        "#multi-tag",
        { showLabels: true, labelsBuffer: 1.1, fontSize: 14 },
      );

      // 5. Full kwargs fixture
      visualizeHivePlot(
        "tests/fixtures/full_kwargs_hive_plot.json",
        ext,
        ext,
        20,
        0,
        0,
        0,
        550,
        550,
        "#full-kwargs",
        { showLabels: true, labelsBuffer: 1.1, fontSize: 14 },
      );
    </script>
  </body>
</html>