Solar System
Microsoft Word - Code Design Critique 3.docx
PROGRAMMING BASICS
FALL 2019
CODE + DESIGN CRITIQUE 3 (20 points)
Due Tuesday, December 3 (5 PM)
Provide your responses in a single PDF file and upload to Blackboard
In this Code + Design Critique, you are asked to reflect on the solar system animation demo we
completed in class last week. This critique will assess your understanding of how that demonstration
works; you will be evaluated on the thoughtfulness and precision of your responses.
A completed copy of the demonstration is attached to this assignment/critique. Using that copy of
the code, respond to the following questions.
1. (1 point) In your own words, describe how this demonstration works. Your description should
address at a minimum each of the following: What is the demonstration an animation of? How
are the shapes in that animation being created? What makes the animation “run?”
2. (2 points) In this demonstration, we use the following code pattern:
var maxRadius = d3.max(planets, function(d) { return d.size; });
var radiusScale = d3.scaleLinear()
.domain([0, Math.ceil(maxRadius)])
.range([0, 50]);
Alternatively, we could have achieved the same outcome with this pattern:
var radiusScale = d3.scaleLinear()
.domain([0, d3.max(planets, function(d) { return d.size; })])
.range([0, 50]);
Explain the technical difference between these two patterns. Is one pattern more efficient than
the other? Why or why not? Is one pattern more readable than the other? Why or why not?
3. (1 point) Imagine a situation in which the first pattern from Question 2 would be more useful to
write than the second pattern. Describe this situation and why the first pattern would be more
useful.
PROGRAMMING BASICS
FALL 2019
4. (1 point) In this demonstration, we also use this pattern:
startButton.on("mouseover", function() {
d3.select(this).classed("hover", true);
}).on("mouseout", function() {
d3.select(this).classed("hover", false);
});
Explain what this pattern is doing. What is the purpose of this code block?
5. (1 point) We could have written the code pattern from Question 4 in this way to produce the same
effect:
startButton.on("mouseover", function() {
d3.select(this).attr("fill", "#F6C900");
}).on("mouseout", function() {
d3.select(this).attr("fill", "#FFFFFF");
});
Explain the technical difference between this pattern and the pattern from Question 4. (What are
these two patterns doing differently?)
6. (2 points) Compare the code patterns from Question 4 and Question 5. Is one of these more
efficient than the other? Why or why not? Is one of these more transparent in what it is doing?
Why or why not?
7. (1 point) Think of one situation in which using the pattern from Question 4 would be more useful,
efficient, and practical than the pattern in Question 5. Describe this situation and explain why
the pattern in Question 4 would be more useful in this case.
8. (2 points) When we created the animation, we began by animating a single planet in the solar
system, using the following code pattern:
var jupiter = planetMarkers.filter(function(d) { return d.name === "Jupiter"; });
PROGRAMMING BASICS
FALL 2019
var angleScale = d3.scaleLinear()
.domain([0, 4380])
.range([0, 360]);
setInterval(function() {
earthDays += 5;
var o
itProgress = angleScale(earthDays);
jupiter.attr("transform", `rotate(${o
itProgress})`);
}, 5);
Explain what is happening in this pattern. What is the variable ‘jupiter’ a reference to? What is
angleScale used for? What is happening inside the setInterval() timer?
9. (2 points) Notice that in Question 8, we define the upper limit of the domain of angleScale with
an explicit, hard-coded value of ‘4380.’ We typed in this value by copying it directly from the data
set at the top of the document. What is the value ‘4380’ a reference to? Is this an efficient way
to define the upper limit of this domain? Why or why not? Describe an alternative way to define
the upper limit of this domain that doesn’t rely on typing in explicit, hard-coded values.
10. (2 points) Notice that in Question 8, we use the following pattern:
jupiter.attr("transform", `rotate(${o
itProgress})`);
The expression inside the backticks (`…`) is called a template literal. It enables us to embed
expressions inside of strings (or “string literals”). We could have alternatively written this pattern
like this:
jupiter.attr("transform", "rotate(" + o
itProgress + ")");
Describe the technical difference between these two approaches. Is one more efficient and/or
elegant than the other? Why or why not?
11. (1 point) After doing this for one planet, we generalized this pattern to animate all the planets
simultaneously. Although the pattern in Question 8 is readable, it is inefficient for animating all
the planets. Why is it inefficient? Think about what the code would look like if you used this
PROGRAMMING BASICS
FALL 2019
pattern for each individual planet in the solar system animation.
12. (2 points) Compare the pattern in Question 8 to the final pattern we used in the demonstration
to animate all the planets simultaneously. Why is the final pattern we used more efficient? What
aspects or features of the final pattern make it more efficient than the pattern in Question 8? Be
specific.
13. (2 points) Generalize some principles of efficiency from this code sample. Based on the above
questions, describe at least 2 general principles of writing code that can make that code more
efficient.