31:T573,{ const helloDataVisual = new dataVisual({data, visual}); const height = width / 2; const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); camera.position.set(-5, 4, 0); const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(width, height); renderer.setPixelRatio(devicePixelRatio); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.autoRotate = option.rotate; const visualDiv = document.createElement("div"); visualDiv.appendChild(renderer.domElement); helloDataVisual .addToolTip(renderer, camera, option.customToolTip ? getToolTipText : undefined // Custom or Default tooltip ) .onHover(renderer, camera, join => search.src = `https://bing.com/search?q=${join.dataRow.dimension}`, () => option.keepClear == "clear" ? search.src = `${dataVisualURL}` : null ) .onDblClick(renderer, camera, join => open(`https://bing.com/search?q=${join.dataRow.dimension}`, "_blank") ); invalidation.then( () => renderer.dispose() ); while (true) { renderer.render(helloDataVisual.visual.scene, camera); if (option.rotate) controls.update(); yield visualDiv; } }32:[] 2f:{"title":"DataVisual Event Handlers","cells":[{"id":0,"value":"\ntitle = md`# [DataVisual](https://github.com/mariodelgadosr/dataVisual) Event Handlers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1758,"value":"md `\n* The [Hello, DataVisual!](https://observablehq.com/@mariodelgadosr/hello-datavisual) notebook is extended with two methods:\n\n * ***onHover*** registers callbacks to handle when the mouse hovers over a joined object.\n * ***onDblClick*** registers a callback to handle when the mouse double-clicks a joined object. \n\n**Instructions**\n\n* Select the 'View Search' option and hover on a sub-component to perform a data-driven search on the ***dimension*** data attribute associated with the item. Radio buttons allow you to either **Keep** or **Reset** search results when the item is no longer being hovered on.\n* Double-clicking on a sub-component uses DataVisual's event handler to navigate the web search in a new window; assuming [pop-ups are enabled for your browser](https://www.techtipy.com/block-pop-ups-chrome-firefox-internet-explorer-edge-browser/) on the Observable site.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1906,"value":"viewof option = \nform(\n html``\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"search = { \n return html``\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2064,"value":"dataVisualURL = \"https://github.com/mariodelgadosr/dataVisual#datavisual\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2093,"value":"documentation","pinned":false,"hidden":false,"mode":"ojs"},{"id":1797,"value":"license ","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"source","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2087,"value":"import {dataVisual, data, visual, getToolTipText, documentation, license, source} from \"@mariodelgadosr/hello-datavisual\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1903,"value":"import {form} from \"@mbostock/form-input\"\n","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 = {\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"}],"files":"$W32","stdlib":"1","titling":"auto"}