The aim of this puzzle: Set the radius of the sun
to 20.
Walkthrough of the solution: The sun
object is an SVG circle. The size of a circle is determined by its radius. To set the radius, you use 'r'
as the 1st argument of the .attr()
call. The 2nd argument will be the new value of the radius which should be 20.
Sample code solution:
(Tap below to reveal)
sun.attr('r', 20);
D3 Concepts: .attr(r,)
Additional Code (hidden code that runs before the puzzle’s code):
const xx = window.innerWidth/2;
const yy = window.innerHeight/2;
const planets = [
'mercury',
'venus',
'earth',
'mars',
'jupiter',
'saturn',
'uranus',
'neptune'
];
const offset = {
sun: 0,
mercury: 57,
venus: 108,
earth: 149,
mars: 228,
jupiter: 780,
saturn: 1437,
uranus: 2871,
neptune: 4530
};
const rads = {
sun: 864,
mercury: 3,
venus: 7.5,
earth: 7.9,
mars: 4.2,
jupiter: 88.8,
saturn: 74.9,
uranus: 31.7,
neptune: 30.779
};
const colors = {
sun: '#F3700D',
mercury: '#868686',
venus: '#D5C9AA',
earth: '#374253',
mars: '#8E543E',
jupiter: '#C0A476',
saturn: '#B29D71',
uranus: '#B2D6EB',
neptune: '#3C5BE9'
};
let solarSystem = svg.append('g');
for (let item of planets) {
let rot = `rotate(${pickRandom(360)},${xx},${yy})`;
let off = 20 + offset[item]**0.52;
let planet = solarSystem.append('circle')
.attr('fill',colors[item])
.attr('cx',xx)
.attr('cy',yy-off)
.attr('r',Math.log(rads[item]))
.attr('transform',rot);
let trail = solarSystem.append('path')
.attr('stroke',colors[item])
.attr('stroke-width',1)
.attr('fill','none')
.attr('d',
d3.arc()
.innerRadius(off)
.outerRadius(off)
.startAngle(0)
.endAngle((0.5+Math.random())*Math.PI))
.attr('transform',rot+`translate(${xx},${yy})`);
}
let sun = solarSystem.append('circle').attr('fill','#F3700D').attr('r',0).attr('cx',xx).attr('cy',yy);