stars = d3.json('https://raw.githubusercontent.com/ofrohn/d3-celestial/master/data/stars.6.json')
import {map} from '@d3/world-map'
map
plot = {
const height = 600;
// const width = height * 2
const ctx = DOM.context2d(width, height);
const l = width
const r = width / height
const w = l / Math.sqrt(1 + 1 / (r * r))
const h = l / Math.sqrt(1 + (r * r))
// auxiliary figures
ctx.clearRect(0, 0, width, height)
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, width, height)
ctx.strokeStyle = 'blue' // Border color
ctx.lineWidth = 2 // Border width
ctx.strokeRect((l - w) / 2, (l - h) / 2, w, h)
const projection = d3['geoEquirectangular']().rotate(30).clipAngle(30).fitExtent([[0, 0], [width,height]], stars);
const geoPath = d3.geoPath(projection, ctx)
ctx.beginPath()
geoPath(map)
// // Scale the radius of the stars
// const magnitudeScale = d3.scaleLinear()
// .domain(d3.extent(stars.features, d => d.properties.mag))
// .range([10, 0.5])
// const starPath = d3.geoPath(projection, ctx)
// .pointRadius(d => magnitudeScale(d.properties.mag));
// stars.features.forEach(star => {
// ctx.beginPath(), starPath(star), ctx.fillStyle = "#ddd", ctx.fill();
// });
return d3.select(ctx.canvas)
.node();
}
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.
