Home Examples Documentation Playground Source

Marks

Stardust uses the term “mark” for graphical elements, such as circles, lines, and wedges. You can use the predefined marks as below to create your visualizations, or write code in Stardust’s mark specification language to create your own marks.

Stardust.mark.circle

Circle marks:

let circleMark = Stardust.mark.circle();
// Create circles with 8 triangles, good when drawing large numbers of small circles.
let circleMark = Stardust.mark.circle(8);
let circles = Stardust.mark.create(circleMark, platform);

Attributes:

Name Type Default Description
center Vector2 [ 0, 0 ] The center
radius float 1 The radius
color Color [ 0, 0, 0, 1 ] The fill color

Stardust.mark.rect

Rectangle marks:

let rectMark = Stardust.mark.rect();
let rects = Stardust.mark.create(rectMark, platform);

Attributes:

Name Type Default Description
p1 Vector2 [ 0, 0 ] The top-left corner
p2 Vector2 [ 0, 0 ] The bottom-right corner
color Color [ 0, 0, 0, 1 ] The fill color

Stardust.mark.line

Line marks:

let lineMark = Stardust.mark.line();
let lines = Stardust.mark.create(lineMark, platform);

Attributes:

Name Type Default Description
p1 Vector2 [ 0, 0 ] The top-left corn
p2 Vector2 [ 0, 0 ] The bottom-right
width float 1 The width
color Color [ 0, 0, 0, 1 ] The fill color

Stardust.mark.polyline

Polyline marks draw lines to connect the data items:

let polylineMark = Stardust.mark.polyline();
let polylines = Stardust.mark.create(polylineMark, platform);

Attributes:

Name Type Default Description
p Vector2 [ 0, 0 ] The point
width float 1 The width
color Color [ 0, 0, 0, 1 ] The fill color

Stardust.mark.wedge

Wedge marks:

let wedgeMark = Stardust.mark.wedge();
let wedges = Stardust.mark.create(wedgeMark, platform);

Attributes:

Name Type Default Description
p1 Vector2 [ 0, 0 ] The starting point
theta1 float 0 The starting angle
theta2 float 0 The ending angle
length float 10 The length of the wedge
width float 1 The width of the wedge
color Color [ 0, 0, 0, 1 ] The color