Example gallery update

Author: benjaminchlee

docs/anu-examples/donutChart.js

@@ -0,0 +1,91 @@
+// SPDX-License-Identifier: Apache-2.0
+// Copyright : J.P. Morgan Chase & Co.
+
+import * as anu from '@jpmorganchase/anu';
+import * as BABYLON from '@babylonjs/core';
+import * as d3 from 'd3';
+import 'manifold-3d';   //Required for Constructive Solid Geometry
+
+//Create and export a function that takes a Babylon engine and returns a Babylon Scene
+export async function donutChart(engine){   //Mark this function as async
+
+  //Create an empty Scene
+  const scene = new BABYLON.Scene(engine);
+  //Add some lighting
+  new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 10, -5), scene);
+  //Add a camera that rotates around the origin and adjust its properties
+  const camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
+  camera.position = new BABYLON.Vector3(0, 1.25, -1);
+  camera.wheelPrecision = 20;
+  camera.minZ = 0;
+  camera.attachControl(true);
+  
+  //Create some fake data
+  const data = [2, 3, 5, 7, 11, 13, 17, 19];
+
+  //Create our D3 pie generator which will calculate the required angles for our pie chart
+  const pie = d3.pie();
+  //Create arcs for our data
+  const arcs = pie(data);
+
+  //Create a D3 scale function that will color each pie segment
+  let scaleC = d3.scaleOrdinal(anu.ordinalChromatic('d310').toStandardMaterial());
+
+  //Create a Center of Transform TransformNode that serves the parent node for all our meshes that make up our chart
+  let CoT = anu.create('cot', 'cot');
+  //Select our CoT so that we have it as a Selection object
+  let chart = anu.selectName('cot', scene);
+
+  //Create cylinder meshes as children of our CoT to form our pie segments based on the arcs we calculated
+  let pieSegments = chart.bind('cylinder',
+    {
+      arc: (d,n,i) => (d.endAngle - d.startAngle) / (Math.PI * 2),  //Babylon cylinders use percentages, so we have to convert this value
+      diameter: 1,
+      height: 0.1,
+      enclose: true
+    },
+    arcs)
+    .rotationY((d,n,i) => d.startAngle - Math.PI / 2);   //Offset the rotation so that the segments "start" at 12 o'clock and not 3 o'clock
+
+
+  //Initialize the CSG
+  await BABYLON.InitializeCSG2Async();
+
+  //Create an "inner" cylinder that will be used to subtractively create the hole in the center of the pie to form a donut
+  const inner = anu.create('cylinder', 'cylinder', { diameter: 0.5 });
+  //Create the inner cylinder's CSG representation, which is used for calculations
+  const innerCSG = BABYLON.CSG2.FromMesh(inner);
+
+  //Keep a list of all the new Meshes we are about to create
+  const newMeshes = [];
+
+  //For each pie segment...
+  pieSegments.run((d,n,i) => {
+    //Create this segment's CSG representation
+    const segmentCSG = BABYLON.CSG2.FromMesh(n);
+    //Subtract the inner cylinder from the pie segment
+    const donutSegmentCSG = segmentCSG.subtract(innerCSG);
+    //Create the mesh from the CSG result
+    const newMesh = donutSegmentCSG.toMesh(n.name, scene, { centerMesh: false }); //Disable centerMesh to keep our original pivot point
+    //Store the reference so that we can rebuild our Selection
+    newMeshes.push(newMesh);
+
+    //Cleanup, destroy the CSGs
+    segmentCSG.dispose();
+    donutSegmentCSG.dispose();
+  })
+
+  //Because we created new meshes, we can create a new Anu Selection in case we want to further manipulate them
+  const donutSegments = new anu.Selection(newMeshes);   //Here we use the list of mesh references re created
+  donutSegments.prop('parent', CoT)         //Re-set the parent
+    .metadata('data', (d,n,i) => arcs[i])   //Re-set the data
+    .material((d,n,i) => scaleC(i));        //Set the material to color the segments
+    
+  //Dispose of the original pie segments
+  pieSegments.dispose();
+  //Dispose of the inner cylinder and its CSG representation
+  inner.dispose();
+  innerCSG.dispose();
+
+  return scene;
+}

docs/anu-examples/layout.js

@@ -110,47 +110,47 @@ export function layout(engine) {
 
   let advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI('UI');
 
-  // let selectBox = new GUI.SelectionPanel('sp', [rowsGroup, curveGroup, marginXgroup, marginYgroup, layoutGroup]);
-  // selectBox.width = 0.2;
-  // selectBox.height = 1.5;
-  // selectBox.scaleX = 0.6;
-  // selectBox.scaleY = 0.6;
-  // selectBox.background = '#FFFFFF';
-  // selectBox.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-  // selectBox.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER;
-  // selectBox.fontFamily = 'times new roman';
-  // selectBox.fontSize = '14pt';
-
-  // let rect2 = GUI.Button.CreateSimpleButton('button1', 'add chart');
-  // rect2.width = 0.2; // 0.2 = 20%
-  // rect2.height = '40px';
-  // rect2.cornerRadius = 20;
-  // rect2.color = 'white';
-  // rect2.thickness = 4;
-  // rect2.background = 'blue';
-
-  // rect2.top = 200; //200 px
-  // rect2.left = '10%';
-  // rect2.onPointerClickObservable.add(() => {
-  //     addChart(scene);
-  // });
-
-  // let rect1 = GUI.Button.CreateSimpleButton('button2', 'remove chart');
-  // rect1.width = 0.2; // 0.2 = 20%
-  // rect1.height = '40px';
-  // rect1.cornerRadius = 20;
-  // rect1.color = 'white';
-  // rect1.thickness = 4;
-  // rect1.background = 'blue';
-
-  // rect1.top = 250; //200 px
-  // rect1.left = '10%';
-  // rect1.onPointerClickObservable.add(() => {
-  //     removeChart(scene);
-  // });
-  // advancedTexture.addControl(rect1);
-  // advancedTexture.addControl(rect2);
-  // advancedTexture.addControl(selectBox);
+  let selectBox = new GUI.SelectionPanel('sp', [rowsGroup, curveGroup, marginXgroup, marginYgroup, layoutGroup]);
+  selectBox.width = 0.2;
+  selectBox.height = 1.5;
+  selectBox.scaleX = 0.6;
+  selectBox.scaleY = 0.6;
+  selectBox.background = '#FFFFFF';
+  selectBox.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+  selectBox.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+  selectBox.fontFamily = 'times new roman';
+  selectBox.fontSize = '14pt';
+
+  let rect2 = GUI.Button.CreateSimpleButton('button1', 'add chart');
+  rect2.width = 0.2; // 0.2 = 20%
+  rect2.height = '40px';
+  rect2.cornerRadius = 20;
+  rect2.color = 'white';
+  rect2.thickness = 4;
+  rect2.background = 'blue';
+
+  rect2.top = 200; //200 px
+  rect2.left = '10%';
+  rect2.onPointerClickObservable.add(() => {
+      addChart(scene);
+  });
+
+  let rect1 = GUI.Button.CreateSimpleButton('button2', 'remove chart');
+  rect1.width = 0.2; // 0.2 = 20%
+  rect1.height = '40px';
+  rect1.cornerRadius = 20;
+  rect1.color = 'white';
+  rect1.thickness = 4;
+  rect1.background = 'blue';
+
+  rect1.top = 250; //200 px
+  rect1.left = '10%';
+  rect1.onPointerClickObservable.add(() => {
+      removeChart(scene);
+  });
+  advancedTexture.addControl(rect1);
+  advancedTexture.addControl(rect2);
+  advancedTexture.addControl(selectBox);
 
   return scene;
 }

docs/anu-examples/pieChart.js

@@ -39,6 +39,7 @@ export function pieChart(engine){
   let pieSegments = chart.bind('cylinder',
     {
       arc: (d,n,i) => (d.endAngle - d.startAngle) / (Math.PI * 2),  //Babylon cylinders use percentages, so we have to convert this value
+      diameter: 1,
       height: 0.1,
       enclose: true   //Only strictly necessary to set to true if the pie segments are separated from each other
     },

docs/anu-examples/prismMap.js

@@ -38,13 +38,13 @@ export function prismMap(engine) {
   }, {});
 
   //Create a D3 scale to map the airport counts with the height of the prisms
-  let scaleY = d3.scaleLinear().domain([0, d3.max(Object.values(counts))]).range([0, 0.25]);
+  let scaleY = d3.scaleLinear().domain([0, d3.max(Object.values(counts))]).range([0, -0.25]); //Negative range because our map is technically upside down
 
   //Our geoJSON uses full state names but our airport data uses abbreviations
   const stateAbbreviations = { "Alabama": "AL", "Alaska": "AK", "Arizona": "AZ", "Arkansas": "AR", "California": "CA", "Colorado": "CO", "Connecticut": "CT", "Delaware": "DE", "District of Columbia": "DC", "Florida": "FL", "Georgia": "GA", "Hawaii": "HI", "Idaho": "ID", "Illinois": "IL", "Indiana": "IN", "Iowa": "IA", "Kansas": "KS", "Kentucky": "KY", "Louisiana": "LA", "Maine": "ME", "Maryland": "MD", "Massachusetts": "MA", "Michigan": "MI", "Minnesota": "MN", "Mississippi": "MS", "Missouri": "MO", "Montana": "MT", "Nebraska": "NE", "Nevada": "NV", "New Hampshire": "NH", "New Jersey": "NJ", "New Mexico": "NM", "New York": "NY", "North Carolina": "NC", "North Dakota": "ND", "Ohio": "OH", "Oklahoma": "OK", "Oregon": "OR", "Pennsylvania": "PA", "Rhode Island": "RI", "South Carolina": "SC", "South Dakota": "SD", "Tennessee": "TN", "Texas": "TX", "Utah": "UT", "Vermont": "VT", "Virginia": "VA", "Washington": "WA", "West Virginia": "WV", "Wisconsin": "WI", "Wyoming": "WY" };
 
-  //Assign each state a Material and therefore, their color, based on the number of airports
-  states.scalingY((d) => -scaleY(counts[stateAbbreviations[d.NAME]]))
-  
+  //Adjust the height of each state based on the number of airports
+  states.scalingY((d) => scaleY(counts[stateAbbreviations[d.NAME]]))
+
   return scene;
 }

docs/examples/donut_chart.md

@@ -22,6 +22,7 @@
     "d3": "^7.9.0",
     "d3-force-3d": "^3.0.5",
     "earcut": "^3.0.1",
+    "manifold-3d": "^3.2.1",
     "vite-plugin-dynamic-import": "^1.5.0",
     "vitepress": "^1.0.1"
   }