Skip to content

Instantly share code, notes, and snippets.

@jpwsutton
Created December 31, 2021 16:07
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • 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.

Requirements

git clone https://github.com/ofrohn/d3-celestial.git npm install jsdom

Finally, add a lib directory and download require.js into it from here: https://requirejs.org/docs/download.html

Running

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 =>{
//console.log(dom.serialize());
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
},
mw:{
show: true
},
}
var window = dom.window;
window.onModulesLoaded = function() {
console.log("Modules Loaded");
window.Celestial.display(config);
window.Celestial.exportSVG(function(svg){
console.log("Canvas exported")
fs.writeFile('celestial.svg', svg, function(err){
if(err){
return console.log(err);
};
console.log("SVG was saved!")
})
})
}
// window.Celestial.display(config);
//window.Celestial.date(new Date("2021-12-30T06:00:00Z"));
//var canvas = window.document.querySelector('#celestial-map')
// console.log(canvas);
});
<!DOCTYPE HTML>
<html lang="en">
<head>
<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">
</head>
<body>
<div style="overflow:hidden;"><div id="celestial-map"></div>
<script>
requirejs(["celestial"], () => {
window.onModulesLoaded();
});
</script>
</body>
</html>
@RoelZ
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