Grid12 crafting recipe visualization

from Red Blob Games
10 Apr 2014

Table of Contents

I looked at the database for build 93 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.

#Ingredient to Ingredient

  • Join the recipe and ingredient tables, to build rules \(I_i \rightarrow I_j\) for each ingredient \(I_i\) that contributes to an ingredient \(I_j\).

I’ll try several different graphviz layout algorithms:







I don’t like any of these layouts.

#Ingredient to Recipe to Ingredient

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

  • For each ingredient entry, build a rule \(I_i \rightarrow R_j\).
  • For each recipe entry, build a rule \(R_j \rightarrow I_i\).

Let’s try fdp:


Let’s try twopi:


Let’s try neato:


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


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.

#Ingredient mix to Ingredient

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

  • Each input ingredient \(I_1 \rightarrow I_1\_I_2\_I_3\) if the recipe has ingredients \(1, 2, 3\)
  • Each output ingredient \(I_1\_I_2\_I_3 \rightarrow I_4\)

Let’s try dot:


Let’s try fdp:


Let’s try twopi:


Let’s try neato:


#Interactive version

How about the circular layout in this d3 demo? 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: