33:T13ad, viewof chart = { const scaletype = scaleType == "scaleSequential" ? "linear" : scaleType.slice(15).toLowerCase(); const dataColumn = getColumnForMetric(); const data = gltfDataVisual.join .map(j => j.dataRow) .filter(d => scaletype == "log" ? d[dataColumn] != 0 : true); const chart = vl.markBar({"stroke": "#000"}) .data(data) .title("Filtering: Hover over object on visual or click/drag mouse to select bars on chart ") .width(width) // https://vega.github.io/vega-lite/docs/size.html#autosize .autosize({type: 'fit-x', contains: 'padding'}) .height(225); // let barOpacity = vl.opacity().value(1); if ( !dataColumn.startsWith("COLOR_") ){ const colorDomain = d3.sort(d3.extent(data, d => d[dataColumn]), d3[sortingDirection]); const coloring = (selCol, dataCol) => dataColumn == selColumn ? d3[scaleType](colorScheme).domain(colorDomain)(dataCol) : selCol; // Sorted by dataColumn in the user selected sortingDirection const sortedData = data.map(d => ({name: d.name, dataColumn: d[dataColumn], selColumn: d[selColumn]} )) .sort((x,y) => d3[sortingDirection](x.dataColumn, y.dataColumn)); // Create nameDomain in dataColumn value order based on user selected sortingDirection const nameDomain = sortedData.map(d => d.name); // Create colors in ascending object name order per Vega specs for discrete ranges // https://vega.github.io/vega-lite/docs/scale.html#discrete const range = sortedData.sort((x,y) => d3.ascending(x.name,y.name)) .map(d => coloring( d.selColumn, d.dataColumn ) ); const barOpacity = hoverObj ? vl.opacity().if(`datum['name'] == '${hoverObj.dataRow.name}'`,vl.value(1)) .value(.3) : vl.opacity().value(1); /* Code for scenario where all bars are to be initally selected: vl.selectInterval("brush").init(init) const init = {}; init.name = data.map(d => d.name); init[dataColumn] = [ d3.min(data, d => d[dataColumn]), d3.max(data, d => d[dataColumn]) ]; */ return chart.select(vl.selectInterval("brush")) .encode( barOpacity, vl.x().fieldN("name").title("Object name").scale({"domain": nameDomain}), vl.y().fieldQ(dataColumn).scale({"type": scaletype}).title(dataColumn.replace(/_/g," ")), vl.color().fieldN("name").legend(null).scale({ "range": range }), vl.tooltip([vl.tooltip().fieldN("name").title("Object"), vl.tooltip().fieldQ(dataColumn).format(",").title(dataColumn.replace(/_/g, " ")) ]) ) .render(); } // if else { const xText = dataColumn.replace(/_/g, " "); const yText = xText + " count"; const xDomain = d3.rollups(data, v => v.length, d => d[dataColumn]) .sort((x, y) => d3[sortingDirection]( x[1], y[1] )) .map(d => d[0]); const barOpacity = hoverObj ? vl.opacity() .if(`datum['${dataColumn}'] == '${hoverObj.dataRow[dataColumn]}'`, vl.value(1)) .value(.3) : vl.opacity().value(1); /* Code for scenario where all bars were to be initally selected: vl.selectIndataColumnterval("brush").init(init) const init = {}; const rollups = d3.rollups(data, v => v.length, d => d[dataColumn]) init[dataColumn] = rollups.map(d => d[0]); init[yText] = [ 0, Math.max(rollups.map(d => d[1])) ]; */ return chart.select(vl.selectInterval("brush")) .transform( vl.groupby(dataColumn) .aggregate(vl.count(dataColumn).as(yText)) ) .encode( barOpacity, vl.x().fieldN(dataColumn).title(xText).scale({"domain": xDomain}), vl.y().fieldQ(yText).scale({"type": scaletype}), // https://vega.github.io/vega-lite/docs/scale.html#disable vl.color().fieldN(dataColumn).legend(null).scale(null), vl.tooltip([{"field": dataColumn, "type": "nominal", "title": xText}, {"field": yText, "type": "quantitative", "format": ","} ]) ) .render(); } // else } //chart 34:T5d5,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 35:T733,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); chart.addSignalListener("brush", signaled); notify(chart.signal("brush")); return () => chart.removeSignalListener("brush", signaled); }); for (const value of chartFilter) { let filters = await value; if (filters && Object.keys(filters).length != 0){ const visualObjs = filters.hasOwnProperty("name") ? //Chart metric by name gltfDataVisual.join .filter( j => filters.name.includes( j.visualObj.name ) ) .map( j => j.visualObj ) : //Chart count colors gltfDataVisual.join .filter( j => filters[selColumn].includes( j.dataRow[selColumn] ) ) .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 } // filterVisualization36: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; } // scene37:T437,references = md `## References * [Repository of glTF files used in this notebook](https://github.com/MarioDelgadoSr/MyDataVisualizerDoc/tree/master/repository) * [Hello, DataVisual!](https://observablehq.com/@mariodelgadosr/hello-datavisual) * [Data Visualization of Randomly Assigned Values to Objects in glTF Files](https://observablehq.com/@mariodelgadosr/data-visualization-of-randomly-assigned-values-to-objects) * [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) * [DataVisual (Data + Visual) Design Pattern for WebGL 3D Assets](https://observablehq.com/@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets) * [Warehouse Visualization with DataVisual](https://observablehq.com/@mariodelgadosr/warehouse-visualization-with-datavisual) * [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) `38:[{"id":"19ecf0da78a8e72518454d618d989e166135422105ee22bdc6aceb1193b85b2806de2c2a7d059ce2de3dddf927e2b1753e801cd3c86fac01b8857d7e0f53a6a0","href":"https://static.observableusercontent.com/files/19ecf0da78a8e72518454d618d989e166135422105ee22bdc6aceb1193b85b2806de2c2a7d059ce2de3dddf927e2b1753e801cd3c86fac01b8857d7e0f53a6a0","name":"mouse.png","type":"image/png","lastModified":1592237884958.299,"size":3188}] 30:{"title":"DataVisual Visualization with Data-Embedded glTF Files","cells":[{"id":0,"value":"md`# [DataVisual](https://observablehq.com/@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets-u) Visualization with Data-Embedded [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 gltfDataVisual.addToolTip(renderer, camera, getToolTipText)\n .onHover(renderer, camera, join => mutable hoverObj = join, () => mutable hoverObj = null ) ;\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 \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1630,"value":"visualizationLegend = { \n if (selColumn.startsWith(\"COLOR_\")) {\n \n return html`Pre-assigned Colors in column ${selColumn.replace(\"_\",\" \")} : ${buildVisualization.domain.map(color => ` ${color} `).join(\", \")}`\n \n }\n else {\n \n return legend({\n width: width,\n color: d3[scaleType]( buildVisualization.domain, colorScheme ),\n title: selColumn\n });\n \n } \n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2408,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2046,"value":"sceneInputs = html`\n

${viewof gltfURL}

${viewof selColumn}

${viewof scaleType}

${viewof colorScheme}${viewof backgroundColor}

${viewof sortingDirection} ${viewof rotate}

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

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1486,"value":"md`## Embedded Data in the [${\n gltfURL.split(\"/\")[gltfURL.split(\"/\").length - 1]\n} File](${gltfURL}) \n\nSee [*Embedded Data*](https://observablehq.com/@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets-u#embeddedData) for an example of [glTF *extras* syntax](https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#reference-extras).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"// 'LINK_' is hyperlink feature available in 'My Data Visualizer': http://MyDataVisualizer.com\n// Filtering out here for table readability\ntable(gltfDataVisual.data, { limit: 500,\n enableFilter: false,\n enableCSVDownload: false,\n columns: Object.keys(gltfDataVisual.data[0])\n }\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":2257,"value":"md `## Exapandable Tree for Visual's Objects with Data Embedded in [userData](https://threejs.org/docs/index.html#api/en/core/Object3D.userData)\n\n* Click on tree node(s) to expand. \n\n* Note that each data-driven visual sub-component has a unique [material](https://threejs.org/docs/index.html#api/en/materials/Material) (or unique material**s**; as in the plane visual), as per the [DataVisual](https://observablehq.com/@mariodelgadosr/datavisual-data-visual-design-pattern-for-webgl-3d-assets) design pattern. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2259,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3868,"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":1489,"value":"md `## Objects for the DataVisual`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3985,"value":"// Join row of the object that is being hovered over; used in logic to isolate bar on Vega-lite chart\nmutable hoverObj = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1553,"value":"buildVisualization = {\n\n const selColumnData = gltfDataVisual.getDataColumn(selColumn);\n \n const domain = selColumn.startsWith(\"COLOR_\") ? [...new Set(selColumnData)].sort() : // Array of unique colors \n d3.sort(d3.extent(selColumnData),d3[sortingDirection]); \n \n gltfDataVisual.join.forEach( j => {\n const color = selColumn.startsWith(\"COLOR_\") ?\n clr => clr.toLowerCase() :\n num => d3[scaleType](colorScheme).domain(domain)(num);\n\n gltfDataVisual.setColorVisualObj(j.visualObj, color(j.dataRow[selColumn]));\n\n }\n ); //forEach \n \n return {selColumn, domain};\n \n} // visualization","pinned":false,"hidden":false,"mode":"ojs"},{"id":2470,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3943,"value":"// Callback used for formatting of the tooltip\nfunction getToolTipText(dataVisualJoin){\n return Object.keys(dataVisualJoin.dataRow)\n .map(field => field.replace(\"_\",\" \") + \": \" + \n (typeof dataVisualJoin.dataRow[field] == \"number\" ? \n d3.format(\",\")(dataVisualJoin.dataRow[field]) :\n dataVisualJoin.dataRow[field]\n ) \n )\n .join(\"
\")\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3847,"value":"function getColumnForMetric() {\n \nreturn !selColumn.startsWith(\"COLOR_\") ? selColumn : \n gltfDataVisual.data // For COLOR_referedToColumn; does 'referedToColumn' have a string?\n .some(d => typeof d[selColumn.substr(6)] == \"string\" ) ?\n selColumn : // if so, column references nominal construct\n selColumn.substr(6); // else use 'referedToColumn' with numeric data\n} ","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/datavisual-visualization-with-data-embedded-gltf-files?gltf=Body\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 );\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"gltfDataVisual = {\n \n \tconst gltfDataVisual = new dataVisual({visual:loadedGLTF} );\t \n \n // Remove any \"LINK_\" (hyperlinks) from the data\n gltfDataVisual.data.forEach(d => { \n Object.keys(d)\n .filter(k => k.startsWith(\"LINK_\") )\n .forEach(k => delete d[k]) \n });\n \n return gltfDataVisual;\n\n} //gltfDataVisual","pinned":false,"hidden":false,"mode":"ojs"},{"id":1266,"value":"$36","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":3547,"value":"// Global to notebook for tooltip processing \nrenderer = new THREE.WebGLRenderer({ antialias: true });","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":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/MarioDelgadoSr/MyDataVisualizerDoc/master/repository/\";\n const gltfs = \"Plane,Body,Forklift,Chicken,Ship,Truck\".split(\",\");\n \n const imageIndex = gltfs.findIndex(g => g == gltf); \n\n const gltfURL = select({\n title: \"Select glTF to Visualize\",\n description: \"\",\n options: gltfs.map(g => ({value: baseURL + g + \"EmbeddedData.gltf\", label: g }) ),\n multiple: false,\n value: baseURL + gltfs[imageIndex != -1 ? imageIndex : 0] + \"EmbeddedData.gltf\"\n });\n \n return gltfURL;\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2123,"value":"md`🢇 Click cell to exapand code for ***viewof selColumn***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2057,"value":"viewof selColumn = \n{\n // Data Columns\n // This demo is only visualizing numeric data and objects with specified color attributes specified in\n // 'COLOR_' columns\n const dataColumns = Object.keys(gltfDataVisual.data[0])\n .filter(c => c.startsWith(\"COLOR_\") || \n typeof gltfDataVisual.data[0][c] != \"string\" )\n .filter(c => !c.startsWith(\"DATE_\")); \n \n const selColumn = select({\n title: \"Select Data Column\",\n description: \"\",\n options: dataColumns.map(c => ({value: c, label: c.replace(/_/g, \" \")}) ),\n multiple: false,\n value: dataColumns[dataColumns.findIndex(c => !c.startsWith(\"COLOR_\"))]\n }); \n\n return selColumn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3715,"value":"md`🢇 Click cell to exapand code for ***viewof backgroundColor***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3718,"value":"viewof backgroundColor = color({\n value: \"#ffffff\",\n title: \"Background Color\",\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 Symlog\".split(\",\");\n\n const scaleType = select({\n title: \"Y axis scaling\",\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":2134,"value":"md`🢇 Click cell to exapand code for ***viewof colorScheme***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1915,"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: \"Cool\",\n interpolators: interpolators,\n w: 200\n }\n );\n \n \n return colorScheme\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2758,"value":"md`🢇 Click cell to exapand code for ***viewof sortingDirection***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2760,"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":3969,"value":"md`🢇 Click cell to exapand code for ***viewof rotate***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3967,"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":3919,"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 { radio, select, color, checkbox} 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","pinned":false,"hidden":false,"mode":"ojs"},{"id":1896,"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":3003,"value":"import {colorSchemes} from \"@mariodelgadosr/programmatic-collection-of-interpolated-d3-color-schemes\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2253,"value":"import {collapsibleTree} from \"@mariodelgadosr/collapsibletree\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3224,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1497,"value":"$37","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":"$W38","stdlib":"1","titling":"auto"}