@d3plus/react

React components for d3plus visualizations.

Installing

If using npm, npm install @d3plus/react. Otherwise, you can download the latest release from GitHub or load from a CDN.

import {*} from "@d3plus/react";

In a vanilla environment, a d3plus global is exported from the pre-bundled version:

<script src="https://cdn.jsdelivr.net/npm/@d3plus/react"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using @d3plus/react.

API Reference

| Functions | Description | | --- | --- | | Area | React component for rendering a d3plus Area shape. | | AreaPlot | React component for rendering a d3plus AreaPlot visualization. | | Axis | React component for rendering a d3plus Axis. | | AxisBottom | React component for rendering a d3plus AxisBottom. | | AxisLeft | React component for rendering a d3plus AxisLeft. | | AxisRight | React component for rendering a d3plus AxisRight. | | AxisTop | React component for rendering a d3plus AxisTop. | | Bar | React component for rendering a d3plus Bar shape. | | BarChart | React component for rendering a d3plus BarChart visualization. | | BaseClass | React component for rendering a d3plus BaseClass instance. | | Box | React component for rendering a d3plus Box shape. | | BoxWhisker | React component for rendering a d3plus BoxWhisker visualization. | | BumpChart | React component for rendering a d3plus BumpChart visualization. | | Circle | React component for rendering a d3plus Circle shape. | | ColorScale | React component for rendering a d3plus ColorScale. | | Donut | React component for rendering a d3plus Donut visualization. | | Geomap | React component for rendering a d3plus Geomap visualization. | | Image | React component for rendering a d3plus Image shape. | | Legend | React component for rendering a d3plus Legend. | | Line | React component for rendering a d3plus Line shape. | | LinePlot | React component for rendering a d3plus LinePlot visualization. | | Matrix | React component for rendering a d3plus Matrix visualization. | | Message | React component for rendering a d3plus Message. | | Network | React component for rendering a d3plus Network visualization. | | Pack | React component for rendering a d3plus Pack visualization. | | Path | React component for rendering a d3plus Path shape. | | Pie | React component for rendering a d3plus Pie visualization. | | Plot | React component for rendering a d3plus Plot visualization. | | Priestley | React component for rendering a d3plus Priestley visualization. | | Radar | React component for rendering a d3plus Radar visualization. | | RadialMatrix | React component for rendering a d3plus RadialMatrix visualization. | | Rect | React component for rendering a d3plus Rect shape. | | Rings | React component for rendering a d3plus Rings visualization. | | Sankey | React component for rendering a d3plus Sankey visualization. | | Shape | React component for rendering a d3plus Shape shape. | | StackedArea | React component for rendering a d3plus StackedArea visualization. | | TextBox | React component for rendering a d3plus TextBox. | | Timeline | React component for rendering a d3plus Timeline. | | Tooltip | React component for rendering a d3plus Tooltip. | | Tree | React component for rendering a d3plus Tree visualization. | | Treemap | React component for rendering a d3plus Treemap visualization. | | Viz | React component for rendering a base d3plus Viz instance. | | Whisker | React component for rendering a d3plus Whisker shape. |

| Variables | Description | | --- | --- | | D3plusContext | A React context instance used to provide global config options via a provider (D3plusContext.Provider). |

| Interfaces | Description | | --- | --- | | D3plusConfig | | | RendererProps | Props accepted by the Renderer component. |

| Type Aliases | Description | | --- | --- | | D3plusComponentProps | Props for d3plus React wrapper components (omits the internal constructor prop). | | D3plusConstructor | Constructor type for d3plus visualization classes. |

Functions

Area()

Area(props: D3plusComponentProps): Element

Defined in: react/index.tsx:184

React component for rendering a d3plus Area shape.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

AreaPlot()

AreaPlot(props: D3plusComponentProps): Element

Defined in: react/index.tsx:54

React component for rendering a d3plus AreaPlot visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Axis()

Axis(props: D3plusComponentProps): Element

Defined in: react/index.tsx:139

React component for rendering a d3plus Axis.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

AxisBottom()

AxisBottom(props: D3plusComponentProps): Element

Defined in: react/index.tsx:143

React component for rendering a d3plus AxisBottom.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

AxisLeft()

AxisLeft(props: D3plusComponentProps): Element

Defined in: react/index.tsx:147

React component for rendering a d3plus AxisLeft.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

AxisRight()

AxisRight(props: D3plusComponentProps): Element

Defined in: react/index.tsx:151

React component for rendering a d3plus AxisRight.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

AxisTop()

AxisTop(props: D3plusComponentProps): Element

Defined in: react/index.tsx:155

React component for rendering a d3plus AxisTop.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Bar()

Bar(props: D3plusComponentProps): Element

Defined in: react/index.tsx:188

React component for rendering a d3plus Bar shape.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

BarChart()

BarChart(props: D3plusComponentProps): Element

Defined in: react/index.tsx:58

React component for rendering a d3plus BarChart visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

BaseClass()

BaseClass(props: D3plusComponentProps): Element

Defined in: react/index.tsx:225

React component for rendering a d3plus BaseClass instance.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Box()

Box(props: D3plusComponentProps): Element

Defined in: react/index.tsx:192

React component for rendering a d3plus Box shape.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

BoxWhisker()

BoxWhisker(props: D3plusComponentProps): Element

Defined in: react/index.tsx:62

React component for rendering a d3plus BoxWhisker visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

BumpChart()

BumpChart(props: D3plusComponentProps): Element

Defined in: react/index.tsx:66

React component for rendering a d3plus BumpChart visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Circle()

Circle(props: D3plusComponentProps): Element

Defined in: react/index.tsx:196

React component for rendering a d3plus Circle shape.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

ColorScale()

ColorScale(props: D3plusComponentProps): Element

Defined in: react/index.tsx:159

React component for rendering a d3plus ColorScale.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Donut()

Donut(props: D3plusComponentProps): Element

Defined in: react/index.tsx:70

React component for rendering a d3plus Donut visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Geomap()

Geomap(props: D3plusComponentProps): Element

Defined in: react/index.tsx:74

React component for rendering a d3plus Geomap visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Image()

Image(props: D3plusComponentProps): Element

Defined in: react/index.tsx:200

React component for rendering a d3plus Image shape.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Legend()

Legend(props: D3plusComponentProps): Element

Defined in: react/index.tsx:163

React component for rendering a d3plus Legend.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Line()

Line(props: D3plusComponentProps): Element

Defined in: react/index.tsx:204

React component for rendering a d3plus Line shape.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

LinePlot()

LinePlot(props: D3plusComponentProps): Element

Defined in: react/index.tsx:78

React component for rendering a d3plus LinePlot visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Matrix()

Matrix(props: D3plusComponentProps): Element

Defined in: react/index.tsx:82

React component for rendering a d3plus Matrix visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Message()

Message(props: D3plusComponentProps): Element

Defined in: react/index.tsx:167

React component for rendering a d3plus Message.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Network()

Network(props: D3plusComponentProps): Element

Defined in: react/index.tsx:86

React component for rendering a d3plus Network visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Pack()

Pack(props: D3plusComponentProps): Element

Defined in: react/index.tsx:90

React component for rendering a d3plus Pack visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Path()

Path(props: D3plusComponentProps): Element

Defined in: react/index.tsx:208

React component for rendering a d3plus Path shape.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Pie()

Pie(props: D3plusComponentProps): Element

Defined in: react/index.tsx:94

React component for rendering a d3plus Pie visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Plot()

Plot(props: D3plusComponentProps): Element

Defined in: react/index.tsx:98

React component for rendering a d3plus Plot visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Priestley()

Priestley(props: D3plusComponentProps): Element

Defined in: react/index.tsx:102

React component for rendering a d3plus Priestley visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Radar()

Radar(props: D3plusComponentProps): Element

Defined in: react/index.tsx:106

React component for rendering a d3plus Radar visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

RadialMatrix()

RadialMatrix(props: D3plusComponentProps): Element

Defined in: react/index.tsx:110

React component for rendering a d3plus RadialMatrix visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Rect()

Rect(props: D3plusComponentProps): Element

Defined in: react/index.tsx:212

React component for rendering a d3plus Rect shape.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Rings()

Rings(props: D3plusComponentProps): Element

Defined in: react/index.tsx:114

React component for rendering a d3plus Rings visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Sankey()

Sankey(props: D3plusComponentProps): Element

Defined in: react/index.tsx:118

React component for rendering a d3plus Sankey visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Shape()

Shape(props: D3plusComponentProps): Element

Defined in: react/index.tsx:216

React component for rendering a d3plus Shape shape.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

StackedArea()

StackedArea(props: D3plusComponentProps): Element

Defined in: react/index.tsx:122

React component for rendering a d3plus StackedArea visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

TextBox()

TextBox(props: D3plusComponentProps): Element

Defined in: react/index.tsx:171

React component for rendering a d3plus TextBox.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Timeline()

Timeline(props: D3plusComponentProps): Element

Defined in: react/index.tsx:175

React component for rendering a d3plus Timeline.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Tooltip()

Tooltip(props: D3plusComponentProps): Element

Defined in: react/index.tsx:179

React component for rendering a d3plus Tooltip.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Tree()

Tree(props: D3plusComponentProps): Element

Defined in: react/index.tsx:126

React component for rendering a d3plus Tree visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Treemap()

Treemap(props: D3plusComponentProps): Element

Defined in: react/index.tsx:130

React component for rendering a d3plus Treemap visualization.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Viz()

Viz(props: D3plusComponentProps): Element

Defined in: react/index.tsx:134

React component for rendering a base d3plus Viz instance.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Whisker()

Whisker(props: D3plusComponentProps): Element

Defined in: react/index.tsx:220

React component for rendering a d3plus Whisker shape.

Parameters

| Parameter | Type | | ------ | ------ | | props | D3plusComponentProps |

Returns

Element

Variables

D3plusContext

const D3plusContext: Context<D3plusConfig>

Defined in: react/src/D3plusContext.tsx:7

A React context instance used to provide global config options via a provider (D3plusContext.Provider).

Interfaces

D3plusConfig

Defined in: core/types/src/utils/D3plusConfig.d.ts:28

Indexable

[key: string]: unknown

Allows additional custom properties.

Properties

| Property | Type | Description | Defined in | | ------ | ------ | ------ | ------ | | aggs? | object | Custom aggregation functions keyed by data property. | core/types/src/utils/D3plusConfig.d.ts:34 | | barPadding? | number | Padding between bars in pixels. | core/types/src/utils/D3plusConfig.d.ts:38 | | colorScale? | string | ((d: number) => string) | Color scale key or custom color function. | core/types/src/utils/D3plusConfig.d.ts:40 | | colorScaleConfig? | object | Configuration for the color scale component. | core/types/src/utils/D3plusConfig.d.ts:42 | | colorScaleConfig.axisConfig? | AxisConfig | - | core/types/src/utils/D3plusConfig.d.ts:43 | | colorScaleConfig.centered? | boolean | - | core/types/src/utils/D3plusConfig.d.ts:44 | | colorScaleConfig.colorMax? | string | - | core/types/src/utils/D3plusConfig.d.ts:48 | | colorScaleConfig.colorMid? | string | - | core/types/src/utils/D3plusConfig.d.ts:47 | | colorScaleConfig.colorMin? | string | - | core/types/src/utils/D3plusConfig.d.ts:46 | | colorScaleConfig.colors? | string[] | - | core/types/src/utils/D3plusConfig.d.ts:45 | | colorScaleConfig.scale? | AxisScale | - | core/types/src/utils/D3plusConfig.d.ts:49 | | colorScalePosition? | false | Position | Position of the color scale, or false to hide it. | core/types/src/utils/D3plusConfig.d.ts:52 | | column? | string | Column key for matrix-style layouts. | core/types/src/utils/D3plusConfig.d.ts:54 | | data? | string | DataPoint[] | Data array or URL string to load data from. | core/types/src/utils/D3plusConfig.d.ts:30 | | depth? | number | Active depth level for nested groupings. | core/types/src/utils/D3plusConfig.d.ts:56 | | discrete? | "x" | "y" | Sets orientation of main category axis. | core/types/src/utils/D3plusConfig.d.ts:58 | | fitFilter? | string | number | ((d: Record<string, unknown>) => boolean) | Allows removing specific geographies from topojson file to improve zoom. | core/types/src/utils/D3plusConfig.d.ts:60 | | groupBy? | string | string[] | ((d: DataPoint) => string | number) | (d: DataPoint) => string | number[] | Grouping key(s) or accessor function(s). | core/types/src/utils/D3plusConfig.d.ts:62 | | groupPadding? | number | Padding between groups of bars in pixels. | core/types/src/utils/D3plusConfig.d.ts:64 | | label? | string | ((...args: unknown[]) => string) | Label accessor for shapes. | core/types/src/utils/D3plusConfig.d.ts:66 | | legend? | boolean | Whether to show the legend. | core/types/src/utils/D3plusConfig.d.ts:68 | | legendConfig? | object | Configuration for the legend component. | core/types/src/utils/D3plusConfig.d.ts:70 | | legendConfig.label? | DataPointAccessor<string> | - | core/types/src/utils/D3plusConfig.d.ts:71 | | legendConfig.shapeConfig? | Record<string, string | number> | - | core/types/src/utils/D3plusConfig.d.ts:72 | | legendPosition? | Position | Position of the legend. | core/types/src/utils/D3plusConfig.d.ts:75 | | legendTooltip? | TooltipConfig | Tooltip configuration for legend items. | core/types/src/utils/D3plusConfig.d.ts:77 | | lineLabels? | boolean | Whether to show labels on line charts. | core/types/src/utils/D3plusConfig.d.ts:79 | | loadingHTML? | string | Custom HTML content for the loading indicator. | core/types/src/utils/D3plusConfig.d.ts:83 | | loadingMessage? | boolean | Whether to show the loading message. | core/types/src/utils/D3plusConfig.d.ts:81 | | locale? | string | Locale code used for text and number formatting. | core/types/src/utils/D3plusConfig.d.ts:32 | | metric? | string | Metric key for the visualization. | core/types/src/utils/D3plusConfig.d.ts:85 | | ocean? | string | Ocean color for geomaps (any CSS value including 'transparent'). | core/types/src/utils/D3plusConfig.d.ts:87 | | on? | Record<string, (event: Event) => void> | Event listeners keyed by event name. | core/types/src/utils/D3plusConfig.d.ts:89 | | point? | (d: DataPoint) => number[] | Coordinate accessor for point-based geomaps. | core/types/src/utils/D3plusConfig.d.ts:91 | | pointSize? | string | ((d: DataPoint) => number) | Point size accessor for geomaps. | core/types/src/utils/D3plusConfig.d.ts:93 | | pointSizeMax? | number | Maximum point size for geomaps. | core/types/src/utils/D3plusConfig.d.ts:97 | | pointSizeMin? | number | Minimum point size for geomaps. | core/types/src/utils/D3plusConfig.d.ts:95 | | projection? | string | ((x: number, y: number) => [number, number]) | Map projection name or function. | core/types/src/utils/D3plusConfig.d.ts:99 | | projectionPadding? | string | number | Outer padding between the visualization edge and map shapes. | core/types/src/utils/D3plusConfig.d.ts:101 | | projectionRotate? | [number, number] | Rotation offset for the map projection center. | core/types/src/utils/D3plusConfig.d.ts:103 | | row? | string | Row key for matrix-style layouts. | core/types/src/utils/D3plusConfig.d.ts:105 | | scrollContainer? | string | Window | Scrollable container selector for tooltip positioning. | core/types/src/utils/D3plusConfig.d.ts:107 | | shapeConfig? | object | Configuration for shape rendering. | core/types/src/utils/D3plusConfig.d.ts:109 | | shapeConfig.duration? | number | - | core/types/src/utils/D3plusConfig.d.ts:110 | | size? | string | Size accessor key. | core/types/src/utils/D3plusConfig.d.ts:114 | | stacked? | boolean | Whether to stack series. | core/types/src/utils/D3plusConfig.d.ts:116 | | stackOrder? | string[] | Custom order for stacked series. | core/types/src/utils/D3plusConfig.d.ts:118 | | sum? | DataPointAccessor<number> | Value accessor for treemaps and aggregation. | core/types/src/utils/D3plusConfig.d.ts:120 | | threshold? | number | Threshold value for grouping small slices. | core/types/src/utils/D3plusConfig.d.ts:122 | | thresholdName? | string | Label for the threshold group. | core/types/src/utils/D3plusConfig.d.ts:124 | | tiles? | boolean | Whether to show map tiles. | core/types/src/utils/D3plusConfig.d.ts:128 | | tileUrl? | string | URL to XYZ map tiles. | core/types/src/utils/D3plusConfig.d.ts:126 | | time? | string | Time key for temporal data. | core/types/src/utils/D3plusConfig.d.ts:130 | | title? | string | ((data: DataPoint[]) => string) | Chart title or title accessor function. | core/types/src/utils/D3plusConfig.d.ts:132 | | titleConfig? | Record<string, string | number> | CSS style configuration for the title. | core/types/src/utils/D3plusConfig.d.ts:134 | | tooltip? | boolean | Whether to show tooltips. | core/types/src/utils/D3plusConfig.d.ts:136 | | tooltipConfig? | TooltipConfig | Configuration for the tooltip component. | core/types/src/utils/D3plusConfig.d.ts:138 | | topojson? | string | object | Path or object for the topojson data. | core/types/src/utils/D3plusConfig.d.ts:140 | | topojsonFill? | string | CSS color to fill the map shapes. | core/types/src/utils/D3plusConfig.d.ts:142 | | topojsonId? | (obj: Record<string, unknown>) => string | Accessor function for topojson feature IDs. | core/types/src/utils/D3plusConfig.d.ts:144 | | value? | DataPointAccessor<number> | Value accessor for the visualization. | core/types/src/utils/D3plusConfig.d.ts:146 | | x? | string | number | ((...args: unknown[]) => unknown) | Key, index, or accessor function for x-axis values. | core/types/src/utils/D3plusConfig.d.ts:148 | | xConfig? | AxisConfig | Configuration for the x-axis. | core/types/src/utils/D3plusConfig.d.ts:150 | | xSort? | (a: DataPoint, b: DataPoint) => number | Custom sort function for x-axis values. | core/types/src/utils/D3plusConfig.d.ts:152 | | y? | string | number | ((...args: unknown[]) => unknown) | Key, index, or accessor function for y-axis values. | core/types/src/utils/D3plusConfig.d.ts:154 | | yConfig? | AxisConfig | Configuration for the y-axis. | core/types/src/utils/D3plusConfig.d.ts:156 | | ySort? | (a: DataPoint, b: DataPoint) => number | Custom sort function for y-axis values. | core/types/src/utils/D3plusConfig.d.ts:158 | | zoom? | false | Set to false to disable zooming on geomaps. | core/types/src/utils/D3plusConfig.d.ts:160 |

RendererProps

Defined in: react/src/Renderer.tsx:21

Props accepted by the Renderer component.

Properties

| Property | Type | Description | Defined in | | ------ | ------ | ------ | ------ | | callback? | () => void | A function to be invoked at the end of each render cycle (passed directly to the render method). | react/src/Renderer.tsx:27 | | className? | string | The class attribute value used for the root/wrapper element. | react/src/Renderer.tsx:25 | | config? | D3plusConfig | An object containing method/value pairs to be passed to the visualization's .config() method. | react/src/Renderer.tsx:23 | | constructor | D3plusConstructor | The d3plus visualization class to instantiate. | react/src/Renderer.tsx:31 | | forceUpdate? | boolean | When true, the visualization re-renders on every React render cycle instead of only when config changes. | react/src/Renderer.tsx:29 |

Type Aliases

D3plusComponentProps

D3plusComponentProps = Omit<RendererProps, "constructor">

Defined in: react/index.tsx:51

Props for d3plus React wrapper components (omits the internal constructor prop).

D3plusConstructor

D3plusConstructor = (...args: any[]) => any

Defined in: react/src/Renderer.tsx:18

Constructor type for d3plus visualization classes.

Parameters

| Parameter | Type | | ------ | ------ | | ...args | any[] |

Returns

any