Coordinate transformation system supporting various projections including cartesian, polar, and specialized coordinate systems.
Standard rectangular coordinate system for most common chart types.
/**
* Creates cartesian coordinate system (default)
* @param options - Cartesian configuration options
*/
coordinate(type: "cartesian", options?: CartesianOptions): MarkNode;
interface CartesianOptions {
/** Coordinate transforms to apply */
transform?: CoordinateTransform[];
}Usage Examples:
// Standard cartesian coordinates (default)
chart
.interval()
.data(data)
.coordinate("cartesian")
.encode("x", "category")
.encode("y", "value");
// Cartesian coordinates are used by default
chart
.line()
.data(timeSeriesData)
.encode("x", "date")
.encode("y", "price");Circular coordinate system for radial visualizations.
/**
* Creates polar coordinate system
* @param options - Polar configuration options
*/
coordinate(type: "polar", options?: PolarOptions): MarkNode;
interface PolarOptions {
/** Start angle in radians (default: -π/2) */
startAngle?: number;
/** End angle in radians (default: 3π/2) */
endAngle?: number;
/** Inner radius ratio (0-1) */
innerRadius?: number;
/** Outer radius ratio (0-1) */
outerRadius?: number;
/** Coordinate transforms to apply */
transform?: CoordinateTransform[];
}Usage Examples:
// Rose chart using polar coordinates
chart
.interval()
.data(windData)
.coordinate("polar")
.encode("x", "direction")
.encode("y", "speed")
.encode("color", "season");
// Donut chart with inner radius
chart
.interval()
.data(categoryData)
.coordinate("polar", {
innerRadius: 0.4,
outerRadius: 0.8
})
.encode("y", "value")
.encode("color", "category");
// Custom angle range
chart
.interval()
.data(gaugeData)
.coordinate("polar", {
startAngle: -Math.PI,
endAngle: 0
})
.encode("y", "value");Specialized polar coordinates optimized for pie charts and circular layouts.
/**
* Creates theta coordinate system for pie charts
* @param options - Theta configuration options
*/
coordinate(type: "theta", options?: ThetaOptions): MarkNode;
interface ThetaOptions {
/** Start angle in radians */
startAngle?: number;
/** End angle in radians */
endAngle?: number;
/** Inner radius for donut charts */
innerRadius?: number;
/** Padding between segments */
padding?: number;
}Usage Examples:
// Pie chart using theta coordinates
chart
.interval()
.data(marketShareData)
.coordinate("theta")
.encode("y", "share")
.encode("color", "company");
// Donut chart
chart
.interval()
.data(categoryData)
.coordinate("theta", {
innerRadius: 0.3
})
.encode("y", "value")
.encode("color", "category");Flipped coordinate system that swaps X and Y axes.
/**
* Creates transposed coordinate system (swaps X and Y)
* @param options - Transpose configuration options
*/
coordinate(type: "transpose", options?: TransposeOptions): MarkNode;
interface TransposeOptions {
/** Coordinate transforms to apply */
transform?: CoordinateTransform[];
}Usage Examples:
// Horizontal bar chart using transpose
chart
.interval()
.data(data)
.coordinate("transpose")
.encode("x", "value") // Now becomes Y axis
.encode("y", "category"); // Now becomes X axis
// Horizontal box plot
chart
.boxplot()
.data(distributionData)
.coordinate("transpose")
.encode("x", "values")
.encode("y", "category");Multi-dimensional coordinate system for visualizing high-dimensional data.
/**
* Creates parallel coordinate system
* @param options - Parallel configuration options
*/
coordinate(type: "parallel", options?: ParallelOptions): MarkNode;
interface ParallelOptions {
/** Fields to display as parallel axes */
fields?: string[];
/** Spacing between axes */
spacing?: number;
/** Normalize values across axes */
normalize?: boolean;
}Usage Examples:
// Parallel coordinates plot
chart
.line()
.data(multiDimensionalData)
.coordinate("parallel", {
fields: ["height", "weight", "age", "income"],
normalize: true
})
.encode("color", "category");Specialized coordinate system for radar/spider charts.
/**
* Creates radar coordinate system
* @param options - Radar configuration options
*/
coordinate(type: "radar", options?: RadarOptions): MarkNode;
interface RadarOptions {
/** Start angle in radians */
startAngle?: number;
/** Inner radius */
innerRadius?: number;
/** Outer radius */
outerRadius?: number;
/** Grid lines configuration */
grid?: boolean;
}Usage Examples:
// Radar chart for performance metrics
chart
.line()
.data(performanceData)
.coordinate("radar")
.encode("x", "metric")
.encode("y", "score")
.encode("color", "team");
// Filled radar chart
chart
.area()
.data(skillsData)
.coordinate("radar", {
innerRadius: 0.1
})
.encode("x", "skill")
.encode("y", "level");Linear radial coordinate system for radial bar charts.
/**
* Creates radial coordinate system
* @param options - Radial configuration options
*/
coordinate(type: "radial", options?: RadialOptions): MarkNode;
interface RadialOptions {
/** Start angle in radians */
startAngle?: number;
/** End angle in radians */
endAngle?: number;
/** Inner radius */
innerRadius?: number;
}Usage Examples:
// Radial bar chart
chart
.interval()
.data(salesData)
.coordinate("radial")
.encode("x", "month")
.encode("y", "revenue");Distortion coordinate system that magnifies the center area.
/**
* Creates fisheye coordinate system with center distortion
* @param options - Fisheye configuration options
*/
coordinate(type: "fisheye", options?: FisheyeOptions): MarkNode;
interface FisheyeOptions {
/** Distortion factor (default: 2) */
distortion?: number;
/** Focus point [x, y] in normalized coordinates */
focus?: [number, number];
}Usage Examples:
// Fisheye scatter plot for large datasets
chart
.point()
.data(largeDataset)
.coordinate("fisheye", {
distortion: 3,
focus: [0.5, 0.5] // Center focus
})
.encode("x", "value1")
.encode("y", "value2");3D helical coordinate system for temporal or sequential data.
/**
* Creates helix coordinate system for 3D spiral visualizations
* @param options - Helix configuration options
*/
coordinate(type: "helix", options?: HelixOptions): MarkNode;
interface HelixOptions {
/** Number of turns in the helix */
turns?: number;
/** Height of the helix */
height?: number;
/** Radius of the helix */
radius?: number;
/** Start angle */
startAngle?: number;
}Usage Examples:
// 3D helix timeline
chart
.point()
.data(timelineData)
.coordinate("helix", {
turns: 5,
height: 300,
radius: 100
})
.encode("x", "time")
.encode("y", "value")
.encode("z", "category");Transform functions that can be applied to coordinate systems.
interface CoordinateTransform {
type: string;
[key: string]: any;
}
// Common coordinate transforms
interface CoordinateTransforms {
/** Reflect coordinate system */
reflectX?: boolean;
reflectY?: boolean;
/** Scale coordinate system */
scaleX?: number;
scaleY?: number;
/** Translate coordinate system */
translateX?: number;
translateY?: number;
/** Rotate coordinate system */
rotate?: number;
}Transform Examples:
// Reflected cartesian coordinates
chart
.interval()
.data(data)
.coordinate("cartesian", {
transform: [
{ type: "reflectY" } // Flip Y axis
]
})
.encode("x", "category")
.encode("y", "value");
// Rotated polar coordinates
chart
.line()
.data(data)
.coordinate("polar", {
transform: [
{ type: "rotate", angle: Math.PI / 4 } // 45 degree rotation
]
})
.encode("x", "angle")
.encode("y", "radius");Guidelines for choosing appropriate coordinate systems:
// Use cartesian for:
// - Bar charts, line charts, scatter plots
// - Most standard statistical visualizations
coordinate("cartesian");
// Use polar for:
// - Rose charts, polar area charts
// - Cyclical data (time of day, seasons)
coordinate("polar");
// Use theta for:
// - Pie charts, donut charts
// - Part-to-whole relationships
coordinate("theta");
// Use transpose for:
// - Horizontal bar charts
// - When category labels are long
coordinate("transpose");
// Use radar for:
// - Multi-dimensional comparisons
// - Performance scorecards
coordinate("radar");
// Use parallel for:
// - High-dimensional data exploration
// - Variable relationship analysis
coordinate("parallel");Some coordinate systems work well with specific marks and encodings:
// Polar + interval = Rose chart
chart
.interval()
.coordinate("polar")
.encode("x", "category")
.encode("y", "value");
// Theta + interval = Pie chart
chart
.interval()
.coordinate("theta")
.encode("y", "value")
.encode("color", "category");
// Radar + line = Spider chart
chart
.line()
.coordinate("radar")
.encode("x", "metric")
.encode("y", "score");
// Transpose + interval = Horizontal bars
chart
.interval()
.coordinate("transpose")
.encode("x", "value")
.encode("y", "category");