2b:null 2c:["$","title",null,{"children":"AFrame+D3 workshop for OpenVis | Fabien Benetou | Observable"}] 31:T4ff,md`# AFrame+D3 workshop for OpenVis One interesting way to start the workshop could be to start with provoking question. Namely what makes a good data visualisation. A partial answer to this might come from [Making data tangible: using VR for data visualization - Codiax, November 2017](http://fabien.benetou.fr/Testing/Codiax2017?action=reveal). - a traditional data visualisation "ported" to VR? e.g. having a 3D bar chart that can be viewe in an immersive environment [Excel style 3D bar chart](http://cloud.originlab.com/www/resources/graph_gallery/images_galleries_new/3DBarsWithZColorMap_opengl.png) - a radically new immersive experience that does not build on the lessons learned in data visualisation? e.g. (can't find the link for now) - something new that still allow both a first person experience while drilling in the data to facilitate both understanding an felt insight? e.g. ... yours? PS: We might not rely on Observable because the ractivity part might not be worth learning the subtitles of the tool. Still we will stick to this for now for notes. What we want to leverage thought it reactivity to create THEN reactivity principles in VR for datavisualisation. Consequently it would be good to list existing AFrame component that facilitate this process. `32:[] 2f:{"id":"4837b3e60c1de828","slug":"untitled","title":"AFrame+D3 workshop for OpenVis","thumbnail":"b4c04fbe024bafebc5f9ee277e6485f548041919c53d5ca606a40c501cd4e0d5","access_level":"public","create_time":"$D2018-04-20T14:02:37.301Z","update_time":"$D2018-05-06T01:45:26.231Z","view_time":null,"first_public_time":"$D2018-04-24T10:54:46.196Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"571c54f23a22112c","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":"starter_2024"},"version":394,"publish_version":394,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa8cd470e660c7d6","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":null}],"members":[{"type":"individual","id":"fa8cd470e660c7d6","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"AFrame+D3 workshop for OpenVis","cells":[{"id":149,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"data = d3.csv(\"https://cohesiondata.ec.europa.eu/api/views/kk86-ceun/rows.csv\")\n// from https://data.europa.eu/euodp/data/dataset?res_format=CSV&sort=views_total+desc","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"absorptions = data.map( (r) => {var n = r[\"Absorption (%)\"]; return Number(n.substr(0,n.length-1))} )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"absorptions[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"\nwikimap = d3.json(\"https://vatelier.net/MyDemo/newtooling/wiki_graph.json\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"example_datapoint = data[0][\"Member State\"]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"viewof aframewidth = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"aframe = require(\"https://aframe.io/releases/0.8.2/aframe.min.js\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"animation = require('aframe-animation-component@4.1.2/index.js').catch(() => window.anime)\n// cf https://beta.observablehq.com/@tmcw/requiring-modules-troubleshooting","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"aframewidthparam = `width:${aframewidth}%`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"aframewidthparam","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"\nhtml`\n \n \n \n \n \n \n\n \n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"d3app = {\n // https://glitch.com/edit/#!/codiax?path=min.html\n var data = [1,2,3,4,5];\n \n d3.select('a-scene')\n .selectAll('a-entity')\n .data(data)\n .enter()\n .append(\"a-entity\")\n .attr('geometry', 'sphere')\n .attr('color', 'red')\n .attr('position', function(d,i){return \"\" + (- data.length + i*2) + \" 1 -2\" })\n .attr('scale', function(d,i){ var s = d/10; return s + \" \" + s + \" \" + s })\n .on('click', function(d,i){ console.log(d) })\n \n return true\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"md`\nagenda\n- 60min AFrame,\n- 30min load d3 dataset, change layout\n- 30min interaction to get extra information from datapoint\n- 30min export via e.g. screen capture\n- 30min swap laptop\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":195,"value":"md`\nspectrum of VR dataviz\n- VR focus: elating personal feeling\n- VR focused added value: in between with interaction\n- screen focus: objective data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"md`\nrelated components\n- AFrame components\n - scatterplot https://github.com/zcanter/aframe-scatterplot\n - 3D force graph https://github.com/vasturiano/3d-force-graph-vr\n - to avoid solely primitives https://github.com/Utopiah/googlepoly-load-component\n- in VR controls\n - https://github.com/dataarts/dat.guiVR\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"md`\nrelated examples\n- enjalot blocks\n - e.g. https://bl.ocks.org/enjalot/8be32e6f1f32920ba841\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"md`\nchallenges\n- sticking to 2D or 3D layouts\n - solved by e.g. walking around\n- usefulness\n - reactivity, being able to modify the visualization from VR\n - export, as a tool part of a larger process e.g. camera and parameter saving via URL parameters or server uploaded screenshot (2D or 360) https://aframe.io/docs/0.8.0/components/screenshot.html#sidebar\n- large data points\n- meta explorations\n - layout of multiple layouts to select\n- AR\n - https://twitter.com/utopiah/status/944606702225252352\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"md`\nreferences in academia\n- 1994 https://ieeexplore.ieee.org/abstract/document/250911/\n- 2014 https://ieeexplore.ieee.org/abstract/document/7004282/\n- 2017 http://www.aviz.fr/~bbach/spatiocoordination/Cordeil2017design.pdf\n- 2017 http://www.aviz.fr/~bbach/arcanvas/Bach2017arcanvas.pdf\n- 2018 http://www.aviz.fr/~bbach/hololens/Bach2018holostudy.pdf\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"md`d3 specific\n- https://beta.observablehq.com/d/9f17cf7fdff2ab27\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":391,"value":"md`# Import test`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"import {svg_enter_append, update_svg_enter_append} from \"@utopiah/re-discovering-d3js-via-frontend-masters-workshop\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"update_svg_enter_append","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"svg_enter_append","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":389,"value":"md`unfortunately doesn't seem to work, might have to use viewof or only 1 cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"