World Cup 2014: All Roads Lead to the Cup!

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.

Romain Vuillemot

World Cup 2014: All Roads Lead to the Cup!

Make you own predictions!

Preview all possible predictions

Naming

Related Links