31:T65c,

the Planets in Motion — making things move

orbits are abstracted into circles for simplicity.
the sun is shown very small and completely incorrectly in size, so as to see the planets.
planet relative sizes are correct, but their size relative to their orbits is far from correct. They would be too tiny to see.
rotational movements and time scales are correct, and is the primary purpose of this visual.

concept based on, and working to demonstrate, Jonathan Corum / NY Times' Kepler's Tally of Planets.

32:[{"id":"15d8168c50685eb3275e2a524dca0fe8fd1fec0ad05bec9e6a7718f78373b214732e4a03cc594d14bda97e320c7f8be7f4346f1cfc942230dcbacb06c7de2f9b","href":"https://static.observableusercontent.com/files/15d8168c50685eb3275e2a524dca0fe8fd1fec0ad05bec9e6a7718f78373b214732e4a03cc594d14bda97e320c7f8be7f4346f1cfc942230dcbacb06c7de2f9b","name":"planets.csv","type":"text/csv","lastModified":1640134416725.094,"size":608}] 2f:{"title":"Planets in Motion","cells":[{"id":0,"value":"# Planets in Motion\nA demonstration of objects and animation in d3.\nThe concept is based on Jonathan Corum / NY Times' [Kepler's Tally of Planets]( (group) elements, and are used later to target things specifically within them, while not getting things that are not in them. \n\n**Note:** it is critical to name this cell in observable so it can be referenced later. Click on the cell, then see the name in the panel at the bottom of your Observable interface. This is named planetsinmotion`","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"md`### Now bring in the data, as a referenced CSV file`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = FileAttachment(\"planets.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"toNum = (text) => Number(text.replace(/,/g,'')); \n// this function cleans up numbers as \"text\" from the CSV, removes thousands ,s and makes a number","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"data.forEach((d) => {\n d.distance = toNum(d.distance);\t\t // now we use toNum to clean each data field\n d.radius = toNum(d.radius);\n d.orbit_time = toNum(d.orbit_time);\n d.orbit_ratio = toNum(d.orbit_ratio);\n d.orbit_distance = toNum(d.orbit_distance);\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"md`### Draw the planets, from the data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"viz = d3.select(planetsinmotion).select(\"#solarsystem\") // use d3 to grab the base SVG element to work on.","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"vizWidth = viz.attr(\"width\") // get it's width","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"vizHeight = viz.attr(\"width\") // get it's height","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"center = {\n return {\"x\":vizWidth/2, \"y\":vizHeight/2};\t\t// an x,y pair of where the solarsystem center is on screen\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"md`#### we need a couple of scaling systems:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"scaleOrbit = d3.scaleLinear().domain([0,d3.max(data, d=>d.distance)]).range([0,vizWidth/2+100]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"scalePlanetRadius = 1/10000;\t// just a visual scale.","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"md`#### then we draw the orbits and planets, using d3, from the data...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"orbits = viz.select(\"#orbits\").selectAll(\".orbit\")\n .data(data) \n .join(\"circle\")\n .attr(\"cx\", center.x)\n .attr(\"cy\", center.y)\n .attr(\"r\", d => scaleOrbit(d.distance))\n .classed(\"orbit\",true);","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"planets = viz.select(\"#planets\").selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => center.x + scaleOrbit(d.distance))\t\t// distance from the sun, in the data.\n .attr(\"cy\",center.y)\n .attr(\"r\", d => d.radius*scalePlanetRadius)\t\t// the planet sizes are way overscaled for visibility. Ratios are correct.\n //.attr(\"r\", d => scaleOrbit(d.radius))\t\t// this would be the right way. uncomment and try it. See if you can see them.\n .classed(\"planet\",true);","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"planets.filter(d=>d.name==\"Sun\")\n .classed(\"sun\",true)\n .attr(\"r\",3);\t// Override the sun. I need to waaaaaay underscale it to see the other planets.","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"md`### now animate the motion of the planets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"orbitTurn = -3 // set the speed and direction of orbit as a variable (actually a constant)","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"{\n let frameOrbit;\n function orbit() {\n planets.filter(d=>d.name != \"Sun\") // find all of them other than the sun (!= \"Sun\")\n .attr(\"transform\", d => \"rotate(\" + frameOrbit / d.orbit_ratio * orbitTurn +\" \"+center.x+\" \"+center.y+\")\"); // change rotation\n frameOrbit = requestAnimationFrame(orbit);\n }\n invalidation.then(() => cancelAnimationFrame(frameOrbit));\n frameOrbit = requestAnimationFrame(orbit);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`### and setup interface UI elements to control display\nthe btn- buttons referenced here are already up in the svg (look above), and the planets and orbit circles are also already there and being referenced with these functions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"function showHideOrbits() {\n let orbitLayer = viz.select(\"#orbits\");\n if (orbitLayer.style(\"visibility\") == \"hidden\") {orbitLayer.style(\"visibility\",\"visible\")} // visibility style property of svg object\n else {orbitLayer.style(\"visibility\",\"hidden\")}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"function actualPlanetSizes () {\n planets.attr(\"r\", d => scaleOrbit(d.radius)); // use the correct radius from the data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"function wrongPlanetSizes () {\n planets.attr(\"r\", d => d.radius*scalePlanetRadius); // scale the actual radius by a factor for (overscaled) visibility\n planets.filter(d=>d.name==\"Sun\").attr(\"r\",3); // and override the sun to a static radius value\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"{\n let ui = d3.select(planetsinmotion); // grab the main div (the viz container) to be able to work on.\n ui.select(\"#btn-showhide\").on(\"click\",showHideOrbits); // and assign the button to run the function when it is clicked.\n ui.select(\"#btn-actualsize\").on(\"click\",actualPlanetSizes);\n ui.select(\"#btn-wrongsize\").on(\"click\",wrongPlanetSizes);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"md`### and setup interactive zoom and pan (mouse wheel and click)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"function zoomed({transform}) {d3.select(\"#container\").attr(\"transform\", transform);}\t","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"viz.call(d3.zoom()\n .extent([[0,0],[vizWidth,vizHeight]])\n .scaleExtent([1,20])\n .on(\"zoom\", zoomed));","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}