Support for non-symmetric Tick Marks

[veillette]

In https://github.com/phetsims/calculus-grapher/issues/159, a designer requested that tick marks be present on only one side of the axis line. We are currently implement the tick marks vis bamboo TickMarkSet

In TickMarkSet we can only have symmetric tick marks

    this.chartTransform.forEachSpacing( this.axisOrientation, this.spacing, this.origin, this.clippingType, ( modelPosition, viewPosition ) => {
      const tickBounds = new Bounds2( 0, 0, 0, 0 );
      if ( this.axisOrientation === Orientation.HORIZONTAL ) {
        const viewY = this.edge === 'min' ? this.chartTransform.viewHeight :
                      this.edge === 'max' ? 0 :
                      this.chartTransform.modelToView( this.axisOrientation.opposite, this.value );
        shape.moveTo( viewPosition, viewY - this.extent / 2 );
        shape.lineTo( viewPosition, viewY + this.extent / 2 );
        tickBounds.setMinMax( viewPosition, viewY - this.extent / 2, viewPosition, viewY + this.extent / 2 );
      }
      else {
        const viewX = this.edge === 'min' ? 0 :
                      this.edge === 'max' ? this.chartTransform.viewWidth :
                      this.chartTransform.modelToView( this.axisOrientation.opposite, this.value );
        shape.moveTo( viewX - this.extent / 2, viewPosition );
        shape.lineTo( viewX + this.extent / 2, viewPosition );
        tickBounds.setMinMax( viewX - this.extent / 2, viewPosition, viewX + this.extent / 2, viewPosition );
      }
    } );

I'm unclear about how to proceed without creating a mess.

[veillette]

Doing some research on the possible option field we can use to support this feature. Google chart, d3.js and Excel use the following terminology for tickMarks inside, outside, cross. In the context of a chart, the three terms are (relatively) unambiguous for vertical and horizontal axes.