31:T427,{ renderer.setSize(viz_width, height); renderer.setPixelRatio(devicePixelRatio); labelRenderer.setSize(viz_width, height); labelRenderer.domElement.style.position = "absolute"; labelRenderer.domElement.style.top = 0; labelRenderer.domElement.style.pointerEvents = "none"; try { while (true) { renderer.render(scene, camera); labelRenderer.render(scene, camera); let html_render = html`

${labelRenderer.domElement} ${renderer.domElement}

Population: ${tooltip_state.value}

`; yield html_render; } } finally { renderer.dispose(); } }32:[{"id":"767e49dfea07248a4cc65c48ab7722f07ae1778d64c9ad32b8105f752ac7edb19cce58b20ebaf4386a1f8056ef9a44c9e426f5631928c4cb9f56e13ef471ad35","href":"https://static.observableusercontent.com/files/767e49dfea07248a4cc65c48ab7722f07ae1778d64c9ad32b8105f752ac7edb19cce58b20ebaf4386a1f8056ef9a44c9e426f5631928c4cb9f56e13ef471ad35","name":"wales_1km.csv","type":"text/csv","lastModified":1581083030115.718,"size":233763}] 2f:{"title":"Wales 1km² Population Grid","cells":[{"id":0,"value":"html `

Wales 1km² Population Grid

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"md`Just putting Wales on the map...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"viewof background_color = color({\n value: \"#000\",\n title: \"Background Colour\",\n description: \"Background colour of the map\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"viewof color_interpolation = select({\n title: \"Colour Scheme\",\n description: \"Colour palette used to categorize the cells\",\n options: colorSchemes.map(scheme => {\n return { label: scheme.name, value: scheme.f };\n }),\n value: \"interpolateMagma\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"html`The grid is based on the ETRS89 Lambert Azimuthal Equal-Area projection coordinate reference system (EPSG:3035) and the cells are stored in a csv file with three columns: x,y and population. The x and y values represent the bottom left corner of each grid cell (x min and y min).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"md `## Cell colour interpolation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"html `

The colour of each cell is defined by an interpolation function from D3 scale-chromatic:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"colorSchemes = [\n { name: \"Turbo\", f: \"interpolateTurbo\" },\n { name: \"Magma\", f: \"interpolateMagma\" },\n { name: \"Reds\", f: \"interpolateReds\" },\n { name: \"Purples\", f: \"interpolatePurples\" },\n { name: \"Oranges\", f: \"interpolateOranges\" },\n { name: \"Greens\", f: \"interpolateGreens\" },\n { name: \"Blues\", f: \"interpolateBlues\" },\n { name: \"Greys\", f: \"interpolateGreys\" },\n { name: \"Yellow to Red\", f: \"interpolateYlOrRd\" },\n { name: \"Red to Blue\", f: \"interpolateRdBu\" },\n { name: \"Red to Yellow to Blue\", f: \"interpolateRdYlBu\" },\n { name: \"Spectral\", f: \"interpolateSpectral\" },\n { name: \"'Cool'\", f: \"interpolateCool\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"colorScale = d3.scaleLog()","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"colorScale.domain(d3.extent(csv, d => d.value));","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"md `## Preparing the data for Three.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"html `Firstly, the raw csv data is loaded and parsed using d3-dsv..`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"csv = dsv.csvParse(await FileAttachment(\"wales_1km.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"cells = {\n let data_points = [];\n for (let i = 0; i < csv.length; i++) {\n let position = [csv[i].x,csv[i].y]; // EPSG:3035\n let value = csv[i].value;\n let point = { position, value };\n data_points.push(point);\n }\n return data_points;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"html `The points class then creates a new geometry object and appends vertices to it for each cell. In this example I am applying a simple manual transformation to the coordinates, along with an offset so that they are closer to the origin of the scene.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"point_size = 0.026","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"points = {\n let pointsGeometry = new THREE.Geometry();\n let colors = [];\n for (let cell of cells) {\n // Set vector coordinates from data\n let coords = [cell.position[0], cell.position[1]];\n // TODO: find a cleaner way of converting EPSG 3035 to Vector3. Values must be between -1 and 1\n let vectorCoords = new THREE.Vector3(\n coords[0] / 100000 + offset.x,\n coords[1] / 100000 + offset.y,\n 0\n );\n // in Threejs, colors and vertices are added to the geometry object in separate, corresponding arrays\n pointsGeometry.vertices.push(vectorCoords);\n let hex = d3[color_interpolation](colorScale(cell.value));\n cell.color = hex; //for tooltip\n colors.push(new THREE.Color(hex));\n }\n pointsGeometry.colors = colors;\n\n let pointsMaterial = new THREE.PointsMaterial({\n size: point_size,\n sizeAttenuation: true,\n vertexColors: THREE.VertexColors\n });\n\n return new THREE.Points(pointsGeometry, pointsMaterial);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"point_num = cells.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"md `## Initializing Three.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"html `I won't go into too much detail in this notebook about how Three.js works as there are plenty of great tutorials out there, namely this one by Grant Custer, but here are the basic components that went into this visualization:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md `## Scene`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"scene = {\n let scene = new THREE.Scene();\n scene.background = new THREE.Color(background_color);\n scene.add(points);\n return scene;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"renderer = new THREE.WebGLRenderer({antialias: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md `## Camera`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"camera = {\n let aspect = viz_width / height;\n return new THREE.PerspectiveCamera(fov, aspect, near, far + 1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"fov =40;","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"near = 0.1;","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"far = 5;","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"mutable viz_width = Math.min(width, 1000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"radius = 25;","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md `## Defining the pan & zoom functionality with D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"view = d3.select(renderer.domElement)","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"{\n function setUpZoom() {\n view.call(zoom); \n let initial_scale = getScaleFromZ(far);\n var initial_transform = d3.zoomIdentity.translate(viz_width/2, height/2).scale(initial_scale); \n zoom.transform(view, initial_transform);\n camera.position.set(0, 0, far);\n }\n setUpZoom();\n return setUpZoom;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"zoom = {\n let d3_zoom = d3\n .zoom()\n .scaleExtent([getScaleFromZ(far), getScaleFromZ(near)])\n .on('zoom', () => {\n let d3_transform = d3.event.transform;\n zoomHandler(d3_transform);\n })\n .on(\"end\", () => {\n let event = d3.event;\n if (event) zoomEnd(event);\n });\n return d3_zoom;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"function zoomHandler(d3_transform) {\n let scale = d3_transform.k;\n let x = -(d3_transform.x - viz_width/2) / scale;\n let y = (d3_transform.y - height/2) / scale;\n let z = getZFromScale(scale);\n camera.position.set(x, y, z);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"function getScaleFromZ (camera_z_position) {\n let half_fov = fov/2;\n let half_fov_radians = toRadians(half_fov);\n let half_fov_height = Math.tan(half_fov_radians) * camera_z_position;\n let fov_height = half_fov_height * 2;\n let scale = height / fov_height; // Divide visualization height by height derived from field of view\n return scale;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md `### Get scale from d3's zoom`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"function getZFromScale(scale) {\n let half_fov = fov/2;\n let half_fov_radians = toRadians(half_fov);\n let scale_height = height / scale;\n let camera_z_position = scale_height / (2 * Math.tan(half_fov_radians));\n return camera_z_position;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"function toRadians (angle) {\n return angle * (Math.PI / 180);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"md`## Adding Placenames`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"labelRenderer = new THREE.CSS2DRenderer()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1010,"value":"label_height = 0.001 //placenames z value","pinned":true,"hidden":false,"mode":"ojs"},{"id":998,"value":"zoomEnd = function(event) {\n hideTooltip();\n let scale = event.transform.k;\n //get topoNames\n if (points) {\n //placenames are added to the points object\n //if (promise)\n getPlacenames(scale);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1001,"value":"getPlacenames = function(scale) {\n let where;\n let wales = \"NUTS1_CODE='UKL'\";\n //powers of 2\n if (scale < 270) {\n where = wales + \"AND POPL_2011>100000\";\n } else if (scale > 270 && scale < 1000) {\n where = wales + \"AND POPL_2011>50000\";\n } else if (scale > 1000) {\n where = wales + \"AND POPL_2011>10000\";\n } else if (scale > 1400) {\n where = wales + \"AND POPL_2011>1000\";\n }\n let envelope = getCurrentViewExtent();\n //ESRI Rest API envelope: ,,, (bottom left x,y , top right x,y)\n let baseURL =\n \"https://ec.europa.eu/regio/regiogis/gis/arcgis/rest/services/Urban/urban_centres_towns/MapServer/0/query?\";\n let URL =\n baseURL +\n \"where=\" +\n where +\n \"&f=json&outFields=city_town_name,POPL_2011&resultRecordCount=200\";\n let uri = encodeURI(URL);\n d3.json(uri).then(res => {\n if (res.features.length > 0) {\n addPlacenamesToScene(res.features);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1031,"value":"getCurrentViewExtent = function() {\n // FIXME: currently returning full european extent\n return {\n xmin: 3256921.9597,\n ymin: 3254209.7005,\n xmax: 3464168.9191,\n ymax: 3444845.2480\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1004,"value":"addPlacenamesToScene = function(placenames) {\n removePlacenamesFromScene();\n for (let p = 0; p < placenames.length; p++) {\n let label = createPlacenameLabelObject(placenames[p]);\n points.add(label);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":997,"value":"removePlacenamesFromScene = function() {\n // remove label objects from points layer\n for (var i = points.children.length - 1; i >= 0; i--) {\n points.remove(points.children[i]);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1008,"value":"createPlacenameLabelObject = function(placename) {\n var placeDiv = document.createElement(\"div\");\n placeDiv.className = \"placename\";\n placeDiv.textContent = placename.attributes.city_town_name;\n placeDiv.style.marginTop = \"-1em\";\n //label_nodes.push(placeDiv);\n var placeLabel = new THREE.CSS2DObject(placeDiv);\n let pos = toWorldCoordinates([placename.geometry.x, placename.geometry.y]);\n placeLabel.position.set(pos.x, pos.y, label_height);\n return placeLabel;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1019,"value":"//geo [x,y] to webgl world {x,y,z}\nfunction toWorldCoordinates(coords) {\n // EPSG 3035 to WebGL\n return {\n x: coords[0] / 100000 + offset.x,\n y: coords[1] / 100000 + offset.y,\n z: 0\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1021,"value":"offset = {\n return { x: -34, y: -33.5 };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"md `## Configuring the tooltip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"function showTooltip(mouse_position, datum) {\n let tooltip_width = 120;\n let x_offset = -tooltip_width/2;\n let y_offset = 30;\n tooltip_state.display = \"block\";\n tooltip_state.left = mouse_position[0] + x_offset;\n tooltip_state.top = mouse_position[1] + y_offset;\n tooltip_state.value = datum.value;\n tooltip_state.color = datum.color;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"tooltip_state = { return { display: \"none\" } }","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"function hideTooltip() {\n tooltip_state.display = \"none\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md `## Defining the mouse hover event`","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"html `The hover functionality leverages Three.js' raycaster class, which is used for mouse picking (working out what objects in the 3d space the mouse is over) amongst other things.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"raycaster = new THREE.Raycaster()","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"html `

The raycaster threshold defines the maximum distance the ray can stray from the center of the cell geometry in order to return a value. Think of it as defining a hitbox.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"{\n raycaster.params.Points.threshold = 0.006;\n return raycaster;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"html `Three.js doesn't return the intersected objects in order of their distance from the ray so this is done manually...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"function sortIntersectsByDistanceToRay(intersects) {\n return _.sortBy(intersects, \"distanceToRay\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"{\n view.on(\"mousemove\", () => {\n let [mouseX, mouseY] = d3.mouse(view.node());\n let mouse_position = [mouseX, mouseY];\n\t checkIntersects(mouse_position);\n });\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"function mouseToThree(mouseX, mouseY) {\n return new THREE.Vector3(\n mouseX / viz_width * 2 - 1,\n -(mouseY / height) * 2 + 1,\n 1\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"function checkIntersects(mouse_position) {\n let mouse_vector = mouseToThree(...mouse_position);\n raycaster.setFromCamera(mouse_vector, camera);\n let intersects = raycaster.intersectObject(points);\n if (intersects[0]) {\n let sorted_intersects = sortIntersectsByDistanceToRay(intersects);\n let intersect = sorted_intersects[0];\n let index = intersect.index;\n let datum = cells[index];\n highlightPoint(datum);\n showTooltip(mouse_position, datum);\n } else {\n removeHighlights();\n hideTooltip();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"hoverContainer = new THREE.Object3D()","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"{\n scene.add(hoverContainer);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"function highlightPoint(datum) {\n removeHighlights();\n \n let geometry = new THREE.Geometry();\n geometry.vertices.push(\n new THREE.Vector3(\n datum.position[0],\n datum.position[1],\n 0\n )\n );\n geometry.colors = [ new THREE.Color(datum.color) ];\n\n let material = new THREE.PointsMaterial({\n size: point_size,\n sizeAttenuation: true,\n vertexColors: THREE.VertexColors\n });\n \n let point = new THREE.Points(geometry, material);\n hoverContainer.add(point);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"function removeHighlights() {\n hoverContainer.remove(...hoverContainer.children);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"{\n view.on(\"mouseleave\", () => {\n removeHighlights()\n })\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"md `## Next steps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"md `* Add raster basemap or boundaries TopoJSON`","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"md `* Distort cell sizes according to their values`","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"md `* Implement csv tiling capability`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md `## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"dsv = require(\"d3-dsv@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"THREE = {\n const THREE = (window.THREE = await require('three@0.105.1/build/three.min.js'));\n await require('three@0.105.1/examples/js/renderers/CSS2DRenderer.js').catch(\n () => {}\n );\n return THREE;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"_ = require('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"import { select, color } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"md `# Credits`","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"html `

The code used in this notebook is adapted from Gran Custer's excellent tutorial on using Three.js for 2D visualization:

https://observablehq.com/@grantcuster/using-three-js-for-2d-data-visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"html `

Data source: Eurostat population grid

`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}