32:T5fa,md` In the original notebook, the *DataVisual* was instantiated by referencing: * a *data* object; * the *seaScape* object; * the respective *keys* for the *data* and *seaScape* ("name" and "visualKey"):

var seaScapeDataVisual = new dataVisual();																				
    seaScapeDataVisual.joinDataToVisual(data, seaScape, "name", "visualKey");

Or alternatively by passing an object to the class's constructor:

var seaScapeDataVisual = new dataVisual({data, visual: seaScape, dataKey: "name", visualKey: "visualKey"});

With the data embedded in the glTF file, the method can now be called with just *seaScape* as the paramater:

var seaScapeDataVisual = new dataVisual();																				
    seaScapeDataVisual.joinDataToVisual(seaScape);

Or simply:

var seaScapeDataVisual = new dataVisual({visual: seaScape});

The dataVisual's logic recognizes that the single parameter is instructing it to: * Look for the visualization data in [meshes](https://threejs.org/docs/index.html#api/en/objects/Mesh) that have properties in the [*.userData*](https://threejs.org/docs/index.html#api/en/core/Object3D.userData) object. * Those meshes derived their *.userData* values by way of the GLTFLoader's logic reference to the [glTF's extras](https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#reference-extras). `33:[{"id":"9cb1e0baf39f4069170c147015dec6d876cb941d95d91e056760876eddc55e5ccaf5c8e77bff2b7c76bc3e0a9ff529c9287a529b872f85d7caf7a334a375af6f","href":"https://static.observableusercontent.com/files/9cb1e0baf39f4069170c147015dec6d876cb941d95d91e056760876eddc55e5ccaf5c8e77bff2b7c76bc3e0a9ff529c9287a529b872f85d7caf7a334a375af6f","name":"seaScapeEmbeddedData.gltf","type":"model/gltf+json","lastModified":1662464207218.37,"size":44242}] 30:{"title":"DataVisual (Data + Visual) Design Pattern for WebGL 3D Assets using a glTF with Embedded Data","cells":[{"id":0,"value":"\nmd`# DataVisual (Data + Visual) Design Pattern for WebGL 3D Assets using a glTF with Embedded Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"toc(\"h2,h3,h4,h5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"md` ## Introduction\nThis notebook is a follow-up to orginal notebook: \n\n* [DataVisual (Data + Visual) Design Pattern for WebGL 3D Assets](https://observablehq.com/@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets) \n\nIt's worth reviewing that notebook first to understand this alternative strategy.\n\nThe [Three.js](https://threejs.org/) visualization is exactly the same as the original. \n\nThe only difference is that the data is sourced from ***within*** the glTF file exported from [Blender](https://www.blender.org/).\n\nThis embedded data strategy is appropriate for **low-data-volume-high-information-value** visualizations, like the ones demonstrated with [***DataVisual Visualization with Data-Embedded glTF Files***](https://observablehq.com/@mariodelgadosr/datavisual-visualization-with-data-embedded-gltf-files) and [***My Data Visualizer***](http://mydatavisualizer.com/).\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"embeddedData = md`## The Embedded Data\n\nAs noted, the data for the visualization is embedded in the glTF file; specifically, the [extras](https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#reference-extras) section.\n\nHere's what a specfic *extra* looks like for the first mesh within the glTF; Cube.001:\n

 \n        {\n            \"extras\": {\n                \"value\": 10.0\n            },\n            \"name\": \"Cube.001\",\n            \"primitives\": [\n                {\n                    \"attributes\": {\n                        \"NORMAL\": 23,\n                        \"POSITION\": 4\n                    },\n                    \"indices\": 12,\n                    \"material\": 0,\n                    \"mode\": 4\n                }\n            ]\n        }\n\n

\n\nUsing the [Three.js GLTFLoader](https://threejs.org/docs/index.html#examples/loaders/GLTFLoader), the *seaScape* object described in the original notebook now references the glTF file loaded with the embedded data:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"// https://observablehq.com/@observablehq/introduction-to-promises\n// https://talk.observablehq.com/t/return-object-in-a-callback/292\n// Not needed, but interesting: Promisifying three.js loaders: https://blackthread.io/blog/promisifying-threejs-loaders/\n\nmutable seaScape = {\n //const gltfUrl = 'https://gist.githubusercontent.com/MarioDelgadoSr/426650999c42a9906769ed0f37fb842d/raw/fb69e53d63a8e9ea3b044c16e74f3f726b2589e0/seaScapeEmbeddedData.gltf';\n\n // https://observablehq.com/@observablehq/stdlib#fileAttachmentSection\n const gltfURL = await FileAttachment(\"seaScapeEmbeddedData.gltf\").url();\n\n const output = new Promise((resolve, reject) => {\n new THREE.GLTFLoader().load(gltfURL, (x) => {\n if (x) resolve(x);\n else reject(new Error(\"load failed\"));\n });\n });\n\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"mutable seaScapeDataVisual = new dataVisual({visual: seaScape});","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`### The (Newly) Derived Join\n\nThe following table, is generated with properties in the newly instantiated *seaScapDataVisual*. \n\nIt displays :\n\n * A newly derived *.dataRow* object (with *.name* and *.value* properties); derived by way of the *.userData* property. \n * A *.visualObj* reference to the meshes participting in the join; with a direct reference to the *.name* property:\n\n|join.dataRow.name | join.dataRow.value | join.visualObj.name |\n|-----------|--------|----------| ${ \nseaScapeDataVisualJoin.map(join => `\\n| ${join.dataRow.name} | ${join.dataRow.value} | ${join.visualObj.name} `) }\n\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"md`As noted in the [original notebook](https://observablehq.com/@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets), [Python Scripts](https://github.com/MarioDelgadoSr/AddBlenderCustomPropertiesFromCSV) can be used to automate data embedding from within the [Blender application](https://www.blender.org/); as one option.\n\nBecause the glTF file is a parseable JSON object, other programmatic strategies can be used for the data enrichment as well.\n\nThe **aquaBot** use case/demonstration logic, from this point forward, is exactly the same as the [original notebook](https://observablehq.com/@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets); continuing with the [**Set Processing**](https://observablehq.com/@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets#setProcessing) section.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"steps_1_to_4 = { \n \n setProcessSteps1_to_4(mutable seaScapeDataVisual);\n \n return html`⬅ Click cell to see the set processing code for steps 1 through 4.`; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"visualization = { \n \n fnDisplay(container, seaScapeDataVisual);\n \n return html`⬅ Click cell to see visualization code.`; \n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"import {setProcessSteps1_to_4, fnDisplay} from \"@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1263,"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"},{"id":832,"value":"md`## Source Code on Github\n\nhttps://github.com/MarioDelgadoSr/DataVisual\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"md`## DataVisual in Use\n\n* [*My Data Visualizer*](https://github.com/MarioDelgadoSr/MyDataVisualizer)\n* [*My Warehouse Visualizer*](https://github.com/MarioDelgadoSr/MyWarehouseVisualizer)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"md`### [DataVisual](https://github.com/MarioDelgadoSr/DataVisual) Class`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"import {dataVisual} from \"@mariodelgadosr/hello-datavisual\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"//import {toc} from \"@mbostock/toc\"\nimport { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"md`### [Three.js](https://threejs.org/) WebGL Framework`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"// THREE JS Module\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 await require(`three@${version}/examples/js/loaders/GLTFLoader.js`).catch(\n () => {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`### [D3](https://d3js.org/) Data Visualization Framework`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"//D3 Reference\nd3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"md`### [dat.Gui](https://github.com/dataarts/dat.gui) Contoller (used for the visualization legend and displaying cubes selected with [raycasting](https://threejs.org/docs/index.html#api/en/core/Raycaster)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"//dat.gui\ndat = require('dat.gui')","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"md`### CSS Style to address [::before Observable CSS rule](https://talk.observablehq.com/t/before-content-for-li-element-affect-dat-gui-hoste-in-observable-notebook-cell/2050/2)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"html`