Public
Edited
Dec 2, 2022
3 forks
6 stars
chart = {
const scene = new T.Scene()
scene.background = new T.Color('#081f2b')
scene.add(new T.AmbientLight('#ffffff'))
for (const p of points.values())
scene.add(p)
while (true) {
renderer.render(scene, camera)
yield renderer.domElement
}
}
radius = d3.scaleLinear([6, -1], [0, 2])
points = {
const points = new Map()
for (const {mag, sra0, sdec0} of stars) {
const r = Math.round(radius(mag) * 10) / 10
if (r > 0) {
const p = points.get(r) || new T.Points(new T.Geometry(), new T.PointsMaterial({ size: r }))
p.geometry.vertices.push(new T.Vector3().setFromSphericalCoords(100, Math.PI / 2 - sdec0, sra0))
points.set(r, p)
}
}
invalidation.then(() => {
for (const {geometry, material} of points.values()) {
geometry.dispose()
material.dispose()
}
})
return points
}
controls = {
const controls = new T.OrbitControls(camera, renderer.domElement)
controls.enablePan = false
controls.enableZoom = true
controls.minDistance = 20
controls.maxDistance = 200
controls.rotateSpeed = -1
return controls
}
camera = {
const camera = new T.PerspectiveCamera(75, width / height, 1, 1000)
camera.position.set(0, 0, 100)
camera.updateProjectionMatrix()
return camera
}
renderer = {
const renderer = new T.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(width, height)
return renderer
}
height = mobile ? width * 1.5 : width / 1.5
mobile = width <= 480
import { stars } from '@visnup/yale-bright-star-catalog'
// Load Three.js and the orbit controls.
T = {
const THREE = window.THREE = await require('three@0.124')
await require('three/examples/js/controls/OrbitControls.js').catch(() => {})
return THREE
}
d3 = require('d3-scale@3')
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.
