JavaScript & React libraryAPI

Interface: CosmographPointsConfig

Extended by

Properties

points?

optional points: CosmographInputData

Input data for the points.

See

CosmographInputData


pointIdBy?

optional pointIdBy: string

Unique identifier column for each point. Required for mapping links to points correctly.


pointIndexBy?

optional pointIndexBy: string

Numeric index column for each point. Used for efficient lookups and should be a sequential integer starting from 0.


pointColorBy?

optional pointColorBy: string

The column name for the point color. If provided, points will be colored based on the values in this column, which should be either a color string or an array of numeric [r, g, b, a] values.


pointColorByFn?

optional pointColorByFn: ColorAccessorFn<number> | ColorAccessorFn<string> | ColorAccessorFn<boolean> | ColorAccessorFn<unknown>

Specifies the function that will be used to generate the color for each point based on the value in the pointColorBy column. It takes a point record as input and its index, and should return a color string or an array of [r, g, b, a] values.

Overrides the values in pointColorBy column by processing them (in this case the values in the pointColorBy column can be of any type, not just colors).

Has effect only when pointColorBy is provided and pointColorStrategy is undefined.

See

pointColorStrategy

Returns

The color as a string or an array of [r, g, b, a] value to be applied to the point.

Example

// Color points based on a value of the `pointColorBy` column
pointColorByFn: (value: number) => value > 10 ? 'red' : '#00ff00'
 
// Color points based on the index of the point
pointColorByFn: (value: number, index: number) => index % 2 === 0 ? 'red' : '#00ff00'
 
// Color points using RGBA values
pointColorByFn: (value: unknown) => [255, 0, 0, 1]

pointColorPalette?

optional pointColorPalette: string[]

An optional array of color strings that can be used to color the points in the visualization. If provided, the points will be colored using the colors in this palette, cycling through the array as needed.

Used when pointColorStrategy is set to 'palette', 'interpolatePalette', or 'degree'.`


pointColorByMap?

optional pointColorByMap: Record<string, string | [number, number, number, number]>

An optional mapping of values to colors for the points in the visualization. The keys in the map should be string and the values can be either color strings or arrays of RGBA values.

Used when pointColorStrategy is set to 'map'.

Default

undefined

Example

pointColorByMap: {
  'active': '#ff0000', // string key with hex color
  '42': [255, 0, 0, 1], // number key with RGBA array
  'true': 'red'  // boolean key with css-valid color
}

pointColorStrategy?

optional pointColorStrategy: string

Specifies the strategy for coloring points based on data from the pointColorBy column. Available strategies:

undefined (default):

Will automatically use the optimal strategy based on the input configuration and color data type. Current strategy can be acquired with Cosmograph.activePointColorStrategy getter.

'palette'

Uses colors from pointColorPalette without interpolation.

  • For numeric data: Creates equal-width buckets mapped to pointColorPalette colors
  • For categorical data: Assigns colors from pointColorPalette in order, cycling when unique values exceed palette length

'interpolatePalette'

Interpolates colors from pointColorPalette.

  • For numeric data: Creates continuous color scale between pointColorPalette colors
  • For categorical data: Creates evenly-spaced color scale by interpolating between pointColorPalette colors to match the number of unique values in pointColorBy so every value is a unique color

'map'

Uses color mapping from pointColorByMap to values in pointColorBy.

  • Applies exact color from pointColorByMap for matching values
  • Falls back to pointColor when value is not found in map or invalid

'degree'

Colors points based on their degree (number of connections) using interpolated pointColorPalette with quantile-based boundaries.

  • Maps point degrees to continuous color scale between pointColorPalette colors
  • Has effect only if links provided

'direct'

Directly uses pointColorBy column values as colors.


pointSizeBy?

optional pointSizeBy: string

The column name that should contain numeric values to be used for the point size and label weight (if labels enabled). If provided, points will be sized based on the values in this column.


pointSizeStrategy?

optional pointSizeStrategy: string

Specifies the strategy for sizing points based on data from the pointSizeBy column. Available strategies:

undefined (default):

Will automatically use the optimal strategy based on the input configuration and size data type. Current strategy can be acquired with Cosmograph.activePointSizeStrategy getter.

'auto'

Automatically sizes points using symmetric log scaling with quantile-based data boundaries based on the pointSizeBy data. Uses pointSizeRange to determine the min/max size range.

  • Has effect only if pointSizeBy provided and contains numeric data.

direct:

Directly uses pointSizeBy column values as point sizes.

'degree'

Sizes points based on their degree (number of connections) with quantile-based boundaries and the min/max from pointSizeRange.

  • Has effect only if links provided

pointSizeRange?

optional pointSizeRange: [number, number]

Defines the range for automatic point size scaling. Takes [min, max] values in pixels.

When pointSizeBy column contains numeric values, they will be automatically remapped to fit within this range to prevent oversized points.

Used when pointSizeStrategy is set to 'auto' or 'degree'.

Default

[2, 9]


pointSizeByFn?

optional pointSizeByFn: SizeAccessorFn<number> | SizeAccessorFn<string> | SizeAccessorFn<boolean> | SizeAccessorFn<unknown>

Function that generates sizes for points based on values in the pointSizeBy column.

Overrides the values in pointSizeBy column by processing them (values can be of any type, not just numbers).

Has effect only when pointSizeBy is provided and pointSizeStrategy is undefined.

See

pointSizeStrategy

Example

// Size points based on a value of the `pointSizeBy` column
pointSizeByFn: (value: boolean) => value ? 8 : 4
 
// Size points based on the index
pointSizeByFn: (value: unknown, index: number) => index % 2 === 0 ? 8 : 4
 
// Size points using a calculation
pointSizeByFn: (value: number) => Math.min(value * 2, 10)

pointClusterBy?

optional pointClusterBy: string

Column name containing cluster assignments for points. Can be string or number.

Remarks

Cosmograph will automatically generate a mapping of cluster values to their indices that will be available in the clusterMapping getter.


pointClusterByFn()?

optional pointClusterByFn: (value, index?) => unknown

Function that generates cluster assignments for points based on values in the pointClusterBy column.

Overrides the values in pointClusterBy column by processing them.

Has effect only when pointClusterBy is provided.

Parameters

ParameterType
valueany
index?number

Returns

unknown

Example

pointClusterByFn: (value: string) => value.length

pointClusterStrengthBy?

optional pointClusterStrengthBy: string

The pointClusterStrengthBy column defines how strongly each point is attracted to its assigned cluster during the simulation.

The column should contain numeric values where higher values (closer to 1.0) = stronger attraction, point stays closer to its cluster, Lower values (closer to 0.0) = weaker attraction, point can move more freely away from its cluster

Has effect only when pointClusterBy is provided.


pointLabelBy?

optional pointLabelBy: string

The column name for the point label.


pointLabelWeightBy?

optional pointLabelWeightBy: string

Specify the numeric column that will be used for the point label weight. Higher weight values make labels more likely to be shown.

If not provided, the points labels will be sorted by pointSizeBy if provided or their total links count (degree) otherwise .


pointXBy?

optional pointXBy: string

The column name for the point’s x-coordinate. If provided with pointYBy, points will be positioned based on the values from pointXBy and pointYBy columns.


pointYBy?

optional pointYBy: string

The column name for the point’s y-coordinate. If provided with pointXBy, points will be positioned based on the values from pointXBy and pointYBy columns.


pointIncludeColumns?

optional pointIncludeColumns: string[]

An array of additional column names to include in the point data.

These columns will be available on the point objects but not used by Cosmograph directly, can be used as accessors for Cosmograph comopnents. Useful for storing additional information about the points.