How to make this binomial lattice in D3.js

Question

I am trying to develop a simple interative application to illustrate the binomial option pricing model. Essentially, I want to reproduce this graph here in D3.js:

I am thinking about using a tree layout, but this is not a tree since it has cycles. I am very new to D3.js, and this is an application that I tried to generate to teach myself D3.js. I am a bit bogged down by manually generating a lattice like this.

Is it possible to do it in D3.js?

Answer 1

Take a look at this jsfiddle. It contains what I believe reasonable code for generating the binomial lattice that you described.

Here is the output of the fiddle:

By changing variable N only, you can obtain lattices of different sizes:

I didn't include elements above and beside the lattice, since it is pretty straightforward for you to add them.

The code is not perfect, I didn't have much time to write it, but it looks to me it could be your good starting point, or serve as an example.

EDIT: Also, I didn't know when subscript 0 should be displayed after S, but you can change the behavior of the subscript to be as you need.

ADDITIONAL EDIT: If you really need math on your web page, you can use lets say jqmath, like in this jsfiddle, to get something like this:

and than you integrate jsmath pieces into svg with something like this:

var c = vis.selectAll("g") 
c.append("svg:foreignObject") 
  .attr("width", "100px") 
  .attr("height", "100px") 
  .append("body").append("p") 
  .html($(jqMath("p={e^{{rt}{/n}}-d}/{u-d}", "$$")).outerHTML());