Adds CSP Sudoku Example

[Rishav159]

This PR adds the CSP Sudoku example. The idea was to experiment with few different implementations and then select the one that works best. This is one of the experimental visualization.
The User is presented with an unsolved sudoku puzzle (same as the one present in the book). Upon hovering the mouse, it highlights the cells with which it has an 'AllDiff' constraint. On the right, a simple text shows the reduced domain of that cell. If the domain has only 1 element, the user can click on it assign it to the cell and all the domains are recalculated.
This is unfinished right now. I just want to get some reviews while I am working on this.

(not to be merged)

[redblobgames]

I think we need to decide which concept we want to show with the diagram.

If we're trying to show how AllDiff works then we can show how it's constructed: row, column, box constraints. It might help the reader to see the binary constraints displayed on the right, in those three groups. One way to show groups is with color. Instead of highlighting the background of the row, column, and box, you could show a colored outline (maybe stroke-width=3) with three different colors. Then on the right, if the domain is (3,5,6) you could show ≠1 ≠2 ≠4 ≠7 ≠8 ≠9 , with each text in the same color as the corresponding constraint area.

Or if we're trying to show the concept of AC-3 keeping track of which items to evaluate, we need some way of displaying the queue on the main board.

Or if we're trying to show the concept of AC-3 being insufficient, you'll want to construct a sudoku puzzle that AC-3 can't solve, and then let the reader solve it partially but then get stuck.

[Rishav159]

If we're trying to show how AllDiff works then we can show how it's constructed: row, column, box constraints. It might help the reader to see the binary constraints displayed on the right, in those three groups. One way to show groups is with color. Instead of highlighting the background of the row, column, and box, you could show a colored outline (maybe stroke-width=3) with three different colors. Then on the right, if the domain is (3,5,6) you could show ≠1 ≠2 ≠4 ≠7 ≠8 ≠9 , with each text in the same color as the corresponding constraint area.

Yes, I wanted to show how AllDiff is working. The user can understand how the domain for the cells are reduced by looking at the diagram. This in turn explains how simple sudoku puzzle can be solved by formulating the problem as a CSP.

Or if we're trying to show the concept of AC-3 keeping track of which items to evaluate, we need some way of displaying the queue on the main board.

AC-3 is already shown in the previously implemented diagram. Although it is not that clear, I intend to use that concept and improve it further after completing this.

Or if we're trying to show the concept of AC-3 being insufficient, you'll want to construct a sudoku puzzle that AC-3 can't solve, and then let the reader solve it partially but then get stuck.

I can think about this after I complete the solvable sudoku. Implementing this shouldn't be hard as the entire diagram can remain same and only the puzzle needs to be changed. I tried to go through the process of generation of sudoku puzzles, but for our requirements, they are unnecessary.

[redblobgames]

Cool. I agree, no need to generate new sudoku puzzles.

I think a visual representation of the domains would be useful, either with some dots or colors or something else. That way the reader would be able to see that when they fill one square with a number, many other domains on the board become smaller.

[Rishav159]

I will experiment with the dots. I will try placing small dots inside each cell in a fixed 3X3 matrix representing its current reduced domain.

[redblobgames]

Cool, the dots are useful for seeing which domains have been reduced the most. I think they'd look a little nicer if they were packed a little bit tighter, so that there's more space between the dots and the borders of the box.

I think there may be an opportunity with the dots to show how reducing the domain in one box affects the other boxes. Right now you're using text for the dots. If you instead use svg <circle cx=... cy=...> you can then use color and size to highlight the ones that are going to be removed. For example it might look like

.exit()
   .attr('transform', "scale(2,2)")
   .attr('r', 2)
   .attr('fill', 'hsl(0,100%,50%)')
 .transition().duration(500)
   .attr('r', 0)
   .attr('fill', 'hsl(0,0%,100%)')
   .remove()

This uses d3's data/enter/exit pattern — exit() would select the ones that are no longer needed, and apply the color change immediately, and then transition them out and remove the elements

[Rishav159]

Updated PR as per the review.
Progress on #88.
Can be merged now.

[redblobgames]

Nice!