Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Also listed in…
Wales
cells = {
let data_points = [];
for (let i = 0; i < csv.length; i++) {
let position = [csv[i].x,csv[i].y]; // EPSG:3035
let value = csv[i].value;
let point = { position, value };
data_points.push(point);
}
return data_points;
}
point_size = 0.026
points = {
let pointsGeometry = new THREE.Geometry();
let colors = [];
for (let cell of cells) {
// Set vector coordinates from data
let coords = [cell.position[0], cell.position[1]];
// TODO: find a cleaner way of converting EPSG 3035 to Vector3. Values must be between -1 and 1
let vectorCoords = new THREE.Vector3(
coords[0] / 100000 + offset.x,
coords[1] / 100000 + offset.y,
0
);
// in Threejs, colors and vertices are added to the geometry object in separate, corresponding arrays
pointsGeometry.vertices.push(vectorCoords);
let hex = d3[color_interpolation](colorScale(cell.value));
cell.color = hex; //for tooltip
colors.push(new THREE.Color(hex));
}
pointsGeometry.colors = colors;
let pointsMaterial = new THREE.PointsMaterial({
size: point_size,
sizeAttenuation: true,
vertexColors: THREE.VertexColors
});
return new THREE.Points(pointsGeometry, pointsMaterial);
}
scene = {
let scene = new THREE.Scene();
scene.background = new THREE.Color(background_color);
scene.add(points);
return scene;
}
camera = {
let aspect = viz_width / height;
return new THREE.PerspectiveCamera(fov, aspect, near, far + 1);
}
labelRenderer = new THREE.CSS2DRenderer()
label_height = 0.001 //placenames z value
zoomEnd = function(event) {
hideTooltip();
let scale = event.transform.k;
//get topoNames
if (points) {
//placenames are added to the points object
//if (promise)
getPlacenames(scale);
}
}
getPlacenames = function(scale) {
let where;
let wales = "NUTS1_CODE='UKL'";
//powers of 2
if (scale < 270) {
where = wales + "AND POPL_2011>100000";
} else if (scale > 270 && scale < 1000) {
where = wales + "AND POPL_2011>50000";
} else if (scale > 1000) {
where = wales + "AND POPL_2011>10000";
} else if (scale > 1400) {
where = wales + "AND POPL_2011>1000";
}
let envelope = getCurrentViewExtent();
//ESRI Rest API envelope: <xmin>,<ymin>,<xmax>,<ymax> (bottom left x,y , top right x,y)
let baseURL =
"https://ec.europa.eu/regio/regiogis/gis/arcgis/rest/services/Urban/urban_centres_towns/MapServer/0/query?";
let URL =
baseURL +
"where=" +
where +
"&f=json&outFields=city_town_name,POPL_2011&resultRecordCount=200";
let uri = encodeURI(URL);
d3.json(uri).then(res => {
if (res.features.length > 0) {
addPlacenamesToScene(res.features);
}
});
}
getCurrentViewExtent = function() {
// FIXME: currently returning full european extent
return {
xmin: 3256921.9597,
ymin: 3254209.7005,
xmax: 3464168.9191,
ymax: 3444845.2480
};
}
addPlacenamesToScene = function(placenames) {
removePlacenamesFromScene();
for (let p = 0; p < placenames.length; p++) {
let label = createPlacenameLabelObject(placenames[p]);
points.add(label);
}
}
removePlacenamesFromScene = function() {
// remove label objects from points layer
for (var i = points.children.length - 1; i >= 0; i--) {
points.remove(points.children[i]);
}
}
createPlacenameLabelObject = function(placename) {
var placeDiv = document.createElement("div");
placeDiv.className = "placename";
placeDiv.textContent = placename.attributes.city_town_name;
placeDiv.style.marginTop = "-1em";
//label_nodes.push(placeDiv);
var placeLabel = new THREE.CSS2DObject(placeDiv);
let pos = toWorldCoordinates([placename.geometry.x, placename.geometry.y]);
placeLabel.position.set(pos.x, pos.y, label_height);
return placeLabel;
}
//geo [x,y] to webgl world {x,y,z}
function toWorldCoordinates(coords) {
// EPSG 3035 to WebGL
return {
x: coords[0] / 100000 + offset.x,
y: coords[1] / 100000 + offset.y,
z: 0
};
}
offset = {
return { x: -34, y: -33.5 };
}
raycaster = new THREE.Raycaster()
{
raycaster.params.Points.threshold = 0.006;
return raycaster;
}
hoverContainer = new THREE.Object3D()
dsv = require("d3-dsv@1")
THREE = {
const THREE = (window.THREE = await require('three@0.105.1/build/three.min.js'));
await require('three@0.105.1/examples/js/renderers/CSS2DRenderer.js').catch(
() => {}
);
return THREE;
}
d3 = require("https://d3js.org/d3.v5.min.js")
import { select, color } from "@jashkenas/inputs"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.