Adds Hill Climbing Search diagram for chapter 4

[Rishav159]

This commit

• Refactors previous code a little to reuse code for the 2nd diagram
• Adds Hill Climbing Search Visualization where user can click to decide the position of the robot and watch as it climbs the hill using Hill Climbing Search
• Beautifies index.html for Chapter 4

[redblobgames]

I think border won't do anything for svg; you can use stroke instead.

[redblobgames]

Color implementation suggestion:

Right now you have some colors defined in a color object and other colors defined in the page CSS.

Instead of setting the fill color here, use .attr('class', 'visited') or .classed('visited', true), and then you'll be able to set all the fill colors in the page CSS, in one place. That also will make it easier to override the colors for one diagram while reusing code across diagrams.

[Rishav159]

Yes, that would be a much better design.

[redblobgames]

What is the .html("") for?

[Rishav159]

.html("") is used here to delete the previously added elements. It is applicable when 'restart' is pressed and a new instance of the class is created.

[redblobgames]

Cool, generators!

Color suggestions:

• For larger areas, use less bold colors (either lower 's', or 'l' away from 50%)
• Use bold colors to draw attention to something small and important (higher 's', 'l' near 50%)

Specifically, GRMA and maxima in the new diagram: GRMA is big so it should be less bold; the maxima are small and important so they could be more bold. Maybe try

var colors = {
  hill: 'hsl(217,30%,70%)',
  maxima: 'hsl(110,100%,75%)',
  unvisitedMaxima: 'hsl(110,100%,50%)',
  GMRA: 'hsl(110,25%,60%)'
};

[Rishav159]

Updated as per suggestions.