Part 3: Completing the Visualization

At this point, if you open up viz.html, you will find a complete grid exists with no data points. The code provided between Part 2 and Part 3 in your JavaScript sets up the axis and grid. A lot of this code is boilerplate code and would be something you might copy/paste to a future project.

You are responsible for plotting the data onto that grid. Near the very bottom of mpx.js, you will find a section of code labeled as Part 3.

// Draw the data!
svg.selectAll("circle")
   .data(data)
   .enter()
   // ==[ PART 3 ]==



   // ==[ END of PART 3 ]==

Inside of the "PART 3" block, you must fill in a series of functions that will draw circles for each piece of data. Since we have already called the enter method, 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 method. 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

To help you out, we have provided functions that will return the exact correct x and y locations to draw the center of your circle and you can use the following code for the cx and cy attributes:

.attr("cx", function (d, i) {
   return x(d.score);
})
.attr("cy", function (d, i) {
  return y(d.year);
})

It is up to you to determine the code to set up the r, fill, stroke, and stroke-width attributes. We will provide a bit of guidance to help you out.

Part 3.1: Static attributes

To make your visualization look nice, you should use a radius of 5 for every circle and a stroke width of 2. These values do not depend on your data and can be returned directly in the attr method call.

After adding the cx, cy, r and stroke-width attributes, opening viz.html will reveal a visualization with all of the circles in the correct location without any color (usually completely black). The last thing we have to do is to add color!

Part 3.2: Dynamic attributes

Instead of static attributes, fill and stroke must be colors based on the values contained in the data. For fill and stroke, the value returned must be colors that represent the medal earned.

To find a color, you should use a color picker to select a color that would be best for gold, silver and bronze. Brandon Mathis' HSL Color Picker is a favorite of mine. Once you find the color, you should record the color value, which will be a string like #abcd12, #ace, or rgb(80, 120, 240).

When choosing the colors to use, you will need to find both color for both the fill and stroke (outline color) attributes for each medal. It is standard for the outline to be a slightly darker shade than the inside color.

Remember that d contains your JavaScript object, so you can access the medal won by accessing d.medal. You will need to the medal earned to return the correct color value.

Test and Explore!

At this point, you should have a basic visualization working when you open viz.html! However, feel free to explore d3.js and make the visualization even better!

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!

Doing more won't get you extra extra credit, but if you do make your visualization will get noticed if you do stuff even more awesome by the course staff!

Grading

There is no partial credit on this assignment. To earn full credit, you must have at least ten years of data plotted on your visualization ensuring that each dot is in the correct location with the correct color. Your MP must load when opened with Chrome.

Upload Your Solution

Submit your MPx Solution