Grid12 crafting recipe visualization

from Red Blob Games
10 Apr 2014

Table of Contents

I looked at the database for build 93[1] and it has crafting data. Is there a cool visualization of this? I tried a bunch of things but wasn’t happy with any of them. This page is updated for build 125, but some of the diagrams aren’t working for reasons I don’t understand.

There are ingredients with a recipe id, item type id, and level. There are recipes with a recipe id, item type id, and level.

The ingredient table has several ingredients per recipe. It looks like usually three but not always. I think these must be the inputs. The recipe table has one ingredient per recipe. I think these must be the outputs. The itemtype table tells me the name and icon and color of each of the items.

The easiest way to build a visualization would be to use graphviz.

 1  Ingredient to Ingredient#

I’ll try several different graphviz layout algorithms:

fdp:

recipes_fdp.png

twopi:

recipes_twopi.png

neato:

recipes_neato.png

I don’t like any of these layouts.

 2  Ingredient to Recipe to Ingredient#

How about if we put each recipe into its own node?

Let’s try fdp:

recipes_chained_fdp.png

Let’s try twopi:

recipes_chained_twopi.png

Let’s try neato:

recipes_chained_neato.png

This seems too complicated too. I also tried a left-to-right dot layout[2]:

recipes_vertical.png

That was more compact but still not quite readable. Maybe I need to tweak arrow and node sizes. I just don’t know at the moment.

 3  Ingredient mix to Ingredient#

Crunch on the forums suggests combining recipes with the same ingredients[3]. This seems like a really good idea.

Let’s try dot:

recipes_merged_dot.png

Let’s try fdp:

recipes_merged_fdp.png

Let’s try twopi:

recipes_merged_twopi.png

Let’s try neato:

recipes_merged_neato.png

 4  Interactive version#

How about the circular layout in this d3 demo[4]? Mousing over an element could highlight everything it’s connected to.

I like Crunch’s UI too.

Email me at , or tweet to @redblobgames, or post a public comment: