32:T5d6,visualTree = { const sceneMap = getSceneMap(); const treeData = {name: "Scene", children: getChildren(sceneMap.get(gltfDataVisual.visual.scene).children) } return collapsibleTree( {data: treeData, labelTransform: { label: d => d.data.type ? d.data.type + ":" + d.data.name : d.data.name }, dx: 20 } ); function getSceneMap() { const sceneMap = new Map(); gltfDataVisual .join .map(j => j.visualObj) .forEach( visualObj => { while (visualObj.type != "Scene") { const parentMap = sceneMap.get(visualObj.parent) parentMap ? (!parentMap.children.includes(visualObj) ? parentMap.children.push(visualObj) : null) : sceneMap.set(visualObj.parent, {children: [visualObj]}); visualObj = visualObj.parent; } // while }); // forEach return sceneMap; } // getSceneMap function getChildren(children) { if (!children || children.length == 0) return []; else return children.map(c => ( {name: c.name, type: c.type, children: getChildren(c.children)} ) ); } // getChildren } // visualTree 33:T467,visualization = { const selColumn = !!visualize ? "Random Value" : "name"; let min = d3.min(gltfDataVisual.join, j => j.dataRow[selColumn]); let max = d3.max(gltfDataVisual.join, j => j.dataRow[selColumn]); let domain = selColumn.startsWith("name") ? "Original Colors" : [min,max].sort(( x, y ) => d3[sortingDirection]( x.value, y.value )); gltfDataVisual.join.forEach( ({visualObj, dataRow}) => { // visualObj.material.userData.originalColor assigned in code that creates visualObjects array let color = selColumn == "name" ? c => { const vObj = gltfDataVisual.getJoinByKey(c).visualObj; return gltfDataVisual.setColorVisualObj(vObj, vObj.material.userData.originalColor); } : d3[scaleType](colorScheme).domain(domain); gltfDataVisual.setColorVisualObj(visualObj, color(dataRow[selColumn])); }); //forEach return Array.isArray(domain) ? {scale: colorScheme, scaleType: scaleType, domain: domain} : domain; } // visualization 34:T932,filterVisualization = { // https://github.com/observablehq/stdlib/blob/master/README.md#Generators_observe // Signal signature being emitted by Vega-Lite // https://vega.github.io/vega-lite/docs/selection.html#filtering-data // Signal can be determined by using Vega-lite editor on 'chart'cell examples. // Signals can be further granularized by listening in on brush_'field'; // where 'field' is a field property, like 'name' const chartFilter = Generators.observe(notify => { const signaled = (name, value) => notify(value); scatterPlot.addSignalListener("brush", signaled); notify(scatterPlot.signal("brush")); return () => scatterPlot.removeSignalListener("brush", signaled); }); for (const value of chartFilter) { let filters = await value; if (Object.keys(filters).length != 0){ const visualObjs = gltfDataVisual .join .filter( ({visualObj, dataRow}) => { const color = Array.isArray(visualObj.material) ? visualObj.material[0].color.getHex() : visualObj.material.color.getHex(); return ( ( dataRow["Random Value"] >= filters["Random Value"][0] && dataRow["Random Value"] <= filters["Random Value"][1] ) && ( color >= filters.colorNum[0] && color <= filters.colorNum[1] ) ) } ) // filter .map( j => j.visualObj ); gltfDataVisual.isolateObjects(visualObjs); } else { gltfDataVisual.showAll(); } //else // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield yield filters; } // for } // filterVisualization35:T541,scene = { const scene = new THREE.Scene(); //scene.background = new THREE.Color(0xffffff); scene.background = new THREE.Color(backgroundColor); const boxHelper = new THREE.BoxHelper(gltfDataVisual.visual.scene, new THREE.Color( 'white' )); boxHelper.visible = false; //Just used for positioning of the image gltfDataVisual.visual.scene.add(boxHelper); boxHelper.geometry.computeBoundingBox(); // Centering gltfDataVisual.visual.scene.position.set(-boxHelper.geometry.boundingSphere.center.x, -boxHelper.geometry.boundingSphere.center.y, -boxHelper.geometry.boundingSphere.center.z ); scene.add(gltfDataVisual.visual.scene); //Bird's Eye View camera.position.set(0, Math.ceil(boxHelper.geometry.boundingSphere.radius) * 1.5, Math.ceil(boxHelper.geometry.boundingSphere.radius) * 1.5 ); //Lights const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 ); hemiLight.color.setHSL( 1, 1, 1 ); hemiLight.groundColor.setHSL( 0, 1, 0 ); hemiLight.position.set( 0, 50, 0 ); scene.add( hemiLight ); scene.add(new THREE.AmbientLight(0xffffff,0.8)) return scene; } // scene36:T6c7,viewof scatterPlot = { visualization; // https://vega.github.io/vega-lite/docs/scale.html#log const scale = scaleType == "scaleSequential" ? "linear" : scaleType.slice(15).toLowerCase(); const data = gltfDataVisual.join .map(j => { const color = Array.isArray(j.visualObj.material) ? j.visualObj.material[0].color : j.visualObj.material.color; let colorNum = color.getHex() == 0 ? 1 : color.getHex(); let colorHex = colorNum == 1 ? "#000001" : "#" +color.getHexString(); //displaying log scale return Object.assign( {}, j.dataRow, {colorNum: colorNum, colorHex: colorHex} ) }) .sort((x,y,) => d3.ascending(x["Random Value"], y["Random Value"] )); const scatterPlot = vl.markPoint({filled: true}) .title("Filtering Visual: Click/Drag Mouse in Scatter Plot") .data(data) .select(vl.selectInterval("brush")) .encode( vl.x().fieldQ("Random Value").scale({"type": scale }).sort(sortingDirection), vl.y().fieldQ("colorNum").title("Hex Color #") .scale({"type": "log" }) .axis({"format": "X"}), vl.color().fieldN("Random Value").legend(null).scale({"range": data.map(d => d.colorHex) } ) , vl.tooltip([vl.tooltip().fieldN("name").title("Object"), vl.fieldQ("Random Value"), vl.tooltip().fieldQ("colorNum").format("X").title("Color") ]) ) .width(200) .height(200) .render(); return scatterPlot; }37:[{"id":"19ecf0da78a8e72518454d618d989e166135422105ee22bdc6aceb1193b85b2806de2c2a7d059ce2de3dddf927e2b1753e801cd3c86fac01b8857d7e0f53a6a0","href":"https://static.observableusercontent.com/files/19ecf0da78a8e72518454d618d989e166135422105ee22bdc6aceb1193b85b2806de2c2a7d059ce2de3dddf927e2b1753e801cd3c86fac01b8857d7e0f53a6a0","name":"mouse.png","type":"image/png","lastModified":1592772547777.214,"size":3188}] 30:{"title":"Data Visualization of Randomly Assigned Values to Objects in glTF Files","cells":[{"id":0,"value":"md`# Data Visualization of Randomly Assigned Values to Objects in [glTF](https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md) Files`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1318,"value":"renderedScene = {\n \n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.autoRotate = !!rotate; \n\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n \n const imageDiv = document.createElement(\"div\");\n imageDiv.appendChild(renderer.domElement);\n \n if(!!enableTooltip) gltfDataVisual.addToolTip(renderer, camera);\n \n //https://observablehq.com/@observablehq/invalidation\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n \n while (true) {\n renderer.render(scene, camera);\n controls.update();\n yield imageDiv;\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1630,"value":"{ \n \n const selColumn = \"Random Value\";\n \n if (visualization == \"Original Colors\") {\n \n return md`Original Colors Assigned to Objects.`\n \n }\n else {\n \n const colorInterpolation = sortingDirection == \"ascending\" ? colorScheme : getInverseInterpolation(colorScheme);\n \n\n return legend({\n width: width,\n color: d3[scaleType](visualization.domain.sort((x,y) => d3[sortingDirection](x, y)), colorInterpolation),\n title: selColumn,\n });\n \n \n } \n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2046,"value":"sceneInputs = html`\n

\n ${viewof gltfURL}${viewof visualize}${viewof enableTooltip}${viewof backgroundColor}\n

\n ${await FileAttachment(\"mouse.png\").image()}\n Zoom,pan and rotate image\n

${viewof colorScheme}\n ${viewof scaleType}\n ${viewof sortingDirection}\n ${viewof rotate} \n

${viewof scatterPlot}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1486,"value":"md `## Randomly Generated Data for [${gltfURL.split(\"/\")[gltfURL.split(\"/\").length-1]}](${gltfURL})\n[glTF's Readme](${\"https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/\" + gltfURL.split(\"/\")[gltfURL.split(\"/\").length-1].split(\".\")[0]}) from [Repository](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"{\n \n const keys = Object.keys(gltfDataVisual.data[0]);\n \n // 'LINK_' is hyperlink feature available in 'My Data Visualizer': http://MyDataVisualizer.com\n // Filtering out here for table readability\n return table(gltfDataVisual.data, \n {\n limit: 500,\n enableFilter: false,\n enableCSVDownload: false,\n columns: keys.map(k => k == \"name\" ? {key: \"name\", name: \"Object Name Assigned Random Value\" } : k ) \n }\n ); //Links is \n\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2257,"value":"md `## Exapandable Tree for Visual's Objects\n\n* Click on tree node(s) to expand. \n\n* Note that each data-driven visual sub-component has been assigned a random value for the visualizations. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2259,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1489,"value":"md `## Objects for the DataVisual`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1553,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3126,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":2169,"value":"// https://observablehq.com/@mbostock/parameterized-notebooks\nparams = new URL(location).searchParams","pinned":false,"hidden":false,"mode":"ojs"},{"id":2167,"value":"// Usage: Notebook can be called with 'gltf' parameter. Example:\n// https://observablehq.com/@mariodelgadosr/data-visualization-of-randomly-assigned-values-to-objects?gltf=2CylinderEngine\ngltf = params.get(\"gltf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"loadedGLTF = new Promise((resolve, reject) => {\n new THREE.GLTFLoader().load(gltfURL, gltfFile => { \n if (gltfFile) resolve(gltfFile);\n else reject(new Error(\"load failed\"));\n });\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2782,"value":" visualObjects = { \n\n const visualObjects=[];\n\n loadedGLTF.scene.traverse(({material,name,type,uuid}) => {\n\n if (type === \"Mesh\") {\n visualObjects.push({ label: name, value: uuid });\n //Save original color\n material.userData.originalColor =\n \"#\" + material.color.getHexString();\n } //if\n }); //traverse \n\n\n return visualObjects; \n \n \n } // visualObjects","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"gltfDataVisual = {\n \n const randomArray = ((length) => {\n const result = [];\n while (result.length < length) {\n const randomNumber = Math.floor(Math.random() * 1000) + 1;\n if (!result.includes(randomNumber)) {\n result.push(randomNumber);\n }\n }\n return result;\n })(visualObjects.length);\n\n let i = 0;\n\n const randomData = visualObjects.map((o) => ({\n name: o.label,\n //\"Random Value\": parseInt(Math.max(.001,Math.random()) * 1000 )\n \"Random Value\": randomArray[i++]\n }));\n\n const dv = new dataVisual();\n\n dv.joinDataToVisual(randomData, loadedGLTF);\n\n return dv;\n} //gltfDataVisual","pinned":false,"hidden":false,"mode":"ojs"},{"id":1266,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":" camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 0.1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n return camera;\n} // camera","pinned":false,"hidden":false,"mode":"ojs"},{"id":3256,"value":"renderer = new THREE.WebGLRenderer({ antialias: true });","pinned":false,"hidden":false,"mode":"ojs"},{"id":1751,"value":"//https://observablehq.com/@mbostock/color-ramp\nfunction ramp(color, n = 10) {\n const canvas = DOM.canvas(n, 1);\n canvas.style.height = \"20px\";\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2110,"value":"md `### The following objects are embedded in the [sceneInputs](#sceneInputs) cell's [css grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3121,"value":"md`🢇 Click cell to exapand code for ***viewof scatterPlot***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2981,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2116,"value":"md`🢇 Click cell to exapand code for ***viewof gltfURL***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2011,"value":"viewof gltfURL = \n{\n const baseURL = \"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/\";\n let gltfString = \"Buggy,2CylinderEngine,BoxTextured,GearboxAssy,ReciprocatingSaw\"; \n const gltfs = gltfString.split(\",\");\n \n const imageIndex = gltfs.findIndex(g => g == gltf); \n const selectedImage = gltfs[imageIndex != -1 ? imageIndex : 0];\n \n \n const gltfURL = select({\n title: \"Select glTF to Visualize\",\n description: \"\",\n options: gltfs.map(g => ({value: baseURL + g + \"/glTF-Embedded/\" + g + \".gltf\", label: g }) ),\n multiple: false,\n value: baseURL + selectedImage + \"/glTF-Embedded/\" + selectedImage + \".gltf\"\n });\n \n return gltfURL;\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2752,"value":"md`🢇 Click cell to exapand code for ***viewof backgroundColor***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2749,"value":"viewof backgroundColor = color({\n value: \"#d6d6d6\",\n title: \"Background Color\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2860,"value":"md`🢇 Click cell to exapand code for ***viewof visualize***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2863,"value":"viewof visualize = checkbox({\n options: [{ value: \"visualize\", label: \"Visualize with Random Data\" }],\n value: \"visualize\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3284,"value":"md`🢇 Click cell to exapand code for ***viewof enableTooltip***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3286,"value":"viewof enableTooltip = checkbox({\n options: [{ value: \"tooltip\", label: \"Enable Tooltip on Visual\" }],\n value: \"tooltip\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2126,"value":"md`🢇 Click cell to exapand code for ***viewof scaleType***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2065,"value":"viewof scaleType =\n{\n const scales = \"Sequential,Sequential Sqrt,Sequential Log\".split(\",\");\n\n const scaleType = select({\n title: \"D3 Scaling Logic\",\n description: \"\",\n options: scales.map(s => ({value: \"scale\" + s.replace(' ' ,'') , label: s }) ),\n multiple: false,\n value: scales[0]\n });\n\n return scaleType;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2130,"value":"md`🢇 Click cell to exapand code for ***viewof sortingDirection***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2076,"value":"viewof sortingDirection = radio({\n title: 'Numeric Sorting',\n options: [\n { label: 'Low → High', value: 'ascending' },\n { label: 'High → Low', value: 'descending' }\n ],\n value: 'ascending'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2134,"value":"md`🢇 Click cell to exapand code for ***viewof colorScheme***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1915,"value":"//viewof colorScheme = colorSchemePicker(\"Color Scheme\",\"Rainbow\", 175);\n\nviewof 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: getInverseInterpolation(colorSchemes[(d-1) /2].fnColorScheme)\n } \n ) \n } \n }) \n \n const colorScheme =\n \n colorInterpolatorPicker(\n { title: \"Color Scheme\",\n value: \"Turbo\",\n interpolators: interpolators,\n w: 200\n }\n );\n \n \n return colorScheme\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3415,"value":"md`🢇 Click cell to exapand code for ***viewof rotate***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3418,"value":"viewof rotate = checkbox({\n options: [{ value: \"rotate\", label: \"Rotate Image\" }],\n value: \"rotate\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1483,"value":"md`## Frameworks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1480,"value":"md`### [DataVisual](https://github.com/MarioDelgadoSr/DataVisual) Class`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3392,"value":"import {dataVisual} from \"@mariodelgadosr/hello-datavisual\"","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":30,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"import { select, checkbox, radio, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1443,"value":"import { table } from \"@gampleman/table\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"import {legend} from \"@d3/color-legend\"\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2960,"value":"// import {colorInterpolatorPicker} from \"@zechasault/color-schemes-and-interpolators-picker\"\nimport { colorInterpolatorPicker } from \"@mariodelgadosr/color-schemes-and-interpolators-picker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1896,"value":"\nimport {colorSchemes, getInverseInterpolation} from \"@mariodelgadosr/programmatic-collection-of-interpolated-d3-color-schemes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2253,"value":"import {collapsibleTree} from \"@mariodelgadosr/collapsibletree\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2978,"value":"import {vl} from '@vega/vega-lite-api'\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3365,"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":1497,"value":"references = md `## References\n\n* [Repository of glTF files used in this notebook](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0)\n\n* [DataVisual Visualization with Data-Embedded glTF Files](https://observablehq.com/@mariodelgadosr/datavisual-visualization-with-data-embedded-gltf-files)\n\n* [DataVisual (Data + Visual) Design Pattern for WebGL 3D Assets using a glTF with Embedded Data](https://observablehq.com/@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets-u)\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\n* [Warehouse Visualization with DataVisual](https://observablehq.com/@mariodelgadosr/warehouse-visualization-with-datavisual)\n\n* [ThreeJS Example of loading, inspecting and modifying a scene from a glb file](https://observablehq.com/@vicapow/example-of-loading-and-modifying-a-glb-file)\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"}],"files":"$W37","stdlib":"1","titling":"auto"}