MPx: An Extra Credit MP

This MP is provided both as a review of JavaScript in preparation for the final exam and a way to makeup an MP or to gain a few points of extra credit before the final. Specifically:

Since MPx is purely extra credit, MPx is not required. Not completing MPx 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).

There is no partial credit on this MP. You must complete all parts of this MP to get the extra credit. As an extra credit MP that can replace an MP grade, this MP is on the level of difficulty as the final MPs for each of the major units (MP3 / MP6). You should make sure you can spend several hours on this MP if you choose to do it.

This is a solo assignment

As with all MPs in CS 105, this MP is a solo assignment. You should review the academic integrity policy on the course syllabus to understand acceptable ways to get help and help others on this assignment while ensuring that solo work is done. Even though this MP is worth only extra credit, cheating on this MP holds the same penalty of a full letter grade deduction as other MPs.


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:

Olympic Medal Winners in Men's 100-Meter Sprint

Time (seconds)

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.

Starter Files

To complete this MP, we have started you off with a set of files that have some of the code already complete:

As with all ZIP files, you must extract the files into their own directory before working with them. This MP comes with several files and folders. All of them must remain together in the directory for this MP to work properly. You will be writing your code in mpx.js.

Part 1: Data

Finding Your Sport

In this MP, you will be working with a sport that is uniquely yours. This sport will be different than the data shown here and you will need to find the data that goes along with your sport (Wikipedia is a great source):

Adding the data to JavaScript

Within mpx.js, Lines 10-12 contains an empty array that you need to populate with data. The data must be populated to conform to a very specific format:

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. This means your will have ~30 entries.

Working with real data is sometimes messy. In some events, there may be two medals given due to a tie or other odd cases. Your data should be reflect your research on the results of the Olympic Games.

Test Your Code!

As part of this MP, a test suite is provided for you to help you understand what part of the MP is currently not working. Once you have completed Part 1, open tester.html in a web browser and ensure that all of the tests listed in "Overall" and "Part 1" are complete!

Part 2