2f:null 30:["$","title",null,{"children":"Warehouse Visualization with DataVisual | Mario Delgado | Observable"}] 35:T72c,renderedScene = { // Lights and background warehouseDataVisual.visual.scene.add(new THREE.AmbientLight(0xffffff, 0.5)); warehouseDataVisual.visual.scene.add( new THREE.HemisphereLight(0xffffff, 0xffffff, 0.5) ); warehouseDataVisual.visual.scene.background = new THREE.Color("#d9dccb"); warehouseDataVisual.visual.scene.add(boundingBox); camera.far = Math.max( 10000, boundingBox.geometry.boundingSphere.radius * 2.5 ); // Position for a bird's eye view of the warehouse camera.position.set( boundingBox.geometry.boundingSphere.center.x, boundingBox.geometry.boundingSphere.radius, boundingBox.geometry.boundingSphere.radius * 2.5 ); camera.lookAt( boundingBox.geometry.boundingSphere.center.x, boundingBox.geometry.boundingSphere.center.y, boundingBox.geometry.boundingSphere.center.z ); const renderer = new THREE.WebGLRenderer({ antialias: true }); // https://threejs.org/docs/#examples/en/controls/OrbitControls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.target = new THREE.Vector3( boundingBox.geometry.boundingSphere.center.x, boundingBox.geometry.boundingSphere.center.y, boundingBox.geometry.boundingSphere.center.z ); controls.maxDistance = boundingBox.geometry.boundingSphere.radius * 4; controls.update(); renderer.setSize(width, height); renderer.setPixelRatio(devicePixelRatio); const imageDiv = document.createElement("div"); imageDiv.appendChild(renderer.domElement); warehouseDataVisual.addToolTip(renderer, camera); // https://observablehq.com/@observablehq/invalidation invalidation.then(() => (controls.dispose(), renderer.dispose())); while (true) { renderer.render(warehouseDataVisual.visual.scene, camera); yield imageDiv; } // while } // renderedScene36:T823,md`## Bird's Eye View The [*DataVisual (Data + Visual) Design Pattern for WebGL 3D Assets*](https://observablehq.com/@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets) notebook detailed the DataVisual design pattern. This notebook builds on that pattern with an introduction of a strategy for supply chain managers seeking insight into their warehousing operations. The same strategy is used in a robust implementation of warehouse visualizations in [*My Warehouse Visualizer*](https://mariodelgadosr.github.io/MyWarehouseVisualizer/); a custom/optimized version of the [*My Data Visualizer*](https://github.com/MarioDelgadoSr/MyDataVisualizer) for 3D WebGL images. [*DataVisual Visualization with Data-Embedded glTF Files*](https://observablehq.com/@mariodelgadosr/datavisual-visualization-with-data-embedded-gltf-files) demonstrates similar functionality with 3D images created in [Blender](http://blender.org) exported to a [glTF](https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md) file. The [interactive WebGL scene](#title) (use mouse to [zoom, pan and rotate](https://threejs.org/docs/#examples/en/controls/OrbitControls)) in this notebook initially displays a 3D warehouse with inventory visualized using the weight (*ITEM WGT*) metric; for light (green) to heavy (red) inventory. Select other column metrics from the Data Column drop-down for dynamic color scheme visualizations. Data for the visualization are in a [Google Sheet](https://docs.google.com/spreadsheets/d/14Xwqk9zJxkBt5enYEWTbOPUQrKn0AoMyFYaUePHtk8o/edit#gid=0) that details the dimensions for the warehouse storage slots and calculates whether-or-not the inventory for a designated storage slot is damaged. The data are accessed with [d3-fetch csv](https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#csv) via the [Google Sheets API](https://gsuiteupdates.googleblog.com/2015/06/publish-google-sheets-spreadsheets-in.html) that exposes it as a [comma-seperated values](https://en.wikipedia.org/wiki/Comma-separated_values) resource on the web.`37:T97c,md`## Layout and Inventory Data in the [***Small Warehouse*** Google Sheet](https://docs.google.com/spreadsheets/d/14Xwqk9zJxkBt5enYEWTbOPUQrKn0AoMyFYaUePHtk8o/edit#gid=0) * Column *LOCATION* in both the Layout and Inventory pages represents a common key between the datasets. * Columns *WIDTH*, *DEPTH*, *HEIGHT*, *X*, *Y*, *Z* in the Layout page are the dimensional and spatial attributes for a given storage slot. * Column *COLOR_CASES DAMAGED* in the Inventory page computes an [HTML Color Name](https://www.w3schools.com/colors/colors_names.asp) as a function of the *CASES DAMAGED* column. This computed color is parsed from the data in this notebook and is dynamically assigned to the slots in the visualization. * Dynamic color scale assignments are also available with [*My Warehouse Visualizer*](http://MyDataVisualizer.com/demo/warehouse) and in the visualization on this notebook. For example: * The *ITEM WGT* column can create a visualization that helps to quickly identify heavy items located high within a storage bay. * To reproduce above, select the *ITEM WGT* column, *RdYlGn (I)* (**I**nverted) color scale to visualize heavier objects on the red end of the coloring scale. * Warehousing best practices seeks to keep heavy items close to the ground for safety and quick storage/retrieval. However, when all the ground-level storage is occupied higher level storage locations are used: Screen Shot of Heavy Inventory Analysis from My Warehouse Visualizer

Screen Shot of Heavy Inventory Analysis from My Warehouse Visualizer

* Other column attributes associated with the layout and inventory are available for value-added analyses within [*My Warehouse Visualizer*](http://MyDataVisualizer.com/demo/warehouse). For example: * The *LINK_* column is utilized to create a data driven hyperlink referencing a specific row's *LOCATION* attribute value. * Column *ITEM NO* is prefixed with '\\s' to instruct the [*My Warehouse Visualizer*](http://MyDataVisualizer.com/demo/warehouse) data load [parser](https://observablehq.com/@d3/d3-autotype) to interpret the numeric values in the column as strings. `38:T8a3,warehouseVisual = { // Build a Three.js group of warehouse slots. // The slot geomemtry verticies are built using provided X,Y,Z,WIDTH,DEPTH and HEIGHT const warehouse = new THREE.Group(); warehouse.name = "warehouseGroup"; warehouse.visible = false; // https://www.cloudhadoop.com/2018/08/es6-map-class-tutorials-with-javascript.html const geometriesMap = new Map(); const edgeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.2 }); for (let i = 0; i < layoutData.length; i++) { const { LOCATION, X, Y, Z, WIDTH, HEIGHT, DEPTH } = layoutData[i]; const geometryKey = `${WIDTH}:${HEIGHT}:${DEPTH}`; // Re-use unique geometries: https://stackoverflow.com/questions/16820806/three-js-performance if (!geometriesMap.has(geometryKey)) { const cubeGeometry = new THREE.BoxBufferGeometry( parseFloat(WIDTH), parseFloat(HEIGHT), parseFloat(DEPTH) ); const edgeGeometry = new THREE.EdgesGeometry(cubeGeometry); geometriesMap.set(geometryKey, { cubeGeometry, edgeGeometry }); } // if const { cubeGeometry, edgeGeometry } = geometriesMap.get(geometryKey); const cubeMaterial = new THREE.MeshBasicMaterial({ transparent: true, wireframe: false }); const edge = new THREE.LineSegments(edgeGeometry, edgeMaterial); edge.renderOrder = 0; //https://threejs.org/docs/index.html#api/en/core/Object3D.renderOrder const pallet = new THREE.Mesh(cubeGeometry, cubeMaterial); pallet.material.opacity = 0.75; pallet.renderOrder = 1; const slot = new THREE.Group(); slot.add(edge); //First Child in Group: 0th index slot.add(pallet); //Second Child in Group: 1th index slot.name = LOCATION; slot.userData = layoutData[i]; //Translating slot warehouse coordinates to WebGL screen coordinates slot.position.x = parseFloat(X) + parseFloat(HEIGHT) / 2; slot.position.y = parseFloat(Z) + parseFloat(DEPTH) / 2; slot.position.z = parseFloat(Y) + parseFloat(HEIGHT) / 2; warehouse.add(slot); } // for const scene = new THREE.Scene(); scene.add(warehouse); return { scene: scene }; } // warehouseVisual39:T92a,visualization = { const min = d3.min(warehouseDataVisual.join, (j) => j.dataRow[selColumn]); const max = d3.max(warehouseDataVisual.join, (j) => j.dataRow[selColumn]); const domain = selColumn.startsWith("COLOR_") ? "Color assigned from data" : [min, max]; warehouseDataVisual.join.forEach((join) => { const color = selColumn.startsWith("COLOR_") ? (c) => join.dataRow[selColumn] ? join.dataRow[selColumn].toLowerCase() : "white" : d3[scaleType](colorScheme).domain(domain); warehouseDataVisual.setColorVisualObj( join.visualObj, color(join.dataRow[selColumn]) ); if (Object.keys(join.dataRow).length == 1) // Empty location join.visualObj.children[1].material.opacity = 0; }); // forEach warehouseDataVisual.visual.scene.getObjectByName( "warehouseGroup" ).visible = true; if (curve.path) curve.path.destroy(); curve.path = getReSlotPath("curvePath"); if (curve.path) { if (!!simulate) { curve.path.setColor( visualObjWithHeaviestItem.children[1].material.color.getHex() ); curve.path.animate(); } else { curve.path.destroy(); } // else } // if return Array.isArray(domain) ? { scale: colorScheme, scaleType: scaleType, domain: domain } : domain; function getReSlotPath(name) { const lowEmptyJoins = warehouseDataVisual.join .filter((join) => Object.keys(join.dataRow).length == 1) // 'empty' inventory .filter((join) => join.visualObj.userData.Z == 0); if (lowEmptyJoins.length == 0) return null; const exitLocation = new THREE.Vector3( boundingBox.geometry.boundingBox.max.x, 0, boundingBox.geometry.boundingBox.max.z ); const closestEmptyLocationToExitLocation = lowEmptyJoins.reduce( (accJoin, join) => { return exitLocation.distanceTo(accJoin.visualObj.position) < exitLocation.distanceTo(join.visualObj.position) ? accJoin : join; } ).visualObj; return new bezierPath({ parent: warehouseDataVisual.visual.scene, name: name, v1: visualObjWithHeaviestItem.position, v2: closestEmptyLocationToExitLocation.position, height: boundingBox.geometry.boundingBox.max.y * 5 }); } // getReSlotPath } // visualization3a:[{"id":"9ffc710a959abf329272596f3f36ae7d5d9dc117ac0853ac5a2cb57f449381c32b6ed535604c7b5a2ac0616606a6ed3bba531fc439b18748bcfbd864bb540aa2","href":"https://static.observableusercontent.com/files/9ffc710a959abf329272596f3f36ae7d5d9dc117ac0853ac5a2cb57f449381c32b6ed535604c7b5a2ac0616606a6ed3bba531fc439b18748bcfbd864bb540aa2","name":"Small Warehouse - Layout.csv","type":"text/csv","lastModified":1592504575286.11,"size":159898},{"id":"2580884714429ddfa7a08fee2b20ec2f06ce0f62726aa22236a873ff01dd24531e1b4c9c80a00e917442b8272f034e774053a96616c6342c751caeb7671acab6","href":"https://static.observableusercontent.com/files/2580884714429ddfa7a08fee2b20ec2f06ce0f62726aa22236a873ff01dd24531e1b4c9c80a00e917442b8272f034e774053a96616c6342c751caeb7671acab6","name":"Small Warehouse - Inventory.csv","type":"text/csv","lastModified":1592504575331.679,"size":189030},{"id":"239d0f0964b8bef20a413a61ca1c47038ba3bb22efa806f1c075af5fcd89250ecfdb95b1aaf38ace197bb944720935c939f7220e779c85e98b4ae83ca2ec7160","href":"https://static.observableusercontent.com/files/239d0f0964b8bef20a413a61ca1c47038ba3bb22efa806f1c075af5fcd89250ecfdb95b1aaf38ace197bb944720935c939f7220e779c85e98b4ae83ca2ec7160","name":"MyWarehouseVisualizerHeavyAnalysis@3.PNG","type":"image/png","lastModified":1591094691794.234,"size":538202},{"id":"19ecf0da78a8e72518454d618d989e166135422105ee22bdc6aceb1193b85b2806de2c2a7d059ce2de3dddf927e2b1753e801cd3c86fac01b8857d7e0f53a6a0","href":"https://static.observableusercontent.com/files/19ecf0da78a8e72518454d618d989e166135422105ee22bdc6aceb1193b85b2806de2c2a7d059ce2de3dddf927e2b1753e801cd3c86fac01b8857d7e0f53a6a0","name":"mouse.png","type":"image/png","lastModified":1592519428851.026,"size":3188}] 33:{"id":"4469b672950e4c4d","slug":"warehouse-visualization-with-datavisual","title":"Warehouse Visualization with DataVisual","thumbnail":"3dd1b160b2b7230a060109b06d2ac80b8819e020dfaa3649d53905418f781044","access_level":"public","create_time":"$D2020-05-21T20:13:46.203Z","update_time":"$D2026-09-13T19:56:24.592Z","view_time":null,"first_public_time":"$D2020-06-02T20:32:59.089Z","has_unpublished_edits":null,"fork":false,"stars":57,"starred":false,"owner":{"type":"team","id":"f57b9f8a19d28778","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":"starter_2024"},"version":1319,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}],"members":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":48,"collection":{"id":"324187e943ca943d","slug":"datavisual","title":"DataVisual","owner":{"id":"f57b9f8a19d28778","login":"mariodelgadosr","name":"Mario Delgado "}},"type":"notebook","body":{"title":"Warehouse Visualization with DataVisual","cells":[{"id":0,"value":"title = md`# Warehouse Visualization with [DataVisual](https://github.com/MarioDelgadoSr/DataVisual)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"{\n if (visualization == \"Color assigned from data\") {\n //https://codeburst.io/javascript-array-distinct-5edc93501dc4\n const distinctColumn = [\n ...new Set(\n warehouseDataVisual.data\n .filter((d) => d[selColumn])\n .map((d) => d[selColumn])\n )\n ];\n\n return html`Pre-assigned Colors in the Data: ${distinctColumn\n .map(\n (distinctCol) =>\n ` ${distinctCol} `\n )\n .join(\", \")}`;\n } // if\n else {\n const domain = [d3.min(visualization.domain), d3.max(visualization.domain)];\n\n return legend({\n width: width,\n color: d3[scaleType](domain, colorScheme),\n title: selColumn\n });\n } // else\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"sceneInputs = html`\n

${viewof selColumn}

${viewof simulate}${viewof scaleType}

\n ${await FileAttachment(\"mouse.png\").image()}\n

Zoom,pan and rotate image\n

\n \n

${viewof colorScheme}

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"md `## Re-slotting Animation\n\nThe re-slotting animation demonstrates one possible benefit of the 3D visualization of a physical warehouse. \n\nThe logic in the [***visualization***](#visualization) cell determines:\n\n * The location of warehouse exit on the lower right edge of the visualization;\n * The location of the heaviest item in the inventory;\n * An empty slot that is closest to the exit and at ground level;\n * An animation path to illustrate the re-slotting operation to the new location.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`## Warehouse Data Retrieved with [d3-fetch csv](https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#csv) from the [Published](https://docs.google.com/spreadsheets/d/14Xwqk9zJxkBt5enYEWTbOPUQrKn0AoMyFYaUePHtk8o/edit#gid=0) Google Sheet CSV Pages: [Layout](https://docs.google.com/spreadsheets/d/e/2PACX-1vT3XpGLIsLj3cyj4rdraGQggWcjN-eHL4HgHec0gEWGc2g5lZi5q0FRpj-I73CCpYE-lsVeiHmhzeA3/pub?gid=0&single=true&output=csv) and [Inventory](https://docs.google.com/spreadsheets/d/e/2PACX-1vT3XpGLIsLj3cyj4rdraGQggWcjN-eHL4HgHec0gEWGc2g5lZi5q0FRpj-I73CCpYE-lsVeiHmhzeA3/pub?gid=377990885&single=true&output=csv)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"//layoutData = await d3.csv(\"https://docs.google.com/spreadsheets/d/e/2PACX-1vT3XpGLIsLj3cyj4rdraGQggWcjN-eHL4HgHec0gEWGc2g5lZi5q0FRpj-I73CCpYE-lsVeiHmhzeA3/pub?gid=0&single=true&output=csv\");\n\n// Local file access to deal with network realiablity issues\nlayoutData = d3.csvParse(await FileAttachment(\"Small Warehouse - Layout.csv\").text(), d3.autoType);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"inventoryData = { \n \n // Parse: don't autoType designated string columns\n const parse = o => { \n Object.keys(o).forEach(k => o[k] = !k.startsWith(\"\\\\s\") ? d3.autoType([o[k]])[0] : o[k]) ; \n return o;\n }; \n // inventoryData = await d3.csv(\"https://docs.google.com/spreadsheets/d/e/2PACX-1vT3XpGLIsLj3cyj4rdraGQggWcjN-eHL4HgHec0gEWGc2g5lZi5q0FRpj-I73CCpYE-lsVeiHmhzeA3/pub?gid=377990885&single=true&output=csv\");\n \n // Local file access to deal with network realiablity issues\n const inventoryData = d3.csvParse(await FileAttachment(\"Small Warehouse - Inventory.csv\").text(), parse);\n \n inventoryData.forEach(d => Object.keys(d).filter(k => k.startsWith(\"LINK_\") ).forEach(k => delete d[k]) ); \n \n return inventoryData.map(d => { const o = {}; \n Object.keys(d).forEach(k => o[k.replace(\"\\\\s\",\"\")] = d[k] ) \n return o;\n }); \n\n \n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"md `## Objects for the Warehouse Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"md`### [three.js](https://threejs.org/) Scene for the Warehouse Visualization Derived from layoutData`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md `### [DataVisual](https://observablehq.com/@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets) 'Joining' inventoryData to warehouseVisual`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"warehouseDataVisual = \n\n{ \n const emptyLocations = layoutData.filter(l => inventoryData.findIndex(i => i.LOCATION == l.LOCATION) == -1)\n .map(l => ({LOCATION: l.LOCATION }) );\n \n return new dataVisual({ data: [...inventoryData, ...emptyLocations], // full and empty locations\n visual: warehouseVisual,\n dataKey: \"LOCATION\", // data's LOCATION attribute \n visualKey: \"LOCATION\" // found in slot's .userData\n });\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"curve =({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 0.1;\n const far = 10000; //Will be set by warehouse visualization logic as a function of the boundingSphere\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n return camera;\n} // camera\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"boundingBox = {\n \n const boundingBox = new THREE.BoxHelper(warehouseDataVisual.visual.scene, new THREE.Color( 'black' ));\n boundingBox.geometry.computeBoundingBox(); \n return boundingBox;\n \n} // boundingBox ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"visualObjWithHeaviestItem = \n warehouseDataVisual.join\n .sort((x,y) => d3.descending(x.dataRow[\"ITEM WGT\"], y.dataRow[\"ITEM WGT\"] ))[0].visualObj;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"md`🢇 Click cell to exapand code for ***viewof scaleType***` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"// https://github.com/d3/d3-scale/blob/v2.2.2/README.md#sequential-scales\nviewof scaleType =\n{\n const scales = \"Sequential,SequentialLog,SequentialSqrt,SequentialPow,SequentialSymlog\".split(\",\");\n\n const scaleType = select({\n title: \"D3 Scaling Logic\",\n description: \"\",\n options: scales.map(s => ({value: \"scale\" + s , label: s }) ),\n multiple: false,\n value: \"scale\" + scales[2]\n });\n\n return scaleType;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"md`🢇 Click cell to exapand code for ***viewof selColumn***` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"viewof selColumn = \n{\n // Data Columns\n const dataColumns = Object.keys(warehouseDataVisual.data[0])\n .filter(c => !c.startsWith(\"\\\\s\"))\n .filter(c => c.startsWith(\"COLOR\") || \n typeof warehouseDataVisual.data[0][c] != \"string\" );\n \n const selColumn = select({\n title: \"Select Data Column\",\n description: \"\",\n options: dataColumns.map(c => ({value: c, label: c.replace(\"_\", \" \")}) ),\n multiple: false,\n //value: dataColumns[dataColumns.findIndex(c => c.startsWith(\"COLOR\"))]\n value: \"ITEM WGT\"\n }); \n\n return selColumn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"md`🢇 Click cell to exapand code for ***viewof colorScheme***`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"viewof colorScheme = {\n const interpolators = \n \n d3.range(colorSchemes.length * 2).map(d => {\n\n if (d % 2 == 0) {\n return (\n {name: colorSchemes[d / 2].strColorScheme.substring(11)}\n )\n } else { \n return (\n { name: colorSchemes[(d-1)/2 ].strColorScheme.substring(11) + \" (I)\" ,\n value: t => colorSchemes[(d-1) /2].fnColorScheme(1-t)\n } \n ) \n } \n }) \n \n const colorScheme =\n \n colorInterpolatorPicker(\n { title: \"Color Scheme\",\n value: \"RdYlGn (I)\",\n interpolators: interpolators,\n w: 200\n }\n );\n \n \n return colorScheme\n\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"md`🢇 Click cell to exapand code for ***viewof simulate***`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"viewof simulate = checkbox({\n description: \"Simulate re-slotting of heaviest item to lowest slot near exit\",\n options: [{ value: \"Show Animation\", label: \"Animate re-slotting\" }],\n value: \"Show Animation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"textDemo = md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"// THREE JS Module\n/* Observable 2.0 Syntax:\nimport * as THREE from \"https://cdn.jsdelivr.net/npm/three@0.104.0/build/three.module.js\";\nimport {OrbitControls} from \"https://cdn.jsdelivr.net/npm/three@0.104.0/examples/jsm/controls/OrbitControls.js\";\n*/\nTHREE = {\n //const version = \"0.99.0\";\n const version = `0.104.0`;\n const THREE = (window.THREE =\n await require(`three@${version}/build/three.min.js`));\n await require(`three@${version}/examples/js/controls/OrbitControls.js`).catch(\n () => {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"import { select, checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"import { colorInterpolatorPicker } from \"@mariodelgadosr/color-schemes-and-interpolators-picker\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"import {colorSchemes} from \"@mariodelgadosr/programmatic-collection-of-interpolated-d3-color-schemes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"import {bezierPath} from \"@mariodelgadosr/animated-three-js-3d-quadratic-bezier-curves\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"import {toc} from \"@mbostock/toc\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md`### [DataVisual](https://github.com/MarioDelgadoSr/DataVisual) Class`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"import {dataVisual} from \"@mariodelgadosr/hello-datavisual\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"license = md `## License\n\nFree to all non-profit organizations. Businesses and commercial enterprises are granted a full-use license as long as they make their application freely available to non-profits.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md `## References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`\n* [Importing data from Google Spreadsheets into a notebook / webpage](https://observablehq.com/@bryangingechen/importing-data-from-google-spreadsheets-into-a-notebook-we)\n\n* [*My Warehouse Visualizer Documentation*](https://github.com/MarioDelgadoSr/MyWarehouseVisualizerDoc)\n\n* [*My Warehouse Visualizer*](https://github.com/MarioDelgadoSr/MyWarehouseVisualizer)\n\n* [*My Data Visualizer*](https://github.com/MarioDelgadoSr/MyDataVisualizer) \n\n* [DataVisual Visualization with Data-Embedded glTF Files](https://observablehq.com/@mariodelgadosr/datavisual-visualization-with-data-embedded-gltf-files)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 34:"$33:body"