31:Tbc1,scene = { const matrixSize = [ _.first(values).length, values.length ], scene = new THREE.Scene(); scene.background = new THREE.Color(0x333333); scene.add( wireframe( "stereogram", { width: (stereoGramSize.width/matrixSize[0]) * matrixSize[0], height: (stereoGramSize.height/matrixSize[1]) * matrixSize[1] }, matrixSize //[n,m] n years x m ages ) ); // 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([], values).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 year, 1st age of 2nd year, etc... const vertexData = _.flatten(values); let hScale = d3.scaleLinear() .domain(d3.extent(vertexData)) .range([0, 2]); // Update, so add elevation and translate so the stereogram remains in the positive quadrant mesh.geometry.vertices.forEach((v, i) => { v.setZ(hScale(vertexData[i]) || 0); }); mesh.geometry.verticesNeedUpdate = true; mesh.geometry.computeFaceNormals(); // add year labels var scaleX = d3.scaleBand() .domain(_.range(0, matrixSize[0])) .range([0, stereoGramSize.width]); for(let x = 0; x < matrixSize[0]; x++) { scene.add( text( years[x].toString(), fontSize, 0, scaleX(x) - (stereoGramSize.width/2), (stereoGramSize.height/2) + (scaleX.bandwidth()*1), 0, Math.PI/2, -Math.PI/2, 0 ) ); scene.add( text( years[x].toString(), fontSize, 0, scaleX(x) - (stereoGramSize.width/2), -(stereoGramSize.height/2) - (scaleX.bandwidth()/2), 0, Math.PI/2, -Math.PI/2, 0 ) ); } // add age labels var scaleY = d3.scaleBand() .domain(_.range(0, matrixSize[1])) .range([0, stereoGramSize.height]); for(let y = 0; y < matrixSize[1]; y++) { if(y % 5 === 0) { scene.add( text( ages[y].toString(), fontSize, 0, -(stereoGramSize.width/2) -scaleY.bandwidth()*4, (stereoGramSize.height/2) - scaleY(y), 0, // 0, 0, -Math.PI/2 Math.PI/2, -Math.PI/2, 0 ) ); scene.add( text( ages[y].toString(), fontSize, 0, (stereoGramSize.width/2) + scaleY.bandwidth()/3, (stereoGramSize.height/2) - scaleY(y), 0, // 0, 0, -Math.PI/2 Math.PI/2, -Math.PI/2, 0 ) ); } } // add title for age axis scene.add( text( "Age population", fontSize*2, 0, -(stereoGramSize.width/2) -scaleY.bandwidth()*9, (stereoGramSize.height/2), 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":1618067388072.352,"size":63182},{"id":"a982e48624a9d7cf20bf3def43aedcf096ab34774e7e1e496ea739430f1dc2cc5a20ab328e45dac44f569dc9e487fc9e48bd536ce4656e58009bdd85c15252bb","href":"https://static.observableusercontent.com/files/a982e48624a9d7cf20bf3def43aedcf096ab34774e7e1e496ea739430f1dc2cc5a20ab328e45dac44f569dc9e487fc9e48bd536ce4656e58009bdd85c15252bb","name":"population-all.tsv","type":"text/tab-separated-values","lastModified":1618232821146.604,"size":18764}] 2f:{"title":"Population series in spain (1998 - 2020)","cells":[{"id":0,"value":"md`# Population series in spain (1998 - 2020)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"html`

Age evolution of Spanish population, period 1998-2020

`","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`\nData sources and data processing can be found at the Spanish National Institue of Statistics\n(INE)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"population = FileAttachment(\"population-all.tsv\").tsv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"years = _.chain(population)\n .first()\n .keys()\n .map(v => +v)\n .filter(_.isInteger)\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"ages = _.map(population, 'Age')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"values = _.chain(population)\n .map(ageSeries => _.pick(ageSeries, years))\n .map(ageSeries => _.values(ageSeries))\n .map(ageSeries => _.map(ageSeries, value => +value.replaceAll(\",\", \"\")))\n .value()","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(-7.5, 0.5, 2.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// wireframeGeometry.translate(-size.width/2, 0,0 )\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.075","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/3000000);","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"stereoGramSize = ({width: 6, height:4.5})","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.75 || scene.rotation.z < -1)\n dir = dir * -1; \n renderer.render(scene, camera); // Add the scene and camera to the renderer\n yield renderer.domElement; \n }\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"}