mafs.core

Liking cljdoc? Tell your friends :D

ClojureScript only.

Circle
Ellipse
labelPi
Mafs
MovablePoint
Point
Polygon
Polyline
Text
Theme
Transform
useStopwatch
useTransformContext
Vector

Main components and helper functions for mafs.

Main components and helper functions for mafs.

raw docstring

Circle^cljs

(Circle {:keys [radius] :as props})

Similar to [[ellipse]] but takes a single number for :radius.

See [[ellipse]] for a description of all other supported options.

Similar to [[ellipse]] but takes a single number for `:radius`.

See [[ellipse]] for a description of all other supported options.

source raw docstring

Ellipse^cljs

(Ellipse opts)

Takes a map with :center and :radius entries required and renders the specified ellipse onto a Mafs scene.

Supported options:

:center: a 2-vector specifying the [<x> <y>] coordinate of the center.
:radius: a 2-vector specifying [<width-radius> <height-radius>]
:angle: a counter-clockwise angle in radians to rotate the ellipse.
:color: any valid CSS color, or any keyword from [[mafs.core/colors]].
:weight: Double in the range [0.0, 0.1] inclusive specifying the weight of the ellipse's boundary line.
:fill-opacity: Double in the range [0.0, 0.1] inclusive specifying the opacity of the interior of the ellipse.
:stroke-opacity: Double in the range [0.0, 0.1] inclusive specifying the opacity of the boundary of the ellipse.
:stroke-style: "solid" or "dashed". Defaults to "solid".
:svg-ellipse-props: A map of property name => value of any property accepted by SVGEllipseElement or any parent.

Takes a map with `:center` and `:radius` entries required and renders the
specified ellipse onto a Mafs scene.

Supported options:

- `:center`: a 2-vector specifying the `[<x> <y>]` coordinate of the center.

- `:radius`: a 2-vector specifying `[<width-radius> <height-radius>]`

- `:angle`: a counter-clockwise angle in radians to rotate the ellipse.

- `:color`: any valid [CSS
   color](https://developer.mozilla.org/en-US/docs/Web/CSS/color), or any keyword
   from [[mafs.core/colors]].

- `:weight`: Double in the range [0.0, 0.1] inclusive specifying the weight of
    the ellipse's boundary line.

- `:fill-opacity`: Double in the range [0.0, 0.1] inclusive specifying the
    opacity of the interior of the ellipse.

- `:stroke-opacity`: Double in the range [0.0, 0.1] inclusive specifying the
    opacity of the boundary of the ellipse.

- `:stroke-style`: "solid" or "dashed". Defaults to "solid".

- `:svg-ellipse-props`: A map of property name => value of any property
  accepted
  by [SVGEllipseElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGEllipseElement)
  or any parent.

source raw docstring

labelPi^cljs

Labeling function that, suitable for use with the :labels options of various components.

Labeling function that, suitable for use with the `:labels` options of various
components.

source raw docstring

Mafs^cljs

(Mafs & children)

Given an optional map of options and any number of children, renders a Mafs 2D scene.

Supported options:

:width: number (width in pixels) or "auto"
:height: number (height in pixels)
:pan: If true (default), enable panning with the mouse and keyboard.
:zoom: If true, enable zooming with the mouse and keyboard.

can also be a map with keys :min (in range (0, 1]) and :max (in range [1, ∞)).
:view-box: (optional) A way to declare the "area of interest" of your visualizations. Mafs will center and zoom to this area. Supply nil or a map with the following key-value pairs:
- :x: (optional) a 2-vector of [<x-min> <x-max>]
- :y: (optional) a 2-vector of [<y-min> <y-max>]
- :padding: (optional) number of pixels to pad.
:preserve-aspect-ratio: boolean or "contain" (default). Whether to squish the graph to fill the Mafs viewport or to preserve the aspect ratio of the coordinate space.
:on-click: (fn [point, mouse-event] ...), called when the view is clicked on, and passed the point where it was clicked.

Given an optional map of options and any number of children, renders a Mafs 2D
scene.

Supported options:

- `:width`: number (width in pixels) or "auto"

- `:height`: number (height in pixels)

- `:pan`: If true (default), enable panning with the mouse and keyboard.

- `:zoom`: If true, enable zooming with the mouse and keyboard.

    can also be a map with keys `:min` (in range `(0, 1]`) and `:max` (in range
    `[1, ∞)`).

- `:view-box`: (optional) A way to declare the "area of interest" of your
  visualizations. Mafs will center and zoom to this area. Supply `nil` or a map
  with the following key-value pairs:

  - `:x`: (optional) a 2-vector of `[<x-min> <x-max>]`

  - `:y`: (optional) a 2-vector of `[<y-min> <y-max>]`

  - `:padding`: (optional) number of pixels to pad.

- `:preserve-aspect-ratio`: boolean or "contain" (default). Whether to
  squish the graph to fill the Mafs viewport or to preserve the aspect ratio of
  the coordinate space.

- `:on-click`: `(fn [point, mouse-event] ...)`, called when the view is
  clicked on, and passed the point where it was clicked.

source raw docstring

MovablePoint^cljs

(MovablePoint {!state :atom :keys [point path constrain on-move] :as opts})

Takes an options map and renders a movable point onto a Mafs scene.

Movable points can be dragged around the coordinate plane, or moved via the keyboard. These points can also synchronize their current position into an atom specified by the user, optionally at some nested path.

Control the point by either specifying

:atom (and :path, optionally)
:point and :on-move.

Supported options:

:atom: atom into which the movable point should synchronize its current coordinates [<x> <y>]. By default, reset!s the atom. Use :path to synchronize with some internal path.
:path: the (optional) path into the atom. For example, any of these forms are valid:

(reagent.core/with-let [!xy (reagent.core/atom [0 0])]
  (movable-point {:atom !xy}))

(reagent.core/with-let [!state (reagent.core/atom {:coords [0 0]})]
  (movable-point {:atom !state :path :coords}))

(reagent.core/with-let
  [!state (reagent.core/atom {:nested {:coords [0 0]}})]
  (movable-point {:atom !state :path [:nested :coords]}))

:point: the controlled coordinates [<x> <y>] of the point.
:on-move: called on each update with the new coordinates of the point.
:color: any valid CSS color, or any keyword from mafs.core/Theme.
:constrain: Either "horizontal" | "vertical" | <constraint function>

If you supply a function, it will be called on each point update with the proposed position; return a new 2-vector with the constrained position.

For example, the following will constrain the point to a sine curve:

(movable-point {:constrain (fn [[x _]] [x (Math/sin x)])})

Takes an options map and renders a movable point onto a Mafs scene.

Movable points can be dragged around the coordinate plane, or moved via the
keyboard. These points can also synchronize their current position into an
atom specified by the user, optionally at some nested path.

Control the point by either specifying

- `:atom` (and `:path`, optionally)
- `:point` and `:on-move`.

Supported options:

- `:atom`: atom into which the movable point should synchronize its current
  coordinates `[<x> <y>]`. By default, `reset!`s the atom. Use `:path` to
  synchronize with some internal path.

- `:path`: the (optional) path into the atom. For example, any of these forms
  are valid:

```clojure
(reagent.core/with-let [!xy (reagent.core/atom [0 0])]
  (movable-point {:atom !xy}))

(reagent.core/with-let [!state (reagent.core/atom {:coords [0 0]})]
  (movable-point {:atom !state :path :coords}))

(reagent.core/with-let
  [!state (reagent.core/atom {:nested {:coords [0 0]}})]
  (movable-point {:atom !state :path [:nested :coords]}))
```

- `:point`: the controlled coordinates `[<x> <y>]` of the point.

- `:on-move`: called on each update with the new coordinates of the point.

- `:color`: any valid [CSS
   color](https://developer.mozilla.org/en-US/docs/Web/CSS/color), or any keyword
   from [[mafs.core/Theme]].

- `:constrain`: Either "horizontal" | "vertical" | <constraint function>

  If you supply a function, it will be called on each point update with the
  proposed position; return a new 2-vector with the constrained position.

  For example, the following will constrain the point to a sine curve:

```clojure
(movable-point {:constrain (fn [[x _]] [x (Math/sin x)])})
```

source raw docstring

Point^cljs

(Point opts)

Takes a map with :x and :y entries required and renders a dot onto a Mafs scene at location $(x, y)$.

Supported options:

:x: x-coordinate of the point.
:y: y-coordinate of the point.
:color: any valid CSS color, or any keyword from mafs.core/Theme.
:opacity: Double in the range [0.0, 0.1] inclusive.
:svg-circle-props: A map of property name => value of any property accepted by SVGCircleElement or any parent.

Takes a map with `:x` and `:y` entries required and renders a dot onto a Mafs
scene at location $(x, y)$.

Supported options:

- `:x`: x-coordinate of the point.

- `:y`: y-coordinate of the point.

- `:color`: any valid [CSS
   color](https://developer.mozilla.org/en-US/docs/Web/CSS/color), or any keyword
   from [[mafs.core/Theme]].

- `:opacity`: Double in the range [0.0, 0.1] inclusive.

- `:svg-circle-props`: A map of property name => value of any property
  accepted
  by [SVGCircleElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGCircleElement)
  or any parent.

source raw docstring

Polygon^cljs

(Polygon opts)

Takes a map with :point entry required and renders a polygon onto a Mafs scene bounded by the specified points.

Supported options:

:points: a sequence of [<x> <y>] coordinates.
:color: any valid CSS color, or any keyword from mafs.core/Theme.
:weight: Double in the range [0.0, 0.1] inclusive specifying the weight of the polygon's boundary line.
:fill-opacity: Double in the range [0.0, 0.1] inclusive specifying the opacity of the interior of the polygon.
:stroke-opacity: Double in the range [0.0, 0.1] inclusive specifying the opacity of the boundary of the polygon.
:stroke-style: "solid" or "dashed". Defaults to "solid".
:svg-polygon-props: A map of property name => value of any property accepted by SVGPolygonElement or any parent.

Takes a map with `:point` entry required and renders a polygon onto a Mafs
scene bounded by the specified points.

Supported options:

- `:points`: a sequence of `[<x> <y>]` coordinates.

- `:color`: any valid [CSS
   color](https://developer.mozilla.org/en-US/docs/Web/CSS/color), or any keyword
   from [[mafs.core/Theme]].

- `:weight`: Double in the range [0.0, 0.1] inclusive specifying the weight of
    the polygon's boundary line.

- `:fill-opacity`: Double in the range [0.0, 0.1] inclusive specifying the
    opacity of the interior of the polygon.

- `:stroke-opacity`: Double in the range [0.0, 0.1] inclusive specifying the
    opacity of the boundary of the polygon.

- `:stroke-style`: "solid" or "dashed". Defaults to "solid".

- `:svg-polygon-props`: A map of property name => value of any property
  accepted
  by [SVGPolygonElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGPolygonElement)
  or any parent.

source raw docstring

Polyline^cljs

(Polyline opts)

Similar to [[polygon]], except the first and last points are not connected.

See [[polygon]] for supported inputs.

Similar to [[polygon]], except the first and last points are not connected.

See [[polygon]] for supported inputs.

source raw docstring

Text^cljs

(Text & children)

Takes an options map with :x and :y required and any number of string children and renders the concatenated string children onto a Mafs scene.

Supported options:

:x: The x-coordinate of the element the text should attach to.
:y: The y-coordinate of the element the text should attach to.
:attach: The cardinal direction that s should be offset from its element. One of "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw".
:attach-distance: The distance away from the attaching element.
:color: any valid CSS color, or any keyword from mafs.core/Theme.
:weight: Double in the range [0.0, 0.1] inclusive specifying the weight of the polygon's boundary line.
:size: font size.
:svg-text-props: A map of property name => value of any property accepted by SVGTextElement or any parent.

Takes an options map with `:x` and `:y` required and any number of string
children and renders the concatenated string children onto a Mafs scene.

Supported options:

- `:x`: The x-coordinate of the element the text should attach to.

- `:y`: The y-coordinate of the element the text should attach to.

- `:attach`: The cardinal direction that `s` should be offset from its
    element. One of "n" | "ne" | "e" | "se" | "s" | "sw" | "w" |
    "nw".

- `:attach-distance`: The distance away from the attaching element.

- `:color`: any valid [CSS
   color](https://developer.mozilla.org/en-US/docs/Web/CSS/color), or any keyword
   from [[mafs.core/Theme]].

- `:weight`: Double in the range [0.0, 0.1] inclusive specifying the weight of
    the polygon's boundary line.

- `:size`: font size.

- `:svg-text-props`: A map of property name => value of any property accepted
    by [SVGTextElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGTextElement)
    or any parent.

source raw docstring

Theme^cljs

Map of keyword => CSS Mafs theming variable.

Map of keyword => CSS Mafs theming variable.

source raw docstring

Transform^cljs

(Transform & children)

Takes an options map and any number of children and transforms the children as specified by the options.

Supported options:

:matrix: Matrix object generated by the code in mafs.matrix.
:translate: 2-vector of the form [<x-translation> <y-translation>].
:scale: either a number (scale factor) or a 2-vector of the form [<x-scale> <y-scale>].
:rotate: number of radians to rotate the children.
:translate: 2-vector of the form [<x-shear> <y-shear>].

Takes an options map and any number of children and transforms the children as
specified by the options.

Supported options:

- `:matrix`: Matrix object generated by the code in [[mafs.matrix]].

- `:translate`: 2-vector of the form `[<x-translation> <y-translation>]`.

- `:scale`: either a number (scale factor) or a 2-vector of the form
  `[<x-scale> <y-scale>]`.

- `:rotate`: number of radians to rotate the children.

- `:translate`: 2-vector of the form `[<x-shear> <y-shear>]`.

source raw docstring

useStopwatch^cljs

source

useTransformContext^cljs

source

Vector^cljs

(Vector opts)

Takes a map with :tip entry required and renders a vector onto a Mafs scene.

Supported options:

:tail: 2-vector [<x> <y>] specifying the coordinates of the vector tip.
:tip: 2-vector [<x> <y>] specifying the coordinates of the vector tip.
:color: any valid CSS color, or any keyword from mafs.core/Theme.
:opacity: Double in the range [0.0, 0.1] inclusive.
:weight: Double in the range [0.0, 0.1] inclusive specifying the weight of the polygon's boundary line.
:style: "solid" or "dashed". Defaults to "solid".
:svg-line-props: A map of property name => value of any property accepted by SVGLineElement or any parent.

Takes a map with `:tip` entry required and renders a vector onto a Mafs scene.

Supported options:

- `:tail`: 2-vector `[<x> <y>]` specifying the coordinates of the vector tip.

- `:tip`: 2-vector `[<x> <y>]` specifying the coordinates of the vector tip.

- `:color`: any valid [CSS
   color](https://developer.mozilla.org/en-US/docs/Web/CSS/color), or any keyword
   from [[mafs.core/Theme]].

- `:opacity`: Double in the range [0.0, 0.1] inclusive.

- `:weight`: Double in the range [0.0, 0.1] inclusive specifying the weight of
    the polygon's boundary line.

- `:style`: "solid" or "dashed". Defaults to "solid".

- `:svg-line-props`: A map of property name => value of any property accepted
    by [SVGLineElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGLineElement)
    or any parent.

source raw docstring

cljdoc is a website building & hosting documentation for Clojure/Script libraries

Keyboard shortcuts Report a problem cljdoc on GitHub

× close

mafs.core

Circlecljs

Ellipsecljs

labelPicljs

Mafscljs

MovablePointcljs

Pointcljs

Polygoncljs

Polylinecljs

Textcljs

Themecljs

Transformcljs

useStopwatchcljs

useTransformContextcljs

Vectorcljs

Circle^cljs

Ellipse^cljs

labelPi^cljs

Mafs^cljs

MovablePoint^cljs

Point^cljs

Polygon^cljs

Polyline^cljs

Text^cljs

Theme^cljs

Transform^cljs

useStopwatch^cljs

useTransformContext^cljs

Vector^cljs