29:null 2a:["$","title",null,{"children":"Population series in spain (1998 - 2020) | Xavi Giménez | Observable"}] 2f: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; }30:[{"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}] 2d:{"id":"3b80cfe6c33213dd","slug":"population-series-in-spain-1998-2020","title":"Population series in spain (1998 - 2020)","thumbnail":"250b6c0831d06ff366629e0cc0b3336d818d2db92b692a145d315c2ebf0e228f","access_level":"public","create_time":"$D2021-04-10T15:09:48.072Z","update_time":"$D2021-04-20T12:18:25.256Z","view_time":null,"first_public_time":"$D2021-04-20T12:20:47.648Z","has_unpublished_edits":null,"fork":{"id":"cd7d92d829768dab","slug":"stereogram-dataviz-with-nba-historical-data","title":"Stereogram dataviz with NBA historical data","owner":{"id":"3b37baced2fe95b2","login":"xavigimenez","name":"Xavi Giménez"}},"stars":3,"starred":false,"owner":{"type":"team","id":"3b37baced2fe95b2","login":"xavigimenez","name":"Xavi Giménez","avatar_url":"https://avatars-next.observableusercontent.com/af49fef2215148057dac87b5ed231ee5c6abab4b38611cc89da4a89b1e63e6d4","tier":"starter_2024"},"version":1419,"publish_version":1419,"role":null,"authored":false,"authors":[{"type":"individual","id":"c659cc48420e349d","login":"xavigimenez","name":"Xavi Giménez","avatar_url":"https://avatars-next.observableusercontent.com/af49fef2215148057dac87b5ed231ee5c6abab4b38611cc89da4a89b1e63e6d4","tier":null}],"members":[{"type":"individual","id":"c659cc48420e349d","login":"xavigimenez","name":"Xavi Giménez","avatar_url":"https://avatars-next.observableusercontent.com/af49fef2215148057dac87b5ed231ee5c6abab4b38611cc89da4a89b1e63e6d4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Population series in spain (1998 - 2020)","cells":[{"id":0,"value":"md`# Population series in spain (1998 - 2020)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"html`

Age evolution of Spanish population, period 1998-2020

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"html`

Data

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"population = FileAttachment(\"population-all.tsv\").tsv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"ages = _.map(population, 'Age')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"html`

3D scene (three.js)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"renderer = new THREE.WebGLRenderer({antialias: true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"fontSize = 0.075","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"helvetiker = JSON.parse(await FileAttachment(\"helvetiker_regular.typeface.json\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"heightScale = elev => (elev/3000000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"stereoGramSize = ({width: 6, height:4.5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"font = new THREE.FontLoader().parse(helvetiker)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"html`Animate the scene rotating z axis by a specific range:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"html`

Libs

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"