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...

1 answer below »
Use html to answer the Code Design critique!


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 orbitProgress = angleScale(earthDays); jupiter.attr("transform", `rotate(${orbitProgress})`); }, 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(${orbitProgress})`); 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(" + orbitProgress + ")"); 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.
Answered Same DayNov 27, 2021

Answer To: Solar System Microsoft Word - Code Design Critique 3.docx PROGRAMMING BASICS FALL 2019 CODE + DESIGN...

Kshitij answered on Dec 04 2021
137 Votes
1. The animation will demonstrate the 4 different plants that are revolving around the orbit along with this there is a start and pause button that help to rotate and stop the revolution. When the planets are revolving around the fixed orbit then they are counted in the years. Each revolution of each planet completed in a fixed year.
The construction of the planet is been done with the help of var function by defining their diameter and the distance from the fixed orbit.
The animation in the html page of planet is been done with the following function that are as follows:
· @keyframes
· animation
· animation-delay
· animation-direction
· animation-duration
· animation-fill-mode
· animation-iteration-count
· animation-name
· animation-timing-function
2. The second function is more effective than previous one because return size and max function is defined in the single variable. In the first function we have to define the return size and max function in two different variables but that increases the timeline of code.
The second function is very much readable then the previous one due to their effective code as all the function are defined in the single variable.
3. The first code is more preferable than the other as compared to second code in only the case when user...
SOLUTION.PDF

Answer To This Question Is Available To Download

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here