Comprehensive mark system for creating different types of visual elements including geometric shapes, statistical marks, and specialized visualizations.
Core geometric marks for standard chart types.
/**
* Creates interval marks for bar charts, histograms, and column charts
*/
interval(): MarkNode;
/**
* Creates line marks for line charts and trend lines
*/
line(): MarkNode;
/**
* Creates point marks for scatter plots and dot plots
*/
point(): MarkNode;
/**
* Creates area marks for filled area charts
*/
area(): MarkNode;
/**
* Creates text marks for labels and annotations
*/
text(): MarkNode;
/**
* Creates rectangular marks for heatmaps and grid visualizations
*/
rect(): MarkNode;
/**
* Creates cell marks for matrix visualizations
*/
cell(): MarkNode;Usage Examples:
// Bar chart using interval marks
chart
.interval()
.data(salesData)
.encode("x", "category")
.encode("y", "sales");
// Scatter plot using point marks
chart
.point()
.data(dataset)
.encode("x", "height")
.encode("y", "weight")
.encode("color", "gender");
// Line chart
chart
.line()
.data(timeSeriesData)
.encode("x", "date")
.encode("y", "value");Advanced geometric marks for specific visualization needs.
/**
* Creates link marks for connection lines between data points
*/
link(): MarkNode;
/**
* Creates polygon marks for custom shapes
*/
polygon(): MarkNode;
/**
* Creates image marks for using images as chart elements
*/
image(): MarkNode;
/**
* Creates vector marks for arrows and directional indicators
*/
vector(): MarkNode;
/**
* Creates box marks for box plots and error bars
*/
box(): MarkNode;
/**
* Creates path marks for custom path geometries
*/
path(): MarkNode;
/**
* Creates generic shape marks for custom geometries
*/
shape(): MarkNode;Marks for creating reference lines and ranges.
/**
* Creates horizontal line marks
*/
lineX(): MarkNode;
/**
* Creates vertical line marks
*/
lineY(): MarkNode;
/**
* Creates horizontal range marks
*/
rangeX(): MarkNode;
/**
* Creates vertical range marks
*/
rangeY(): MarkNode;
/**
* Creates generic range marks
*/
range(): MarkNode;
/**
* Creates connector marks for curved connections
*/
connector(): MarkNode;Usage Examples:
// Reference lines
chart.lineY().data([{ y: 100 }]); // Horizontal reference line at y=100
chart.lineX().data([{ x: "2023-01-01" }]); // Vertical reference line
// Range marks
chart
.rangeY()
.data([{ y1: 50, y2: 150 }])
.encode("y", "y1")
.encode("y1", "y2");Marks optimized for statistical visualizations.
/**
* Creates density marks for density plots and contours
*/
density(): MarkNode;
/**
* Creates heatmap marks for 2D density visualizations
*/
heatmap(): MarkNode;
/**
* Creates boxplot marks for statistical box plots
*/
boxplot(): MarkNode;Usage Examples:
// Density plot
chart
.density()
.data(dataset)
.encode("x", "value1")
.encode("y", "value2");
// Box plot
chart
.boxplot()
.data(distributionData)
.encode("x", "category")
.encode("y", "values");Specialized marks for graph and network visualizations.
/**
* Creates Sankey diagram marks for flow visualizations
*/
sankey(): MarkNode;
/**
* Creates chord diagram marks for relationship visualizations
*/
chord(): MarkNode;
/**
* Creates treemap marks for hierarchical data
*/
treemap(): MarkNode;
/**
* Creates pack marks for circle packing layouts
*/
pack(): MarkNode;
/**
* Creates force-directed graph marks
*/
forceGraph(): MarkNode;
/**
* Creates tree diagram marks for hierarchical structures
*/
tree(): MarkNode;Usage Examples:
// Sankey diagram
chart
.sankey()
.data(flowData)
.encode("source", "from")
.encode("target", "to")
.encode("value", "amount");
// Force-directed graph
chart
.forceGraph()
.data({ nodes: nodeData, links: linkData })
.encode("id", "id")
.encode("source", "source")
.encode("target", "target");Marks for specific domains and use cases.
/**
* Creates word cloud marks for text visualization
*/
wordCloud(): MarkNode;
/**
* Creates gauge marks for meter-style visualizations
*/
gauge(): MarkNode;
/**
* Creates liquid fill gauge marks
*/
liquid(): MarkNode;Usage Examples:
// Word cloud
chart
.wordCloud()
.data(textData)
.encode("text", "word")
.encode("size", "frequency")
.encode("color", "sentiment");
// Gauge chart
chart
.gauge()
.data([{ value: 75, target: 100 }])
.encode("value", "value")
.encode("target", "target");All marks support common configuration methods for data binding, encoding, and styling.
interface MarkNode {
/** Bind data to the mark */
data(data: any[] | DataSpec): MarkNode;
/** Encode visual channels */
encode(channel: string, field: string | EncodeFunction): MarkNode;
/** Apply data transforms */
transform(name: string, options?: any): MarkNode;
/** Set coordinate system */
coordinate(type: string, options?: any): MarkNode;
/** Configure scales */
scale(channel: string, options?: ScaleOptions): MarkNode;
/** Add animations */
animate(options?: AnimationOptions): MarkNode;
/** Apply styles */
style(key: string, value: any): MarkNode;
style(options: StyleOptions): MarkNode;
/** Add labels */
label(options?: LabelOptions): MarkNode;
/** Configure tooltip */
tooltip(options?: TooltipOptions): MarkNode;
/** Add interaction */
interaction(type: string, options?: any): MarkNode;
}
interface DataSpec {
type: "fetch" | "inline";
value: any[] | string;
format?: "json" | "csv" | "tsv";
[key: string]: any;
}
interface StyleOptions {
fill?: string | EncodeFunction;
stroke?: string | EncodeFunction;
strokeWidth?: number | EncodeFunction;
opacity?: number | EncodeFunction;
radius?: number | EncodeFunction;
[key: string]: any;
}
interface LabelOptions {
text?: string | EncodeFunction;
position?: string | EncodeFunction;
offset?: number | [number, number];
style?: StyleOptions;
transform?: Array<{ type: string; [key: string]: any }>;
}
interface TooltipOptions {
title?: string | EncodeFunction;
items?: string[] | EncodeFunction;
position?: "auto" | "top" | "bottom" | "left" | "right";
shared?: boolean;
}Comprehensive styling system for customizing visual appearance.
// Style methods
style(property: string, value: any): MarkNode;
style(styles: StyleOptions): MarkNode;
// Common style properties
interface StyleOptions {
/** Fill color */
fill?: string | EncodeFunction;
/** Stroke color */
stroke?: string | EncodeFunction;
/** Stroke width */
strokeWidth?: number | EncodeFunction;
/** Opacity (0-1) */
opacity?: number | EncodeFunction;
/** Border radius for rectangles */
radius?: number | EncodeFunction;
/** Font family for text marks */
fontFamily?: string;
/** Font size for text marks */
fontSize?: number | EncodeFunction;
/** Font weight for text marks */
fontWeight?: string | number;
/** Line dash pattern */
lineDash?: number[];
/** Shadow blur radius */
shadowBlur?: number;
/** Shadow color */
shadowColor?: string;
}Styling Examples:
// Static styling
chart
.interval()
.data(data)
.encode("x", "category")
.encode("y", "value")
.style("fill", "steelblue")
.style("stroke", "black")
.style("strokeWidth", 1);
// Dynamic styling with encoding
chart
.point()
.data(data)
.encode("x", "height")
.encode("y", "weight")
.style("fill", (d) => d.gender === "M" ? "blue" : "pink")
.style("radius", (d) => d.age / 10);
// Multiple styles at once
chart
.text()
.data(labels)
.style({
fontSize: 12,
fontWeight: "bold",
fill: "black",
textAlign: "center"
});Various methods for binding data to marks.
// Array data binding
data(data: any[]): MarkNode;
// Remote data fetching
data(options: {
type: "fetch";
value: string;
format?: "json" | "csv" | "tsv";
}): MarkNode;
// Inline data specification
data(options: {
type: "inline";
value: any[];
}): MarkNode;Data Binding Examples:
// Direct array binding
chart.interval().data([
{ category: "A", value: 10 },
{ category: "B", value: 20 },
]);
// CSV data fetching
chart.line().data({
type: "fetch",
value: "/api/timeseries.csv",
format: "csv"
});
// Inline specification
chart.point().data({
type: "inline",
value: dataset
});