Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Remi PLANEL
bioviz-js
Commits
265b79b1
Commit
265b79b1
authored
Jun 07, 2019
by
Remi PLANEL
Browse files
Create an example folder
parent
d183a617
Changes
5
Show whitespace changes
Inline
Side-by-side
src/index.html
→
src/
examples/genome-browser/
index.html
View file @
265b79b1
<html>
<html>
<head>
<head>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"./style
/genome-browser
.css"
>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"./style.css"
>
</head>
</head>
<body>
<body>
...
@@ -10,7 +9,7 @@
...
@@ -10,7 +9,7 @@
<button
type=
"button"
id=
"zoom-out"
>
-
</button>
<button
type=
"button"
id=
"zoom-out"
>
-
</button>
</div>
</div>
<svg></svg>
<svg></svg>
<script
src=
"./
scripts/main-genome-browser
.ts"
></script>
<script
src=
"./
main
.ts"
></script>
</body>
</body>
</html>
</html>
\ No newline at end of file
src/
scripts/main-
genome-browser.ts
→
src/
examples/
genome-browser
/main
.ts
View file @
265b79b1
import
{
GeneData
,
GenomeBrowserData
,
GenomeBrowserState
}
from
"
./types
"
;
import
{
GeneData
,
GenomeBrowserData
,
GenomeBrowserState
}
from
"
.
./../scripts
/types
"
;
import
{
select
,
event
}
from
"
d3-selection
"
;
import
{
select
,
event
}
from
"
d3-selection
"
;
import
GenomeBrowser
from
"
./component/genome-browser
"
;
import
GenomeBrowser
from
"
.
./../scripts
/component/genome-browser
"
;
import
genomeBrowserLayout
from
"
./layout/genome-browser
"
;
import
genomeBrowserLayout
from
"
.
./../scripts
/layout/genome-browser
"
;
const
width
=
1500
;
const
width
=
1500
;
...
...
src/
sty
le/genome-browser.css
→
src/
examp
le
s
/genome-browser
/style
.css
View file @
265b79b1
File moved
src/examples/phylotree/index.html
0 → 100644
View file @
265b79b1
<html>
<body>
<div>
<button
type=
"button"
id=
"zoom-in"
>
+
</button>
<button
type=
"button"
id=
"zoom-out"
>
-
</button>
</div>
<svg></svg>
<script
src=
"./main.ts"
></script>
</body>
</html>
\ No newline at end of file
src/examples/phylotree/main.ts
0 → 100644
View file @
265b79b1
import
Phylotree
from
"
../../scripts/layout/phylotree
"
;
import
{
tree
,
hierarchy
,
HierarchyPointNode
}
from
"
d3-hierarchy
"
;
import
{
RawPhyloTreeNode
,
PhyloTreeNode
}
from
"
../../scripts/types
"
;
import
{
select
}
from
"
d3-selection
"
;
const
treeLayout
=
tree
();
const
data
:
RawPhyloTreeNode
=
{
"
name
"
:
"
Eve
"
,
branchLength
:
0
,
"
children
"
:
[
{
"
name
"
:
"
Cain
"
,
branchLength
:
0.8
,
},
{
"
name
"
:
"
Seth
"
,
branchLength
:
0.6
,
"
children
"
:
[
{
"
name
"
:
"
Enos
"
,
branchLength
:
0.3
},
{
"
name
"
:
"
Noam
"
,
branchLength
:
0.1
}
]
}
]
};
const
root
=
hierarchy
(
data
);
const
myTree
=
treeLayout
(
root
);
// myTree.eachBefore(n => console.log("d3 ", n.data.name, ' - ', n.x, ', ', n.y))
// console.log(myTree);
// draw(myTree);
const
width
=
900
;
const
height
=
400
;
const
size
:
[
number
,
number
]
=
[
height
-
10
,
width
-
50
];
const
phylotreeLayout
=
Phylotree
()
// .nodeSize([50, 200]);
.
size
(
size
);
const
phylotreeData
=
phylotreeLayout
(
data
);
draw
(
phylotreeData
);
console
.
log
(
phylotreeData
.
links
());
function
draw
(
source
:
HierarchyPointNode
<
PhyloTreeNode
>
)
{
const
phylotree
=
select
<
SVGElement
,
any
>
(
"
svg
"
)
.
attr
(
"
width
"
,
width
)
.
attr
(
"
height
"
,
height
)
.
append
<
SVGGElement
>
(
"
g
"
)
.
attr
(
"
transform
"
,
"
translate(
"
+
10
+
'
,0)
'
)
.
classed
(
"
phylotree
"
,
true
);
const
node
=
phylotree
.
selectAll
<
SVGGElement
,
HierarchyPointNode
<
PhyloTreeNode
>
[]
>
(
"
g.node
"
)
.
data
(
source
.
descendants
().
reverse
());
// ENTER
const
nodeE
=
node
.
enter
()
.
append
(
"
g
"
)
.
classed
(
"
node
"
,
true
);
nodeE
.
append
(
"
circle
"
)
.
attr
(
"
r
"
,
2.5
)
.
attr
(
"
fill
"
,
d
=>
d
.
children
?
"
#555
"
:
"
#999
"
)
.
attr
(
"
stroke-width
"
,
10
);
nodeE
.
append
(
"
text
"
)
.
attr
(
"
dy
"
,
"
0.31em
"
)
.
attr
(
"
x
"
,
6
)
// .attr("x",d => d.children ? -6 : 6)
// .attr("text-anchor", d => d.children ? "end" : "start")
.
text
(
d
=>
d
.
data
.
name
)
.
clone
(
true
).
lower
()
.
attr
(
"
stroke-linejoin
"
,
"
round
"
)
.
attr
(
"
stroke-width
"
,
3
)
.
attr
(
"
stroke
"
,
"
white
"
);
// Update
const
nodeU
=
node
.
merge
(
nodeE
)
.
attr
(
"
transform
"
,
d
=>
{
console
.
log
(
d
.
data
.
name
,
'
-
'
,
d
.
x
);
return
`translate(
${
d
.
y
}
,
${
d
.
x
}
)`
})
.
attr
(
"
fill-opacity
"
,
1
)
.
attr
(
"
stroke-opacity
"
,
1
);
// Transition exiting nodes to the parent's new position.
const
nodeExit
=
node
.
exit
()
.
remove
();
// Update the links…
// const link = gLink.selectAll("path")
// .data(links, d => d.target.id);
// // Enter any new links at the parent's previous position.
// const linkEnter = link.enter().append("path")
// .attr("d", d => {
// const o = { x: source.x0, y: source.y0 };
// return diagonal({ source: o, target: o });
// });
// // Transition links to their new position.
// link.merge(linkEnter).transition(transition)
// .attr("d", diagonal);
// // Transition exiting nodes to the parent's new position.
// link.exit().transition(transition).remove()
// .attr("d", d => {
// const o = { x: source.x, y: source.y };
// return diagonal({ source: o, target: o });
// });
}
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment