Map of Places explainer

The aim of this puzzle: Add the places to the map by using the drawOnMap function.
Walkthrough of the solution: When the starter code runs, you see that there is a blank grid. You need to add each place from arrayOfPlaces on the map using the drawOnMap function. There’s already a for...of loop set up for you to use. It runs through all the places, but you need to make sure it does something with them – draw them on the map using drawOnMap(...). What arguments does the function take – what goes in the parentheses? If you look at the function definition, you’ll see drawOnMap asks for an x, y, and color value. So, if you’re given a place object from the array, how to you access its x, y, and color value? By using member expressions – the property name with a dot before it. That means would give you the name of the place, and place.color will give you the color, and so on. Now if you run the code again, there will be part of a black circle in the top left corner of the map. That’s because the drawOnMap function wasn’t completed – it doesn’t use its parameters: x, y, and color. You want to make sure the .attr() for cx is set to x, cy is set to y, and fill is set to color. Then, everything should work!
Sample code solution:
(Tap below to reveal)

var arrayOfPlaces = [
    name: 'mall',
    x: 240,
    y: 160,
    color: red
    name: 'home',
    x: 50,
    y: 70,
    color: blue
    name: 'gym',
    x: 100,
    y: 140,
    color: yellow
    name: 'work',
    x: 180,
    y: 30,
    color: white
function drawOnMap(x, y, color) {
    var newPoint = svg.append('circle')
                     .attr('r', 8);
    newPoint.attr('cx', x)
      .attr('cy', y)
      .attr('fill', color);
for (var place of arrayOfPlaces) {
    drawOnMap(place.x, place.y, place.color);

JavaScript Concepts: Code Block (function, for loop), Chaining, D3 Library, D3 Modifiers
D3 Concepts: .append(), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,)
Additional Code (hidden code that runs before the puzzle’s code):

for (var i=0; i<400; i = i + 20) {
    var line = svg.append('rect').attr('width', 1).attr('height', 400).attr('x', i).attr('fill', 'slategrey');
for (var i=0; i<400; i = i + 20) {
    var line = svg.append('rect').attr('width', 400).attr('height', 1).attr('y', i).attr('fill', 'slategrey');

I am stuck on the last part of Map of places. I can’t figure out where to put my attr.

Hey @Stoked,

Do you want to share a screenshot of your code? That why we can try give some pointers on where to make adjustments?

H :slight_smile:

Hey @Stoked,

You don’t need any attr() calls inside your for loop. Instead, you just need to call the drawOnMap() function and add arguments for x, y and color.

Since you’re looping through the array arrayOfPlaces, each element you’re looping through is an object. For each object, you want to draw that point on the map, so you’ll need it’s x value, it’s y value and it’s color value and pass those to drawOnMap().

To access an objects property you can use dot notation, so inside your for loop the code should look something like: drawOnMap(place.x, place.y, place.color).

H :slight_smile:

I’m still stuck. I can’t figure out how to paint the objects on the grid. This is all I have so far.

It is not working because you have used ‘quotes’, which are used for calling a string. You want an object, so no quotes. Otherwise looks great!
use place.x
not ‘place.x’

1 Like

hi I am stuck… on maps of places… I reveled answer and I had it exactly like the answer… help!

Hi @Chewier_Devin,

If you’re still stuck, please attach a screenshot.


Not stuck anymore… actually completed the a few days ago… fun app… good learning experience!

1 Like

Hi there, I have the same code as the sample code (except for the names and colors I chose) and it works. But the app keeps telling me this: (see scree shot)

That feedback will show up if you have not enough place objects, or if there is an item in the array that isn’t a “proper place”. A proper place in this puzzle must have:

  • A name that is a string or number
  • x between 0 and 400, but not including those numbers
  • y between 0 and 400, but not including those numbers
  • color chosen from: red, yellow, white, black, and blue.


Hi Frankie, thanks a lot for your feedback - I changed the purple color but it still doesn’t work. I know the problem must be obvious but I haven’t been able to find it… Here’s what my code looks like (I can only post 1 image at a time):

That’s it for the objects in array0fPlaces

The puzzle is looking for the color to be an identifier instead of a string literal – blue instead of 'blue'. Your object is okay, it’s just the check being too picky. If you change your color values to use the variable names instead of the direct strings it should work. I’ll make sure this puzzle gets updated to allow color values to be literal strings. Thanks for letting us know!


1 Like

It works now, thanks a lot!

1 Like

Hi! I’m not sure if notation mechanism was introduced in this course. It’s a bit tricky to reproduce place.x. If you have the same issue: first choose ‘place’ as attribute of drawOnMap function, then tap again to introduced ‘place’ and choose ’ .x’ - > you will get ‘place.x’ finally as attribute! :slight_smile:

Then repeat the same for y and color.

I had to reveal the answer
… n i am pretty sure it looks the same but still doesn’t have colored circles

Hey @Chewier_Devin,

Can you share a screenshot of your code so we can give you pointers?


My instructions say to add place.x, place.y, and place.location.

Is there a valid reason for the solution to be place.color? How would one know to use place.color, other than going to the solution?