Skip to content

Commit

Permalink
Merge pull request #57 from benjaminchlee/docs-update
Browse files Browse the repository at this point in the history 
Improvements to documentation and examples
  • Loading branch information
@dsaffo
dsaffo authored Oct 9, 2024
2 parents 841eeba + 6907ecc commit 033ef63
Show file tree
Hide file tree
Showing 40 changed files with 562 additions and 450 deletions.
47 changes: 47 additions & 0 deletions docs/anu-examples/Binding_Instances.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// SPDX-License-Identifier: Apache-2.0
// Copyright : J.P. Morgan Chase & Co.

import { HemisphericLight, ArcRotateCamera, Vector3, Color4, Scene} from '@babylonjs/core';
import * as anu from '@jpmorganchase/anu' //import anu, this project is using a local import of babylon js located at ../babylonjs-anu this may not be the latest version and is used for simplicity.


//create and export a function that takes a babylon engine and returns a scene
export const box_selection = async function(engine){

const scene = new Scene(engine)

new HemisphericLight('light1', new Vector3(0, 10, 0), scene);

const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.position = new Vector3(10, 10, 25);
camera.wheelPrecision = 10;
camera.attachControl(true);

let data = [];
for (let i = 0; i < 1000; i++) {
data.push(
{
x: Math.random() - 0.5,
y: Math.random() - 0.5,
z: Math.random() - 0.5,
col: new Color4(Math.random(), Math.random(), Math.random(), 1)
});
};

let rootSphere = anu.create('sphere', 'mySphere', {diameter: 0.5});
rootSphere.isVisible = false;
rootSphere.registerInstancedBuffer("color", 4);
rootSphere.instancedBuffers.color = new Color4(1, 1, 1, 1);


//bindInstance(mesh: Mesh, data?: {}, scene?: Scene,)
let spheres = anu.bindInstance(rootSphere, data)
.positionX((d) => d.x * 10)
.positionY((d) => d.y * 10)
.positionZ((d) => d.z * 10)
.setInstancedBuffer("color", (d) => d.col);
return scene;

};


11 changes: 6 additions & 5 deletions docs/anu-examples/Box.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ import { Scene, HemisphericLight, ArcRotateCamera, Vector3, Mesh, TransformNode}

//create and export a function that takes a babylon engine and returns a scene
export const box = async function(engine){

const scene = new Scene(engine)

new HemisphericLight('light1', new Vector3(0, 10, 0), scene)
const scene = new Scene(engine);

new HemisphericLight('light1', new Vector3(0, 10, 0), scene);

const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.attachControl(true)
camera.wheelPrecision = 12;
camera.attachControl(true);

let box = anu.create('box', 'ourBox', {size: 2}, [{count: 2}]);
return scene;
};
};
26 changes: 13 additions & 13 deletions docs/anu-examples/Box_Bind.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,30 @@ import * as anu from '@jpmorganchase/anu' //import anu, this project is using a

//create and export a function that takes a babylon engine and returns a scene
export const box_bind = async function(engine){

const scene = new Scene(engine)

new HemisphericLight('light1', new Vector3(0, 10, 0), scene)
const scene = new Scene(engine);

new HemisphericLight('light1', new Vector3(0, 10, 0), scene);

const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.position = new Vector3(-10, 10, -20)
camera.attachControl(true)
camera.position = new Vector3(-10, 10, -20);
camera.attachControl(true);

let box = anu.bind('box',
let box = anu.bind('box',
{
height: (d) => d.goals,
width: (d) => d.assits,
width: (d) => d.assists,
depth: (d) => d.points
},
},
[
{goals: 10, assits: 5, points: 2},
{goals: 3, assits: 15, points: 8},
{goals: 1, assits: 8, points: 15}
{goals: 10, assists: 5, points: 2},
{goals: 3, assists: 15, points: 8},
{goals: 1, assists: 8, points: 15}
]
)
);

return scene;

};


18 changes: 9 additions & 9 deletions docs/anu-examples/Box_Selection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import * as anu from '@jpmorganchase/anu' //import anu, this project is using a

//create and export a function that takes a babylon engine and returns a scene
export const box_selection = async function(engine){

const scene = new Scene(engine)

new HemisphericLight('light1', new Vector3(0, 10, 0), scene)
Expand All @@ -16,25 +16,25 @@ export const box_selection = async function(engine){
camera.position = new Vector3(15, 30, 50)
camera.attachControl(true)

let boxes = anu.bind('box',
let boxes = anu.bind('box',
{
height: (d) => d.goals,
width: (d) => d.assits,
width: (d) => d.assists,
depth: (d) => d.points
},
},
[
{goals: 10, assits: 5, points: 2},
{goals: 3, assits: 15, points: 8},
{goals: 1, assits: 8, points: 15}
{goals: 10, assists: 5, points: 2},
{goals: 3, assists: 15, points: 8},
{goals: 1, assists: 8, points: 15}
]
)

boxes.positionX((d) => d.goals)
.positionY((d) => d.assits)
.positionY((d) => d.assists)
.positionZ((d) => d.points)

return scene;

};


19 changes: 10 additions & 9 deletions docs/anu-examples/Box_With_Data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,25 @@ import * as anu from '@jpmorganchase/anu' //import anu, this project is using a

//create and export a function that takes a babylon engine and returns a scene
export const box_data = async function(engine){

const scene = new Scene(engine)

new HemisphericLight('light1', new Vector3(0, 10, 0), scene)
const scene = new Scene(engine);

new HemisphericLight('light1', new Vector3(0, 10, 0), scene);

const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.position = new Vector3(-10, 10, -20)
camera.position = new Vector3(-10, 10, -20);
camera.wheelPrecision = 12;
camera.attachControl(true)

let box = anu.create('box',
let box = anu.create('box',
'ourBox',
{
height: (d) => d.goals,
width: (d) => d.assits,
width: (d) => d.assists,
depth: (d) => d.points
},
{goals: 5, assits: 10, points: 2})
},
{goals: 5, assists: 10, points: 2})

return scene;

};
12 changes: 7 additions & 5 deletions docs/anu-examples/Details.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
//Import everything we need to create our babylon scene and write our visualization code.
//Import everything we need to create our babylon scene and write our visualization code.
import * as anu from '@jpmorganchase/anu' //Anu for Scene-Graph Manipulation
import cars from './data/cars.json' assert {type: 'json'}; //Our data
import { HemisphericLight, Vector3, Scene, ArcRotateCamera, ActionManager, ExecuteCodeAction, HighlightLayer, Color3} from '@babylonjs/core';
Expand All @@ -14,8 +14,10 @@ export function details(engine) {
//Add some lighting (name, position, scene)
new HemisphericLight('light1', new Vector3(0, 10, 0), scene)

//Add a camera that rotates around the origin
//Add a camera that rotates around the origin
const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.wheelPrecision = 20;
camera.minZ = 0;
camera.attachControl(true)
camera.position = new Vector3(2, 2, -3.5);

Expand Down Expand Up @@ -50,7 +52,7 @@ export function details(engine) {
UIBackground.background = "White";
advancedTexture.addControl(UIBackground);

//Create empty text block
//Create empty text block
let label = new TextBlock();
label.paddingLeftInPixels = 25;
label.paddingRightInPixels = 25;
Expand All @@ -70,7 +72,7 @@ export function details(engine) {
.positionY((d) => scaleY(d['Horsepower']))
.positionZ((d) => scaleZ(d['Acceleration']))
.material((d) => scaleC(d['Origin']))
//Babylon use an action system to trigger events form interacting with meshes, this is a simple example to show a hover interaction. grow when hover and shrink when stopped.
//Babylon use an action system to trigger events form interacting with meshes, this is a simple example to show a hover interaction. grow when hover and shrink when stopped.
.action((d,n,i) => new ExecuteCodeAction( //A flexible action that executes a function after the trigger
ActionManager.OnPointerOverTrigger,
() => {
Expand All @@ -80,7 +82,7 @@ export function details(engine) {
hoverPlane.isVisible = true; //unhide mesh
}
))
.action((d,n,i) => new ExecuteCodeAction( //Same as above but in reverse
.action((d,n,i) => new ExecuteCodeAction( //Same as above but in reverse
ActionManager.OnPointerOutTrigger,
() => {
highlighter.removeMesh(n);
Expand Down
32 changes: 17 additions & 15 deletions docs/anu-examples/FacetPosition.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,33 @@
import * as anu from '@jpmorganchase/anu'
import iris from './data/iris.json' assert {type: 'json'};
import {HemisphericLight, Vector3, Scene, ArcRotateCamera, ActionManager, InterpolateValueAction} from '@babylonjs/core';
import * as anu from '@jpmorganchase/anu'
import iris from './data/iris.json' assert {type: 'json'};
import {HemisphericLight, Vector3, Scene, ArcRotateCamera, ActionManager, InterpolateValueAction} from '@babylonjs/core';
import {extent, scaleOrdinal, scaleLinear, map,} from "d3";

export function facetPosition(engine){
const scene = new Scene(engine)
new HemisphericLight('light1', new Vector3(0, 10, 0), scene)
const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.wheelPrecision = 20;
camera.minZ = 0;
camera.attachControl(true)
camera.position = new Vector3(2,0,-5.5);

var scaleX = scaleLinear().domain(extent(map(iris, (d) => {return d.sepalLength}))).range([-1,1]).nice();
var scaleY = scaleLinear().domain(extent(map(iris, (d) => {return d.petalLength}))).range([-1,1]).nice();
var scaleZ = scaleLinear().domain(extent(map(iris, (d) => {return d.sepalWidth}))).range([-1,1]).nice();
var scaleX = scaleLinear().domain(extent(map(iris, (d) => {return d.sepalLength}))).range([-1,1]).nice();
var scaleY = scaleLinear().domain(extent(map(iris, (d) => {return d.petalLength}))).range([-1,1]).nice();
var scaleZ = scaleLinear().domain(extent(map(iris, (d) => {return d.sepalWidth}))).range([-1,1]).nice();

var scaleC = scaleOrdinal(anu.ordinalChromatic('d310').toStandardMaterial())

let CoT = anu.create("cot", "center", {}, {});

let chart = anu.selectName('center', scene);

let spheres = chart.bind('sphere', {diameter: 0.05}, iris)
.positionX((d) => scaleX(d.sepalLength))
.positionY((d) => scaleY(d.petalLength))
.positionZ((d) => scaleZ(d.sepalWidth))
let spheres = chart.bind('sphere', {diameter: 0.05}, iris)
.positionX((d) => scaleX(d.sepalLength))
.positionY((d) => scaleY(d.petalLength))
.positionZ((d) => scaleZ(d.sepalWidth))
.material((d,m,i) => scaleC(d.species))
.action((d,n,i) => new InterpolateValueAction(
.action((d,n,i) => new InterpolateValueAction(
ActionManager.OnPointerOverTrigger,
n,
'scaling',
Expand All @@ -38,7 +40,7 @@ export function facetPosition(engine){
'scaling',
new Vector3(1, 1, 1),
100));

anu.createAxes('test', scene, {parent: chart, scale: {x: scaleX, y: scaleY, z: scaleZ}});

chart.positionUI()
Expand All @@ -47,8 +49,8 @@ export function facetPosition(engine){


return scene;

};



10 changes: 6 additions & 4 deletions docs/anu-examples/Hover.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
//Import everything we need to create our babylon scene and write our visualization code.
//Import everything we need to create our babylon scene and write our visualization code.
import * as anu from '@jpmorganchase/anu' //Anu for Scene-Graph Manipulation
import penguins from './data/penguins.json' assert {type: 'json'}; //Our data
import { HemisphericLight, Vector3, Scene, ArcRotateCamera, ActionManager, InterpolateValueAction, ExecuteCodeAction, HighlightLayer, Color3} from '@babylonjs/core';
Expand All @@ -12,8 +12,10 @@ export function hover(engine) {
//Add some lighting (name, position, scene)
new HemisphericLight('light1', new Vector3(0, 10, 0), scene)

//Add a camera that rotates around the origin
//Add a camera that rotates around the origin
const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.wheelPrecision = 20;
camera.minZ = 0;
camera.attachControl(true)
camera.position = new Vector3(2, 2, -3.5);

Expand All @@ -36,7 +38,7 @@ export function hover(engine) {
.positionY((d) => scaleY(d['Beak Length (mm)']))
.positionZ((d) => scaleZ(d['Flipper Length (mm)']))
.material((d) => scaleC(d.Species))
//Babylon use an action system to trigger events form interacting with meshes, this is a simple example to show a hover interaction. grow when hover and shrink when stopped.
//Babylon use an action system to trigger events form interacting with meshes, this is a simple example to show a hover interaction. grow when hover and shrink when stopped.
.action((d, n, i) => new InterpolateValueAction( //Type of action
ActionManager.OnPointerOverTrigger, //Action Trigger
n, // The Mesh or Node to Change
Expand All @@ -56,7 +58,7 @@ export function hover(engine) {
highlighter.addMesh(n, Color3.White());
}
))
.action((d,n,i) => new ExecuteCodeAction( //Same as above but in reverse
.action((d,n,i) => new ExecuteCodeAction( //Same as above but in reverse
ActionManager.OnPointerOutTrigger,
() => {
highlighter.removeMesh(n);
Expand Down
8 changes: 5 additions & 3 deletions docs/anu-examples/Mesh_Map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ export function meshMap(babylonEngine){
const scene = new Scene(babylonEngine);
//Add some lighting
new HemisphericLight('light1', new Vector3(0, 10, 0), scene)
//Add a camera that rotates around the origin
//Add a camera that rotates around the origin
const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.wheelPrecision = 50;
camera.minZ = 0;
camera.attachControl(true)
camera.position = new Vector3(0, 2.5, -2)

Expand All @@ -26,15 +28,15 @@ export function meshMap(babylonEngine){
let colorScale = d3.scaleOrdinal(anu.ordinalChromatic('d310').toStandardMaterial())

states.material((d) => colorScale(d.NAME))
.prop("isPickable", false); //complex geometry has performance impact when pickable
.prop("isPickable", false); //complex geometry has performance impact when pickable
//if you need to select it wrap it in a empty mesh with bounding box set

let mapCot = anu.selectName('meshMap', scene);

let rootSphere = anu.create('sphere', 'sphere', {diameter: 0.003})
rootSphere.isVisible = false;
rootSphere.registerInstancedBuffer("color", 4);
rootSphere.instancedBuffers.color = new Color4(1,1,1,1)
rootSphere.instancedBuffers.color = new Color4(1,1,1,1)

let spheres = mapCot.bindInstance(rootSphere, data)
.positionX((d) => projection([d.longitude, d.latitude])[0])
Expand Down
Loading

0 comments on commit 033ef63

Please sign in to comment.