domitry / elegans Goto Github PK

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.