When specifying coordinates in Compost, you do so using a value from your domain rather than using a value in pixels. A value can be either categorical (such as a political party or a country) or a continuous (such as an exchange rate or a year).
When specifying a location using a continuous value, you specify just a number.
When using a categorical value, Compost associates a whole area to each category and
so you need to give a category together with a number specifying a location within
this area. The following are valid ways of specifying a
// A continuous value such as exchange rate let v1 = 1.52 // A continuous value such as a number of MPs let v2 = 152 // Leftmost corner of an area associated with categorical value let v3 = ["Labour", 0] // Middle of an area associated with categorical value let v4 = ["Labour", 0.5]
In other words,
Coord can be either a number or an array of two
elements containing a string (the name of the category) and a number (between 0 and 1).
When you want to specify a location on a chart, you need an x and y coordinate.
Point in the following documentation refers to an array of two
Coord elements, one for x and one for y coordinate. The following gives
some examples of valid points:
// A pair of continuous values let p1 = [ 3.14, Math.sin(3.14) ] // A point with categorical X and continuous Y let p2 = [ ["Labour", 0.5], 152 ] // A list specifying a several points on a line let l1 = [ [0, Math.sin(0)], [1.57, Math.sin(1.57)], [3.14, Math.sin(3.14)], [4.71, Math.sin(4.71)] ] // A list specifying four corners of a rectangle let s1 = [ [["Labour", 0], 0], [["Labour", 0], 152], [["Labour", 1], 152], [["Labour", 1], 0] ]
Creates a continuous scale that can contain value in the specified range
Creates a categorical scale that can contain categorical values specified in the given array of strings
Draws a text specified as the third parameter at a given x and y coordinates specified by the first two parameters. The last two optional parameters specify alignment (baseline, hanging, middle, start, end, center) and rotation in radians.
Creates a bubble (point) at a specified x and y coordinates. The last two parameters specify the width and height of the bubble in pixels.
Creates a filled shape. The shape is specified as an array of points (see the section on coordinates).
Creates a line drawn using the current stroke color. The line is specified as an array of points (see the section on coordinates)
Creates a filled rectangle for use in a column chart. This is a shorthand for
Creates a filled rectangle for use in a bar chart. This is a shorthand for
Sets the fill color to be used for all shapes drawn using
Sets the line color to be used for all lines drawn using
Sets the font and text color to be used for all text occurring in the given shape.
Creates a shape that occupies an explicitly specified space using the four coordinates as left and right X value and top and bottom Y values. Inside this explicitly specified space, the nested shape is drawn, using its own scales.
Same as above, but this primitive only overrides the X scale of the nested shape while the Y scale is left unchanged and can be shared with other shapes.
Same as above, but this primitive only overrides the Y scale of the nested shape while the X scale is left unchanged and can be shared with other shapes.
Override the automatically inferred scale with an explicitly specified one. You can use this to define a custom minimal and maximal value. To create scales use
Override the automatically inferred X scale (as above).
Override the automatically inferred Y scale (as above).
Adds a padding around the given shape. The padding is specified as top, right, bottom, left. This will subtract the padding from the available space and draw the nested shape into the smaller space.
Compose a given array of shapes by drawing them all in the same chart area. This calculates the scale of all nested shapes and those are then automatically aligned based on their coordinates.
Draw axes around a given shape. The string parameter can be any string containing the words left, right, bottom and/or top, for example using space as a separator.
Render a given chart on a HTML element specified by a given ID. When called, Compost will get the width and height of the element and render a chart using this as the size.
representing individual handlers. The supported handlers are
Render the given shape and build an object representing the chart as an HTML
Creates a HTML element that can be returned as a result of the rendering function in
Create an interactive chart using a given HTML element ID. For an example of how this works, see the You draw it demo. This is based on the Elm architecture (also known Model-View-Update). The last three parameters specify the initial state, an update function (given a state and an event, produce a new state) and a view function (given a function to trigger an event and a current state, produce a shape).