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, (
b), or by four coordinates (
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
coordinates. The radius is defined by
r and is set to 1 as a default:
An Ellipse is like a circle, only it can also take two radius attributes,
(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 (
fn2), it shades the area between the functions:
Note that if you draw a Curve, you can also use
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
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).