d3.js and the Dining Philosophers' Problem Visualization.

ecently, I ran into this remarkably versatile tool called d3.js, which is intended to assist JavaScript programmers to visualize various forms of data.

One of the first things I did was to look for any tutorial videos on YouTube, and did I find a treasure trove of d3.js video tutorials! User d3Vienno has around 20 tutorials, many of them in the 10-minute duration, and very easy to follow. (The only thing unusual in the d3Vienno's videos is the narrator's pronunciation of the vowel sound in DOM (Document Object Model) with a \ü\, rather than with a \ä\).

Click on the image to open the HTML source in the browser.

And, an excellent selection of non-video tutorials, particularly the one on Three Little Circles, increased my desire to do a programming exercise of my own.

After I viewed the tutorials, the programmer instinct in me took over and, as I looked around to find a simple visualization problem to program, I recalled the Dining Philosophers problem that is used as a pedagogical tool to discuss concurrency in operating systems.

Of course, the purpose in my solving this problem was merely to see how the table, and the 5 chairs around it, can be programmed using d3.js as the tool. The resulting output is given in the diagram.

The value of this presentation is to be appreciated by looking at the JSON data structure that started it all:

var philosophers = 
 [
  {"value": "Dijkstra", "color": "black"},
  {"value": "Hoare", "color": "red"},
  {"value": "Brinch-Hansen", "color": "blue"},
  {"value": "Wirth", "color": "green"},
  {"value": "Dahl", "color": "yellow"}
 ];

You can view the entire JavaScript source of this visualization here.

Of course, in solving real-world problems, you would find the use of a persistent store as more practical: MongoDB as a persistent store from which to extract JSON structures is such an example.