Data transformation system for preprocessing, aggregating, and reshaping data before visualization.
Transform functions for statistical operations and data aggregation.
/**
* Stacks data vertically for stacked bar charts
* @param options - Stacking configuration
*/
transform(name: "stackY", options?: StackYOptions): MarkNode;
/**
* Bins continuous data into discrete intervals for histograms
* @param options - Binning configuration
*/
transform(name: "binX", options?: BinXOptions): MarkNode;
/**
* Generic binning transform for any dimension
* @param options - Binning configuration
*/
transform(name: "bin", options?: BinOptions): MarkNode;
/**
* Dodges overlapping elements horizontally
* @param options - Dodge configuration
*/
transform(name: "dodgeX", options?: DodgeXOptions): MarkNode;
/**
* Normalizes Y values to percentages or ratios
* @param options - Normalization configuration
*/
transform(name: "normalizeY", options?: NormalizeYOptions): MarkNode;
interface StackYOptions {
by?: string | string[];
order?: "ascending" | "descending" | "none";
offset?: "expand" | "silhouette" | "wiggle";
}
interface BinXOptions {
field?: string;
bins?: number;
nice?: boolean;
domain?: [number, number];
}
interface DodgeXOptions {
by?: string;
padding?: number;
}Usage Examples:
// Stacked bar chart
chart
.interval()
.data(salesData)
.transform("stackY", { by: "category" })
.encode("x", "month")
.encode("y", "sales")
.encode("color", "category");
// Histogram with binning
chart
.interval()
.data(distributionData)
.transform("binX", { field: "value", bins: 20 })
.encode("x", "value")
.encode("y", "count");
// Dodged bars to avoid overlap
chart
.interval()
.data(comparisonData)
.transform("dodgeX", { by: "series" })
.encode("x", "category")
.encode("y", "value")
.encode("color", "series");Transforms for grouping data and selecting subsets.
/**
* Groups data by X values
* @param options - Grouping configuration
*/
transform(name: "groupX", options?: GroupOptions): MarkNode;
/**
* Groups data by Y values
*/
transform(name: "groupY", options?: GroupOptions): MarkNode;
/**
* Groups data by color encoding
*/
transform(name: "groupColor", options?: GroupOptions): MarkNode;
/**
* Generic grouping transform
*/
transform(name: "group", options?: GroupOptions): MarkNode;
/**
* Selects data based on conditions
*/
transform(name: "select", options?: SelectOptions): MarkNode;
/**
* Selects data based on X values
*/
transform(name: "selectX", options?: SelectXOptions): MarkNode;
/**
* Selects data based on Y values
*/
transform(name: "selectY", options?: SelectYOptions): MarkNode;
interface GroupOptions {
by?: string | string[];
reducer?: "sum" | "mean" | "count" | "max" | "min";
}
interface SelectOptions {
selector?: string | ((d: any, i: number, data: any[]) => boolean);
}Transforms that adjust element positions to avoid overlap or create specific layouts.
/**
* Adds random jitter to positions to avoid overplotting
*/
transform(name: "jitter", options?: JitterOptions): MarkNode;
/**
* Adds horizontal jitter
*/
transform(name: "jitterX", options?: JitterXOptions): MarkNode;
/**
* Adds vertical jitter
*/
transform(name: "jitterY", options?: JitterYOptions): MarkNode;
/**
* Creates symmetric arrangement around Y axis
*/
transform(name: "symmetryY", options?: SymmetryYOptions): MarkNode;
/**
* Calculates Y value differences
*/
transform(name: "diffY", options?: DiffYOptions): MarkNode;
interface JitterOptions {
random?: () => number;
paddingX?: number;
paddingY?: number;
}
interface JitterXOptions {
random?: () => number;
padding?: number;
}Usage Examples:
// Scatter plot with jitter to reduce overplotting
chart
.point()
.data(dataset)
.transform("jitter", { paddingX: 0.5, paddingY: 0.5 })
.encode("x", "category")
.encode("y", "value");
// Symmetric violin plot
chart
.area()
.data(distributionData)
.transform("symmetryY")
.encode("x", "density")
.encode("y", "value");Transforms for ordering data elements.
/**
* Sorts data by X values
*/
transform(name: "sortX", options?: SortOptions): MarkNode;
/**
* Sorts data by Y values
*/
transform(name: "sortY", options?: SortOptions): MarkNode;
/**
* Sorts data by color encoding values
*/
transform(name: "sortColor", options?: SortOptions): MarkNode;
interface SortOptions {
order?: "ascending" | "descending";
by?: string | ((a: any, b: any) => number);
}Advanced layout transforms for complex visualizations.
/**
* Creates flexible X positioning for responsive layouts
*/
transform(name: "flexX", options?: FlexXOptions): MarkNode;
/**
* Creates circle packing layout
*/
transform(name: "pack", options?: PackOptions): MarkNode;
/**
* Samples data for performance optimization
*/
transform(name: "sample", options?: SampleOptions): MarkNode;
/**
* Filters data based on conditions
*/
transform(name: "filter", options?: FilterOptions): MarkNode;
interface FlexXOptions {
field?: string;
padding?: number;
}
interface PackOptions {
field?: string;
size?: [number, number];
padding?: number;
}
interface SampleOptions {
n?: number;
method?: "random" | "systematic" | "stratified";
}
interface FilterOptions {
callback?: (d: any, i: number, data: any[]) => boolean;
}Transforms for loading and preprocessing data from various sources.
/**
* Data method for binding various data sources
*/
data(data: any[]): MarkNode;
data(options: FetchDataOptions): MarkNode;
data(options: InlineDataOptions): MarkNode;
interface FetchDataOptions {
type: "fetch";
value: string;
format?: "json" | "csv" | "tsv";
callback?: (data: any) => any;
}
interface InlineDataOptions {
type: "inline";
value: any[];
callback?: (data: any) => any;
}Data Transform Examples:
// Remote CSV data with processing
chart
.line()
.data({
type: "fetch",
value: "/api/sales.csv",
format: "csv",
callback: (data) => data.filter(d => d.year >= 2020)
});
// Data with multiple transforms
chart
.interval()
.data(rawData)
.transform("filter", {
callback: (d) => d.sales > 100
})
.transform("sortY", { order: "descending" })
.transform("sample", { n: 50 })
.encode("x", "product")
.encode("y", "sales");Transforms can be chained together for complex data processing pipelines.
Chaining Examples:
// Complex transform pipeline
chart
.interval()
.data(transactionData)
.transform("filter", { callback: (d) => d.amount > 0 })
.transform("groupX", { by: "category", reducer: "sum" })
.transform("sortY", { order: "descending" })
.transform("selectY", { selector: (d, i) => i < 10 }) // Top 10
.encode("x", "category")
.encode("y", "total");
// Statistical processing chain
chart
.line()
.data(timeSeriesData)
.transform("binX", { field: "timestamp", bins: 24 }) // Hourly bins
.transform("groupX", { by: "hour", reducer: "mean" }) // Average per hour
.transform("sortX", { order: "ascending" })
.encode("x", "hour")
.encode("y", "avgValue");Common options available across transform types.
interface BaseTransformOptions {
/** Fields to operate on */
fields?: string[];
/** Grouping field */
as?: string | string[];
/** Custom callback function */
callback?: (...args: any[]) => any;
}