stars = d3.json('https://raw.githubusercontent.com/ofrohn/d3-celestial/master/data/stars.6.json')
starnames = d3.json('https://raw.githubusercontent.com/ofrohn/d3-celestial/master/data/starnames.json')
constellationLines = d3.json('https://raw.githubusercontent.com/ofrohn/d3-celestial/master/data/constellations.lines.json')
plot = {
// Adapted from Stars and Constellations by Gareth Peat
const height = 600;
// const w = height*2;
const padding = 10;
const context = DOM.context2d(width, height);
// fitExtent centers the given GeoJSON object in the projection. So [0, 0] in that object will
// be at the center of the given rectangle. Without this, I have to guess at what the scale is
// going to be and adjust the size. I'm not sure where it gets the center otherwise (maybe
// from the context2d?
const projection = d3['geoEqualEarth']().fitExtent([[10, 10], [width-padding,height-padding]], stars);
// Scale the radius of the stars
const magnitudeScale = d3.scaleLinear()
.domain(d3.extent(stars.features, d => d.properties.mag))
.range([3, 0.5])
const starPath = d3.geoPath(projection, context)
.pointRadius(d => magnitudeScale(d.properties.mag));
context.clearRect(0, 0, width, height);
context.fillStyle = "#000", context.fillRect(0, 0, width, height);
stars.features.forEach(star => {
context.beginPath(), starPath(star), context.fillStyle = "#ddd", context.fill();
});
return d3.select(context.canvas)
.node();
}
plotSvg = {
const height = 600;
// const w = height*2;
const padding = 10;
const svg = d3.select(DOM.svg(width, height));
svg.append("rect").attr("width", width).attr("height", height).attr("fill", "#000");
// fitExtent centers the given GeoJSON object in the projection. So [0, 0] in that object will
// be at the center of the given rectangle. Without this, I have to guess at what the scale is
// going to be and adjust the size. I'm not sure where it gets the center otherwise (maybe
// from the context2d?
const projection = d3['geoEqualEarth']().fitExtent([[10, 10], [width-padding,height-padding]], stars);
// Scale the radius of the stars
const magnitudeScale = d3.scaleLinear()
.domain(d3.extent(stars.features, d => d.properties.mag))
.range([3, 0.5])
const starPath = d3.geoPath(projection)
.pointRadius(d => magnitudeScale(d.properties.mag));
// Note, we could do this with plotting stars as a single path, but then the
// pointRadius function gets the whole feature collection rather than each individual feature.
svg.selectAll("path")
.data(stars.features)
.enter().append('path')
.attr("d", starPath)
.attr("fill", "#ddd")
;
return svg.node()
}
import {autoSelect} from "@jashkenas/inputs"
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.
