almende/vis

• almende/vis#4262 see #11
• almende/vis#4142 see #10
• almende/vis#4123 see #9

We should create a new example overview site like i existed before.
Idealy this page would be generated automatically :-)

I want to draw two parallel lines,but use the data format they always connected each other.
or can we use two data array to draw that?

Graph movement don't stop after mouseup event

When you click and hold on a graph the movement starts, but does not stop when you release the mouse button. In the esm version (dist/esm.js), when you release the mouse button, the error appears:

Uncaught TypeError: undefined is not a function
     at Graph3d$1._onMouseUp (Graph3d.js:2163:3)
     at HTMLDocument.onmouseup (Graph3d.js:2080:8)

To Reproduce

To test I use the example in

https://visjs.github.io/vis-graph3d/examples/graph3d/01_basics.html

with some modifications to wrap inside an import:

function (id): void {
        import('https://cdn.jsdelivr.net/npm/vis-graph3d@latest/dist/esm.js').then(async (module) => {
            const vis = await module.default;
            function custom(x, y) {
                return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
            }
            // Create and populate a data table.
            let data = new vis.DataSet();
            // create some nice looking data with sin/cos
            var counter = 0;
            var steps = 50; // number of datapoints will be steps*steps
            var axisMax = 314;
            var axisStep = axisMax / steps;
            for (var x = 0; x < axisMax; x += axisStep) {
                for (var y = 0; y < axisMax; y += axisStep) {
                    var value = custom(x, y);
                    data.add({ id: counter++, x: x, y: y, z: value, style: value });
                }
            }

            // specify options
            var options = {
                width: "600px",
                height: "600px",
                style: "surface",
                showPerspective: true,
                showGrid: true,
                showShadow: false,
                keepAspectRatio: true,
                verticalRatio: 0.5,
            };

            // Instantiate our graph object.
            const container = document.getElementById(id);
            let graph3d = new vis.Graph3d(container, data, options);
        })
    }

Expected behavior
I expect that when I release the mouse button the graph movement will stop.

Analysis
When I release the mouse button, the event throws an Error as related. It means that undefined is being used as function. At line 21486 of 'dist/esm.js' we found the problem:

Graph3d$1.prototype._onMouseUp = function (event) {
  this.frame.style.cursor = "auto";
  this.leftButtonDown = false;

  // remove event listeners here
  undefined(document, "mousemove", this.onmousemove);
  undefined(document, "mouseup", this.onmouseup);
  preventDefault(event);
};

To bypass this bug until it is solved we set Graph3d._onMouseUp after instantiation:

...
            let graph3d = new vis.Graph3d(container, data, options);
            graph3d._onMouseUp = function (event: Event) {
                this.frame.style.cursor = "auto";
                this.leftButtonDown = false;
                // remove event listeners here
                document.removeEventListener("mousemove", this.onmousemove);
                document.removeEventListener("mouseup", this.onmouseup);
                event.preventDefault();
            };
...

Hi there,
Thank you for great works! And I love this library.

I want the user to be able to do things like selection and move up or down points and see the resulting intersection points or region. And its possible to get update data of points by some method.

This is representation of expectation:

Normal

User Selection

1. Start Selection
   

2. Release Selection
   

User Move (Drag)

1. Move Up points
   

2. Move down points
   

If the user moves the points, then the axis label will also update according to the moving points. See on image below.

.

This is important feature when user need update value of data according to the points. Thank you for your supporting.

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

https://www.npmjs.com/package/semantic-release

There have been updates to the babel7 monorepo:

• • The devDependency @babel/core was updated from 7.7.7 to 7.8.0.

• The devDependency @babel/plugin-proposal-class-properties was updated from 7.7.4 to 7.8.0.
• The devDependency @babel/plugin-transform-runtime was updated from 7.8.0 to 7.8.3.
• The devDependency @babel/preset-env was updated from 7.8.0 to 7.8.2.
• The devDependency @babel/register was updated from 7.8.0 to 7.8.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Not sure if I am missing anything here, but seems like we can't control the position of the z-axis. I would have thought that the z-axis starts on [0, 0] on the xy plane, but it always starts at the smallest xy point. We could only enable/disable an axis, but can we change it position?

The devDependency rollup was updated from 1.27.6 to 1.27.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

This is definitely a low priority (or even only really useful for "fringe cases") but is there a way to do custom X/Y/Z interval labels?

For example, rather than 0, 1, 2, 3, you replace the numbers with colors/clothing/countries? I've attached an image below:

The example is I code my data as [1,2,4] and it plots fine, but the numbers on the actual graph show:

[USA, Pants, Pink]

This is to indicate Pink Pants made in USA, for example. Was hoping there may be a way to do this on the graph front end.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency eslint to v9
• chore(deps): update dependency husky to v9
• chore(deps): update dependency jsdom to v24
• chore(deps): update dependency semantic-release to v24
• chore(deps): update dependency sinon to v18
• chore(deps): update node.js to v22
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Describe the bug
The axis labels are very small, and rotated weirdly.

As we can see, the bottom left axis labels are rotated 90 degrees, and they are tiny compared to the graph.

Versions:

• Version: ^5.4.3

When I do a 2 finger touch (e.g. pinch zoom) in a graph, the touch event is not released at the end of the touch event: a subsequent single finger touch anywhere else in the browser (e.g. scrolling), leads to a rotation of the graph.

In general: 2 finger touch leads to strange behaviour, the graph is performing weird rotations.

Hello,

I have just installed vis-graph3d.min.js with npm. The surfaces have no colors, they are grey. This is the case for this example, whatever the colors configuration I choose.

Describe the bug
https://visjs.github.io/vis-graph3d/examples/graph3d/playground/index.html doesn't work as attended.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://visjs.github.io/vis-graph3d/examples/graph3d/playground/index.html
2. Click on 'Draw graph'

Expected behavior
The graph should render.

Versions:

• OS: Ubuntu 18.04
• Browser: Chrome
• Version: 78.0.3904.108

Thanks a lot for you great work btw !

Describe the bug
Hi, I was able to import the module using import VisGraph from 'vis-graph3d' in VisGraph version 5.3.0 - 5.8.0, but unable to import the module anymore since version 5.9.0. I'm importing the module into a vue-cli project.

To Reproduce
Steps to reproduce the behavior (version 5.8.0 works):

1. Install vue-cli. sudo npm install -g @vue/cli
2. Create a new vue project vue create graph3d-5.8.0
3. Install [email protected] in the vue project. cd graph3d-5.8.0; npm i [email protected]
4. Inside the project folder, edit the file App.vue to the following.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import VisGraph from 'vis-graph3d';

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted() {
    console.log("VisGraph", VisGraph)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5. Start the project using npm run serve.
6. Open the project URL. Usually localhost:8080. Open console in the browser, and you should see the console prints VisGraph [Object]. If it prints [Object], it means the module is imported successfully.

Steps to reproduce the behavior (version 5.9.0 doesn't work):

1. Repeat the above steps, but change version from 5.8.0 to 5.9.0.
2. [email protected] seems to require vis-data. npm install vis-data.
3. Check the browser's console again. It should display VisGraph undefined, because the module is not imported correctly.

Expected behavior
I want to be able to import both VisGraph3d version 5.8.0 and 5.9.0 using import VisGraph from 'vis-graph3d'.

Versions:

• OS: Ubuntu 20.10
• Browser: Google Chrome
• Version: VisGraph version 5.9.0 and above have this issue.
• npm version: 6.14.10
• nodejs version: v12.18.2
• @vue/cli version: 4.5.9

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Describe the bug
animation 3d graph have problem.
0th data is empty when changing to line style with setoptions

https://jsfiddle.net/xks6pudz/1/

Versions:

• OS: windows 10
• Browser:chrome
• Version: v5.0.0 https://visjs.github.io/vis-graph3d/standalone/umd/vis-graph3d.min.js

If you want your issue to be fixed fast please make sure we are funded sufficiently 🙏

Heeey, how are you doing?

It would be interesting to be able to parameterize which axis I would like to apply the color scale.

For example: in the image below I have a scale on the y axis, that is, I can see from blue to red even at the highest values, and it's a very amazing effect:

What I have using Vis:
Almost that, but you can see that the color is applied in another axis, so the bar is completely filled by just one color. And it would be amazing to have this effect mentioned above.

Fiddle to my Vis chart: https://jsfiddle.net/mqdevWG/qwaxupsv/

Something like this:

These icons are never used and atop of that their license doesn't allow redistribution. They should be removed from the codebase.

These icons are in docs/img/external-link-icons.

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

I try the vis-graph3d, it very nice, but is it possible to plot the planes or equations intersections?

Hi,

I can rebuild script using command "npm run build". I was follow instructions step by step.

This is output from terminal:

> [email protected] build E:\js\vis-graph3d
> npm run js:graph3d


> [email protected] js:graph3d E:\js\vis-graph3d
> rollup --config rollup.build.js && rollup --config rollup.config.js

[!] Error: Cannot find module 'vis-dev-utils'
Require stack:
- E:\js\vis-graph3d\rollup.build.js
- C:\Users\Acer\AppData\Roaming\npm\node_modules\rollup\dist\shared\loadConfigFile.js
- C:\Users\Acer\AppData\Roaming\npm\node_modules\rollup\dist\bin\rollup
Error: Cannot find module 'vis-dev-utils'
Require stack:
- E:\js\vis-graph3d\rollup.build.js
- C:\Users\Acer\AppData\Roaming\npm\node_modules\rollup\dist\shared\loadConfigFile.js
- C:\Users\Acer\AppData\Roaming\npm\node_modules\rollup\dist\bin\rollup
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
    at Function.Module._load (internal/modules/cjs/loader.js:840:27)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (E:\js\vis-graph3d\rollup.build.js:8:19)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.require.extensions.<computed> [as .js] (C:\Users\Acer\AppData\Roaming\npm\node_modules\rollup\dist\shared\loadConfigFile.js:516:20)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] js:graph3d: `rollup --config rollup.build.js && rollup --config rollup.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] js:graph3d script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Acer\AppData\Roaming\npm-cache\_logs\2020-05-02T13_06_22_336Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run js:graph3d`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Acer\AppData\Roaming\npm-cache\_logs\2020-05-02T13_06_22_527Z-debug.log

My environtments:

• OS: Windows 10
• Browser: Chrome
• Version: Latest

Graph3d is great, however it seems that it displays only 1 dataset at a time.

It would be great to be able to display 2 datasets simultaneously to compare. Currently it's kinda possible with points, but I want to display points and lines over the surface.

If it's hard to do Z-sorting/Z-buffering to do proper intersection, then just drawing "layers" in order would also be helpful. Currently this can be mimicked by drawing many graphs one over another, but this kills the ability to interact with data points other than the chart on top.

Let users specify the colours for each of the 3 axis in 3D graph.

I was thinking adding a new option:

axisColors: {
  x: color,
  y: color,
  z: color,
}

If this option is specified, then axisColor will be null.

The devDependency vis-dev-utils was updated from 1.1.0 to 1.2.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

vis-dev-utils is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I am looking to use https://visjs.github.io/vis-graph3d/examples/graph3d/11_tooltips.html example.

I receive mydata from websocket server with this function:

ws.onmessage = function (evt) {
  
    if (typeof(evt.data) === 'string' || evt.data instanceof String) { // // UTF-8 formatted string data
        
    // ----- receive text data -----
                var textarea = document.getElementById('messages');
        	data = Function('return [' +  evt.data + ']')(); 
		console.log(data);
}

Data I receive from websocket server running on ESP32 microcontroller is in following format where first line is epoch timestamp and rest of the lines are voltage,RSSI,temperature,humidity,pressure & light :

[1622503573,1622505238,1622505240,1622508028],
[2.9,3.1,2.9,2.9],
[67,67,65,66],
[55,56,55,54],
[67,69,68,69],
[250,253,255,254],
[67,68,65,66]

I want to use X axis as timestamp and y axis as different sensors types (if possible with labels) and z axis as values of these sensors.

Is this possible ? if so can you show me how to feed the data to data variable?

we should install a greenkeeper bot that auto-updates dependencies. This is especially important for dependencies on vis-util or vis-data.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

I think the deployment is broken.
When loading any of the examples ex, the console says

Hi,

I'd like to create a surface plot, where the color is determined by the "style" value, not the "z" coordinate, like this (modified basic example):

...
          var z = (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
          var c = (Math.sin(y/50) * 50 + 50);
          data.add({id:counter++, x: x, y: y, z: z, style: c});
...

I've tinkered a little with the implementation and this seems pretty easy to do. I'd be happy to make a PR. Do you have any thoughts on how this should be done, i.e.

• implement it as separate style, e.g. "surface-color", in analogy to "dot-color"
• add it to existing "surface" style and using _getColorsColor(point) in case of the current handling, e.g.
  • by autodetecting whether the "style" attribute is present or
  • by adding another switch (e.g. setting surfaceColors: "style")

Personally, I'd prefer if e.g. _getColorsColor would use point.value for the color if present, otherwise fallback to point.z, and use this behaviour for all styles (so now technically, one wouldn't need the "dot-color" style anymore either, I believe. For that matter, I would even unify it with the "dot-size" style).

What do you think?

Best, Thomas

I know vis-network has methods and event properties to control zoom options. My graph is quite cluttered, and I'm wondering if features can be implemented to zoom more into points in the graph.

It would be nice to be able to customize the surface colours instead of the default green to red scale.

graph2d has click and doubleclick events from which one can get the x,y position of the mouse. something similar would be nice for graph3d, whereby one could get the x,y,z coordinates of a dot in cloud, for instance. this is not documented, but it is possible somehow? thanks.