There are various shapes that can be drawn, from standard SVG shapes like circles and rectangles to shapes defined by functions.
A Rectangle is defined by two points, (a and b), or by four coordinates (x1, x2, y1, and y2). By default, it will have a blue fill and no stroke, but those can be set as with all graph objects.
A Circle is defined by a center point and a radius. The center point may be defined by the attribute center, c, or coordinates. The radius is defined by radius or r and is set to 1 as a default:
An Ellipse is like a circle, only it can also take two radius attributes, rx and ry:
(In truth, Circle and Ellipse are the same object – all a Circle object does is create an ellipse with rx = ry = r!)
For all of these shapes, if you have a label attribute it will place the label in the center of the shape.
An Area is defined by two functions. If you just specify one function, it assumes the other is f(x) = 0 (and shades the area under the curve); alternatively, you can set above:true and it shades the area above the function. If you specify two functions (fn1 and fn2), it shades the area between the functions:
Note that if you draw a Curve, you can also use areaAbove and areaBelow to shade in the area above and below the curve; in fact, all this does is generate an Area object using the curve’s function as the base function. You can specify just areaBelow: true to shade the entire area under the curve the same color as the curve itself, with an opacity of 0.2; or you can specify a string color; or you can specify an entire definition of an Area. Note that the color, min, and max attributes will inherit from the Curve parent, but can be overridden if you only want to shade a region under the curve!
Sometimes you want to shade an area that’s the overlap of two shapes. You can doing that using an Overlap object:
On the other hand, sometimes you want to “cut out” shapes from an object. To do this, you can add a clipPaths attribute to the object and give it an array of shapes. Often the best way to do this is to make a rectangle that’s the size of the entire graph, and then add the clipPaths to it to shade the sum of those areas:
To see why this is useful, notice what happens if you just overlap two circles:
The area of overlap is a bit darker, because it’s being shaded twice (each time with 20% opacity).