map = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("display", "block")
svg.append("path")
.attr("d", path(outline))
.attr("fill", "none")
.attr("stroke", "currentColor");
svg.append("g")
.attr("stroke", "black")
.selectAll("circle")
.data(starData)
.join("circle")
.attr("r", d => radius(d.magnitude))
.attr("transform", d => `translate(${projection(d)})`);
if (constelations.indexOf("c") > -1) {
svg.append("g")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(constelationsData.features)
.enter()
.append("path")
.attr("stroke", "blue")
.attr("fill", "none")
.attr("d", f => path(f));
}
if (constelations.indexOf("c") > -1 && constelations.indexOf("n") > -1) {
svg.append("g")
.attr("font-size", "smaller")
.selectAll(".constName")
.data(constelationsData.features)
.enter()
.append("text")
.attr("fill", "green")
.attr("transform", function(f) { return "translate(" + projection(d3.geoCentroid(f)) + ")"; })
.text(d => d.id);
}
if (constelations.indexOf("m") > -1) {
svg.append("g")
.attr("stroke", "black")
.attr("fill", "none")
.attr("opacity", 0.45)
.selectAll("path")
.data(milkywayData.features)
.enter()
.append("path")
.attr("d", f => path(f));
}
return svg.node()
}
path = d3.geoPath(projection.rotate([-coord[0], -(coord[1] + timeDegreeShift)]))
//projection = d3.geoDodecahedral();
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
radius = d3.scaleLinear([6, -1], [0, 1])
starData = (d3.csvParse(await FileAttachment("stars.csv").text(), d => {
d3.autoType(d);
d[0] = (d.RA_hour + d.RA_min / 60 + d.RA_sec / 3600) * 15; // longitude
d[1] = d.dec_deg + d.dec_min / 60 + d.dec_sec / 3600; // latitude
return d;
})).filter(sd => sd.magnitude < mag);
constelationsData = JSON.parse(await FileAttachment("constellations.lines.json").text())
milkywayData = JSON.parse(await FileAttachment("mw.json").text())
timeDegreeShift = {
const dt = new Date(Date.parse(d1+' ' + t));
var yr = dt.getUTCFullYear();
var mo = dt.getUTCMonth() + 1;
const dy = dt.getUTCDate();
const h = dt.getUTCHours();
const m = dt.getUTCMinutes();
const s = dt.getUTCSeconds();
if ((mo == 1)||(mo == 2)) {
yr = yr - 1;
mo = mo + 12;
}
const a = Math.floor(yr / 100);
const b = 2 - a + Math.floor(a / 4);
const c = Math.floor(365.25 * yr);
const d = Math.floor(30.6001 * (mo + 1));
// days since J2000.0
var jd = b + c + d - 730550.5 + dy + (h + m/60.0 + s/3600.0)/24.0;
// julian centuries since J2000.0
var jt = jd/36525.0;
// the mean sidereal time in degrees
var mst = 280.46061837 + 360.98564736629*jd + 0.000387933*jt*jt - jt*jt*jt/38710000;
// in degrees modulo 360.0
if (mst > 0.0)
while (mst > 360.0) mst = mst - 360.0;
else
while (mst < 0.0) mst = mst + 360.0;
return mst;
}
d3 = require("d3@5", "d3-geo@1", "d3-geo-projection@2", "d3-dsv", "d3-geo-polygon@1")
import {projectionInput} from "@fil/d3-projections"
import {checkbox,slider,coordinates,date,time} 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.
