Skip to content

Instantly share code, notes, and snippets.

Created December 31, 2021 16:07
Show Gist options
  • Save jpwsutton/f9e5ae50cbc3f8a2cc2a53d56b902a3a to your computer and use it in GitHub Desktop.
Save jpwsutton/f9e5ae50cbc3f8a2cc2a53d56b902a3a to your computer and use it in GitHub Desktop.
Headless d3-celstial

Headless d3-celestial setup

This gist is a bit of a hack that lets you generate a d3-celestial svg without a web browser.


git clone npm install jsdom

Finally, add a lib directory and download require.js into it from here:


node celestial-headless.js

var jsdom = require('jsdom');
var fs = require('fs');
const { JSDOM } = jsdom;
JSDOM.fromFile("stub.html", {runScripts: "dangerously", resources: "usable"}).then(dom =>{
var config = {
width: 400,
projection: "stereographic",
geopos: [51, 0],
orientationfixed: true,
follow: "center",
interactive: false,
center: [0,0,0],
advanced: false,
form: false,
formFields: {},
location: true,
datapath: "d3-celestial/data/",
planets: {
show: true,
stars: {
show: true,
limit: 3.5,
colors: false,
style: { fill: "#000000", opacity: 1},
designation: false,
propername: false,
constellations: {
names: false,
lines: true,
dsos: {
show: false
show: true
var window = dom.window;
window.onModulesLoaded = function() {
console.log("Modules Loaded");
console.log("Canvas exported")
fs.writeFile('celestial.svg', svg, function(err){
return console.log(err);
console.log("SVG was saved!")
// window.Celestial.display(config);
// Date("2021-12-30T06:00:00Z"));
//var canvas = window.document.querySelector('#celestial-map')
// console.log(canvas);
<html lang="en">
<meta charset="utf-8">
<title>D3-Celestial Starmap</title>
<script type="text/javascript" src="d3-celestial/lib/d3.min.js"></script>
<script type="text/javascript" src="d3-celestial/lib/d3.geo.projection.min.js"></script>
<script type="text/javascript" src="d3-celestial/celestial.js"></script>
<script data-main="d3-celestial/celestial" src="lib/require.js"></script>
<link rel="stylesheet" href="d3-celestial/celestial.css">
<div style="overflow:hidden;"><div id="celestial-map"></div>
requirejs(["celestial"], () => {
Copy link

RoelZ commented Aug 26, 2022

I know it has been awhile since this is written, but for anyone that drops by, don't for get to install canvas aswell. If you want to run exactly what @jpwsutton has hacked together 😎

Also this is a direct response to the feature request for running D3 Celestial to render SVG in headless mode.
Now there is D3-node but I haven't figured out a proper way to integrate Celestial into this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment