Romain Vuillemot bio photo

Romain Vuillemot

Assistant Professor
École Centrale de Lyon
LIRIS Laboratory

Email Twitter Facebook Google+ LinkedIn Github Youtube Google Scholar ResearchGate Zotero

World Cup 2014: All Roads Lead to the Cup!

Romain Vuillemot

Website: /projects/worldcup14/
Code: https://github.com/romsson/worldcup14-predictions

Make you own predictions!

Predict each team’s performance for the 2014 world cup by drag & dropping its flag along its path in the bracket, as show on the animation below:

Two other interactions have been added to reset or to automatically complete the bracket:

  • Reset to start over from an empty bracket
  • Auto-complete to fill the bracket if you’re too lazy to do it yourself (beware, it’s random!)

Once finished, the URL captured the final result. Thus, it can be shared across social media.

Preview all possible predictions

One particular challenge was to create the background bracket that showed all the possible paths. SVG was used (via d3.js) to draw such a complex diagram. However, due to the large number of paths being used, a static png image was used instead of the graphics. Nonetheless, highlights of teams’ paths remained as SVG (as they are less numerous than all the possible paths).

The expected benefits are multiple. To provide a simple way to create world cup scenarios based on the initial draw. But also set a series of constraints (e.g. France will at least make it to the quarter-final, Brazil to the final) and then eventually fill the rest (manually or randomly).

Naming

Finding the right tile World Cup 2014 - All Roads Lead to the World Cup took me some fair amount of time. My main concern was not to end up with a video game title. Here are some good candidates I discarded:

  • En route to the World Cup
  • Route planners to the World Cup
  • Routine to World Cup
  • Possible route to glory
  • Clear the way to the world cup
  • Routes to glory
  • All ways to the victory

So I ended up with a little pun:

  • All roads lead to victory

This project is using d3.js and dragit.js.

← Back to projects