chart = {
const scene = new T.Scene()
scene.background = new T.Color('#081f2b')
// let there be light
scene.add(new T.AmbientLight('#ffffff'))
// stars
for (const p of points.values())
scene.add(p)
// planets
for (const mesh of meshes.values())
scene.add(mesh)
while (true) {
controls.update()
renderer.render(scene, camera)
yield renderer.domElement
}
}
update = {
for (const {name, dRA, dDec} of getAllPlanets(t)) {
meshes.get(name).position.setFromSphericalCoords(100, Math.PI / 2 - dDec, dRA)
// meshes.get(name).geometry = ... should update for new magnitude
}
return t
}
ephemeris = require('https://bundle.run/ephemeris@2.0.0')
herravad = [56.0881, 13.2322, 0]
ephemeris.getAllPlanets(new Date(), 0, 0, 0)
getAllPlanets = {
const cache = new Map()
return (t) => {
if (cache.has(t)) return cache.get(t)
const planets = Object.values(ephemeris.getAllPlanets(t, ...herravad).observed)
.filter(d => 'magnitude' in d.raw)
.map(({ name, raw }) => ({
name: name,
magnitude: raw.magnitude,
dRA: raw.position.apparent.dRA,
dDec: raw.position.apparent.dDec
}))
cache.set(t, planets)
return planets
}
}
times = d3.timeHour.every(12).range(new Date('1576-01-01'), new Date('1576-12-31'))
import { stars } from '@visnup/yale-bright-star-catalog'
radius = d3.scaleLinear([6, -2], [0, 2])
T = {
const THREE = window.THREE = await require('three@0.124')
await require('three@0.124/examples/js/controls/OrbitControls.js').catch(() => {})
return THREE
}
meshes = {
const meshes = new Map(getAllPlanets(times[0]).map(({name, magnitude}) => [
name, new T.Mesh(new T.SphereBufferGeometry(radius(magnitude)/3, 8, 8), colors[name] || white)
]))
invalidation.then(() => { for (const {geometry} of meshes.values()) geometry.dispose() })
return meshes
}
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
}
white = {
const white = new T.MeshBasicMaterial({ color: 0xffffff })
invalidation.then(() => white.dispose())
return white
}
colors = {
const colors = Object.fromEntries([
['mercury', 0x9C999A],
['venus', 0xE9DFD4],
['mars', 0xDD8665],
['jupiter', 0xC5BBAE],
['saturn', 0xB7A177],
['uranus', 0xD7F4F7],
['neptune', 0x7A92B7],
].map(([name, color]) => [name, new T.MeshBasicMaterial({ color })]))
invalidation.then(() => {
for (const material of Object.values(colors))
material.dispose()
})
return colors
}
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 = width <= 480 ? width * 1.5 : width / 1.5
import { Scrubber } from '@mbostock/scrubber'
// import { nominative } from '@mbostock/star-map'
d3 = require('d3-scale@3', 'd3-time@2')
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.
