Awesome

d3plus-react

React components for d3plus visualizations.

Installing

Using npm: npm install d3plus-react

Configuration

A valid d3plus config Object needs to be provided to the config prop of every visualization.

import {Treemap} from "d3plus-react";

const methods = {
  groupBy: "id",
  data: [
    {id: "alpha", value: 29},
    {id: "beta",  value: 10}
  ],
  size: d => d.value
};

<Treemap config={methods} />

Additionally, a global set of styles can be set using the D3plusContext Provider. This allows you to set base styles on all of your visualizations in one place, often in an external file. A component's config set by props will override global defaults key-by-key using a deep cloning function.

import React from "react";
import ReactDOM from "react-dom/client";
import {D3plusContext} from "d3plus-react";
import App from "src/App.jsx";

const globalConfig = {
  shapeConfig: {
    fill: "red"
  }
};

ReactDOM.createRoot(document.getElementById("viz")).render(
  <React.StrictMode>
    <D3plusContext.Provider value={globalConfig}>
      <App />
    </D3plusContext.Provider>
  </React.StrictMode>
);

Update Cycle

In order to detect whether a component should udpate in React, each component does a rudimentary check between the current config object and the incoming new config object. This is done via a simple equality check on the stringified versions of each object. This can also be overridded using the forceUpdate prop:

const shouldUpdate = this.props.forceUpdate ? false : JSON.stringify(oldConfig) === JSON.stringify(newConfig);

This works in most cases, but may not update your visualizations if using an accessor function that references an external variable. For example, if your x accessor is:

const config = {
  ...,
  x: d => d[xVar]
};

...and xVar changes, the visualization will not update. The quick "hack" for this is add xVar to the config object so that it triggers the update via stringify:

const config = {
  ...,
  x: d => d[xVar],
  xVar
};

API Reference

• AreaPlot
• BarChart
• BoxWhisker
• BumpChart
• D3plusContext - A React context instance used to provide global config options via a provider (D3plusContext.Provider).
• Donut
• Geomap
• LinePlot
• Matrix
• Network
• Pack
• Pie
• Plot
• Priestley
• Radar
• RadialMatrix
• Rings
• Sankey
• StackedArea
• Tree
• Treemap
• Viz - Creates SVG paths and coordinate points based on an array of data. See this example for help getting started using the geomap generator.

<a name="AreaPlot"></a>

d3plus.AreaPlot() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="BarChart"></a>

d3plus.BarChart() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="BoxWhisker"></a>

d3plus.BoxWhisker() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="BumpChart"></a>

d3plus.BumpChart() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="D3plusContext"></a>

d3plus.D3plusContext() <>

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

This is a global function.

<a name="Donut"></a>

d3plus.Donut() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Geomap"></a>

d3plus.Geomap() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="LinePlot"></a>

d3plus.LinePlot() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Matrix"></a>

d3plus.Matrix() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Network"></a>

d3plus.Network() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Pack"></a>

d3plus.Pack() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Pie"></a>

d3plus.Pie() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Plot"></a>

d3plus.Plot() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Priestley"></a>

d3plus.Priestley() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Radar"></a>

d3plus.Radar() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="RadialMatrix"></a>

d3plus.RadialMatrix() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Rings"></a>

d3plus.Rings() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Sankey"></a>

d3plus.Sankey() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="StackedArea"></a>

d3plus.StackedArea() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Tree"></a>

d3plus.Tree() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Treemap"></a>

d3plus.Treemap() <>

This is a global function, and extends all of the methods and functionality of <code>Viz</code>.

<a name="Viz"></a>

d3plus.Viz() <>

Creates SVG paths and coordinate points based on an array of data. See this example for help getting started using the geomap generator.

This is a global function.

<a name="Viz.module.exports" href="#Viz.module.exports">#</a> .module.exports <>

This is a static property of <code>Viz</code>.

_{Documentation generated on Wed, 10 May 2023 16:48:14 GMT}