Graphics @nytopinion
Published
Edited
Dec 20, 2018
10 stars
particleSystem = {
const colorScale = d3.scaleLinear()
.domain(d3.extent(data, row => +row.i_mid))
.range(['#ffffbf', '#a50026'])
.interpolate(d3.interpolateHcl);
const size = d3.scaleSqrt()
.domain([0, d3.max(data, row => +row.i_mid)])
.range([2, 50]);
const projection = d3.geoNaturalEarth1()
.fitExtent([[1, 1], [width, height]], {type: "Sphere"})
.precision(0.1);
const geometry = new THREE.BufferGeometry();
const vertices = [];
const colors = [];
const sizes = [];
let color = new THREE.Color(0x000000);
data.forEach(row => {
const posX = projection([row.xcoord, row.ycoord])[0]-width/2; //center map
const posY = 0;
const posZ = projection([row.xcoord, row.ycoord])[1]-height/2; //center map
vertices.push(posX, posY, posZ);
color.setStyle(colorScale(+row.i_mid));
colors.push(color.r, color.g, color.b);
sizes.push(~~size(+row.i_mid));
})
geometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
geometry.addAttribute('size', new THREE.Float32BufferAttribute(sizes, 1).setDynamic(true));
const material = new THREE.ShaderMaterial({
uniforms: {},
vertexShader: vertexShader,
fragmentShader: fragmentShader,
transparent: true,
blending: THREE.NormalBlending,
vertexColors: true
});
const particleSystem = new THREE.Points(geometry, material);
return particleSystem
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color('#CCCCCC');
const ambientLight = new THREE.AmbientLight('white', 0.25);
const spotLight = new THREE.SpotLight('white');
spotLight.position.set( 15, 15, 20 );
// uncomment if you want to see axes
// const axesHelper = new THREE.AxesHelper( 850 );
// scene.add( axesHelper );
scene.add(ambientLight);
scene.add(spotLight);
// clean previously added particle systems
particleSystem.name = 'particleSystem';
scene.remove(scene.getObjectByName('particleSystem'));
scene.add(particleSystem);
return scene
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
