mgax · April 29, 2016 22:15
diff --git a/planets.html b/planets.html
 <!doctype html>
 <meta charset="utf-8">
 <body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser-polyfill.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
 <script type="text/babel">

 const π = Math.PI
 const width = 600
 const height = 600

 const planets = [
  {orbit: 0,   size: 15, name: 'Sun'},
  {orbit: 15, size: 6.3, name: 'Earth'},
  {orbit: 22, size: 3.3, name: 'Mars'},
  {orbit: 75, size: 12, name: 'Jupiter'},
  {orbit: 150, size: 10, name: 'Saturn'},
  {orbit: 300, size: 8, name: 'Uranus'},
  {orbit: 450, size: 8, name: 'Neptune'},
 ]

 for(let p of planets) {
  p.φ0 = Math.random()
  p.T = 2 * π * Math.sqrt(Math.pow(p.orbit, 3))
 }

 let svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
  .append('g')
    .attr('transform', `translate(${width/2},${height/2})`)

 let planet = svg.selectAll('.planet').append('circle')
    .data(planets)
  .enter().append('circle')
    .attr('class', 'planet')
    .attr('r', (d) => d.size / 2)

 d3.timer((t) => {
  for(let p of planets) {
    p.φ = p.φ0 + (p.T ? 2 * π * (t / p.T) : 0)
  }
  svg.selectAll('.planet')
      .attr('cx', (p) => Math.cos(p.φ) * p.orbit)
      .attr('cy', (p) => Math.sin(p.φ) * p.orbit)
 })

 </script>
	<!doctype html>
	<meta charset="utf-8">
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser-polyfill.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
	<script type="text/babel">

	const π = Math.PI
	const width = 600
	const height = 600

	const planets = [
	{orbit: 0, size: 15, name: 'Sun'},
	{orbit: 15, size: 6.3, name: 'Earth'},
	{orbit: 22, size: 3.3, name: 'Mars'},
	{orbit: 75, size: 12, name: 'Jupiter'},
	{orbit: 150, size: 10, name: 'Saturn'},
	{orbit: 300, size: 8, name: 'Uranus'},
	{orbit: 450, size: 8, name: 'Neptune'},
	]

	for(let p of planets) {
	p.φ0 = Math.random()
	p.T = 2 * π * Math.sqrt(Math.pow(p.orbit, 3))
	}

	let svg = d3.select('body').append('svg')
	.attr('width', width)
	.attr('height', height)
	.append('g')
	.attr('transform', `translate(${width/2},${height/2})`)

	let planet = svg.selectAll('.planet').append('circle')
	.data(planets)
	.enter().append('circle')
	.attr('class', 'planet')
	.attr('r', (d) => d.size / 2)

	d3.timer((t) => {
	for(let p of planets) {
	p.φ = p.φ0 + (p.T ? 2 * π * (t / p.T) : 0)
	}
	svg.selectAll('.planet')
	.attr('cx', (p) => Math.cos(p.φ) * p.orbit)
	.attr('cy', (p) => Math.sin(p.φ) * p.orbit)
	})

	</script>