Awesome
If you use this code or application, please cite the original paper published by Bioinformatics: 10.1093/bioinformatics/btx760
Lore
Current Version: 1.1.20 (Godzilla)
Teasers
<table style="width=100%"> <tbody> <tr> <td><img src="http://doc.gdb.tools/fun/img/lore_faerun_small.gif"></img></td> <td><img src="http://doc.gdb.tools/fun/img/lore_faerun2_small.gif"></img></td> <td><img src="http://doc.gdb.tools/fun/img/lore_flybrain_small.gif"></img></td> <td><img src="http://doc.gdb.tools/fun/img/lore_larva_small.gif"></img></td> </tr> </tbody> </table>Browsing the SureChEMBL database (containing > 12 million datapoints): Faerun.
Example
A basic fiddle See the examples folder for more details.
Installation
You can either download or clone this repository and use the JavaScript file in the dist folder, or you can use yarn to install the package lore-engine:
yarn add lore-engine
Building Lore
If you decide not to use the ready-to-go scripts in dist, you can (edit and) build the project by running:
npm install
gulp
Getting Started
A simple example can be found in the example folder. The example data file was downloaded from the website of the Berkeley Drosophila Transcription Network Project. It is a very small data set (N=6000) chosen because of the small file size (larger files can not be hosted on github).
Options
Renderer
| Option | Identifier | Data Type | Default Value |
|---|---|---|---|
| Antialiasing | antialiasing | boolean | true |
| Verbose Mode | verbose | boolean | false |
| The HTML element where FPS info is displayed | fpsElement | HTMLElement | document.getElementById('fps') |
| The canvas background color | clearColor | Lore.Color | Lore.Color.fromHex('#000000') |
| The distance of the camera to the center | radius | number | 500 |
| Clear Depth | clearDepth | number | 1.0 |
| Center (LookAt) | center | Lore.Vector3f | new Lore.Vector3f() |
| Enable depth test | enableDepthTest | boolean | true |
| Enable alpha blending | alphaBlending | boolean | false |
CoordinatesHelper
The options for the coordinate helper are self-explanatory:
{
position: new Lore.Vector3f(),
axis: {
x: {
length: 50.0,
color: Lore.Color.fromHex('#222222')
},
y: {
length: 50.0,
color: Lore.Color.fromHex('#222222')
},
z: {
length: 50.0,
color: Lore.Color.fromHex('#222222')
}
},
ticks: {
enabled: true,
x: {
count: 10,
length: 5.0,
offset: new Lore.Vector3f(),
color: Lore.Color.fromHex('#1f1f1f')
},
y: {
count: 10,
length: 5.0,
offset: new Lore.Vector3f(),
color: Lore.Color.fromHex('#1f1f1f')
},
z: {
count: 10,
length: 5.0,
offset: new Lore.Vector3f(),
color: Lore.Color.fromHex('#1f1f1f')
}
},
box: {
enabled: true,
x: {
color: Lore.Color.fromHex('#222222')
},
y: {
color: Lore.Color.fromHex('#222222')
},
z: {
color: Lore.Color.fromHex('#222222')
}
},
}
OctreeHelper
| Option | Identifier | Data Type | Default Value |
|---|---|---|---|
| Visualize the octree (for debug purposes) | visualize | boolean or string | false, 'centers', 'cubes' |
| Enable multiselect | multiSelect | boolean | true |
PointHelper
| Option | Identifier | Data Type | Default Value |
|---|---|---|---|
| Create an octree when setting positions | octree | boolean | true |
| The maximum number of vertices in a octree node | octreeThreshold | number | 500 |
| The maximum depth of the octree | octreeMaxDepth | number | 8 |
| Point size scaling | pointScale | number | 1.0 |
| The maximum point size | maxPointSize | number | 100.0 |
Documentation
The documentation can be found in the docs folder. A markdown version is available here
Contributions & Thanks
Big thanks to Browserstack for providing us with their excellent App and Browser Testing service. This allows us to test our library quickly on a wide range of browsers and operating systems.