domitry / elegans Goto Github PK
View Code? Open in Web Editor NEWElegant 3D plots generator with WebGL.
Home Page: http://elegans.readthedocs.org/
License: Other
Elegant 3D plots generator with WebGL.
Home Page: http://elegans.readthedocs.org/
License: Other
I'm using the library to draw some surface plots. It's working well on my computer brower. I then tried to integrate it in my Android app using WebView. It's working well on my phone but it's not working on my tablet (despite that it's they have the same latest version of WebView). The graph keeps redrawing in different angles when I try to zoom or move the camera.
Since Webview is based on chromium, I don't understand where the issue come from.
Any idea ?
There is a gap on grids in 3d dimensional space.
Probably it will be solved by re-implementing Space::generateGrid in components/space.
Hi,
Thanks for sharing this code.
This could be a small bug; in utils.js line 13. "exports" returned without declared locally so it could pollute global space and may cause an error for libraries for exporting modules.
Should not it be :
13 var exports = {
Regards,
When disabling plots from legends, gray shadow appears on non-disabled plots.
It may be solved by stopping to use parameter of opacity, and adding some code to remove mesh from scene.
see here: http://stackoverflow.com/questions/8763603/transparent-textures-behaviour-in-webgl
First, I would like to thank you for this useful library!
One improvement I would love to see would be some more options for camera controls. In particular, I feel it would be nice to disable camera roll in some circumstances (and keep the z-axis pointing upwards).
I've managed to patch in OrbitControls
which I took from this file in three.js (demo). It works well so I was just wondering if there are any plans to support OrbitControls
(or something similar) in future?
Alternatively, I would be happy to submit a pull request adding an option to useOrbitControls
to elegans.
Edit: I see there was a previous pull request regarding camera controls but I don't think it was addressing quite the same issue.
We are hosting an IPython notebook under https, thus we can no load from "http://cdnjs.cloudflare.com/...". We downloaded D3 and THREE.js locally, but still can not get elegans.js to work.
Hi,
I'm trying to use your library for visualisation in a Jupyter notebook (the code is below)
.
I'm encountering following problem, when i'm sending new data to js and do stage.clear();
and
stage.dispose();
this does not clear charts in fact, moreover second update of data (in this fashion) leads to 2 point sets but 3 labels (e.g. particles1, particles1, particles2).
It would be also nice to have a way to reuse THREEjs WebGL context, by e.g. specifying scene
argument to stage.render
(https://stackoverflow.com/questions/21548247/clean-up-threejs-webgl-contexts).
Though, Eleganse was not designed for a purpose I want to use it probably.
%%javascript
require.config({
paths: {
"THREE": 'http://localhost:8888/notebooks/Notebooks/_haptics/static/three.min',
"Elegans": "http://localhost:8888/notebooks/Notebooks/_haptics/static/elegans.min",
"d3": "http://localhost:8888/notebooks/Notebooks/_haptics/static/d3.min",
},
shim: {
"THREE": {exports: "THREE"},
"d3": {exports: "d3"},
"Elegans": {deps: ["THREE"], exports: "Elegans"}
},
});
require(["d3", "THREE"], function(d3){
window["d3"] = d3;
d3.select(document)
.on("contextmenu", function(){
d3.selectAll("canvas").style("z-index", 10);
d3.selectAll(".download_menu").style("z-index", 100);
});
});
var particles;
var stage;
element.append("<div id='vis'></div>");
require(['Elegans'], function(){
//var line_data = {x:[],y:[],z:[]};
var particles_data = {x:[],y:[],z:[]};
stage = new Elegans.Stage(d3.select("#vis")[0][0]);
var idx = 1;
var comm_manager=Jupyter.notebook.kernel.comm_manager
var handle_msg=function(msg){
console.log('got msg');
var data = JSON.parse(msg.content.data);
stage.clear();
stage.dispose();
//stage.charts = []
console.log("Data loaded");
//var dataLoaded = 1;
var particles_data = {x:[],y:[],z:[]};
particles_data.x = Object.keys(data['x']).map(function(k){return data['x'][k];});
particles_data.y = Object.keys(data['y']).map(function(k){return data['y'][k];});
particles_data.z = Object.keys(data['z']).map(function(k){return data['z'][k];});
data = [];
particles = [];
var markerColor = new THREE.Color();
markerColor.setHSL( Math.random(), 1.0, 0.5 )
particles = new Elegans.Particles(particles_data, {
name: "particles"+idx,
size: 0.1,
color: '#'+markerColor.getHexString(),
has_legend: true
});
stage.add(particles);
//stage.add(line);
stage.render();
idx += 1;
}
comm_manager.register_target('myTarget', function(comm,msg){
console.log('opened comm');
console.log(msg);
// register callback
comm.on_msg(handle_msg)
})
});
P.S. BTW, THREE.js suggests to
THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
Thank you for a nice library!
Could anyone export elegans to npm repository?
It would be useful for webpack or requireJS.
Would be great if I had 200 data points for x and y while having only 10 or so for the z axis.
Rendering never stops, it should if an update is not required (need to check for camera movement).
Saves energy on mobile devices.
Is there any way I can change the way controlling camera?
It could be convenient to build surface from point clound( i.e: [ [0,0,5] , [0,5,5] , [5,0,5] ,[5,5,10] ] ) rather than a existing mesh, just like plot3/surface in matlab.
However , as far as I can see , nodejs don't have any 3D interpolation module at can achieve( which corresponding to the "griddata" in matalb). Now i'm working on Octave, a open source "matlab" which offering a C++ library that do have the griddata function , but I'm been stacked when compile because nodejs use node-gyp but octave use mkoctfile ...
Hi there
thank you for this beautiful library
is there any way that we can change the content of scatter plot using a button after rendering?
How can we access already rendered stage in a function?
any help would be very appreciated
I wonder if there is some native support for tooltips in line chart.
Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.