Public
Edited
Aug 6, 2023
38 stars
Plot.plot({
width: Math.min(800, width),
height: Math.min(800, width),
margin: framing.margin,
style: {
background: '#000',
},
projection: {
rotate: [rotation, -elevation, 20*0],
...framing.projection,
},
r: {
range: [0.25, 2 * width/1e3],
},
marks: [
// Graticule and frame
Plot.graticule({strokeOpacity: 0.3, stroke: '#fff', strokeWidth: width/1000}),
Plot.sphere({ stroke: '#fff' }),
// Transparent circles around each constellation, for hover functionality
Plot.geo(sky.constellations, {
geometry: d3.geoCircle()
.center(d => [d.circle.x, d.circle.y])
.radius(d => d.circle.r),
fill: 'transparent',
title: 'word',
}),
// Constellation strokes
Plot.geo(sky.constellations, {
geometry: d => d.geoStrokes,
stroke: '#fff',
strokeWidth: 0.5 * width/1e3,
}),
// stars
Plot.geo(sky.stars.features, {
r: d => d.properties.r,
fill: '#fff',
}),
// Constellation labels
Plot.text(sky.constellations, {
text: d => d.word,
x: d => d.circle.x,
y: d => d3.min(d3.merge(d.geoStrokes.geometry.coordinates).map(p => p[1])) - 1,
fill: '#fff',
fontSize: 10 * width / 1000,
fontFamily: 'serif',
fontStyle: 'italic',
})
]
})
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.
