Geography Game with D3

D3.js Geography Game

Drag and Drop SVG Geography Game

I wanted to write a game for a while, so today I decided to create a geography game with D3.js. The idea is to let the player drag and drop territories into their appropriate place on the world map. The map is rendered using the Robinson projection and only the top 100 territories are chosen according to land area. These 100 “countries” are shuffled on each refresh and upon a successful drop, the land changes color to green. If the player makes a mistake, a hint is provided: all the countries that border the selected country. The player has one more try to drag the land into the right place or the land turns red, animates on its own to the right place, and the next territory is loaded. The goal is to get a perfect score and learn where every country is located on a map. Let’s look at the code.

I started with a normal setup and Natural Earth vector data. In order to keep the map responsive to screen size, I am calculating the browser window and adjusting the width and height on page load. I have used TopoJSON and the neighbors function allows me to quickly figure out all the bordering countries of each region. I will be using that data for hints and the path.area function allows me to calculate the land area of each territory and eliminate all the small countries as they would be difficult to drag and drop. Next, I shuffle the territories so that the game has random selection on each page refresh.

I draw the background world using original TopoJSON data and then loop through the 100 selected and randomized countries to draw them on the map in the middle. I place them in the middle of the map by using the path.centroid function and adjusting the coordinates in the translate property. They are all hidden using CSS and then we start the game with the go function which first updates the current score and then shows the first country that can be dragged and dropped. The go function has a conditional that checks if all the countries have been selected and at that point the game is over, a message is shown, and the map animates to a darker color.

For drag and drop, I am using all three events: dragstart, drag, and dragend. On dragstart, I update the object x and y attributes to make sure that dragging starts from the middle of the map. The drag function just updates the position of the element according to d3.event or mouse change in position. Drag and dragend functions also check the class of the object to make sure that dropped territories do not respond to drag events. The rest of the logic lives in the dragend function which calculates the final dragged position and decides if the element was dragged to the right location. If the country is within a 10 pixels range, we move the element to the pixel perfect spot, update the color to green via CSS class, update the score, and trigger the go function that loads the next country.

If the country was dropped in the wrong spot, we first check if this is the first attempt and provide a textual hint: bordering territories. If this was the second attempt, we animate the country to its proper place and color it red via a CSS class. At this point, we change the value of tries or attempts back to 0 and trigger the go function again, which either loads up the next country or shows the “end of game” message and color animation.

Check out this game here. What do you think?

Facebook Twitter Hacker News Reddit More...
  • http://www.hoodwebmanagement.com/ Kane Jamison

    Hey guys – love the proof of concept here.

    I’d like to make one suggestion. It took me awhile to notice that the name of the country showed up in the top left of the screen. It would be awesome if the name of the country popped onto the middle of the screen for a second in a large font after the country is placed properly, and then rested back into it’s current place in the upper left.

    • iweczek

      Thanks Kane. I appreciate your feedback and have updated the game.

  • Jakob Wallgren

    Fun, but too easy! How about removing the country borders on the world map?

    • iweczek

      Thanks for the feedback, the game is now updated and you can remove country borders.

  • hansmar

    Hi, great game. I tell my students to play this game to practice there spatial knowledge about the world. I wonder if something similar is possible with the continents. An empty map (robinson). If you play the game you should drag and rotate the continents into the right spot. My knowledge of html5 is zero, so i don’t know if something like this is possible?

    • iweczek

      Glad to hear that someone is using this. Your request is possible but the problem is the geo data. Natural Earth is based on territories or countries and there are a few problems with translating that information into continents: no support for transcontinental countries, French Guiana considered a part of France in Europe, etc. But, I still made a demo for you of a D3 game with continents.

      • hansmar

        I think this is even better for my students. I wonder if a complete empty map (only the grid) is possible. An other question: is an drag, rotate and drop possible instead of an drag and drop?
        Nevertheless, thank you very much for the effort. I really appreciate your work, i’m sorry i can’t do anything in return (i’m just a geography teacher). But if you come to Belgium, you can have a free sleep at our house!

        • iweczek

          Empty grid is possible but how will you know where to place the first continent? Perhaps I could show it and then fade it out. In terms of rotate, its possible but how will the player rotate the item? the mouse is used to move the item so not sure how you want to control rotation.

          • hansmar

            Hi,

            you could put an on/off button for the grid. For the rotating question, i once saw this website: http://www.sheppardsoftware.com/USA_Geography/USA_G7_1024.html. While dragging you can use the arrow key.

            Don’t put to much time into this. I’m delighted i have such an online map anyway.
            kind regards,
            Hans

          • iweczek

            I see what you mean, ok, I have updated the continent map game with an extra checkbox and you can use arrow keys for rotation: Continents Game with Rotation

          • hansmar

            Really great. Thank you very much. I will post it to my school’s internal website (with your permission). Is it difficult to make these kind of games? I find it hard if i have something in my mind but i’m unable to realize it.
            The free sleep over in Belgium still counts!

          • TechSlides

            Thanks and you have my permission. These kinds of games are not that hard. I love geography so if you have some ideas for a larger project or game, let me know.

          • iweczek

            Thanks and yes, you have my permission. I like geography so let me know if you have some interesting project/game ideas on this subject.

          • hansmar

            Thanks for the offer. I think about the it and if i have an idea i will post it here!

  • Brad

    Very cool! Any chance you’ve posted the code on github or similar?

    • iweczek

      Thanks. I could post on GitHub but since this is all front-end code, you could just grab the source and TopoJSON files from game page.

  • Guest

    Jordan incorrectly spaced