31:Tb5c,scene = { const matrixSize = [ matrix.length, _.first(matrix).length ], scene = new THREE.Scene(); scene.background = new THREE.Color(0x333333); scene.add( wireframe( "stereogram", { width: stereoGramSize.width, height: stereoGramSize.height }, matrixSize //[n,m] n seasons x m ages/weights/heights ) ); // The X axis is red. The Y axis is green. The Z axis is blue. // scene.add(new THREE.AxesHelper(10)); const mesh = scene.getObjectByName("stereogram"); const heightArray = [].concat.apply([], matrix).map(heightScale); // need to know how the vertices are rendered (in which order are they painted) // in order to get the data accordingly. // Because the order of vertex at rendering, order of the data is: // 1st age of 1st season, 1st age of 2nd season, etc... const vertexData = _.flatten( _.zip(...matrix) ) .map(heightScale); // Update, so add elevation and translate so the stereogram remains in the positive quadrant mesh.geometry.vertices.forEach((v, i) => { v.setZ(vertexData[i] || 0); /* To know which data contains each vertex: scene.add( text(elevation.toString(), 0.01, 0, v.x, v.y, 0, 0, 0, 0) );*/ }); mesh.geometry.verticesNeedUpdate = true; mesh.geometry.computeFaceNormals(); let measureFontSize = measure === 'age' ? fontSize:fontSize/2; // add season labels var scaleX = d3.scaleBand() .domain(_.range(0, matrixSize[0])) .range([0, stereoGramSize.width]); for(let x = 0; x < matrixSize[0]; x++) { if(seasons[x] % 2 === 0) { scene.add( text( seasons[x].toString(), fontSize, 0, scaleX(x) - (stereoGramSize.width/2), (stereoGramSize.height/2) + (scaleX.bandwidth()*3), 0, Math.PI/2, -Math.PI/2, 0 ) ); scene.add( text( seasons[x].toString(), fontSize, 0, scaleX(x) - (stereoGramSize.width/2), -(stereoGramSize.height/2), 0, Math.PI/2, -Math.PI/2, 0 ) ); } } // add measure labels var scaleY = d3.scaleBand() .domain(_.range(0, matrixSize[1])) .range([0, stereoGramSize.height]); for(let y = 0; y < matrixSize[1]; y++) { if((measure !== 'weight') || (measure === 'weight' && y % 2 === 0)) { scene.add( text( measures[y].toString(), measureFontSize, 0, -(stereoGramSize.width/2) -scaleY.bandwidth(), (stereoGramSize.height/2) - scaleY(y), 0, 0, 0, -Math.PI/2 ) ); scene.add( text( measures[y].toString(), measureFontSize, 0, (stereoGramSize.width/2) + scaleY.bandwidth()/3, (stereoGramSize.height/2) - scaleY(y), 0, 0, 0, -Math.PI/2 ) ); } } return scene; }32:[{"id":"523a67f07420227226e2b79ea0eadcca66d25a9f986fd2d3325de3577f334d6623632ef13001904858f73a7370f5de58546fe44cce5ca9f352ecddff3b55a0ac","href":"https://static.observableusercontent.com/files/523a67f07420227226e2b79ea0eadcca66d25a9f986fd2d3325de3577f334d6623632ef13001904858f73a7370f5de58546fe44cce5ca9f352ecddff3b55a0ac","name":"helvetiker_regular.typeface.json","type":"application/json","lastModified":1613647314348.491,"size":63182},{"id":"b50978730c319ccbc7503d6e93038135fdd816ee520a8f3b2b25191a9329c547b299fd43a3288b75b66859dbd9ff6cd8d7f4b14b8d2031015bd1ac517f4a8439","href":"https://static.observableusercontent.com/files/b50978730c319ccbc7503d6e93038135fdd816ee520a8f3b2b25191a9329c547b299fd43a3288b75b66859dbd9ff6cd8d7f4b14b8d2031015bd1ac517f4a8439","name":"summaries_all_seasons_age@3.csv","type":"text/csv","lastModified":1613931059101.565,"size":26478},{"id":"e11e8d86ceb73434d95f4678e10427e8ee1dc29b928f58faeeb5d42fe29fbd717a6155e1511282fa03713cda43f87a871126478479b568dc916f9e84a0788e9c","href":"https://static.observableusercontent.com/files/e11e8d86ceb73434d95f4678e10427e8ee1dc29b928f58faeeb5d42fe29fbd717a6155e1511282fa03713cda43f87a871126478479b568dc916f9e84a0788e9c","name":"summaries_all_seasons_weight@5.csv","type":"text/csv","lastModified":1613932677640.449,"size":30795},{"id":"a09a181fb81385078c889d186aa75c45e75ab5cf32410547618bb57b54ce2bd957c048c96353ee7817eb50afb14c495317c108679b4186b5f2c5c718b89b703b","href":"https://static.observableusercontent.com/files/a09a181fb81385078c889d186aa75c45e75ab5cf32410547618bb57b54ce2bd957c048c96353ee7817eb50afb14c495317c108679b4186b5f2c5c718b89b703b","name":"summaries_all_seasons_height@5.csv","type":"text/csv","lastModified":1613932480662.914,"size":22815}] 2f:{"title":"Stereogram dataviz with NBA historical data","cells":[{"id":0,"value":"md`# Stereogram dataviz with NBA historical data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"html`

Select the evolution of NBA players by age, height or weight:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"viewof measure = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"{\n \n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n renderer.render(scene, camera);\n \n return renderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"html`

Data

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1187,"value":"html`\n

Data sources and data processing can be found in the github repo:

\nhttps://github.com/XavierGimenez/dataviz-NBA-stereogram\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"measure_by_season_summary = (\n measure === 'age'? FileAttachment('summaries_all_seasons_age@3.csv').csv():\n measure === 'weight'? FileAttachment('summaries_all_seasons_weight@5.csv').csv():\n FileAttachment('summaries_all_seasons_height@5.csv').csv()\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"seasons = _.map(_.uniqBy(measure_by_season_summary, 'season'), 'season')","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"measures = _.map(_.uniqBy(measure_by_season_summary, measure), o => +o[measure]).sort((a,b) => a-b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"measure_by_season_summary_sanitized = measure_by_season_summary\n .map( o => {\n o[measure] = +o[measure];\n return o;\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"matrix = _.chain(seasons)\n .map(season => _.filter(measure_by_season_summary_sanitized, ['season', season]))\n .map(season => _.sortBy(season, measure))\n .map(season => _.map(season, 'total'))\n .map(season => _.map(season, total => +total))\n .value()\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"html`

3D scene (three.js)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"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 camera.position.set(-1.5, 0.5, 0.75);\n camera.up.set(0, 0, 1);\n// camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"renderer = new THREE.WebGLRenderer({antialias: true});","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"wireframe = (name, size, shape) => {\n \n // Geometry\n const wireframeGeometry = new THREE.PlaneGeometry(\n size.width, size.height, // width, height\n shape[0] - 1, shape[1] - 1 // Segments\n );\n \n // Material\n const wireframeMaterial = new THREE.MeshBasicMaterial({\n color: 0x2260ff,\n wireframe: true,\n transparent: true,\n depthWrite: false,\n side: THREE.DoubleSide,\n blending: THREE.AdditiveBlending,\n vertexColors: THREE.VertexColors\n });\n\n // Mesh\n const wireframe = new THREE.Mesh(wireframeGeometry, wireframeMaterial);\n wireframe.name = name;\n return wireframe;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"fontSize = 0.02","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"helvetiker = JSON.parse(await FileAttachment(\"helvetiker_regular.typeface.json\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"heightScale = elev => (elev/300);","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"stereoGramSize = ({width: 1.5, height:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"font = new THREE.FontLoader().parse(helvetiker)","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"text = function(text, size, h, x, y, z, rx, ry, rz) { \n const geometry = new THREE.TextBufferGeometry(\n text,\n {font: font, size: size, height: h}\n );\n geometry.computeBoundingSphere();\n geometry.computeVertexNormals();\n\n const mesh = new THREE.Mesh(\n geometry,\n new THREE.MeshBasicMaterial({ color: 0xffffff })\n );\n mesh.position.set(x, y, z);\n mesh.rotation.set(rx, ry, rz);\n// scene.add(mesh);\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"value":"html`Animate the scene rotating z axis by a specific range:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"{\n let dir = 1;\n while (true) { // Code that runs every frame\n scene.rotation.z += (0.0075 * dir); // Rotate cube by 0.01 in y every frame\n if(scene.rotation.z > 0.5 || scene.rotation.z < -1)\n dir = dir * -1; \n console.log(scene.rotation)\n renderer.render(scene, camera); // Add the scene and camera to the renderer\n yield renderer.domElement; \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"html`

Libs

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}