About MP8: An Extra Credit MP

As announced in lecture, CS 105 is offering an MP8 that can replace any single MP score. Specifically:

• Completing MP8 will be worth at least +5 extra credit points, even if you have a 100% on all MPs.
• If you have lost points on any previous MP, MP8 will be used to replace a single MP.
• We will use MP8 to replace the MP that would net you the most extra credit, regardless of raw score.
• If replacing that score would earn you less than +5 points, +5 points will be given instead of a replacement.
• MP8 cannot be used to replace any score that was adjusted to 0 due to academic integrity concerns and MP8 cannot be used to replace your final project (or anything other than MP0-MP7)

Since MP8 is purely extra credit, MP8 is not required. Not completing MP8 will not impact your grade in any way. Since CS 105 uses an absolute grading scale, not getting these extra credit points will not hurt you compared to everyone else (that is, getting to 900 points gets you an A-, no matter how you get there).

Introduction

After the 2012 Summer Olympics, The New York Times created a visualization of the gold medal performance of the Men's 100-Meter Sprint that shows how significantly faster athletes have gotten since the first modern Olympic Games. You will be creating a visualization inspired by The Times visualization using the exact same tool as they used, d3.js.

In this MP, you will create the following visualization (though with different data), showing the gold, silver, and bronze medals for at least the most recent ten Olympic games:

From this visualization, you can quickly see that any runner winning gold in 1992 or earlier would not have even placed in 2008 or 2012. In this MP, you will gather data about your own sport and plot those medals onto the grid.

The Files

To complete this MP, we have already given you a base setup to work with. You can download the ZIP of these files here. As with all ZIP files in CS 105, you must extract the files into their own directory before working with them.

In completing this MP, you will only need to edit mp8.html. The two JavaScript libraries (d3.js and underscore.js) and CSS file are used by the HTML file and need to stay in the same directory.

Coding the MP: Part 1, The Data

In this MP, you will be working with a sport that is uniquely yours. You must go here to find out your sport (login required). Your data will be different than the sample data we use here.

Within mp8.html, Lines 17-19 contain an empty array that you need to populate with data. The data must be populated to conform to a very specific format:

• The scores array must contain arrays of JavaScript objects.
• Each inner-array (the array of JavaScript objects) must contain one JavaScript objects for each medal in a given Olympic year
• The JavaScript object must contain, at a minimum, the following key/values:
• score (Number), the score or time of the athlete
• year (Number), the year of the Olympic games
• medal (String), either "Gold", "Silver", or "Bronze"
• (You may add other key/values, but the following three key/values must be present)

As an example, the following code shows the first two years of data for the Men's 100-Meter Sprint:

var scores =
[
	[
		{ score: 9.63, medal: "Gold", year: 2012 },
		{ score: 9.75, medal: "Silver", year: 2012 },
		{ score: 9.79, medal: "Bronze", year: 2012 }
	],
	[
		{ score: 9.69, medal: "Gold", year: 2008 },
		{ score: 9.89, medal: "Silver", year: 2008 },
		{ score: 9.91, medal: "Bronze", year: 2008 }
	]
];

Your data must contain at least ten Olympic years worth of Olympic data starting with the most recent Olympics. You can add more than ten years, but at least ten years is required.

Coding the MP: Part 2, The Plot

After filling in the array with the data, when you open mp8.html within a web browser you will see a grid has already been created for you by the code we have provided. You are responsible for plotting the data onto that grid.

Approximately 100 lines further down in the file, you will find a block of code similar to what you saw in lecture on Wednesday, Dec. 3rd, and includes a "PART 2" comment block:

// Draw the data!
svg.selectAll("circle")
   .data(scores)
   .enter()
   .append("g")
   .selectAll("circle")
   .data(function (d, i) { return d; })
   .enter()
   // ==[ PART 2 ]==
   


   // ==[ END of PART 2 ]==

Inside of the "PART 2" block, you must fill in a series of chaining functions that will draw circles for each piece of data. Since we have used the .enter() command, d3.js will run your code once for every single piece of data you entered. That means we will only append a circle once, as that action of appending a circle is going to be repeated for every data point.

Since we want to draw a circle for each data point, you must use a .append("circle") as your first chained function. In d3, a circle is defined by three key attributes:

• cx, the center x-coordinate (how far to the left of the image is the center of the circle?)
• cy, the center y-coordinate (how far from the top of the image is the center of the circle?)
• r, the radius of the circle

Additionally, there are three other attributes you will set for each circle:

• fill, the color to fill in the circle
• stroke, the color to outline the circle
• stroke-width, the width of the outline of the circle

It is up to you to determine the cx, cy, fill, and stroke attributes based on the values of the data. However, to make your points fit nicely on the grid that was provided for you, you should use a radius of 5 and a stroke-width of 2.

In order to tell d3.js the values of cx and others, you must use the attr()-chaining function. This function takes a function as its parameter and lets you write JavaScript that must return the value you want for the given attribute. An example attr() function call is as follows:

.attr("cy", function (d, i) {
   return 30;
})

In the code above, the code always returns 30. You will need to modify this function to return the correct values, though both r and stroke-width do return static values so they should be really easy!

The values that should be returned, and things to consider as you come up with the formulas, are:

• For cx, the value returned must be where the medal should be centered starting from the left side of the screen. This will be based on where the score is relative to the maximum and minimum scores, multiplied by the width of the grid. We have already calculated the maximum and minimum scores in all the data you entered and have stored the maximum score in the variable score_max and minimum score in score_min. The full width of the grid is defined in variable w.
  
  Additionally, you should add 10 to your answer. (The grid is positioned 10 pixels from the edge of the SVG to allow for the circle to be drawn, by adding 10 you will be positioning the circle correctly onto the grid.)
  
  Since d contains your JavaScript object, you can access the score of the athlete by accessing d.score.
  
  
• For cy, the value returned must be where the medal should be centered starting from the top of the screen. Each year should be 20 pixels below the previous year and the first year should be located 30 pixels from the top.
  
  Since d contains your JavaScript object, you can access the year by accessing d.year. You will need to do some math on that year to find its location on the grid.
  
  
• For fill and stroke, the value returned must be colors that represent the medal earned. You can use any color picker tool to select your color (the top few google results for "Color Picker&qout; are all great JavaScript-based color pickers). The format of a color should be something like #abcd12 or #ace or rgb(80, 120, 240).
  
  When choosing the colors to use, notice that fill is the inner-color and stroke is the outline color. It is standard for the outline to be a slightly darker shade than the inside color.
  
  Since d contains your JavaScript object, you can access the medal won by accessing d.medal. You will need to use this information to figure out which color to return.
  
  

You should complete Part 2 of your MP, which requires filling in several attr() functions inside of the "PART 2" area. The following shows a bit of how to get started:

// Draw the data!
svg.selectAll("circle")
   .data(scores)
   .enter()
   .append("g")
   .selectAll("circle")
   .data(function (d, i) { return d; })
   .enter()
   // ==[ PART 2 ]==
   .append("circle")
   .attr("r", function (d, i) {
      return 5;
   })
   ... more attr() functions ...
   // ==[ END of PART 2 ]==

Explore!

Once you have finished Part 2, feel free to explore d3 and make the visualization even better! So long as each medal is shown in the right color in a way that shows how the scores compare, you will earn full credit. Doing more won't get you extra, extra credit, but if you do make your visualization even more awesome than what is required let me know (waf@) so I can check it out! (If you add more js/css, just keep it all within the HTML file as you can only submit one file.)

A few ideas:

• When you mouse over a medal, something that tells you who won it, where they're from, the exact score, or other information would be pretty awesome!
• To the left/right/somewhere of the year, showing the country/name of the athlete/etc of who won could be nice.
• Other stuff, too!

Grading

There is no partial credit on this assignment. To earn full credit, you must have at least ten years of data plotted on the SVG in the correct location with the correct medal color for the sport that was assigned to you.

Submission

Upload your submission here.