scene = {
const scene = new THREE.Scene()
scene.background = new THREE.Color('#fff')
const colorMap = d3.scaleOrdinal()
.domain(dataNew.map(function(o) { return o.label; }))
.range(["rgb(6,150,104)", "rgb(52,222,187)", "rgb(7,77,101)", "rgb(141,235,113)", "rgb(27,81,29)", "rgb(145,206,244)", "rgb(27,77,171)", "rgb(218,115,248)", "rgb(104,55,79)", "rgb(223,187,227)", "rgb(116,22,142)", "rgb(202,219,165)", "rgb(122,48,3)", "rgb(234,214,36)", "rgb(32,142,183)", "rgb(52,245,14)", "rgb(183,13,97)", "rgb(101,161,14)", "rgb(192,0,24)", "rgb(246,166,121)", "rgb(124,136,105)", "rgb(255,107,151)", "rgb(63,22,249)", "rgb(101,139,251)", "rgb(166,116,149)", "rgb(242,49,252)"]);
// add plot
for (var i = 0; i < dataNew.length; i++) {
var coord = project3D([dataNew[i].X, dataNew[i].Y], dataNew[i].Z)
var geo = new THREE.SphereGeometry( dataNew[i].value * 0.000009, 10, 10 );
var mat = new THREE.MeshBasicMaterial({color: colorMap(dataNew[i].label)})
var cube = new THREE.Mesh(geo, mat)
cube.position.x = dataNew[i].X
cube.position.y = dataNew[i].Y
cube.position.z = dataNew[i].Z
cube.add.class = i
scene.add(cube)
}
const numberTexture = new THREE.CanvasTexture(
document.querySelector('#number')
);
return scene
}
map = {
const mesh = topojson.mesh(world, world.objects.countries);
const material = new THREE.LineBasicMaterial({color: 0xbbbbbb, linewidth: 1});
const geometry = new THREE.Geometry();
for (const P of mesh.coordinates) {
for (let p0, p1 = project3D(P[0]), i = 1; i < P.length; ++i) {
geometry.vertices.push(p0 = p1, p1 = project3D(P[i]));
}
}
return new THREE.LineSegments(geometry, material);
}
function project3D(coord, t = minDate) {
const proj = coord;
const time = t
return new THREE.Vector3(
proj[0],
proj[1],
time
);
}
data = {
var d = []
for (var i = 0; i < 200; i++) {
d.push({
lat: (Math.random() * 170 - 85),
lon: (Math.random() * 360 - 180),
date: (new Date(Math.random() * (maxDate.getTime() - minDate.getTime()) + minDate.getTime())),
value: Math.random(),
index_value: i
})
}
return d
}
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.
