diagramatics logo Diagramatics GitHub Docs Guides Editor Examples
Guides usageshapestransformationstyletagsbooleanpointsalignmenttableinteractivitymodifierutilitiesgeometryannotationplotbartechnicalTeX

Axes Options

All the plotting function can be configured by passing in axes_options, which is an object with the following properties: 
    xrange    : [number, number],
    yrange    : [number, number],
    bbox?     : [Vector2, Vector2],
    xticks?   : number[],
    yticks?   : number[],
    n_sample? : number,
    headsize  : number,

Plotting

// plot a data in the form of Vector2[] let data = [V2(-1,1), V2(0,0), V2(1,1), V2(2,2)] let p = plotv(data); draw(p);
plotv ( data  :  Vector2[] , axes_options?  :  Partial<axes_options> )  :  Diagram 
 

        // plot a data in the form of Vector2[]

        let data = [V2(-1,1), V2(0,0), V2(1,1), V2(2,2)]
        let p = plotv(data);
        draw(p);
         
 
 
 

        // plot a data in the form of xdata and ydata

        let xdata = [-1, 0, 1, 2];
        let ydata = [1, 0, 1, 2];
        let p = plot(xdata, ydata);
        draw(p);
         
 
plot  (
                xdata
                             : 
                            number[] , ydata
                             : 
                            number[] , axes_options?
                             : 
                            Partial<axes_options> )
                         : 
                            Diagram  
 

        // plot a data in the form of xdata and ydata

        let xdata = [-1, 0, 1, 2];
        let ydata = [1, 0, 1, 2];
        let p = plot(xdata, ydata);
        draw(p);
         
 
 
 

        // plot a function

        let f = (x) => Math.sin(x);
        let p = plotf(f);
        draw(p);
         
 
plotf  (
                f
                             : 
                            (x:number)=>number , axes_options?
                             : 
                            Partial<axes_options> )
                         : 
                            Diagram  
 

        // plot a function

        let f = (x) => Math.sin(x);
        let p = plotf(f);
        draw(p);
         
 
 
 

        // you can change the domain and range by passing in `axes_options`

        let axopt = {
            xrange : [-2*Math.PI, 2*Math.PI],
        }
        let f = (x) => Math.sin(x);
        let p = plotf(f, axopt);
        draw(p);
         
 
    
 

        // you can change the domain and range by passing in `axes_options`

        let axopt = {
            xrange : [-2*Math.PI, 2*Math.PI],
        }
        let f = (x) => Math.sin(x);
        let p = plotf(f, axopt);
        draw(p);
         
 
 
 

        // you can change number of sample points by passing in `axes_options`

        let axopt = {
            xrange   : [-2*Math.PI, 2*Math.PI],
            n_sample : 10,
        }
        let f = (x) => Math.sin(x);
        let p = plotf(f, axopt);
        draw(p);
         
 
    
 

        // you can change number of sample points by passing in `axes_options`

        let axopt = {
            xrange   : [-2*Math.PI, 2*Math.PI],
            n_sample : 10,
        }
        let f = (x) => Math.sin(x);
        let p = plotf(f, axopt);
        draw(p);
         
 
 
Axes
   
 
 

        let ax = axes_empty();
        draw(ax);
         
 
axes_empty  (
                axes_options?
                             : 
                            Partial<axes_options> )
                         : 
                            Diagram  
 

        let ax = axes_empty();
        draw(ax);
         
 
 
 

        let ax = axes_corner_empty();
        draw(ax);
         
 
axes_corner_empty  (
                axes_options?
                             : 
                            Partial<axes_options> )
                         : 
                            Diagram  
 

        let ax = axes_corner_empty();
        draw(ax);
         
 
 
 

        let ax = xyaxes().fontsize(12);
        draw(ax);
         
 
xyaxes  (
                axes_options?
                             : 
                            Partial<axes_options> )
                         : 
                            Diagram  
 

        let ax = xyaxes().fontsize(12);
        draw(ax);
         
 
 
 

        let ax = xycorneraxes();
        draw(ax);
         
 
xycorneraxes  (
                axes_options?
                             : 
                            Partial<axes_options> )
                         : 
                            Diagram  
 

        let ax = xycorneraxes();
        draw(ax);
         
 
 
 

        let ax = xygrid();
        draw(ax);
         
 
xygrid  (
                axes_options?
                             : 
                            Partial<axes_options> )
                         : 
                            Diagram  
 

        let ax = xygrid();
        draw(ax);
         
 
 
 

        let ax = axes_empty();
        let ta = xtickmark(0.5, 0, 'a');
        let tb = xtickmark(1.5, 0, 'b');
        let tc = xtickmark(-1,  0, 'c', {ticksize: 1});
        draw(ax, ta, tb, tc);
         
 
xtickmark  (
                x
                             : 
                            number , y
                             : 
                            number , str
                             : 
                            string , axes_options?
                             : 
                            Partial<axes_options> )
                         : 
                            Diagram  
 

        let ax = axes_empty();
        let ta = xtickmark(0.5, 0, 'a');
        let tb = xtickmark(1.5, 0, 'b');
        let tc = xtickmark(-1,  0, 'c', {ticksize: 1});
        draw(ax, ta, tb, tc);
         
 
 
 

        let ax = axes_empty();
        let ta = ytickmark(0.5, 0, 'a');
        let tb = ytickmark(1.5, 0, 'b');
        let tc = ytickmark(-1,  0, 'c', {ticksize: 1});
        draw(ax, ta, tb, tc);
         
 
ytickmark  (
                y
                             : 
                            number , x
                             : 
                            number , str
                             : 
                            string , axes_options?
                             : 
                            Partial<axes_options> )
                         : 
                            Diagram  
 

        let ax = axes_empty();
        let ta = ytickmark(0.5, 0, 'a');
        let tb = ytickmark(1.5, 0, 'b');
        let tc = ytickmark(-1,  0, 'c', {ticksize: 1});
        draw(ax, ta, tb, tc);
         
 
 
Size and Position

    By default, the size of the axes will be equal to the xrange and yrange 
    defined in the axes_options 
 
 

        let axopt = {
            xrange : [-20, 20],
            yrange : [-2, 4],
        }
        let ax = xyaxes(axopt).fontsize(12);
        draw(ax);
         
 
    
 

        let axopt = {
            xrange : [-20, 20],
            yrange : [-2, 4],
        }
        let ax = xyaxes(axopt).fontsize(12);
        draw(ax);
         


    We can change the size of the axes by passing in bbox in the axes_options.


    But, if you want to put something in some specific position, the coordinate system will be different.
    For example, if we try to put a circle in (5,1), this is what we get.
    
 
 

        let axopt = {
            xrange : [-20, 20],
            yrange : [-2, 5],
            bbox   : [V2(0,0), V2(10,10)],
            headsize : 0.2,
            ticksize : 0.4,
        }
        let ax = xyaxes(axopt).fontsize(12);
        let p  = V2(5,1);
        let c  = circle(0.2).position(p).fill('blue');
        draw(ax, c);
         
 
    
 

        let axopt = {
            xrange : [-20, 20],
            yrange : [-2, 5],
            bbox   : [V2(0,0), V2(10,10)],
            headsize : 0.2,
            ticksize : 0.4,
        }
        let ax = xyaxes(axopt).fontsize(12);
        let p  = V2(5,1);
        let c  = circle(0.2).position(p).fill('blue');
        draw(ax, c);
         


    What we can do to fix that is by using axes_transform() 
 
 

        let axopt = {
            xrange : [-20, 20],
            yrange : [-2, 5],
            bbox   : [V2(0,0), V2(10,10)],
            headsize : 0.2,
            ticksize : 0.4,
        }
        let transf = axes_transform(axopt); 
        // transf is a function (v : Vector2) => Vector2

        let ax = xyaxes(axopt).fontsize(12);
        let p  = transf(V2(5,1)); // equivalent to `V2(5,1).apply(transf)`;
        let c  = circle(0.2).position(p).fill('blue');
        draw(ax, c);
         
 
axes_transform  (
                opt
                             : 
                            axes_options )
                         : 
                            (v : Vector2) => Vector2  
 

        let axopt = {
            xrange : [-20, 20],
            yrange : [-2, 5],
            bbox   : [V2(0,0), V2(10,10)],
            headsize : 0.2,
            ticksize : 0.4,
        }
        let transf = axes_transform(axopt); 
        // transf is a function (v : Vector2) => Vector2

        let ax = xyaxes(axopt).fontsize(12);
        let p  = transf(V2(5,1)); // equivalent to `V2(5,1).apply(transf)`;
        let c  = circle(0.2).position(p).fill('blue');
        draw(ax, c);
         
 
 
Styling

    The plotting functions just return a curve, so you can style it like any other curve.
    
 
 

        // you can change the domain and range by passing in `axes_options`

        let axopt = {
            xrange : [-Math.PI, Math.PI],
            headsize : 0.1,
        }

        let ax = axes_empty(axopt);
        let f = (x) => Math.sin(x);
        let g = (x) => x*x - 1.5;

        let fplot = plotf(f, axopt).stroke('red').strokewidth(2);
        let gplot = plotf(g, axopt).stroke('blue').strokewidth(2);
        draw(ax, fplot, gplot);
         
 
    
 

        // you can change the domain and range by passing in `axes_options`

        let axopt = {
            xrange : [-Math.PI, Math.PI],
            headsize : 0.1,
        }

        let ax = axes_empty(axopt);
        let f = (x) => Math.sin(x);
        let g = (x) => x*x - 1.5;

        let fplot = plotf(f, axopt).stroke('red').strokewidth(2);
        let gplot = plotf(g, axopt).stroke('blue').strokewidth(2);
        draw(ax, fplot, gplot);