Skip to content

Commit 2f1df2e

Browse files
benjaminchleebenjaminchlee
committed
Update examples, disabled embellished chart example
1 parent 203358f commit 2f1df2e

7 files changed

Lines changed: 155 additions & 146 deletions

File tree

‎docs/.vitepress/config.js‎

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default defineConfig({
8787
items: [
8888
{ text: '2D Scatter Plot', link: './scatter_plot_2D' },
8989
{ text: '3D Scatter Plot', link: './scatter_plot_3D' },
90-
{ text: 'Embellished Chart', link: './embellished_chart' },
90+
// { text: 'Embellished Chart', link: './embellished_chart' },
9191
{ text: 'Dimensionality Reduction Plot', link: './dimensionality_reduction_plot' },
9292
]
9393
},
@@ -172,46 +172,55 @@ export default defineConfig({
172172
{ icon: 'github', link: 'https://github.com/jpmorganchase/anu' }
173173
]
174174
},
175-
vite: {
176-
// worker: {
177-
// format: "es"
178-
// },
179-
rollupOptions: {
180-
external: ["@babylonjs/core", "@babylonjs/gui", "@babylonjs/loaders", "@babylonjs/inspector" ],
175+
vite: {
176+
// worker: {
177+
// format: "es"
178+
// },
179+
rollupOptions: {
180+
external: ["@babylonjs/core", "@babylonjs/gui", "@babylonjs/loaders", "@babylonjs/inspector" ],
181+
},
182+
optimizeDeps: { // 👈 optimizedeps
183+
esbuildOptions: {
184+
target: "esnext",
185+
// Node.js global to browser globalThis
186+
define: {
187+
global: 'globalThis'
181188
},
182-
optimizeDeps: { // 👈 optimizedeps
183-
esbuildOptions: {
184-
target: "esnext",
185-
// Node.js global to browser globalThis
186-
define: {
187-
global: 'globalThis'
188-
},
189-
supported: {
190-
bigint: true
191-
},
192-
},
193-
exclude: ['@babylonjs/havok']
189+
supported: {
190+
bigint: true
194191
},
195-
// server: {
196-
// // watch: {
197-
// // followSymlinks: false,
198-
// // },
199-
// // headers: {
200-
// // 'Cross-Origin-Embedder-Policy': 'require-corp',
201-
// // 'Cross-Origin-Opener-Policy': 'same-origin',
202-
// // },
192+
},
193+
exclude: ['@babylonjs/havok']
194+
},
195+
// server: {
196+
// // watch: {
197+
// // followSymlinks: false,
198+
// // },
199+
// // headers: {
200+
// // 'Cross-Origin-Embedder-Policy': 'require-corp',
201+
// // 'Cross-Origin-Opener-Policy': 'same-origin',
202+
// // },
203+
// },
204+
plugins: [
205+
dsv(),
206+
dynamicImport(),
207+
// {
208+
// name: 'disable-vp-static-data-plugin',
209+
// configResolved(config) {
210+
// // @ts-ignore
211+
// config.plugins.splice(
212+
// config.plugins.findIndex((p) => p.name === 'vitepress:data'),
213+
// 1
214+
// );
215+
// },
203216
// },
204-
plugins: [
205-
dsv(),
206-
dynamicImport(),
207-
208-
// {configureServer(server) {
209-
// server.middlewares.use((_req, res, next) => {
210-
// res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
211-
// res.setHeader("Cross-Origin-Opener-Policy", "same-origin")
212-
// next();
213-
// });
214-
//}
215-
]
216-
}
217+
// {configureServer(server) {
218+
// server.middlewares.use((_req, res, next) => {
219+
// res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
220+
// res.setHeader("Cross-Origin-Opener-Policy", "same-origin")
221+
// next();
222+
// });
223+
//}
224+
]
225+
}
217226
})

‎docs/anu-examples/embellishedChart.js‎

Lines changed: 100 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,111 @@
1-
// SPDX-License-Identifier: Apache-2.0
2-
// Copyright : J.P. Morgan Chase & Co.
1+
// // SPDX-License-Identifier: Apache-2.0
2+
// // Copyright : J.P. Morgan Chase & Co.
33

4-
import * as anu from '@jpmorganchase/anu';
5-
import * as BABYLON from '@babylonjs/core';
6-
import * as d3 from 'd3';
7-
import '@babylonjs/loaders'; //Required to load meshes
4+
// import * as anu from '@jpmorganchase/anu';
5+
// import * as BABYLON from '@babylonjs/core';
6+
// import * as d3 from 'd3';
7+
// import '@babylonjs/loaders'; //Required to load meshes
88

9-
//Create and export a function that takes a Babylon engine and returns a Babylon Scene
10-
export async function embellishedChart(engine){ //Mark this function as async
9+
// //Create and export a function that takes a Babylon engine and returns a Babylon Scene
10+
// export async function embellishedChart(engine){ //Mark this function as async
1111

12-
//Create an empty Scene
13-
const scene = new BABYLON.Scene(engine);
14-
//Add some lighting
15-
new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 10, -5), scene);
16-
//Add a camera that rotates around the origin and adjust its properties
17-
const camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 0, new BABYLON.Vector3(0, -0.4, 0), scene);
18-
camera.position = new BABYLON.Vector3(2, 0.75, -2);
19-
camera.wheelPrecision = 20;
20-
camera.minZ = 0;
21-
camera.attachControl(true);
12+
// //Create an empty Scene
13+
// const scene = new BABYLON.Scene(engine);
14+
// //Add some lighting
15+
// new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 10, -5), scene);
16+
// //Add a camera that rotates around the origin and adjust its properties
17+
// const camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 0, new BABYLON.Vector3(0, -0.4, 0), scene);
18+
// camera.position = new BABYLON.Vector3(2, 0.75, -2);
19+
// camera.wheelPrecision = 20;
20+
// camera.minZ = 0;
21+
// camera.attachControl(true);
2222

23-
//Load a 3D model asynchronously, here we use one from the Babylon.js Assets library licensed under CC BY 4.0
24-
BABYLON.ImportMeshAsync('https://raw.githubusercontent.com/BabylonJS/Assets/refs/heads/master/meshes/aerobatic_plane.glb', scene).then(result => {
25-
//Get the mesh
26-
let planeMesh = result.meshes[0];
23+
// //Load a 3D model asynchronously, here we use one from the Babylon.js Assets library licensed under CC BY 4.0
24+
// BABYLON.ImportMeshAsync('https://raw.githubusercontent.com/BabylonJS/Assets/refs/heads/master/meshes/aerobatic_plane.glb', scene).then(result => {
25+
// //Get the mesh
26+
// let planeMesh = result.meshes[0];
2727

28-
//Create some fake data of planes
29-
let data = [
30-
{
31-
"model": "Plane A",
32-
"maxSpeed": 350,
33-
"weight": 2100,
34-
"maxAltitude": 11000
35-
},
36-
{
37-
"model": "Plane B",
38-
"maxSpeed": 150,
39-
"weight": 1600,
40-
"maxAltitude": 9500
41-
},
42-
{
43-
"model": "Plane C",
44-
"maxSpeed": 430,
45-
"weight": 3200,
46-
"maxAltitude": 11500
47-
},
48-
{
49-
"model": "Plane D",
50-
"maxSpeed": 230,
51-
"weight": 2100,
52-
"maxAltitude": 10500
53-
},
54-
{
55-
"model": "Plane E",
56-
"maxSpeed": 390,
57-
"weight": 2800,
58-
"maxAltitude": 12000
59-
},
60-
{
61-
"model": "Plane F",
62-
"maxSpeed": 190,
63-
"weight": 2500,
64-
"maxAltitude": 9000
65-
},
66-
{
67-
"model": "Plane G",
68-
"maxSpeed": 310,
69-
"weight": 1700,
70-
"maxAltitude": 10000
71-
},
72-
{
73-
"model": "Plane H",
74-
"maxSpeed": 270,
75-
"weight": 1500,
76-
"maxAltitude": 9500
77-
}
78-
];
28+
// //Create some fake data of planes
29+
// let data = [
30+
// {
31+
// "model": "Plane A",
32+
// "maxSpeed": 350,
33+
// "weight": 2100,
34+
// "maxAltitude": 11000
35+
// },
36+
// {
37+
// "model": "Plane B",
38+
// "maxSpeed": 150,
39+
// "weight": 1600,
40+
// "maxAltitude": 9500
41+
// },
42+
// {
43+
// "model": "Plane C",
44+
// "maxSpeed": 430,
45+
// "weight": 3200,
46+
// "maxAltitude": 11500
47+
// },
48+
// {
49+
// "model": "Plane D",
50+
// "maxSpeed": 230,
51+
// "weight": 2100,
52+
// "maxAltitude": 10500
53+
// },
54+
// {
55+
// "model": "Plane E",
56+
// "maxSpeed": 390,
57+
// "weight": 2800,
58+
// "maxAltitude": 12000
59+
// },
60+
// {
61+
// "model": "Plane F",
62+
// "maxSpeed": 190,
63+
// "weight": 2500,
64+
// "maxAltitude": 9000
65+
// },
66+
// {
67+
// "model": "Plane G",
68+
// "maxSpeed": 310,
69+
// "weight": 1700,
70+
// "maxAltitude": 10000
71+
// },
72+
// {
73+
// "model": "Plane H",
74+
// "maxSpeed": 270,
75+
// "weight": 1500,
76+
// "maxAltitude": 9500
77+
// }
78+
// ];
7979

80-
//Create the D3 functions that we will use to scale our data dimensions to desired output ranges for our visualization
81-
let scaleX = d3.scaleBand().domain(Object.values(data.map(d => d.model))).range([-1,1]).paddingInner(1).paddingOuter(0.5);
82-
let scaleY = d3.scaleLinear().domain(d3.extent(data.map(d => d.maxAltitude))).range([-0.25, 0.25]);
83-
let scaleZ = d3.scaleLinear().domain([0, Math.max(...data.map(d => d.maxSpeed))]).range([-1, 1]).nice();
84-
let scaleSize = d3.scaleLinear().domain([0, Math.max(...data.map(d => d.weight))]).range([0, 2]);
80+
// //Create the D3 functions that we will use to scale our data dimensions to desired output ranges for our visualization
81+
// let scaleX = d3.scaleBand().domain(Object.values(data.map(d => d.model))).range([-1,1]).paddingInner(1).paddingOuter(0.5);
82+
// let scaleY = d3.scaleLinear().domain(d3.extent(data.map(d => d.maxAltitude))).range([-0.25, 0.25]);
83+
// let scaleZ = d3.scaleLinear().domain([0, Math.max(...data.map(d => d.maxSpeed))]).range([-1, 1]).nice();
84+
// let scaleSize = d3.scaleLinear().domain([0, Math.max(...data.map(d => d.weight))]).range([0, 2]);
8585

86-
//Create a Center of Transform TransformNode that serves the parent node for all our meshes that make up our chart
87-
let CoT = anu.create('cot', 'cot');
88-
//Select our CoT so that we have it as a Selection object
89-
let chart = anu.selectName('cot', scene);
86+
// //Create a Center of Transform TransformNode that serves the parent node for all our meshes that make up our chart
87+
// let CoT = anu.create('cot', 'cot');
88+
// //Select our CoT so that we have it as a Selection object
89+
// let chart = anu.selectName('cot', scene);
9090

91-
//Create clones of the plane mesh as children of our CoT for each row of our data and set their visual encodings using method chaining
92-
let planes = chart.bindClone(planeMesh, data)
93-
.position((d) => new BABYLON.Vector3(scaleX(d.model), scaleY(d.maxAltitude) - 0.125, scaleZ(d.maxSpeed))) //Offset y a little as the plane model's origin is not centered
94-
.rotation(new BABYLON.Vector3(0, 0, 0))
95-
.scaling((d) => new BABYLON.Vector3(scaleSize(d.weight), 1, scaleSize(d.weight)));
91+
// //Create clones of the plane mesh as children of our CoT for each row of our data and set their visual encodings using method chaining
92+
// let planes = chart.bindClone(planeMesh, data)
93+
// .position((d) => new BABYLON.Vector3(scaleX(d.model), scaleY(d.maxAltitude) - 0.125, scaleZ(d.maxSpeed))) //Offset y a little as the plane model's origin is not centered
94+
// .rotation(new BABYLON.Vector3(0, 0, 0))
95+
// .scaling((d) => new BABYLON.Vector3(scaleSize(d.weight), 1, scaleSize(d.weight)));
9696

97-
//Use the Axes prefab with our three D3 scales
98-
anu.createAxes('myAxes',
99-
{
100-
scale: { x: scaleX, y: scaleY, z: scaleZ },
101-
labelTicks: { y: scaleY.ticks(6)},
102-
parent: chart
103-
}
104-
);
97+
// //Use the Axes prefab with our three D3 scales
98+
// anu.createAxes('myAxes',
99+
// {
100+
// scale: { x: scaleX, y: scaleY, z: scaleZ },
101+
// labelTicks: { y: scaleY.ticks(6)},
102+
// parent: chart
103+
// }
104+
// );
105105

106-
//Disable the original plane mesh to hide it
107-
planeMesh.setEnabled(false);
108-
});
106+
// //Disable the original plane mesh to hide it
107+
// planeMesh.setEnabled(false);
108+
// });
109109

110-
return scene;
111-
}
110+
// return scene;
111+
// }

‎docs/anu-examples/histogram.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function histogram(engine) {
1515
new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 10, 0), scene);
1616
//Add a camera that rotates around the origin and adjust its properties
1717
const camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 0, new BABYLON.Vector3(0, 0.5, 0), scene);
18-
camera.position = new BABYLON.Vector3(0, 0.5, -1.75)
18+
camera.position = new BABYLON.Vector3(0, 0.5, -2)
1919
camera.wheelPrecision = 20;
2020
camera.minZ = 0;
2121
camera.attachControl(true);

‎docs/anu-examples/histogramMultiple.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function histogramMultiple(engine) {
1515
new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 10, 0), scene);
1616
//Add a camera that rotates around the origin and adjust its properties
1717
const camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 0, new BABYLON.Vector3(0, 0.5, 0), scene);
18-
camera.position = new BABYLON.Vector3(0, 1, -1.5)
18+
camera.position = new BABYLON.Vector3(0, 1, -2)
1919
camera.wheelPrecision = 20;
2020
camera.minZ = 0;
2121
camera.attachControl(true);

‎docs/anu-examples/trajectorySingle3D.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function trajectorySingle3D(engine){
1313
new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 10, -10), scene);
1414
//Add a camera that rotates around the origin and adjust its properties
1515
const camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
16-
camera.position = new BABYLON.Vector3(0, 2, -5);
16+
camera.position = new BABYLON.Vector3(2, 1, -4);
1717
camera.wheelPrecision = 20;
1818
camera.minZ = 0;
1919
camera.attachControl(true);

‎docs/examples/embellished_chart.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
---
1+
<!-- ---
22
aside: false
33
---
44
<script setup>
@@ -12,4 +12,4 @@ Visualization of the properties of fake planes using 3D models of planes as embe
1212
1313
::: code-group
1414
<<< @/./anu-examples/embellishedChart.js
15-
:::
15+
::: -->

‎docs/examples/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ layout: page
1717
<div class="cards">
1818
<cardImg title="2D Scatter Plot" img="/anu/assets/example-images/scatterplot2D.webp" link="/anu/examples/scatter_plot_2D"></cardImg>
1919
<cardImg title="3D Scatter Plot" img="/anu/assets/example-images/scatterplot3D.webp" link="/anu/examples/scatter_plot_3D"></cardImg>
20-
<cardImg title="Embellished Chart" img="/anu/assets/example-images/embellishedChart.webp" link="/anu/examples/embellished_chart"></cardImg>
20+
<!-- <cardImg title="Embellished Chart" img="/anu/assets/example-images/embellishedChart.webp" link="/anu/examples/embellished_chart"></cardImg> -->
2121
<cardImg title="Dimensionality Reduction Plot" img="/anu/assets/example-images/dimensionalityReductionPlot.webp" link="/anu/examples/dimensionality_reduction_plot"></cardImg>
2222
</div>
2323
</div>

0 commit comments

Comments
 (0)