Skip to content

Commit 7b01382

Browse files
jelenasmjelenasm
authored
Create index.html
1 parent 0a5c69e commit 7b01382

File tree

1 file changed

+103
-0
lines changed

1 file changed

+103
-0
lines changed

‎index.html

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Interactome</title>
8+
9+
<style>
10+
.links line {
11+
stroke: #999;
12+
stroke-opacity: 0.7;
13+
}
14+
15+
#legend-container {
16+
position: absolute;
17+
top: 50px;
18+
left: 50px;
19+
}
20+
21+
.legend-item {
22+
margin-bottom: 10px;
23+
}
24+
25+
.legend-item-type2 {
26+
margin-bottom: 25px;
27+
}
28+
29+
.legend-rect {
30+
width: 20px;
31+
height: 20px;
32+
display: inline-block;
33+
margin-right: 5px;
34+
vertical-align: middle;
35+
}
36+
37+
.legend-circle {
38+
width: 20px;
39+
height: 20px;
40+
border-radius: 50%;
41+
display: inline-block;
42+
margin-right: 5px;
43+
vertical-align: middle;
44+
border: 3px solid black; /* Add a black border */
45+
}
46+
47+
/* Adjust the position of the checkbox label */
48+
label {
49+
display: inline-block;
50+
margin-top: 50px;
51+
font-size: 20px; /* Set the font size for the label */
52+
}
53+
54+
/* Adjust the size of the checkbox */
55+
input[type="checkbox"] {
56+
transform: scale(1.5); /* Increase the size of the checkbox */
57+
/* margin-right: 5px; /* Adjust the spacing between the checkbox and label */
58+
}
59+
60+
.text-label {
61+
display: none;
62+
}
63+
64+
.text-label.always-visible,
65+
.text-label.mouseover-visible {
66+
display: inline;
67+
}
68+
69+
</style>
70+
71+
<script src="https://d3js.org/d3.v4.min.js"></script>
72+
<script src="node-pie.js"></script>
73+
<script src="main.js"></script>
74+
</head>
75+
76+
<body>
77+
78+
<div id="network-container"></div>
79+
80+
<svg width="1400" height="1400"></svg>
81+
82+
<!-- Add a legend container -->
83+
<div id="legend-container">
84+
<div class="legend-item">
85+
<div class="legend-rect" style="background-color: #e08214;"></div>
86+
SARS-Cov-2
87+
</div>
88+
<div class="legend-item-type2">
89+
<div class="legend-rect" style="background-color: #8073ac;"></div>
90+
EBV
91+
</div>
92+
<div class="legend-item-type2">
93+
<div class="legend-circle" style="background-color: #f7f7f7;"></div>
94+
<div class="legend-circle" style="background-color: #e08214;"></div>
95+
<div class="legend-circle" style="background-color: #8073ac;"></div>
96+
Differentialy methylated
97+
</div>
98+
<label for="toggleModulesCheckbox">Toggle Modules</label>
99+
<input type="checkbox" id="toggleModulesCheckbox" onchange="toggleModules(this)">
100+
</div>
101+
102+
</body>
103+
</html>

0 commit comments

Comments
 (0)