31:T11ff,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("id", "SVGchart"); // Dark background svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", dark_background? "#0E0F36":"#FFF"); // Planet group const container = svg.append("g") .attr("id", "orbit_container") .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); // Draw planets and moons container.selectAll("g.planet").data(system_model == 1 ? solar_system : tychnonic_model).enter().append("g") .attr("class", "planet_cluster") .each(function(d, i) { d3.select(this).append("circle") .attr("class", "orbit") .attr("r", d.R); d3.select(this).append("circle") .attr("r", d.r) .attr("cx",d.R) .attr("cy",0) .attr("id", d.name) .attr("class", "planet") d3.select(this).append("g") .attr("transform", "translate(" + d.R + ",0)") .call(g => g.append("text") .attr("fill", dark_background? "white": "black") .attr("dx", "0.8em") .attr("dy", "0.25em") .attr("font-size", 14) .attr("font-face", "Open Sans") .text(d.symbol)); d3.select(this).append("g") .attr("transform", "translate(" + d.R + ",0)") .selectAll("g.moon").data(d.moons).enter().append("g") .attr("transform", "translate(" + d.R + ",0)") .attr("class", "moon_cluster") .each(function(d, i) { // Conditions to display planets' moons. For the Earth, we always display the Moon if(!system_model || heliocentric_options.display_moons || d.name=="Moon" || d.name=="Sun_path") { // Orbits are displayed if(!(d.name=="Sun_path" && !heliocentric_options.Sun_path)){ d3.select(this).append("circle") .attr("class", "orbit_moon") .attr("r", d.R) } d3.select(this).append("circle") .attr("r", d.r) .attr("cx",d.R) .attr("cy", 0) .attr("id", d.name) .attr("class", "moon") d3.select(this).append("g") .attr("transform", "translate(" + d.R + ",0)") .call(g => g.append("text") .attr("fill", dark_background? "white": "black") .attr("dx", "0.5em") .attr("dy", "0.5em") .attr("font-size", 14) .attr("font-face", "Open Sans") .text(d.symbol)) } }); }); // throttle animation setInterval(function(){ var delta = (Date.now() - new Date().setHours(0,0,0,0)); svg.selectAll(".planet_cluster, .moon_cluster") .attr("transform", function(d) { return "rotate(" + (d.phi0 + (delta * (d.speed * speed_factor/1000))) + ")"; }); // We do not rotate symbols svg.selectAll("text") .attr("transform", function(d) { if((system_model == 1) || (d.symbol == "⊙") || (d.symbol == "🜨") || (d.symbol == "☾")){ if(d.symbol == "🜨"){ // Earth symbol translated above the planet if(system_model == 0) return "translate(-16,-20)"; else return "rotate(" + (-d.phi0 + (-delta * d.speed * speed_factor/1000)) + ") translate(-16,-20)"; } else if((system_model == 1) && d.symbol == "☾") return "rotate(" + (-angle_90 - d.phi0 + delta * (Earth_speed - d.speed) * (speed_factor/1000) ) + ") translate(0,-2)"; else return "rotate(" + (-d.phi0 + (-delta * d.speed * speed_factor/1000)) + ")"; } else return "rotate(" + (angle_90 - d.phi0 + delta * (Earth_speed - d.speed) * (speed_factor/1000) ) + ") translate(4,-3)"; }); }, 0); return svg.node(); } 32:T975,solar_system = [ { name: "Sun", symbol: "⊙", R: 0, r: 8, speed: 0, phi0: 0, moons: []}, // Sun, center of the solar system { name: "Mercury", symbol: "☿", R: 40*factor_size, r: 1.5, speed: -8, phi0: -120, moons: []}, // Mercury { name: "Venus", symbol: "♀", R: 70*factor_size, r: 1.5, speed: -3, phi0: -50, moons: []}, // Venus { name: "Earth", symbol: "🜨", R: 100*factor_size, r: 4, speed: -Earth_speed, phi0: angle_90, // Earth moons: [ { name: "Moon", symbol: "☾", R: 10*factor_size, r: 2, speed: -25, phi0: 40 }, // the Moon { name: "Sun_path", R: 100*factor_size, r: 0, speed: 0, phi0: 0} ]}, // Earth-Sun orbit { name: "Mars", symbol: "♂", R: 150*factor_size, r: 3, speed: -1.13, phi0: 20, // Mars moons: [ { R: 6*factor_size, r: 0.5, speed: -200, phi0: 25 }, // phobos { R: 10*factor_size, r: 0.5, speed: -100, phi0: 100 } ]}, // deimos { name: "Jupiter", symbol: "♃", R: 280*factor_size, r: 1.5, speed: -0.5, phi0: 60, // Jupiter moons: [ { R: 5*factor_size, r: 0.5, speed: -100, phi0: 0 }, // io { R: 8*factor_size, r: 0.5, speed: -50, phi0: 15 }, // europa { R: 12*factor_size, r: 0.5, speed: -25, phi0: 100 }, // ganymede { R: 20*factor_size, r: 0.5, speed: -10, phi0: 300 } ]}, // callisto { name: "Saturn", symbol: "♄", R: 380*factor_size, r: 1.5, speed: -0.2, phi0: 160, // Saturn moons: [ { R: 7*factor_size, r: 0, speed: -500, phi0: 0 }, // Saturn rings { R: 7.5*factor_size, r: 0, speed: -400, phi0: 0 }, { R: 9*factor_size, r: 0, speed: -400, phi0: 0 }, { R: 9.5*factor_size, r: 0, speed: -400, phi0: 0 }, ]}, ];33:T5d6,tychnonic_model = [ { name: "Earth", symbol: "🜨", R: 0, r: 4, speed: 0, phi0: 0, // Earth, center of the geo-heliocentric system moons: [ { name: "Moon", symbol: "☾", R: 10*factor_size, r: 2, speed: -25, phi0: 40+angle_90 }, // the Moon { name: "Sun_path", R: 100*factor_size, r: 0, speed: 0, phi0: 0}, // Earth-Sun orbit ]}, { name: "Sun", symbol: "⊙", R: 100*factor_size, r: 8, speed: -Earth_speed, phi0: -angle_90, // Sun moons: [ { name: "Earth_path", R: 100*factor_size, r: 0, speed: -2+Earth_speed, phi0: 0}, // Earth-Sun orbit { name: "Mercury", symbol: "☿", R: 40*factor_size, r: 1.5, speed: -8+Earth_speed, phi0: -120+angle_90}, // Mercury { name: "Venus", symbol: "♀", R: 70*factor_size, r: 1.5, speed: -3+Earth_speed, phi0: -50+angle_90}, // Venus { name: "Mars", symbol: "♂", R: 150*factor_size, r: 3, speed: -1.13+Earth_speed, phi0: 20+angle_90}, // Mars { name: "Jupiter", symbol: "♃", R: 280*factor_size, r: 1.5, speed: -0.5+Earth_speed, phi0: 60+angle_90}, // Jupiter { name: "Saturn", symbol: "♄", R: 380*factor_size, r: 1.5, speed: -0.2+Earth_speed, phi0: 160+angle_90}, // Saturn ]} ];34:[{"id":"e58aa1a2b8be727bf5ee5e7159540b854916a362906561895f912117febe1923b8225f79652829591a91cdeff5e39e4414081ff9d72fe83ed663ef4485137044","href":"https://static.observableusercontent.com/files/e58aa1a2b8be727bf5ee5e7159540b854916a362906561895f912117febe1923b8225f79652829591a91cdeff5e39e4414081ff9d72fe83ed663ef4485137044","name":"De_Motib.Stellae_Martis.jpg","type":"image/jpeg","lastModified":1659263389979.713,"size":432306}] 2f:{"title":"Planetary Orbits: Tychonic vs. heliocentric system","cells":[{"id":0,"value":"md`# Planetary Orbits: Tychonic vs. heliocentric system\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"

Tychonic system vs. Heliocentric system

\n The Tychonic system is a geo-heliocentric model of the Universe proposed by Tycho Brahe in the late 16^th century. In this model, the Earth (🜨) is at the centre of the universe, the Moon (☾), the Sun (⊙) and the stars revolve around the Earth, while the other planets (Mercury ☿, Venus ♀, Mars ♂, Jupiter ♃, and Saturn ♄) revolve around the Sun.\n

\n From a purely mathematical point of view, the Tychonic system is in fact equivalent to the heliocentric system. Indeed, the motions of the planets can be converted from one system to another by a simple transformation of the coordinates. This is what the following animation aims to illustrate.\n
Note that orbits and velocities are not to scale.\n

\n
","pinned":false,"hidden":false,"mode":"html"},{"id":670,"value":"viewof system_model = Inputs.radio(new Map([[\"Heliocentric model\", 1], [\"Tychonic model (geo-heliocentric)\", 0]]), {value: 0, label: \"System\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"display_checkbox = {\n const html = system_model? htl.html`${viewof heliocentric_options}`: htl.html`

`;\n \n yield html\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1872,"value":"viewof dark_background = Inputs.toggle({label: \"Dark background\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1554,"value":"viewof speed_factor = slider({\n title: \"Animation speed\",\n description: \"Slide to change the speed\",\n min: 0,\n max: 100,\n step: 1,\n value: 15,\n format: v => html`${v == 0? 'Stopped' : (v < 20? 'Slow ' : (v < 60? 'Medium' : 'Fast' ) )} (${v}%)
`,\n});\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1647,"value":"
\n

\n In the geo-heliocentric configuration, if you focus on Mars, you should easily recognise a pattern similar to that drawn by Johannes Kepler in Astronomia Nova (see illustration below). \n

Do you need a guide for the eyes? Check out this other notebook that evidences the \"loops of Mars.\"\n

","pinned":false,"hidden":false,"mode":"html"},{"id":1357,"value":"
\n

De Motibus Stellæ Martis\n
[ Source: Astronomia Nova, Johannes Kepler (1609).

\nFor further details, check this notebook dedicated to Johannes Kepler's illustration \"De Motibus Stellae Martis.\"","pinned":false,"hidden":false,"mode":"html"},{"id":1676,"value":"
\nIf you enjoyed this notebook, you may also like this short video that explains the apparent retrograde motion of Mars:","pinned":false,"hidden":false,"mode":"html"},{"id":1669,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":916,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1564,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1951,"value":"// https://observablehq.com/@bcardiff/observable-columns\ncolumns = (args) => {\n const form = html``\n form.value = {}\n\n let cols = 0\n for (const key in args) {\n form.appendChild(args[key])\n cols++\n }\n \n form.style = `width:200px; display: grid; grid-gap: 10px 100px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`\n \n form.oninput = () => {\n form.value = Object.keys(args).reduce((result, key) => {\n result[key] = args[key].value\n return result\n }, Array.isArray(args) ? [] : {})\n }\n form.oninput()\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1949,"value":"viewof heliocentric_options = columns({\n Sun_path: Inputs.toggle({label: '\"Sun path\" inherited from Tychonic model', value: true}), \n display_moons: Inputs.toggle({label: \"Display the moons of other planets\", value: false}),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":" width = Math.min(initial_width,Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)-20);","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"initial_width = 800;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"Earth_speed = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"angle_90 = 90","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"factor_size = width/initial_width","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}